docs(dial,dialog,divider,dropindicator): Migrate docs to storybook pt7 (

#2833)

* docs(dial): add missing stories and chromatic coverage

* chore(tray): corrects variable spelling (isDismissible)

* docs(dropindicator): add dropindicator template for docs page

* docs(divider): add missing stories and template fixes

- adds static color stories, a sizing story and vertical story
- removes customStyles arg from default args because they were
overwriting other styles that are dependent on the orientation (i.e.
vertical)
- refactors chromatic coverage to reflect removal of custom styles in
default template

* docs(dialog): add missing stories, template fixes, chromatic coverage

- adds all sizing stories, with hero, no divider, fullscreen/fullscreen-
takeover, scorlling example stories
- refactors template to accommodate buttons when the dialog is
dismissible (no buttons based on guidance/documentation), vs. non-
dismissible
- adds test coverage example for new stories
- fixes sizing template issues in Variants() for showModal: false
- renames heading for dialog arg to dialogHeading (to avoid variable
naming conflicts between the component and Sizing function used within
Variants())

* docs(dialog): revert dialogHeading arg name change

revert arg name "dialogHeading" back to "heading." It's a known issue
that the Variant() function is mixing the dialog's heading arg with the
Sizing() heading arg. That refactoring and fix will be done in a new
branch.

* chore(dial): extends isFocused shared state

instead of deleting the isFocused type just to replace it with an
identical isFocusVisible type & control, this extends isFocused
definition to allow the isFocusVisible variable name

* chore(dialog): remove remaining comments from rebase

* docs(divider): use Sizes decorator instead of custom sizing template

* docs(divider): fix VRTs with refactored divider styles

VRT diffs were found for Menu and Picker, so tracing them back, were
caused by an incorrect inline-size property of 100% (as opposed to the
corrected "auto")

* chore(dialog): remove comments

* chore(dialog): expand test coverage variants

* chore(dialog): add default layout to args table

* chore(dialog): refactor custom template for testing

To work better with React's hot module reloader, this should only call a
template once and toggle the inputs based on settings.

* chore(dialog): clean up template

- use the presence of the hero image url as a boolean, instead of an
actual hasHeroImage boolean
- removes layout !== default since it doesn't do anything anyways
- use .every() array method for layout class modifiers

* chore(dialog): removes hasHeroImage boolean from UI

- use the presence of the hero image url as a boolean, instead of actual
hasHeroImage boolean

* chore(divider): rename VerticalGroup to VerticalSizing

this naming matches the other Sizing story, as well as indicates it is
going through the Sizes() function.

* 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

components/dial/stories/dial.stories.js

@@ -2,6 +2,7 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isFocused } from "@spectrum-css/preview/types";
 import { version } from "../package.json";
 import { DialGroup } from "./dial.test.js";
