docs(divider): refactor divider

- enforces orientation for divider test cases
- creates new minDimensionValues arg to use as visualization. Because
the inline and block sizes of the divider are dependant on content
(which doesn't exist on this component), this new arg sets example values
for min-inline-size and min-block-size. Any other customStyles passed to
the component should still render as before, and we are relying on the
CSS now instead of the styleMap in the default template.
- refactors the min-inline-size/min-block-size in styleMap to use new
minDimensionValues arg
- adds extra documentation
- corrects the default size of divider to small

Author: marissahuysentruyt

components/divider/stories/divider.stories.js

@@ -41,37 +41,49 @@ export default {
 			control: "boolean",
 		},
 		tag: { table: { disable: true } },
+		minDimensionValues: {table: { disable: true }},
 	},
 	args: {
 		rootClass: "spectrum-Divider",
-		size: "m",
+		size: "s",
 		vertical: false,
+		minDimensionValues: true,
 	},
 	parameters: {
 		componentVersion: version,
 	},
 };
 
 /**
- * The default size for divider is medium.
+ * By default, dividers are horizontal and should be used for separating content vertically. The small divider is the default size. 
  */
 export const Default = DividerGroup.bind({});
 Default.args = {};
 
 // ********* DOCS ONLY ********* //
+/**
+ * To divide similar components such as table rows, action button groups, and components within a panel, use the default, small divider.
+ *
+ * The medium divider is used for dividing subsections on a page, or to separate different groupings of components such as panels, rails, etc.
+ *
+ * Only use the large divider for page titles or section titles.
+ */
 export const Sizing = (args, context) => Sizes({
 	Template,
 	withHeading: false,
 	withBorder: false,
 	...args,
 }, context);
+Sizing.args = {
+	minDimensionValues: true,
+};
 Sizing.tags = ["!dev"];
 Sizing.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
 /**
- * When a vertical divider is used inside of a flex container, use `align-self: stretch; block-size: auto;` on the divider.
+ * The vertical divider is used to separate content horizontally. When a vertical divider is used inside of a flex container, use `align-self: stretch; block-size: 100%;` on the divider.
  */
 export const VerticalSizing = (args, context) => Sizes({
 	Template,
@@ -83,18 +95,13 @@ VerticalSizing.storyName = "Vertical";
 VerticalSizing.tags = ["!dev"];
 VerticalSizing.args = {
 	vertical: true,
+	minDimensionValues: true,
 };
 VerticalSizing.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
-export const StaticWhiteGroup = (args, context) => Sizes({
-	Template,
-	withHeading: false,
-	withBorder: false,
-	...args,
-}, context);
-
+export const StaticWhiteGroup = Default.bind({});
 StaticWhiteGroup.storyName = "Static white";
 StaticWhiteGroup.tags = ["!dev"];
 StaticWhiteGroup.args = {
@@ -106,12 +113,7 @@ StaticWhiteGroup.parameters = {
 	},
 };
 
-export const StaticBlackGroup = (args, context) => Sizes({
-	Template,
-	withHeading: false,
-	withBorder: false,
-	...args,
-}, context);
+export const StaticBlackGroup = Default.bind({});
 StaticBlackGroup.storyName = "Static black";
 StaticBlackGroup.tags = ["!dev"];
 StaticBlackGroup.args = {

components/divider/stories/divider.test.js

@@ -8,14 +8,18 @@ export const DividerGroup = Variants({
 		{
 			testHeading: "Default",
 			vertical: false,
+			minDimensionValues: true,
 		},
 		{
 			testHeading: "Non-HR",
 			tag: "div",
+			vertical: false,
+			minDimensionValues: true,
 		},
 		{
 			testHeading: "Vertical",
 			vertical: true,
+			minDimensionValues: true,
 		}
 	],
 });

components/divider/stories/template.js

@@ -11,6 +11,7 @@ export const Template = ({
 	tag = "hr",
 	staticColor,
 	vertical = false,
+	minDimensionValues,
 	customClasses = [],
 	customStyles = {},
 } = {}) => {
@@ -25,11 +26,8 @@ export const Template = ({
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
 			style=${styleMap({
-				"min-block-size": vertical == true ? "20px" : undefined,
-				"block-size": vertical ? "auto" : undefined,
-				"min-inline-size": !vertical ? "200px" : "var(--spectrum-divider-thickness)",
-				"inline-size": !vertical ? "auto" : undefined,
-				"align-self": vertical == true ? "stretch" : undefined,
+				"min-inline-size": minDimensionValues && !vertical ? "200px": undefined,
+				"min-block-size": minDimensionValues && vertical ? "20px": undefined,
 				...customStyles,
 			})}
 			role="separator"
@@ -46,11 +44,8 @@ export const Template = ({
 			...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 		})}
 		style=${styleMap({
-			"min-block-size": vertical == true ? "20px" : undefined,
-			"block-size": vertical == true ? "auto" : undefined,
-			"min-inline-size": !vertical ? "200px" : "var(--spectrum-divider-thickness)",
-			"inline-size": !vertical ? "auto" : undefined,
-			"align-self": vertical == true ? "stretch" : undefined,
+			"min-inline-size": minDimensionValues && !vertical ? "200px": undefined,
+			"min-block-size": minDimensionValues && vertical ? "20px": undefined,
 			...customStyles,
 		})}
 		role="separator"