chore(colorarea,colorhandle,colorloupe,colorslider,colorwheel): remove mdx files (#3409)

* docs(colorarea): remove MDX file

- adds links to other color components
- migrates documentation from MDX to stories file

* docs(colorhandle): remove MDX file

- adds links to other color components
- migrates documentation from MDX to stories file

* docs(colorloupe): remove MDX file

- migrates documentation from MDX to stories file

* docs(colorslider): remove MDX file

 - migrates documentation from MDX to stories file

* docs(colorwheel): remove MDX file

- adds missing documentation particularly around the WithColorArea story
- migrates documentation from MDX to stories file

* docs(colorarea): clarify docs on color area handle

* docs(colorslider): add punctuation and reorganize docs

Author: marissahuysentruyt

components/colorarea/stories/colorarea.mdx

@@ -6,13 +6,15 @@ import { ColorAreaGroup } from "./colorarea.test.js";
 import { Template } from "./template.js";
 
 /**
- * The color area component allows users to visually select two properties of a color simultaneously. It's commonly used together with a color slider or color wheel. Some usage notes:
- * - The `.spectrum-ColorHandle` should be moved with the `transform: translate(x, y)` style property as the sliders are dragged
- * - Set the background style property of `.spectrum-ColorArea-gradient` to the gradient of the colors to be selected
- * - Set the value attribute of `.spectrum-ColorArea-slider[name=x]` to the currently selected x value (i.e. saturation)
- * - Set the value attribute of `.spectrum-ColorArea-slider[name=y]` to the currently selected y value (i.e. value)
- * - Set the value of the ColorHandle component to the selected color
- * - Marshall focus between the saturation and value sliders according to which keys are pressed (up/down for value, left/right for saturation)
+ * The color area component allows users to visually select two properties of a color simultaneously. It's commonly used together with a [color slider](/docs/components-color-slider--docs) or [color wheel](/docs/components-color-wheel--docs).
+ *
+ * ## Usage notes
+ * - The `.spectrum-ColorArea-handle` element should be moved with the `transform: translate(x, y)` style property as the sliders are dragged.
+ * - Set the background style property of `.spectrum-ColorArea-gradient` to the gradient of the colors to be selected.
+ * - Set the value attribute of `.spectrum-ColorArea-slider[name=x]` to the currently selected x value (i.e. saturation).
+ * - Set the value attribute of `.spectrum-ColorArea-slider[name=y]` to the currently selected y value (i.e. value).
+ * - Set the value of the [color handle component](/docs/components-color-handle--docs) to the selected color.
+ * - Marshall focus between the saturation and value sliders according to which keys are pressed (up/down for value, left/right for saturation).
  */
 export default {
 	title: "Color area",
@@ -48,7 +50,6 @@ export default {
 		packageJson,
 		metadata,
 	},
-	tags: ["!autodocs"],
 };
 
 export const Default = ColorAreaGroup.bind({});
@@ -64,6 +65,7 @@ CustomSize.args = {
 CustomSize.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+CustomSize.storyName = "Custom size";
 
 export const Disabled = Template.bind({});
 Disabled.tags = ["!dev"];

components/colorarea/stories/colorarea.stories.js

@@ -6,7 +6,7 @@ import { ColorHandleGroup } from "./colorhandle.test.js";
 import { Template } from "./template.js";
 
 /**
- * The color handle component is used with color area, color slider and color wheel as the color selector.
+ * The color handle component is used with [color area](/docs/components-color-area--docs), [color slider](/docs/components-color-slider--docs) and [color wheel](/docs/components-color-wheel--docs) as the color selector.
  */
 export default {
 	title: "Color handle",
@@ -53,9 +53,11 @@ export default {
 		packageJson,
 		metadata,
 	},
-	tags: ["!autodocs"],
 };
 
+/**
+ * Set the `--spectrum-picked-color` custom property to the color value you want to show.
+ */
 export const Default = ColorHandleGroup.bind({});
 Default.args = {};
 
@@ -69,6 +71,9 @@ Disabled.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
+/**
+ * Nest the [color loupe component](/docs/components-color-loupe--docs) within the color handle markup and apply `.is-open` to the `.spectrum-ColorLoupe` to display the loupe.
+ */
 export const WithColorLoupe = Template.bind({});
 WithColorLoupe.args = {
 	isWithColorLoupe: true,
@@ -77,6 +82,7 @@ WithColorLoupe.tags = ["!dev"];
 WithColorLoupe.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+WithColorLoupe.storyName = "With color loupe";
 
 // ********* VRT ONLY ********* //
 export const WithForcedColors = ColorHandleGroup.bind({});

components/colorhandle/stories/colorhandle.mdx

@@ -6,6 +6,12 @@ import { ColorLoupeGroup } from "./colorloupe.test.js";
 
 /**
  * The color loupe component shows the output color that would otherwise be covered by a cursor, stylus, or finger during color selection.
+ *
+ * ## Usage notes
+ *
+ * - Set the `--spectrum-picked-color` custom property to the CSS color value you want to show.
+ * - Implementations must apply the `.is-open` class to display the loupe.
+ * - Color loupe does not have a disabled style. Do not show it when the handle it's attached to is disabled.
  */
 export default {
 	title: "Color loupe",

components/colorhandle/stories/colorhandle.stories.js

@@ -7,6 +7,12 @@ import { Template } from "./template.js";
 
 /**
  * The color slider component lets users visually change an individual channel of a color.
+ *
+ * ## Usage notes
+ * - Set the color of the nested [color handle component](/docs/components-color-handle--docs) to match the color slider’s currently selected color using its custom property, `--spectrum-picked-color`.
+- The `.spectrum-ColorHandle` should be moved with `inset-inline-*` (horizontal) or `inset-block-*` (vertical) style properties as the slider is dragged.
+ * - Ensure that the min and max attributes of the `.spectrum-ColorSlider-slider` input are set to the corresponding scale (i.e. 0 to 1 for a, 0 to 255 for r, etc.).
+ * - Ensure the step attribute of the `.spectrum-ColorSlider-slider` input is set appropriately (i.e. 0.1 for a, s, v or 1 and h, r, etc).
  */
 export default {
 	title: "Color slider",
@@ -57,9 +63,11 @@ export default {
 		packageJson,
 		metadata,
 	},
-	tags: ["!autodocs"],
 };
 
+/**
+ * By default, a color slider is horizontal and should be used when vertical space is more limited.  The background style property of `.spectrum-ColorSlider-gradient` can be set to the gradient of the colors to be selected. The CSS will automatically reverse the gradient element horizontally when using a RTL (right-to-left) base direction.
+ */
 export const Default = ColorSliderGroup.bind({});
 Default.args = {
 	gradientStops:
@@ -78,6 +86,9 @@ WithForcedColors.parameters = {
 };
 
 // ********* DOCS ONLY ********* //
+/**
+ * The vertical orientation is used when horizontal space is more limited.
+ */
 export const Vertical = Template.bind({});
 Vertical.args = {
 	vertical: true,
@@ -97,6 +108,9 @@ Alpha.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
+/**
+ * Alternatively, implementations can provide an `<img>` element with the gradient desired and apply the `.spectrum-ColorSlider-gradient` class.
+ */
 export const WithImage = Template.bind({});
 WithImage.args = {
 	gradientType: "image",
@@ -105,7 +119,7 @@ WithImage.args = {
 		"inset-inline-start": "50%",
 	},
 };
-WithImage.storyName = "Image";
+WithImage.storyName = "With image";
 WithImage.tags = ["!dev"];
 WithImage.parameters = {
 	chromatic: { disableSnapshot: true },