Divider docs (#198)

Author: snowystinger

packages/@adobe/spectrum-css-temp/components/rule/index.css

@@ -19,6 +19,12 @@ governing permissions and limitations under the License.
   border: none;
   border-width: var(--spectrum-rule-medium-height);
   border-radius: var(--spectrum-rule-medium-height);
+
+  /* hr elements are given a default margin, reset it so that flex can work */
+  margin: 0px;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  align-self: stretch;
 }
 
 .spectrum-Rule--large {
@@ -48,6 +54,7 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Rule--vertical {
+  height: auto;
   /* expected usage, people need to set height 100% if they aren't using flex on the container
    * if they *ARE* using flex, then they need to either have align-items stretch OR align-self stretch
    */

packages/@react-spectrum/button/docs/Button.mdx

@@ -2,9 +2,8 @@ import {Layout} from '@react-spectrum/docs';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/button';
-import {PropTable} from '@react-spectrum/docs';
+import {HeaderInfo, PropTable} from '@react-spectrum/docs';
 import packageData from '../package.json';
-import {HeaderInfo} from '@react-spectrum/docs';
 
 ```jsx import
 import {Button} from '@react-spectrum/button';

packages/@react-spectrum/divider/docs/Divider.mdx

@@ -0,0 +1,48 @@
+import {Layout} from '@react-spectrum/docs';
+export default Layout;
+
+import docs from 'docs:@react-spectrum/divider';
+import {HeaderInfo, PropTable} from '@react-spectrum/docs';
+import packageData from '../package.json';
+
+```jsx import
+import {Divider} from '@react-spectrum/divider';
+import {Flex} from '@react-spectrum/layout';
+```
+
+# Divider
+
+<p>{docs.exports.Divider.description}</p>
+
+<HeaderInfo
+  packageData={packageData}
+  componentNames={['Divider']}
+  sourceData={[
+    {type: 'Spectrum', url: 'https://spectrum.adobe.com/page/rule/'}
+  ]} />
+
+## Example
+
+### Horizontal
+
+Horizontal Dividers can be used as is because of how CSS Layout works. They may also be used in Flex and Grid containers.
+```tsx example
+Content above
+<Divider marginTop="10px" marginBottom="10px" />
+Content below
+```
+
+### Vertical
+
+It is recommended to only use vertical Dividers in Flex or Grid containers. CSS Layout otherwise makes displaying a vertical Divider very difficult.
+```tsx example
+<Flex>
+  Content left
+  <Divider orientation="vertical" marginLeft="10px" marginRight="10px" />
+  Content right
+</Flex>
+```
+
+## Props
+
+<PropTable component={docs.exports.Divider} links={docs.links} />

packages/@react-spectrum/utils/src/styleProps.ts

@@ -28,6 +28,8 @@ export const baseStyleProps: StyleHandlers = {
   maxWidth: ['maxWidth', dimensionValue],
   maxHeight: ['maxHeight', dimensionValue],
   isHidden: ['display', hiddenValue],
+  alignSelf: ['alignSelf', passthroughStyle],
+  justifySelf: ['justifySelf', passthroughStyle],
   position: ['position', anyValue],
   zIndex: ['zIndex', anyValue],
   top: ['top', dimensionValue],