diff --git a/.storybook/deprecated/cyclebutton/cyclebutton.stories.js b/.storybook/deprecated/cyclebutton/cyclebutton.stories.js index f3c3c7f03c6..f0d6f5bce93 100644 --- a/.storybook/deprecated/cyclebutton/cyclebutton.stories.js +++ b/.storybook/deprecated/cyclebutton/cyclebutton.stories.js @@ -7,10 +7,13 @@ import { html } from "lit"; import "@spectrum-css/cyclebutton/dist/index-vars.css"; import "@spectrum-css/cyclebutton/dist/vars.css"; +/** + * **This component is deprecated.** Please use the quiet variant of action button with the appropriate icon(s) instead. Any icon swapping that happens on-click/on-key should be handled by the implementation. + * + * The cycle button component is an action button that cycles through two different icons, a play that then changes to a pause, for example. + */ export default { title: "Deprecated/Cycle button", - description: - "The Cycle button component is an action button that cycles through two different icons, a play that then changes to a pause, for example.", component: "CycleButton", argTypes: { size: ActionButtonStories?.argTypes?.size ?? {}, @@ -49,13 +52,14 @@ export const Default = (({ rootClass = "spectrum-CycleButton", customClasses = [], size = "m", - initialIcon = "Play", - selectedIcon = "Pause", isDisabled = false, onclick, ...globals }) => { - const [{ selectedIcon: icon }, updateArgs] = useArgs(); + const [{ + selectedIcon = "Pause", + initialIcon = "Play" + }, updateArgs] = useArgs(); return html` @@ -65,18 +69,21 @@ export const Default = (({ ${ActionButton({ ...globals, - customClasses: [rootClass], + customClasses: [rootClass, ...customClasses], isQuiet: true, isDisabled, size, iconName: initialIcon, + iconSet: "workflow", onclick: onclick ?? function () { if (isDisabled) return; - updateArgs({ initialIcon: selectedIcon }); - updateArgs({ selectedIcon: icon }); + updateArgs({ + initialIcon: selectedIcon, + selectedIcon: initialIcon + }); }, })} `; diff --git a/.storybook/deprecated/quickaction/quickaction.stories.js b/.storybook/deprecated/quickaction/quickaction.stories.js index 9ca40f98bb9..346159b1e66 100644 --- a/.storybook/deprecated/quickaction/quickaction.stories.js +++ b/.storybook/deprecated/quickaction/quickaction.stories.js @@ -7,6 +7,9 @@ import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/tem import "@spectrum-css/quickaction/dist/index-vars.css"; import "@spectrum-css/quickaction/dist/vars.css"; +/** + * **This component is deprecated.** Please use an action bar to allow users to perform actions on either a single or multiple items at the same time, instead. + */ export default { title: "Deprecated/Quick actions", component: "QuickAction", diff --git a/.storybook/deprecated/searchwithin/searchwithin.stories.js b/.storybook/deprecated/searchwithin/searchwithin.stories.js index 8a7c76aabf0..b0b2c0683c1 100644 --- a/.storybook/deprecated/searchwithin/searchwithin.stories.js +++ b/.storybook/deprecated/searchwithin/searchwithin.stories.js @@ -13,6 +13,9 @@ import { Template as Menu } from "@spectrum-css/menu/stories/template.js"; import "@spectrum-css/searchwithin/dist/index-vars.css"; import "@spectrum-css/searchwithin/dist/vars.css"; +/** + * **This component is deprecated.** Please use a search field with a separate control to filter the search instead. + */ export default { title: "Deprecated/Search within", component: "SearchWithin", diff --git a/.storybook/deprecated/splitbutton/splitbutton.stories.js b/.storybook/deprecated/splitbutton/splitbutton.stories.js index fea59cee2d2..5a2e240b369 100644 --- a/.storybook/deprecated/splitbutton/splitbutton.stories.js +++ b/.storybook/deprecated/splitbutton/splitbutton.stories.js @@ -6,10 +6,13 @@ import { Template as Button } from "@spectrum-css/button/stories/template.js"; import "@spectrum-css/splitbutton/dist/index-vars.css"; import "@spectrum-css/splitbutton/dist/vars.css"; +/** + * **This component is deprecated.** Please use a button group to show any additional actions related to the most critical action. Reference [Spectrum documentation](https://spectrum.corp.adobe.com/page/button-group/#Use-a-button-group-to-show-additional-actions) for more information. + * + * A split button surfaces an immediately invokable action via it's main button, as well as a list of alternative actions in its toggle-able menu overlay. + */ export default { title: "Deprecated/Split button", - description: - "A split button surfaces an immediately invokable action via it's main button, as well as a list of alternative actions in its toggle-able menu overlay.", component: "SplitButton", argTypes: { size: { diff --git a/.storybook/main.js b/.storybook/main.js index 8910d9da2e9..6cf75847d91 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -11,8 +11,10 @@ const componentPkgs = readdirSync(componentsPath, { module.exports = { stories: [ "../components/*/stories/*.stories.js", + "../components/*/stories/*.mdx", "./guides/*.mdx", "./deprecated/*/*.stories.js", + "./deprecated/*/*.mdx", ], rootDir: "../", staticDirs: ["../assets"], @@ -21,13 +23,14 @@ module.exports = { name: "@storybook/addon-essentials", // Supported booleans: actions, controls, docs, toolbars, measure, outline. options: { - viewport: false, // Don't need viewports b/c the medium/large contexts are used to support scaling. - backgrounds: false, + viewport: false, // Don't need backgrounds b/c this is handled by the color contexts. - configureJSX: true, + backgrounds: false, // Enables JSX support in MDX for projects that aren't configured to handle the format. - transcludeMarkdown: true, // Support markdown in MDX files. + configureJSX: true, + // Support markdown in MDX files. + transcludeMarkdown: true, }, }, // https://github.com/storybookjs/storybook/tree/next/code/addons/a11y diff --git a/.storybook/preview.js b/.storybook/preview.js index 5578d8c2b73..020815bff7b 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -191,7 +191,7 @@ export const parameters = { options: { storySort: { method: "alphabetical", - order: ['Guides', ['Contributing', '*', 'Adobe Code of Conduct', 'Changelog'], 'Components', ['Docs', 'Default', '*'], '*'], + order: ["Guides", ["Contributing", "*", "Adobe Code of Conduct", "Changelog"], "Components", ["*", ["Docs", "Default", "*"]], "*"], includeNames: true, }, },