diff --git a/components/button/stories/button.mdx b/components/button/stories/button.mdx
deleted file mode 100644
index 024a29f86e0..00000000000
--- a/components/button/stories/button.mdx
+++ /dev/null
@@ -1,119 +0,0 @@
-import {
- Meta,
- Title,
- Subtitle,
- Description,
- ArgTypes,
- Canvas,
-} from "@storybook/blocks";
-import {
- ComponentDetails,
- TaggedReleases,
- PropertiesTable,
-} from "@spectrum-css/preview/blocks";
-
-import * as ButtonStories from "./button.stories";
-
-
-
-
-
-
-
-
-
-## Variants
-
-There are four available variants that are used for different levels of emphasis and different
-types of actions. By default, a button uses the fill style with a solid background. The primary
-and secondary variants also have an outline option.
-
-### Accent
-
-
-
-
-### Primary
-
-
-
-
-### Secondary
-
-
-
-
-### Negative
-
-
-
-
-## Static color
-
-When a button needs to be placed on top of a color background or a visual, use the static color
-option. Static color buttons do not change shades or values depending upon the color theme.
-
-### Static white - primary
-
-
-
-### Static white - secondary
-
-
-
-### Static black - primary
-
-
-
-### Static black - secondary
-
-
-
-## Sizing
-
-
-
-
-## Pending state
-
-
-
-
-## Disabled state
-
-
-
-
-## Text overflow behavior
-
-
-
-
-## Disable text wrapping
-
-
-
-
-## Properties
-
-The component accepts the following inputs (properties):
-
-
-
-
-
-## Tagged releases
-
-
diff --git a/components/button/stories/button.stories.js b/components/button/stories/button.stories.js
index 0dbefb09f65..2de4d54053b 100644
--- a/components/button/stories/button.stories.js
+++ b/components/button/stories/button.stories.js
@@ -9,6 +9,10 @@ import { ButtonsWithIconOptions, TextOverflowTemplate, TextWrapTemplate, Treatme
/**
* Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.
+ *
+ * There are four available variants that are used for different levels of emphasis and different
+ * types of actions. By default, a button uses the fill style with a solid background. The primary
+ * and secondary variants also have an outline option.
*/
export default {
title: "Button",
@@ -92,11 +96,11 @@ export default {
packageJson,
metadata,
},
- tags: ["!autodocs"],
};
export const Default = ButtonGroups.bind({});
Default.args = {};
+Default.tags = ["!autodocs"];
// ********* VRT ONLY ********* //
export const WithForcedColors = ButtonGroups.bind({});
@@ -188,6 +192,9 @@ Negative.parameters = {
chromatic: { disableSnapshot: true },
};
+/**
+ * When a button needs to be placed on top of a dark color background or a visual, use the static white options. Static color buttons do not change shades or values depending upon the color theme.
+ */
export const StaticWhitePrimary = TreatmentTemplate.bind({});
StaticWhitePrimary.tags = ["!dev"];
StaticWhitePrimary.args = {
@@ -198,6 +205,7 @@ StaticWhitePrimary.args = {
StaticWhitePrimary.parameters = {
chromatic: { disableSnapshot: true },
};
+StaticWhitePrimary.storyName = "Static white - primary";
export const StaticWhiteSecondary = TreatmentTemplate.bind({});
StaticWhiteSecondary.tags = ["!dev"];
@@ -209,7 +217,11 @@ StaticWhiteSecondary.args = {
StaticWhiteSecondary.parameters = {
chromatic: { disableSnapshot: true },
};
+StaticWhiteSecondary.storyName = "Static white - secondary";
+/**
+ * When a button needs to be placed on top of a light color background or a visual, use the static black options. Static color buttons do not change shades or values depending upon the color theme.
+ */
export const StaticBlackPrimary = TreatmentTemplate.bind({});
StaticBlackPrimary.tags = ["!dev"];
StaticBlackPrimary.args = {
@@ -220,6 +232,7 @@ StaticBlackPrimary.args = {
StaticBlackPrimary.parameters = {
chromatic: { disableSnapshot: true },
};
+StaticBlackPrimary.storyName = "Static black - primary";
export const StaticBlackSecondary = TreatmentTemplate.bind({});
StaticBlackSecondary.tags = ["!dev"];
@@ -231,6 +244,8 @@ StaticBlackSecondary.args = {
StaticBlackSecondary.parameters = {
chromatic: { disableSnapshot: true },
};
+StaticBlackSecondary.storyName = "Static black - secondary";
+
/**
* The pending button is for indicating that a quick progress action is taking place. In this case, the
@@ -273,7 +288,7 @@ Disabled.parameters = {
*/
export const WithWrapping = TextOverflowTemplate.bind({});
WithWrapping.tags = ["!dev"];
-WithWrapping.storyName = "Text overflow behavior";
+WithWrapping.storyName = "Text overflow";
WithWrapping.args = {
variant: "primary",
};
@@ -289,7 +304,7 @@ WithWrapping.parameters = {
export const DisableWrapping = TextWrapTemplate.bind({});
DisableWrapping.tags = ["!dev"];
-DisableWrapping.storyName = "Disable label wrap";
+DisableWrapping.storyName = "Text overflow - disabled text wrap";
DisableWrapping.args = {
variant: "primary",
};
diff --git a/components/icon/stories/icon.mdx b/components/icon/stories/icon.mdx
deleted file mode 100644
index 6425344761a..00000000000
--- a/components/icon/stories/icon.mdx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { Canvas, ArgTypes, Meta, Description, Title } from "@storybook/blocks";
-import {
- ComponentDetails,
- TaggedReleases,
- PropertiesTable,
-} from "@spectrum-css/preview/blocks";
-
-import * as IconStories from "./icon.stories";
-
-
-
-
-
-
-
-
-## Icon sets
-
-The SVG icons used in Spectrum CSS are a part of two different icon sets, "workflow" and "ui". The two sets have different uses and methods of sizing.
-
-### Workflow icons
-
-The workflow icon set contains several hundred icons to choose from.
-These icons can be seen in use within Button, Action button, Menu, and many other components.
-Here is an example with just a few of these icons:
-
-
-
-These icons use "t-shirt" sizes (e.g. small, medium), that are the same width and height for each icon in the set:
-
-
-
-### UI icons
-
-UI icons are atomic pieces (e.g., arrows, crosses, etc.) that are used as part of some components. The chevron within
-the [Combobox component](?path=/docs/components-combobox--docs) is one example.
-
-Unlike workflow icons, each UI icon comes in specific numbered sizes. They do not use "t-shirt" sizing.
-They have unique classes applied that set their size in CSS. For example:
-
-- `.spectrum-UIIcon-Asterisk300`
-- `.spectrum-UIIcon-ChevronDown75`
-
-Different UI icons have different number sizes available. The smallest size for some may be "50", while others may start at "100". Some have up to a "600" size.
-Some may only have two different sizes, while others have six. Because of this, they can't be mapped one to one to t-shirt sizes. The correct UI icon sizes to use for each of a component's
-size options is typically defined on the design spec.
-
-An example of some UI icons in their available sizes:
-
-
-
-Directional UI icons such as Chevron and Arrow have classes for each direction. They rotate the same base icon with a CSS `transform: rotate`. For example, the `Arrow100.svg` icon is used
-with:
-
-- `.spectrum-UIIcon-ArrowRight100`
-- `.spectrum-UIIcon-ArrowLeft100`
-- `.spectrum-UIIcon-ArrowDown100`
-- `.spectrum-UIIcon-ArrowUp100`
-
-
-
-## Repositories for the icon SVG files
-
-The UI icon SVGs are within the Spectrum CSS repository, which has its own package published to NPM:
-
-- GitHub: [adobe/spectrum-css — ui-icons folder](https://github.com/adobe/spectrum-css/tree/main/ui-icons)
-- NPM: [@spectrum-css/ui-icons](https://www.npmjs.com/package/@spectrum-css/ui-icons).
-
-The workflow icon SVGs are within a separate respository, which is also published to NPM:
-
-- GitHub: [adobe/spectrum-css-workflow-icons](https://github.com/adobe/spectrum-css-workflow-icons)
-- NPM: [@adobe/spectrum-css-workflow-icons](https://www.npmjs.com/package/@adobe/spectrum-css-workflow-icons).
-
-## Properties
-
-The component accepts the following inputs (properties):
-
-
-
-
-
-## Tagged releases
-
-
diff --git a/components/icon/stories/icon.stories.js b/components/icon/stories/icon.stories.js
index 5411a9d2d09..da5fc2cda00 100644
--- a/components/icon/stories/icon.stories.js
+++ b/components/icon/stories/icon.stories.js
@@ -1,12 +1,10 @@
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { size } from "@spectrum-css/preview/types";
-import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
-import { html } from "lit";
-import { styleMap } from "lit/directives/style-map.js";
+import { Sizes } from "@spectrum-css/preview/decorators";
import metadata from "../dist/metadata.json";
import packageJson from "../package.json";
import { IconGroup } from "./icon.test.js";
-import { Template } from "./template.js";
+import { IconListTemplate, Template, UIDefaultTemplate } from "./template.js";
import { uiIconSizes, uiIconsWithDirections, workflowIcons } from "./utilities.js";
/**
@@ -27,6 +25,19 @@ const uiIconNameOptions = uiIconsWithDirections.map((iconName) => {
/**
* The Icon component contains all of the CSS used for displaying both workflow and UI icons.
+ *
+ * ## Icon sets
+ * The SVG icons used in Spectrum CSS are a part of two different icon sets, "workflow" and "ui".
+ * The two sets have different uses and methods of sizing.
+ *
+ * ## Repositories for the icon SVG files
+ * The UI icon SVGs are within the Spectrum CSS repository, which has its own package published to NPM:
+ * - GitHub: [adobe/spectrum-css — ui-icons folder](https://github.com/adobe/spectrum-css/tree/main/ui-icons)
+ * - NPM: [@spectrum-css/ui-icons](https://www.npmjs.com/package/@spectrum-css/ui-icons).
+ *
+ * The workflow icon SVGs are within a separate repository, which is also published to NPM:
+ * - GitHub: [adobe/spectrum-css-workflow-icons](https://github.com/adobe/spectrum-css-workflow-icons)
+ * - NPM: [@adobe/spectrum-css-workflow-icons](https://www.npmjs.com/package/@adobe/spectrum-css-workflow-icons).
*/
export default {
title: "Icon",
@@ -92,11 +103,11 @@ export default {
packageJson,
metadata,
},
- tags: ["!autodocs"],
};
export const Default = IconGroup.bind({});
Default.args = {};
+Default.tags = ["!autodocs"];
// ********* VRT ONLY ********* //
export const WithForcedColors = IconGroup.bind({});
@@ -111,27 +122,12 @@ WithForcedColors.parameters = {
},
};
-/**
- * Helper template function to display multiple icons using an array of icon names.
- */
-const IconListTemplate = (args, iconsList = [], context) => html`
-
- ${iconsList.map(
- (iconName) => Template({ ...args, iconName }, context)
- )}
-
-`;
-
/* Stories for the MDX "Docs" only. */
/**
- * A sampling of multiple Workflow icons.
+ * The workflow icon set contains several hundred icons to choose from.
+ * These icons can be seen in use within [button](/docs/components-button--docs), [action button](/docs/components-action-button--docs), [menu](/docs/components-menu--docs), and many other components.
+ * Here is an example of just a few of these icons:
*/
export const WorkflowDefault = (args, context) => IconListTemplate(
{
@@ -159,105 +155,55 @@ WorkflowDefault.tags = ["!dev"];
WorkflowDefault.parameters = {
chromatic: { disableSnapshot: true },
};
+WorkflowDefault.storyName = "Workflow icons";
/**
- * An example of a Workflow icon displayed at all sizes, from small to extra-large.
+ * Below is an example of a workflow icon displayed at all its available sizes, from extra-small to extra-extra-large.
+ * Workflow icons use "t-shirt" sizes (e.g. small, medium), that are the same width and height for each icon in the set.
*/
-export const WorkflowSizing = (args, context) => html`
-
- ${["xs","s","m","l","xl"].map(
- (size) => html`
-
- ${Typography({
- semantics: "heading",
- size: "xs",
- content: [
- {
- xs: "Extra-small",
- s: "Small",
- m: "Medium",
- l: "Large",
- xl: "Extra-large",
- }[size],
- ],
- customStyles: {
- "white-space": "nowrap",
- "--mod-detail-font-color": "var(--spectrum-seafoam-900)",
- }
- })}
- ${Template({ ...args, size }, context)}
-
- `
- )}
-
- ${IconListTemplate(
- {
- ...args,
- setName: "ui",
- },
- [
- "Asterisk100",
- "Asterisk200",
- "Asterisk300",
- ],
- context
- )}
-
-
- ${IconListTemplate(
- {
- ...args,
- setName: "ui",
- },
- [
- "ChevronDown50",
- "ChevronDown75",
- "ChevronDown100",
- "ChevronDown200",
- "ChevronDown300",
- "ChevronDown400",
- ],
- context
- )}
-
-`;
-UIDefault.storyName = "UI Default";
+export const UIDefault = UIDefaultTemplate.bind({});
+UIDefault.storyName = "UI icons";
UIDefault.tags = ["!dev"];
UIDefault.parameters = {
chromatic: { disableSnapshot: true },
};
/**
- * A UI arrow displayed for all directions (left, right, up, down).
+ * Directional UI icons such as chevron and arrow have classes for each direction. They rotate the same basic icon with a CSS `transform: rotate`.
+ * For example, the `Arrow100.svg` icon is used with:
+ * - `.spectrum-UIIcon-ArrowRight100`
+ * - `.spectrum-UIIcon-ArrowLeft100`
+ * - `.spectrum-UIIcon-ArrowDown100`
+ * - `.spectrum-UIIcon-ArrowUp100`
*/
export const UIArrows = (args, context) => IconListTemplate(
{
@@ -272,7 +218,7 @@ export const UIArrows = (args, context) => IconListTemplate(
],
context
);
-UIArrows.storyName = "UI Arrows";
+UIArrows.storyName = "UI icons - directional";
UIArrows.tags = ["!dev"];
UIArrows.parameters = {
chromatic: { disableSnapshot: true },
diff --git a/components/icon/stories/template.js b/components/icon/stories/template.js
index 408107755e7..2895ff1ef3e 100644
--- a/components/icon/stories/template.js
+++ b/components/icon/stories/template.js
@@ -2,6 +2,7 @@ import { getRandomId } from "@spectrum-css/preview/decorators";
import { html } from "lit";
import { classMap } from "lit/directives/class-map.js";
import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
import { unsafeSVG } from "lit/directives/unsafe-svg.js";
import "../index.css";
@@ -281,3 +282,57 @@ export const Template = ({
`;
};
+
+/**
+ * Helper template function to display multiple icons using an array of icon names.
+ */
+export const IconListTemplate = (args, iconsList = [], context) => html`
+
+ ${iconsList.map(
+ (iconName) => Template({ ...args, iconName }, context)
+ )}
+
+`;
+
+/**
+ * A sampling of a few UI icons.
+ */
+export const UIDefaultTemplate = (args, context) => html`
+
+ ${IconListTemplate(
+ {
+ ...args,
+ setName: "ui",
+ },
+ [
+ "Asterisk100",
+ "Asterisk200",
+ "Asterisk300",
+ ],
+ context
+ )}
+
+
+ ${IconListTemplate(
+ {
+ ...args,
+ setName: "ui",
+ },
+ [
+ "ChevronDown50",
+ "ChevronDown75",
+ "ChevronDown100",
+ "ChevronDown200",
+ "ChevronDown300",
+ "ChevronDown400",
+ ],
+ context
+ )}
+
+`;
diff --git a/components/typography/stories/typography.stories.js b/components/typography/stories/typography.stories.js
index 044a76bc5b6..c6595cb6a24 100644
--- a/components/typography/stories/typography.stories.js
+++ b/components/typography/stories/typography.stories.js
@@ -271,7 +271,7 @@ CodeVariants.parameters = {
// ====== Docs: Internationalization ====== //
/**
- * We should note that Hebrew and Arabic are rtl languages somewhere over here.
+ * In the examples below, Hebrew and Arabic are "RTL" languages, meaning they are read from right to left.
*/
export const InternationalizedHeading = DocsInternationalizedHeadingVariants.bind({});
InternationalizedHeading.storyName = "Internationalized Heading";