+import { Template } from "./template.js";
 
 /**
  * A dial is an input control used for selecting a value within a range, similar to a slider. It's often used in audio and video mixing and editing applications, where horizontal space is limited.
@@ -28,7 +29,7 @@ export default {
 			},
 			control: "text",
 		},
-		isFocused,
+		isFocusVisible: isFocused,
 		isDragged: {
 			name: "Dragged",
 			type: { name: "boolean" },
@@ -51,7 +52,7 @@ export default {
 	args: {
 		rootClass: "spectrum-Dial",
 		size: "m",
-		isFocused: false,
+		isFocusVisible: false,
 		isDragged: false,
 		isDisabled: false,
 	},
@@ -63,6 +64,33 @@ export default {
 export const Default = DialGroup.bind();
 Default.args = {};
 
+export const Small = Template.bind();
+Small.args = {
+	size: "s",
+};
+Small.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+Small.tags = ["!dev"];
+
+export const WithLabel = Template.bind();
+WithLabel.args = {
+	label: "Volume",
+};
+WithLabel.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+WithLabel.tags = ["!dev"];
+
+export const Disabled = Template.bind();
+Disabled.args = {
+	isDisabled: true,
+};
+Disabled.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+Disabled.tags = ["!dev"];
+
 // ********* VRT ONLY ********* //
 export const WithForcedColors = DialGroup.bind({});
 WithForcedColors.args = Default.args;

components/dial/stories/dial.test.js

@@ -15,15 +15,15 @@ export const DialGroup = Variants({
 	],
 	stateData: [
 		{
-			heading: "Disabled",
+			testHeading: "Disabled",
 			isDisabled: true,
 		},
 		{
-			heading: "Focused",
-			isFocused: true,
+			testHeading: "Focused",
+			isFocusVisible: true,
 		},
 		{
-			heading: "Dragged",
+			testHeading: "Dragged",
 			isDragged: true,
 		},
 	],

components/dial/stories/template.js

@@ -10,7 +10,7 @@ export const Template = ({
 	rootClass = "spectrum-Dial",
 	size = "m",
 	label,
-	isFocused = false,
+	isFocusVisible = false,
 	isDragged = false,
 	isDisabled = false,
 	min = 0,
@@ -38,58 +38,58 @@ export const Template = ({
         if (isDisabled) return;
         if (!document.body.classList.contains("u-isGrabbing")) return;
 
-        const dial = e.target.closest(".spectrum-Dial");
-        const handle = dial.querySelector(".spectrum-Dial-handle");
-        const input = dial.querySelector("input");
-        const min = -45;
-        const max = 225;
-        const dialOffsetLeft = dial.offsetLeft + dial.offsetParent.offsetLeft;
-        var x = Math.max(Math.min(e.x - dialOffsetLeft, dial.offsetWidth), 0);
-        var percent = (x / dial.offsetWidth) * 100;
-        var deg = percent * 0.01 * (max - min) + min;
-        handle.style.transform = "rotate(" + deg + "deg" + ")";
-        input.value = Math.round(
-          percent * 0.01 * (input.max - input.min) + input.min
-        );
-      }}
-    >
-      ${when(
-        label,
-        () => html`<div class="${rootClass}-labelContainer">
-          <label id="dialLabel" class="${rootClass}-label" for="labeledDial"
-            >${label}</label
-          >
-          <div
-            class="${rootClass}-value"
-            role="textbox"
-            aria-readonly="true"
-            aria-labelledby="dialLabel"
-          >
-            ${min}
-          </div>
-        </div>`
-      )}
-      <div class="${rootClass}-controls">
-        <div
-          class="${rootClass}-handle ${isDragged ? "is-dragged" : ""} ${isFocused
-            ? "is-focused"
-            : ""}"
-          tabindex="0"
-        >
-          <input
-            type="range"
-            class="${rootClass}-input"
-            min="${min}"
-            max="${max}"
-            value="${min}"
-            @change=${(e) => {
-              const value = e.target.value;
-              const label = document.getElementById("dialLabel");
-              label.nextSibling.textContent = value;
-            }}
-          />
-        </div>
-      </div>
-    </div>
-  `;
+				const dial = e.target.closest(".spectrum-Dial");
+				const handle = dial.querySelector(".spectrum-Dial-handle");
+				const input = dial.querySelector("input");
+				const min = -45;
+				const max = 225;
+				const dialOffsetLeft = dial.offsetLeft + dial.offsetParent.offsetLeft;
+				var x = Math.max(Math.min(e.x - dialOffsetLeft, dial.offsetWidth), 0);
+				var percent = (x / dial.offsetWidth) * 100;
+				var deg = percent * 0.01 * (max - min) + min;
+				handle.style.transform = "rotate(" + deg + "deg" + ")";
+				input.value = Math.round(
+					percent * 0.01 * (input.max - input.min) + input.min
+				);
+			}}
+		>
+			${when(
+				label,
+				() => html`<div class="${rootClass}-labelContainer">
+					<label id="dialLabel" class="${rootClass}-label" for="labeledDial"
+						>${label}</label
+					>
+					<div
+						class="${rootClass}-value"
+						role="textbox"
+						aria-readonly="true"
+						aria-labelledby="dialLabel"
+					>
+						${min}
+					</div>
+				</div>`
+			)}
+			<div class="${rootClass}-controls">
+				<div
+					class="${rootClass}-handle
+					${isDragged ? "is-dragged": ""}
+					${isFocusVisible ? "is-focus-visible": ""}"
+					tabindex="0"
+				>
+					<input
+						type="range"
+						class="${rootClass}-input"
+						min="${min}"
+						max="${max}"
+						value="${min}"
+						@change=${(e) => {
+							const value = e.target.value;
+							const label = document.getElementById("dialLabel");
+							label.nextSibling.textContent = value;
+						}}
+					/>
+				</div>
+			</div>
+		</div>
+	`;
 };