feat(divider): add fitted prop

[gopalgoel19]

Divider fitted prop

A divider can be fitted to render a divider that is simply a line with no space above or below it.

TODO

• Conformance test
• Minimal doc site example
• Stardust base theme
• Teams Light theme
• Teams Dark theme
• Teams Contrast theme
• Confirm RTL usage
• W3 accessibility check
• Stardust accessibility check
• Update glossary props table
• Update the CHANGELOG.md

API Proposal

fitted

Use cases:

A fitted divider can be used inside a List component to separate few list items from another.

<List>
    <List.Item
      media={<Image src="public/images/avatar/small/matt.jpg" avatar />}
      header="Irving Kuhic"
      content="Program the sensor to the SAS alarm through the haptic SQL card!"
    />
    <List.Item
      media={<Image src="public/images/avatar/small/steve.jpg" avatar />}
      header="Skyler Parks"
      content="Use the online FTP application to input the multi-byte application!"
    />
    <Divider fitted size={1}/>
    <List.Item
      media={<Image src="public/images/avatar/small/nom.jpg" avatar />}
      header="Dante Schneider"
      content="The GB pixel is down, navigate the virtual interface!"
    />
  </List>

The above code give us something like,

[codecov]

Codecov Report

Merging #333 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #333   +/-   ##
=======================================
  Coverage   89.73%   89.73%           
=======================================
  Files          64       64           
  Lines        1237     1237           
  Branches      180      180           
=======================================
  Hits         1110     1110           
  Misses        125      125           
  Partials        2        2

Impacted Files	Coverage Δ
src/components/Divider/Divider.tsx	100% <ø> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6369b85...bad5f5e. Read the comment docs.

[codepretty]

The default padding should already be 0, so I think you only need to apply padding for the non-fitted case.

...(!fitted && {
    paddingTop: pxToRem(variables.dividerPadding),
    paddingBottom: pxToRem(variables.dividerPadding),
}),

[gopalgoel19]

done

[hughreeling]

You should NOT do this:

 <List>
     <List.Item
       media={<Image src="public/images/avatar/small/matt.jpg" avatar />}
       header="Irving Kuhic"
       content="Program the sensor to the SAS alarm through the haptic SQL card!"
     />
     <List.Item
       media={<Image src="public/images/avatar/small/steve.jpg" avatar />}
header="Skyler Parks"
       content="Use the online FTP application to input the multi-byte application!"
     />
     **<Divider fitted size={1}/>**
     <List.Item
       media={<Image src="public/images/avatar/small/nom.jpg" avatar />}
       header="Dante Schneider"
       content="The GB pixel is down, navigate the virtual interface!"
     />
   </List>
 

A list should not contain any direct children apart from list items. This will definitely break things.

[gopalgoel19]

@hughreeling What would be the best way to have a similar line in between list items?

Considering what you mentioned above, my present options are:

1. Add a border to the bottom of the list item when required.
2. Insert a Divider inside the ListItem.
3. Make a ListItem serve as a divider itself. E.g. <List.Item divider/> renders a list item which look and feel like the Divider.
4. Use two separate List component.

Please let me know if there are other options as well

[hughreeling]

Lists definitely need to contain only list items. ( https://dev.w3.org/html5/html-author/#the-ol-element) I think the options are for the list item to contain the divider, or to style the list item. Currently you could so something like <Divider as='li' /> but I highly recommend NOT doing this, it's pretty much certain to make accessibility / keyboard navigation.

…

On Tue, Oct 9, 2018 at 3:26 PM Gopal Goel ***@***.***> wrote: @hughreeling <https://github.com/hughreeling> What would be the best way to have a similar line in between list items? Considering what you mentioned above, my present options are: 1. Add a border to the bottom of the list item when required. 2. Insert a Divider inside the ListItem. 3. Make a ListItem serve as a divider itself. E.g. <List.Item divider/> renders a list item which look and feel exactly like the Divider. Please let me know if there are other options as well — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#333 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGjGSzs8tA4ebgnxf2RX9TrTUiQ4Q1FXks5ujJSwgaJpZM4XM02o> .

[hughreeling]

it's pretty much certain to break accessibility / keyboard navigation.

…

On Tue, Oct 9, 2018 at 4:02 PM Hugh Eland ***@***.***> wrote: Lists definitely need to contain only list items. ( https://dev.w3.org/html5/html-author/#the-ol-element) I think the options are for the list item to contain the divider, or to style the list item. Currently you could so something like <Divider as='li' /> but I highly recommend NOT doing this, it's pretty much certain to make accessibility / keyboard navigation. On Tue, Oct 9, 2018 at 3:26 PM Gopal Goel ***@***.***> wrote: > @hughreeling <https://github.com/hughreeling> What would be the best way > to have a similar line in between list items? > > Considering what you mentioned above, my present options are: > > 1. Add a border to the bottom of the list item when required. > 2. Insert a Divider inside the ListItem. > 3. Make a ListItem serve as a divider itself. E.g. <List.Item > divider/> renders a list item which look and feel exactly like the > Divider. > > Please let me know if there are other options as well > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <#333 (comment)>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/AGjGSzs8tA4ebgnxf2RX9TrTUiQ4Q1FXks5ujJSwgaJpZM4XM02o> > . >

[kuzhelov]

this example could be eliminated - as there is no Children API variation for this case

[kuzhelov]

this should be name as fitted. Also, please, make sure that IDividerProps reflects the changes you've introduced for the API.

In general, would suggest to make tests in docs (probably, you've done that), but with dev console being opened - in that case you won't let these problems pass your checks :)

[gopalgoel19]

Ah, a silly one. Fixing it right away.

[kuzhelov]

please, address the changes raised in comments before merging