From af4fc4cbc535d52abe71d47e84e91a970c0c6b40 Mon Sep 17 00:00:00 2001 From: castastrophe Date: Tue, 17 Sep 2024 16:06:49 -0400 Subject: [PATCH] chore: remove all yml processing and files --- .../deprecated/cyclebutton/cyclebutton.yml | 15 - .../deprecated/quickaction/quickaction.yml | 47 - .../deprecated/searchwithin/searchwithin.yml | 104 -- .../deprecated/splitbutton/splitbutton.yml | 76 - .storybook/guides/deprecation.mdx | 9 +- .storybook/project.json | 2 +- components/README.md | 6 +- components/accordion/metadata/accordion.yml | 687 -------- components/actionbar/metadata/actionbar.yml | 297 ---- .../actionbutton/metadata/actionbutton.yml | 1264 --------------- .../actiongroup/metadata/actiongroup.yml | 456 ------ components/actionmenu/metadata/actionmenu.yml | 73 - .../alertbanner/metadata/alertbanner.yml | 112 -- .../alertdialog/metadata/alertdialog.yml | 202 --- components/asset/metadata/asset.yml | 26 - components/assetcard/metadata/assetcard.yml | 215 --- components/assetlist/metadata/assetlist.yml | 81 - components/avatar/metadata/avatar.yml | 116 -- components/badge/metadata/badge.yml | 256 --- components/breadcrumb/metadata/breadcrumb.yml | 379 ----- components/button/metadata/button-accent.yml | 260 --- .../button/metadata/button-negative.yml | 255 --- components/button/metadata/button-pending.yml | 1067 ------------- components/button/metadata/button-primary.yml | 255 --- .../button/metadata/button-secondary.yml | 255 --- .../button/metadata/button-staticcolor.yml | 575 ------- .../buttongroup/metadata/buttongroup.yml | 74 - components/calendar/metadata/calendar.yml | 458 ------ components/card/metadata/card-asset.yml | 47 - components/card/metadata/card-gallery.yml | 58 - components/card/metadata/card.yml | 428 ----- components/checkbox/metadata/checkbox.yml | 617 ------- .../clearbutton/metadata/clearbutton.yml | 106 -- .../closebutton/metadata/closebutton.yml | 204 --- .../metadata/coachindicator.yml | 47 - components/coachmark/metadata/coachmark.yml | 211 --- components/colorarea/metadata/colorarea.yml | 65 - .../colorhandle/metadata/colorhandle.yml | 60 - components/colorloupe/index.css | 2 +- components/colorloupe/metadata/colorloupe.yml | 39 - .../colorslider/metadata/colorslider.yml | 197 --- components/colorwheel/metadata/colorwheel.yml | 91 -- components/combobox/metadata/combobox.yml | 376 ----- .../metadata/contextualhelp.yml | 61 - components/datepicker/metadata/datepicker.yml | 313 ---- components/dial/metadata/dial.yml | 83 - components/dialog/metadata/dialog.yml | 333 ---- components/divider/metadata/divider.yml | 126 -- .../dropindicator/metadata/dropindicator.yml | 10 - components/dropzone/metadata/dropzone.yml | 33 - components/fieldgroup/metadata/fieldgroup.yml | 527 ------ components/fieldlabel/metadata/fieldlabel.yml | 121 -- components/fieldlabel/metadata/form.yml | 261 --- .../metadata/floatingactionbutton.yml | 27 - components/helptext/metadata/helptext.yml | 123 -- .../metadata/illustratedmessage.yml | 26 - .../infieldbutton/metadata/infieldbutton.yml | 220 --- .../inlinealert/metadata/inlinealert.yml | 89 -- components/link/metadata/link.yml | 75 - .../logicbutton/metadata/logicbutton.yml | 19 - components/menu/metadata/menu.yml | 1411 ----------------- components/miller/metadata/miller.yml | 180 --- components/modal/metadata/modal.yml | 17 - .../metadata/opacitycheckerboard.yml | 17 - components/page/metadata/page.yml | 22 - .../metadata/pagination-button-style.yml | 50 - .../metadata/pagination-explicit.yml | 27 - .../metadata/pagination-listing.yml | 18 - components/picker/metadata/picker.yml | 539 ------- .../pickerbutton/metadata/pickerbutton.yml | 154 -- components/popover/metadata/popover.yml | 666 -------- components/progressbar/metadata/meter.yml | 114 -- .../progressbar/metadata/progressbar.yml | 151 -- .../metadata/progresscircle.yml | 236 --- components/radio/metadata/radio.yml | 242 --- components/rating/metadata/rating.yml | 366 ----- components/search/metadata/search.yml | 256 --- components/sidenav/metadata/sidenav.yml | 220 --- components/slider/metadata/slider.yml | 487 ------ components/splitview/metadata/splitview.yml | 70 - .../statuslight/metadata/statuslight.yml | 93 -- components/steplist/metadata/steplist.yml | 274 ---- components/stepper/metadata/stepper.yml | 439 ----- components/swatch/metadata/swatch.yml | 301 ---- .../swatchgroup/metadata/swatchgroup.yml | 296 ---- components/switch/metadata/switch.yml | 129 -- components/table/metadata/table.yml | 1347 ---------------- components/tabs/metadata/tabs.yml | 738 --------- components/tag/metadata/tag.yml | 449 ------ components/taggroup/metadata/taggroup.yml | 177 --- components/textfield/metadata/textarea.yml | 281 ---- components/textfield/metadata/textfield.yml | 425 ----- components/thumbnail/metadata/thumbnail.yml | 209 --- components/toast/metadata/toast.yml | 187 --- components/tooltip/metadata/tooltip.yml | 531 ------- components/tray/metadata/tray.yml | 25 - components/treeview/metadata/treeview.yml | 846 ---------- .../typography/metadata/typography-body.yml | 115 -- .../typography/metadata/typography-code.yml | 37 - .../typography/metadata/typography-detail.yml | 20 - .../metadata/typography-heading.yml | 149 -- .../metadata/typography-international.yml | 270 ---- components/typography/metadata/typography.yml | 173 -- components/well/metadata/well.yml | 15 - lint-staged.config.js | 12 - nx.json | 6 +- schemas/documentation.schema.json | 152 -- 107 files changed, 8 insertions(+), 25548 deletions(-) delete mode 100644 .storybook/deprecated/cyclebutton/cyclebutton.yml delete mode 100644 .storybook/deprecated/quickaction/quickaction.yml delete mode 100644 .storybook/deprecated/searchwithin/searchwithin.yml delete mode 100644 .storybook/deprecated/splitbutton/splitbutton.yml delete mode 100644 components/accordion/metadata/accordion.yml delete mode 100644 components/actionbar/metadata/actionbar.yml delete mode 100644 components/actionbutton/metadata/actionbutton.yml delete mode 100644 components/actiongroup/metadata/actiongroup.yml delete mode 100644 components/actionmenu/metadata/actionmenu.yml delete mode 100644 components/alertbanner/metadata/alertbanner.yml delete mode 100644 components/alertdialog/metadata/alertdialog.yml delete mode 100644 components/asset/metadata/asset.yml delete mode 100644 components/assetcard/metadata/assetcard.yml delete mode 100644 components/assetlist/metadata/assetlist.yml delete mode 100644 components/avatar/metadata/avatar.yml delete mode 100644 components/badge/metadata/badge.yml delete mode 100644 components/breadcrumb/metadata/breadcrumb.yml delete mode 100644 components/button/metadata/button-accent.yml delete mode 100644 components/button/metadata/button-negative.yml delete mode 100644 components/button/metadata/button-pending.yml delete mode 100644 components/button/metadata/button-primary.yml delete mode 100644 components/button/metadata/button-secondary.yml delete mode 100644 components/button/metadata/button-staticcolor.yml delete mode 100644 components/buttongroup/metadata/buttongroup.yml delete mode 100644 components/calendar/metadata/calendar.yml delete mode 100644 components/card/metadata/card-asset.yml delete mode 100644 components/card/metadata/card-gallery.yml delete mode 100644 components/card/metadata/card.yml delete mode 100644 components/checkbox/metadata/checkbox.yml delete mode 100644 components/clearbutton/metadata/clearbutton.yml delete mode 100644 components/closebutton/metadata/closebutton.yml delete mode 100644 components/coachindicator/metadata/coachindicator.yml delete mode 100644 components/coachmark/metadata/coachmark.yml delete mode 100644 components/colorarea/metadata/colorarea.yml delete mode 100644 components/colorhandle/metadata/colorhandle.yml delete mode 100644 components/colorloupe/metadata/colorloupe.yml delete mode 100644 components/colorslider/metadata/colorslider.yml delete mode 100644 components/colorwheel/metadata/colorwheel.yml delete mode 100644 components/combobox/metadata/combobox.yml delete mode 100644 components/contextualhelp/metadata/contextualhelp.yml delete mode 100644 components/datepicker/metadata/datepicker.yml delete mode 100644 components/dial/metadata/dial.yml delete mode 100644 components/dialog/metadata/dialog.yml delete mode 100644 components/divider/metadata/divider.yml delete mode 100644 components/dropindicator/metadata/dropindicator.yml delete mode 100644 components/dropzone/metadata/dropzone.yml delete mode 100644 components/fieldgroup/metadata/fieldgroup.yml delete mode 100644 components/fieldlabel/metadata/fieldlabel.yml delete mode 100644 components/fieldlabel/metadata/form.yml delete mode 100644 components/floatingactionbutton/metadata/floatingactionbutton.yml delete mode 100644 components/helptext/metadata/helptext.yml delete mode 100644 components/illustratedmessage/metadata/illustratedmessage.yml delete mode 100644 components/infieldbutton/metadata/infieldbutton.yml delete mode 100644 components/inlinealert/metadata/inlinealert.yml delete mode 100644 components/link/metadata/link.yml delete mode 100644 components/logicbutton/metadata/logicbutton.yml delete mode 100644 components/menu/metadata/menu.yml delete mode 100644 components/miller/metadata/miller.yml delete mode 100644 components/modal/metadata/modal.yml delete mode 100644 components/opacitycheckerboard/metadata/opacitycheckerboard.yml delete mode 100644 components/page/metadata/page.yml delete mode 100644 components/pagination/metadata/pagination-button-style.yml delete mode 100644 components/pagination/metadata/pagination-explicit.yml delete mode 100644 components/pagination/metadata/pagination-listing.yml delete mode 100644 components/picker/metadata/picker.yml delete mode 100644 components/pickerbutton/metadata/pickerbutton.yml delete mode 100644 components/popover/metadata/popover.yml delete mode 100644 components/progressbar/metadata/meter.yml delete mode 100644 components/progressbar/metadata/progressbar.yml delete mode 100644 components/progresscircle/metadata/progresscircle.yml delete mode 100644 components/radio/metadata/radio.yml delete mode 100644 components/rating/metadata/rating.yml delete mode 100644 components/search/metadata/search.yml delete mode 100644 components/sidenav/metadata/sidenav.yml delete mode 100644 components/slider/metadata/slider.yml delete mode 100644 components/splitview/metadata/splitview.yml delete mode 100644 components/statuslight/metadata/statuslight.yml delete mode 100644 components/steplist/metadata/steplist.yml delete mode 100644 components/stepper/metadata/stepper.yml delete mode 100644 components/swatch/metadata/swatch.yml delete mode 100644 components/swatchgroup/metadata/swatchgroup.yml delete mode 100644 components/switch/metadata/switch.yml delete mode 100644 components/table/metadata/table.yml delete mode 100644 components/tabs/metadata/tabs.yml delete mode 100644 components/tag/metadata/tag.yml delete mode 100644 components/taggroup/metadata/taggroup.yml delete mode 100644 components/textfield/metadata/textarea.yml delete mode 100644 components/textfield/metadata/textfield.yml delete mode 100644 components/thumbnail/metadata/thumbnail.yml delete mode 100644 components/toast/metadata/toast.yml delete mode 100644 components/tooltip/metadata/tooltip.yml delete mode 100644 components/tray/metadata/tray.yml delete mode 100644 components/treeview/metadata/treeview.yml delete mode 100644 components/typography/metadata/typography-body.yml delete mode 100644 components/typography/metadata/typography-code.yml delete mode 100644 components/typography/metadata/typography-detail.yml delete mode 100644 components/typography/metadata/typography-heading.yml delete mode 100644 components/typography/metadata/typography-international.yml delete mode 100644 components/typography/metadata/typography.yml delete mode 100644 components/well/metadata/well.yml delete mode 100644 schemas/documentation.schema.json diff --git a/.storybook/deprecated/cyclebutton/cyclebutton.yml b/.storybook/deprecated/cyclebutton/cyclebutton.yml deleted file mode 100644 index dfd357fb23e..00000000000 --- a/.storybook/deprecated/cyclebutton/cyclebutton.yml +++ /dev/null @@ -1,15 +0,0 @@ -name: Cycle button -status: Deprecated -deprecationNotice: Use the [quiet variant of action button](actionbutton.html#quiet) with the appropriate icon(s) instead. Any icon swapping that happens on-click/on-key should be handled by the implementation. -examples: - - id: cyclebutton - name: Standard - markup: | - diff --git a/.storybook/deprecated/quickaction/quickaction.yml b/.storybook/deprecated/quickaction/quickaction.yml deleted file mode 100644 index 2f3e9425b70..00000000000 --- a/.storybook/deprecated/quickaction/quickaction.yml +++ /dev/null @@ -1,47 +0,0 @@ -id: quickactions -name: Quick actions -status: Deprecated -deprecationNotice: Use an action bar to allow users to perform actions on either a single or multiple items at the same time, instead. -description: Note that the `.spectrum-QuickActions-overlay` class should be placed on the container where the Quick Actions are displayed, and the `.spectrum-QuickActions--textOnly` class should be applied when the buttons have text only. -SpectrumSiteSlug: https://spectrum.adobe.com/page/quick-actions/ -examples: - - id: quickactions - name: Standard - markup: | -
- -
- - - -
- -
- -
- -
- - - -
- -
diff --git a/.storybook/deprecated/searchwithin/searchwithin.yml b/.storybook/deprecated/searchwithin/searchwithin.yml deleted file mode 100644 index b51d7c3c221..00000000000 --- a/.storybook/deprecated/searchwithin/searchwithin.yml +++ /dev/null @@ -1,104 +0,0 @@ -name: Search within -status: Deprecated -deprecationNotice: Use a [search field](search.html) with a separate control to filter the search instead. -description: Override the width of the component where necessary. -examples: - - id: searchwithin - name: Standard - markup: | -

Default

-
- -
- -
- -
- -

Open

-
- -
- -
- - -
-
    -
  • - All -
    • -
  • - Campaigns -
    • -
  • - Audiences -
    • -
  • - Tags -
    • -
-
-
- -

Default (Changed Selection)

-
- -
- -
- -
- -

Disabled

-
- -
- -
- -
diff --git a/.storybook/deprecated/splitbutton/splitbutton.yml b/.storybook/deprecated/splitbutton/splitbutton.yml deleted file mode 100644 index 5940902961b..00000000000 --- a/.storybook/deprecated/splitbutton/splitbutton.yml +++ /dev/null @@ -1,76 +0,0 @@ -name: Split button -status: Deprecated -deprecationNotice: Use a [button group](buttongroup.html) 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. -examples: - - id: splitbutton - name: CTA - description: A CTA split button. - markup: | -
- - -
- -
-
- -
- - -
- - id: splitbutton - name: Primary - description: A primary split button. - markup: | -
- - -
- -
-
- -
- - -
- - id: splitbutton - name: Secondary - description: A secondary split button. - markup: | -
- - -
- -
-
- -
- - -
diff --git a/.storybook/guides/deprecation.mdx b/.storybook/guides/deprecation.mdx index 16342e4cccf..63543660a29 100644 --- a/.storybook/guides/deprecation.mdx +++ b/.storybook/guides/deprecation.mdx @@ -42,12 +42,7 @@ Before removing the component from the codebase, we need to flag the component a status: { type: "deprecated" } }, ``` -3. Update the status of the component to `Deprecated` in the `*.yml` file. Add any additional migration notes to the `deprecationNotice` keyword. i.e., - ```yaml - name: Quick actions - status: Deprecated - deprecationNotice: Use an [action bar](actionbar.html) to allow users to perform actions on either a single or multiple items at the same time, instead. - ``` +3. Update the status of the component to `Deprecated` in the `*.mdx` file. Add any additional migration notes that were provided by the design team. 4. Commit these changes and open a pull request to the main branch. i.e., `git commit -m "chore(quickaction): prepare for deprecation"`. 5. Once the pull request is approved, merge the changes into the main branch and publish the update to the package registry. @@ -58,7 +53,7 @@ At this point you can choose to either immediate move on to the next steps or gi Once the deprecation notice has been communicated and the above steps completed, we can remove the component from the codebase safely without breaking local references. 1. Create a new folder with the component name in `.storybook/deprecated`, i.e., `.storybook/deprecated/quickaction`. -2. Copy `*.stories.js` and `metadata/*.yml` into the new folder (directly, not nested inside subfolders). +2. Copy `*.stories.js` and `*.mdx` into the new folder (directly, not nested inside subfolders). 3. Delete the package from the `components` directory. 4. Add the deprecated component's package and last version to the monorepo's root package.json. i.e., `"@spectrum-css/quickaction": "^3.1.1",`. 5. Reach out to one of the package maintainers to officially deprecate the package in the package registry with the provided deprecation notice from design. Do not try to run the deprecation command unless you know that you have publishing permissions on npm. i.e., `npm deprecate @spectrum-css/quickaction@3.1.1 "This package has been deprecated. Use an action bar to allow users to perform actions on either a single or multiple items at the same time, instead."`. diff --git a/.storybook/project.json b/.storybook/project.json index f5898309424..01945574816 100644 --- a/.storybook/project.json +++ b/.storybook/project.json @@ -71,7 +71,7 @@ "commands": [ "prettier --write --cache --log-level error --ignore-unknown --no-error-on-unmatched-pattern {projectRoot}/assets/*.css && stylelint --fix --cache --allow-empty-input {projectRoot}/assets/*.css", "eslint --fix --cache --no-error-on-unmatched-pattern {projectRoot}/*.{js,json} {projectRoot}/**/*.js --ignore-pattern \"!.storybook/\"", - "prettier --write --cache --log-level error --ignore-unknown --no-error-on-unmatched-pattern {projectRoot}/*.{md,mdx} {projectRoot}/**/*.{yml,mdx}" + "prettier --write --cache --log-level error --ignore-unknown --no-error-on-unmatched-pattern {projectRoot}/*.{md,mdx} {projectRoot}/**/*.{md,mdx}" ] } }, diff --git a/components/README.md b/components/README.md index 66c02f39375..34deb5f9bf3 100644 --- a/components/README.md +++ b/components/README.md @@ -9,15 +9,15 @@ Components are released on npm as `@spectrum-css/$COMPONENT`, where `$COMPONENT` Each component has the following files: - `index.css` - The scale-specific styles for the component: dimensions, layout, etc (these change between scales) -- `metadata/*.yml` - The markup examples and documentation for the component; also makes additional examples possible that appear separately in the site navigation. - `themes/*.css` - The theme-specific styles for the component. +- `stories/*.mdx` - The examples and documentation for the component. - `stories/*.stories.js` and `stories/template.js` - The storybook assets for rendering components in the Storybook tool and eventually to be used for visual regression testing. ## Editing an existing component 1. Run `gulp dev` in the root of the project to begin developing. 2. Edit `components/$COMPONENT/index.css` with dimensions and color properties. The documentation will live reload with your changes. -3. Edit the markup examples within `components/$COMPONENT/metadata/*.yml`. The documentation will live reload with your changes. +3. Edit the markup examples within `components/$COMPONENT/stories/*.mdx`. The documentation will live reload with your changes. ## Adding a new component @@ -28,7 +28,7 @@ Each component has the following files: 5. Inside the `stories` directory you will find a `template.js` and an `*.stories.js` file. - In the `*.stories.js` file, define the available knobs and properties for your component, as well as any standard variations you want to surface in [Storybook](https://storybook.js.org/docs/react/writing-stories/introduction). - Update the `template.js` file with the markup, using [lit-html syntax](https://lit.dev/docs/templates/overview/) to adjust results based on the provided settings from the Storybook knobs. -6. Edit your `metadata/*.yml` to add markup examples for each of the variants of your component. +6. Edit your `stories/*.mdx` to add markup examples for each of the variants of your component. Because we use scoped packages, before it can be published with Lerna, you must manually publish the new component as public: diff --git a/components/accordion/metadata/accordion.yml b/components/accordion/metadata/accordion.yml deleted file mode 100644 index 7150257b720..00000000000 --- a/components/accordion/metadata/accordion.yml +++ /dev/null @@ -1,687 +0,0 @@ -name: Accordion -description: "While remaining backward compatible, the recommended markup has been updated to implement the [WAI-ARIA 1.1 Accordion design pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion) to better support accessibility for keyboard and screen reader users." - -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration Guide - description: | - ### T-shirt sizing - Accordion now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-Accordion--size*` class. - - ### Density - Accordion now supports density and requires that you specify one of the density type `compact` `regular` `spacious`. - -examples: - - id: accordion - name: Compact - S - markup: | - -
- - - - -
- - - id: accordion - name: Compact - M - markup: | - -
- - - - -
- - - id: accordion - name: Compact - L - markup: | - -
- - - - -
- - - id: accordion - name: Compact - XL - markup: | - -
- - - - -
- - - id: accordion - name: Regular - S - markup: | - -
- - - - -
- - - id: accordion - name: Regular - M - markup: | - -
- - - - -
- - - id: accordion - name: Regular - L - markup: | - -
- - - - -
- - - id: accordion - name: Regular - XL - markup: | - -
- - - - -
- - - id: accordion - name: Spacious - S - markup: | - -
- - - - -
- - - id: accordion - name: Spacious - M - markup: | - -
- - - - -
- - - id: accordion - name: Spacious - L - markup: | - -
- - - - -
- - - id: accordion - name: Spacious - XL - markup: | - -
- - - - -
diff --git a/components/actionbar/metadata/actionbar.yml b/components/actionbar/metadata/actionbar.yml deleted file mode 100644 index e92113541b9..00000000000 --- a/components/actionbar/metadata/actionbar.yml +++ /dev/null @@ -1,297 +0,0 @@ -name: Action bar -description: Floating Action bar that appears in selection mode. -SpectrumSiteSlug: https://spectrum.adobe.com/page/action-bar/ -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration Guide - description: | - ### Popover Dependency - Action bar requires Popover, which is nested within Action bar. Action bar background, border, and corner radius are applied to the nested Popover component and can be overriden by Action bar. - - ### Action bar close button - Checkbox has been replaced by Close button. - - ### Item counter - Item counter has replaced the checkbox field label. Item counter is a Field Label component. - - ### New Action button markup - Action button requires `.spectrum-ActionButton-icon` class on icons nested inside of Action button. - - Emphasized Action bar requires `.spectrum-ActionButton-staticWhite` class on Action button. - - ### New ActionGroup markup - Action bar now uses the new ActionGroup markup. Replace `.spectrum-ButtonGroup` with `.spectrum-ActionGroup` and apply `.spectrum-ActionGroup-item` to each action button. See the [Action Group](actiongroup.html) for more information. - - ### Change workflow icon size to medium - If you use icon action button in your markup, please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`. - -examples: - - id: actionbar - name: Standard - description: Standard Action bars fill the width of their container. - markup: | -
-
- - - - -
- - - -
-
-
- -
-
- - - - -
- - - -
-
-
- -
-
- - - - -
- - - -
-
-
- - - id: actionbar-emphasized - name: Emphasized - description: Emphasized Action bar. - markup: | -
-
- - - - -
- - - -
-
-
- - -
-
- - - - -
- - - -
-
-
- - -
-
- - - - -
- - - -
-
-
- - - id: actionbar-flexible - name: Flexible - description: Flexible Action bars fit the width of their content. - markup: | -
-
- - - - -
- - -
-
-
- - - id: actionbar-sticky - name: Sticky - description: - This example shows how the sticky Action bar looks within a scrollable element. Please see usage section of the guidelines - for more information about using Action bar with underlying content. - markup: | -
-

Scroll down to view sticky behavior

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt - in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. -

-
-
- - - - -
- - - -
-
-
-
diff --git a/components/actionbutton/metadata/actionbutton.yml b/components/actionbutton/metadata/actionbutton.yml deleted file mode 100644 index acc03b5be7c..00000000000 --- a/components/actionbutton/metadata/actionbutton.yml +++ /dev/null @@ -1,1264 +0,0 @@ -name: Action button -status: Verified -SpectrumSiteSlug: https://spectrum.adobe.com/page/action-button/ -description: | - - For Action Buttons that only contain an icon with no label, do not include the element with the `.spectrum-ActionButton-label` class in the markup - - If an icon and a label are both used, ensure that the element with the `.spectrum-ActionButton-label` class comes after the `.spectrum-Icon` element. - - If the hold icon is used, ensure that the element with the `.spectrum-ActionButton-hold` class comes before the `.spectrum-Icon` element. - - When using `.spectrum-ActionButton--staticWhite` or `.spectrum-ActionButton--staticblack`, use the `--mod-actionbutton-content-color-default` custom property to set the text color when selected. -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration Guide - description: | - ### Action Button now requires a class on its icon - The `.spectrum-ActionButton-icon` class is now required on the icon. - - ### T-shirt sizing - Action Button now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-ActionButton--size*` class. - - ### Action Button is now a separate component - Action Button has been moved to the [Action Button](actionbutton.html) component. - - ### Change workflow icon size - - Previously, all Action Buttons used `.spectrum-Icon--sizeS`. This has changed: - - | Action button classname | Workflow icon classname | - | -------------------------------- | --------------------------------- | - | `.spectrum-ActionButton--sizeXS` | `.spectrum-Icon--sizeXS` | - | `.spectrum-ActionButton--sizeS` | `.spectrum-Icon--sizeS` | - | `.spectrum-ActionButton--sizeM` | `.spectrum-Icon--sizeM` | - | `.spectrum-ActionButton--sizeL` | `.spectrum-Icon--sizeL` | - | `.spectrum-ActionButton--sizeXL` | `.spectrum-Icon--sizeXL` | - - ### Change hold icon classnames - - Hold icon classnames must be set as follows: - - | Action button classname | Hold icon classname | - | -------------------------------- | ------------------------------------ | - | `.spectrum-ActionButton--sizeXS` | `.spectrum-UIIcon-CornerTriangle50` | - | `.spectrum-ActionButton--sizeS` | `.spectrum-UIIcon-CornerTriangle75` | - | `.spectrum-ActionButton--sizeM` | `.spectrum-UIIcon-CornerTriangle100` | - | `.spectrum-ActionButton--sizeL` | `.spectrum-UIIcon-CornerTriangle200` | - | `.spectrum-ActionButton--sizeXL` | `.spectrum-UIIcon-CornerTriangle300` | - - ### Include markup for hold icon before workflow icon - Because of the way padding is calculated, the hold icon must be placed before the workflow icon. - - ### Remove focus-ring class - We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. -examples: - - id: actionbutton-sizing - name: Sizing - markup: | -
-
-

XS

- -
- - - - - - - -
-
-
-

S

- -
- - - - - - - -
-
-
-

M (default)

- -
- - - - - - - -
-
- -
-

L

- -
- - - - - - - -
-
- -
-

XL

- -
- - - - - - - -
-
-
- - - id: actionbutton-standard - name: Standard - markup: | -
-
-

Default

- -
- - - - - - - -
-
-
-

Selected

- -
- - - - - - - -
-
-
-

Disabled

- -
- - - - - - - -
-
-
-

Selected + Disabled

- -
- - - - - - - -
-
-
- - - id: actionbutton-quiet - name: Quiet - description: The Quiet Action Button should be used where you previously used the [deprecated Tool component](tool.html). - markup: | -
-
-

Default

- -
- - - - - - - -
-
-
-

Selected

- -
- - - - - - - -
-
-
-

Disabled

- -
- - - - - - - -
-
-
-

Selected + Disabled

- -
- - - - - - - -
-
-
- - - id: actionbutton-emphasized - name: Emphasized - markup: | -
-
-

Default

- -
- - - - - - - -
-
-
-

Selected

- -
- - - - - - - -
-
-
-

Disabled

- -
- - - - - - - -
-
-
-

Selected + Disabled

- -
- - - - - - - -
-
-
- - - id: actionbutton-emphasized-quiet - name: Emphasized (quiet) - markup: | -
-
-

Default

- -
- - - - - - - -
-
-
-

Selected

- -
- - - - - - - -
-
-
-

Disabled

- -
- - - - - - - -
-
-
-

Selected + Disabled

- -
- - - - - - - -
-
-
- - - id: actionbutton-staticwhite - name: Static White - markup: | -
-
-
-

Default

- -
- - - - - - - -
-
-
-

Selected

- -
- - - - - - - -
-
-
-

Disabled

- -
- - - - - - - -
-
-
-

Selected + Disabled

- -
- - - - - - - -
-
-
-
- - - id: actionbutton-staticblack - name: Static Black - markup: | -
-
-
-

Default

- -
- - - - - - - -
-
-
-

Selected

- -
- - - - - - - -
-
-
-

Disabled

- -
- - - - - - - -
-
-
-

Selected + Disabled

- -
- - - - - - - -
-
-
-
- - - id: actionbutton-staticwhite-quiet - name: Static White (quiet) - markup: | -
-
-
-

Default

- -
- - - - - - - -
-
-
-

Selected

- -
- - - - - - - -
-
-
-

Disabled

- -
- - - - - - - -
-
-
-

Selected + Disabled

- -
- - - - - - - -
-
-
-
- - - id: actionbutton-staticblack-quiet - name: Static Black (quiet) - markup: | -
-
-
-

Default

- -
- - - - - - - -
-
-
-

Selected

- -
- - - - - - - -
-
-
-

Disabled

- -
- - - - - - - -
-
-
-

Selected + Disabled

- -
- - - - - - - -
-
-
-
diff --git a/components/actiongroup/metadata/actiongroup.yml b/components/actiongroup/metadata/actiongroup.yml deleted file mode 100644 index 46112eb386f..00000000000 --- a/components/actiongroup/metadata/actiongroup.yml +++ /dev/null @@ -1,456 +0,0 @@ -name: Action group -SpectrumSiteSlug: https://spectrum.adobe.com/page/action-group/ -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration Guide - description: | - ### New Action Button markup - Action Button requires `.spectrum-ActionButton-icon` class on icons nested inside of Action Button. - - ### Change workflow icon size to medium - Replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`. - - ### Remove focus-ring class - We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. -examples: - - id: actiongroup-horizontal - name: Horizontal - markup: | -
- - - -
- - - id: actiongroup-horizontal-icon-only - name: Horizontal (icon-only) - markup: | -
- - - -
- - - id: actiongroup-quiet-icon-only - name: Horizontal (quiet, icon-only) - markup: | -
- - - -
- - - id: actiongroup-horizontal-compact - name: Horizontal (compact) - markup: | -
- - - -
- - - id: actiongroup-horizontal-compact-icon-only - name: Horizontal (compact, icon-only) - markup: | -
- - - -
- - - id: actiongroup-horizontal-compact-quiet-icon-only - name: Horizontal (compact, quiet, icon-only) - markup: | -
- - - -
- - - id: actiongroup-vertical - name: Vertical - markup: | -
- - - -
- - - id: actiongroup-vertical-icon-only - name: Vertical (icon-only) - markup: | -
- - - -
- - - id: actiongroup-vertical-quiet-icon-only - name: Vertical (icon-only, quiet) - markup: | -
- - - -
- - - id: actiongroup-vertical-compact - name: Vertical (compact) - markup: | -
- - - -
- - - id: actiongroup-vertical-compact-icon-only - name: Vertical (compact, icon-only) - markup: | -
- - - -
- - - id: actiongroup-vertical-compact-quiet-icon-only - name: Vertical (icon-only, compact, quiet) - markup: | -
- - - -
- - - id: actiongroup-justified - name: Justified - markup: | -
- - -
- - - id: actiongroup-justified-icon-only - name: Justified (icon-only) - markup: | -
- - - -
- - - id: actiongroup-justified-compact-icon-only - name: Justified (compact, icon-only) - markup: | -
- - - -
- - - id: actiongroup-sizing-horizontal - name: Horizontal Sizing - markup: | -
-
-

XS

-
- - - -
-
-
-

S

-
- - - -
-
-
-

M

-
- - - -
-
-
-

L

-
- - - -
-
-
-

XL

-
- - - -
-
-
- - - id: actiongroup-sizing-vertical - name: Vertical Sizing - markup: | -
-
-

XS

-
- - - -
-
-
-

S

-
- - - -
-
-
-

M

-
- - - -
-
-
-

L

-
- - - -
-
-
-

XL

-
- - - -
-
-
diff --git a/components/actionmenu/metadata/actionmenu.yml b/components/actionmenu/metadata/actionmenu.yml deleted file mode 100644 index d8832196366..00000000000 --- a/components/actionmenu/metadata/actionmenu.yml +++ /dev/null @@ -1,73 +0,0 @@ -name: Action menu -description: Simply an action button with a Popover. Note that the `is-selected` class should be applied to the button when the menu is open. Also note the accessibility roles are different for an action menu vs a normal menu. -sections: - - name: Migration Guide - description: | - ### New Action Button markup - Action Button requires `.spectrum-ActionButton-icon` class on icons nested inside of Action Button. - - ### Change workflow icon size to medium - Replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`. -examples: - - id: actionmenu - name: Standard - markup: | - -
- -
- -
- -
- - -
- -
- -
- -
- - diff --git a/components/alertbanner/metadata/alertbanner.yml b/components/alertbanner/metadata/alertbanner.yml deleted file mode 100644 index c138da19e70..00000000000 --- a/components/alertbanner/metadata/alertbanner.yml +++ /dev/null @@ -1,112 +0,0 @@ -name: Alert banner -description: Alert banners show pressing and high-signal messages, such as system alerts. They're meant to be noticed and prompt users to take action. -examples: - - id: alertbanner - name: Neutral - description: Standard Alert Banners - markup: | -
-
-
-

Your trial has expired

-
-
-
-
- -
-
-
- -
-
-
-

Your trial has expired

-
- -
-
-
- -
-
-
- -
-
-
-

Your trial has expired. Please purchase to continue. Your work has been saved and is ready for you to open again once you have purchased the software.

-
- -
-
-
- -
-
- - id: alertbanner - name: Informative - description: Informative Alert Banners - markup: | -
-
-
- -

Your trial will expire in 3 days

-
- -
-
-
- -
-
- - id: alertbanner - name: Negative - description: Negative Alert Banners - markup: | -
-
-
- -

Connection interupted. Check your network to continue.

-
- -
-
-
- -
-
diff --git a/components/alertdialog/metadata/alertdialog.yml b/components/alertdialog/metadata/alertdialog.yml deleted file mode 100644 index 72a8337d7c7..00000000000 --- a/components/alertdialog/metadata/alertdialog.yml +++ /dev/null @@ -1,202 +0,0 @@ -name: Alert dialog -SpectrumSiteSlug: https://spectrum.adobe.com/page/alertdialog/ -examples: - - id: alertdialog - name: Confirmation - description: This is the default variant for alert dialogs. Use a confirmation variant for asking a user to confirm a choice. - demoClassName: spectrum-CSSExample-example--overlay - markup: | - -
-
- -
-
- - id: alertdialog-information - name: Information - description: Information alert dialogs communicate important information that a user needs to acknowledge. Before using this kind of alert dialog, make sure it's the appropriate communication channel for the message instead of a toast or a more lightweight messaging option. - demoClassName: spectrum-CSSExample-example--overlay - markup: | - - -
-
- -
-
- - id: alertdialog-warning - name: Warning - description: Warning alert dialogs communicate important information to users in relation to an issue that needs to be acknowledged, but does not block the user from moving forward. - demoClassName: spectrum-CSSExample-example--overlay - markup: | - - -
-
- -
-
- - id: alertdialog-error - name: Error - description: Error alert dialogs communicate critical information about an issue that a user needs to acknowledge. - demoClassName: spectrum-CSSExample-example--overlay - markup: | - - -
-
- -
-
- - id: alertdialog-destructive - name: Destructive - description: Destructive alert dialogs are for when a user needs to confirm an action that will impact their data or experience in a potentially negative way, such as deleting files or contacts. - demoClassName: spectrum-CSSExample-example--overlay - markup: | - - -
-
- -
-
- - id: alertdialog-secondary-button - name: Secondary Button - description: An alert dialog can have a total of 3 buttons if the secondary outline button label is defined. - demoClassName: spectrum-CSSExample-example--overlay - markup: | - - -
-
- -
-
- - id: alertdialog-scroll - name: Scroll - demoClassName: spectrum-CSSExample-example--overlay - markup: | - - -
-
- -
-
diff --git a/components/asset/metadata/asset.yml b/components/asset/metadata/asset.yml deleted file mode 100644 index a52d54c9980..00000000000 --- a/components/asset/metadata/asset.yml +++ /dev/null @@ -1,26 +0,0 @@ -name: Asset -examples: - - id: asset - name: Image - markup: | -
- -
- - id: asset - name: File - markup: | -
- - - - -
- - id: asset - name: Folder - markup: | -
- - - - -
diff --git a/components/assetcard/metadata/assetcard.yml b/components/assetcard/metadata/assetcard.yml deleted file mode 100644 index a146a0e0fe2..00000000000 --- a/components/assetcard/metadata/assetcard.yml +++ /dev/null @@ -1,215 +0,0 @@ -name: Asset card -SpectrumSiteSlug: https://spectrum.adobe.com/page/cards/ -description: | - - Set the `--spectrum-assetcard-asset-size` custom property to the size you want to display the asset as -sections: - - name: Migration Guide - description: | - ### Remove focus-ring class - We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. -examples: - - id: assetcard-portrait - name: Portrait - markup: | -
-
- assetcard example image -
-
-
-
Card Title
-
-
-
- Image -
-
-
- - - - - -
-
-
- - - id: assetcard-landscape - name: Landscape - markup: | -
-
- assetcard example image in landscape -
-
-
-
Card Title
-
-
-
- Image -
-
-
- - - - - -
-
-
- - - id: assetcard-square - name: Square - markup: | -
-
- assetcard example image -
-
-
-
Card Title
-
-
-
- Image -
-
-
- - - - - -
-
-
- - - id: assetcard-optional - name: Optional content - description: | - The `.spectrum-AssetCard-content` and `.spectrum-AssetCard-headerContent` elements are optional. - markup: | -
-
- assetcard example image -
-
-
-
MVI_0123.mp4
-
39:02
-
-
-
- - - - - -
-
-
- - - id: assetcard-highlight - name: Highlight Selection - markup: | -
-
- assetcard example image -
-
-
-
Card Title
-
-
-
- Image -
-
- - - id: assetcard-checkbox - name: Checkbox Selection - markup: | -
-
- assetcard example image -
-
-
-
Card Title
-
-
-
- Image -
-
-
- - - - - -
-
-
- - - id: assetcard-ordered - name: Ordered Selection - markup: | -
-
- assetcard example image -
-
-
-
Card Title
-
-
-
- Image -
-
-
1
-
-
- - - id: assetcard-ordered - name: Drop Target - markup: | -
-
- assetcard example image -
-
-
-
Card Title
-
-
-
- Image -
-
-
1
-
-
diff --git a/components/assetlist/metadata/assetlist.yml b/components/assetlist/metadata/assetlist.yml deleted file mode 100644 index 39d72733122..00000000000 --- a/components/assetlist/metadata/assetlist.yml +++ /dev/null @@ -1,81 +0,0 @@ -id: asset-list -name: Asset list -description: "A selectable list of Assets, often used inside of Miller Columns." -examples: - - id: asset-list - name: Standard - markup: | - diff --git a/components/avatar/metadata/avatar.yml b/components/avatar/metadata/avatar.yml deleted file mode 100644 index e3d62fded37..00000000000 --- a/components/avatar/metadata/avatar.yml +++ /dev/null @@ -1,116 +0,0 @@ -name: Avatar -status: Verified -description: | - An image representing a user. - - An avatar image is wrapped in a link that uses the `.spectrum-Avatar-link` - class by default, however, an avatar may also be used without a link. - When disabled the avatar should only be used without a link. -SpectrumSiteSlug: https://spectrum.adobe.com/page/avatar/ -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration Guide - description: | - ### A div wrapper is required for avatar - ``` -
- Avatar -
- ``` - ### Sizes added to `avatar`. - A second class has to be added to `spectrum-Avatar` to declare which size to use. The available size classes are: `spectrum-Avatar--size50`, `spectrum-Avatar--size75`, `spectrum-Avatar--size100`, `spectrum-Avatar--size200`, `spectrum-Avatar--size300`, `spectrum-Avatar--size400`, `spectrum-Avatar--size500`, `spectrum-Avatar--size600`, and `spectrum-Avatar--size700`. -examples: - - id: avatar - name: Standard - markup: | -
-
-

50

-
- - Avatar - -
-
-
-

75

-
- - Avatar - -
-
-
-

100 (default)

-
- - Avatar - -
-
-
-

200

-
- - Avatar - -
-
-
-

300

-
- - Avatar - -
-
-
-

400

-
- - Avatar - -
-
-
-

500

-
- - Avatar - -
-
-
-

600

-
- - Avatar - -
-
-
-

700

-
- - Avatar - -
-
-
- - - id: avatar-no-link - name: No Link - markup: | -
-
-

700

-
- Avatar -
-
- Disabled Avatar -
-
-
diff --git a/components/badge/metadata/badge.yml b/components/badge/metadata/badge.yml deleted file mode 100644 index d60ec93ef8d..00000000000 --- a/components/badge/metadata/badge.yml +++ /dev/null @@ -1,256 +0,0 @@ -name: Badge -SpectrumSiteSlug: https://spectrum.adobe.com/page/badge/ -description: | - - Badge may include a label with no icon, an icon with no label, or an icon with a label - - Badge t-shirt sizes correspond to icon sizes - - Fixed positioning impacts the border radius of the badge component - -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration Guide - description: | - ### Badge now includes icon and label elements - - Label and icon elements must be nested inside a parent container of class `.spectrum-Badge` in order to achieve the correct layout and wrapping behavior. - - Layout of Badge is applied with a display of inline-flex, allowing badge to display as inline while the child elements for the label and icon utilize flexbox for layout. - - ### Badge now includes fixed positioning - - This document represents the border radius style which applies to each position. - - border radius is 0 along the fixed edge of the component. - - The actual component position is not represented in this document. - -examples: - - id: badge - name: Standard - markup: | -
-
Neutral
-
- -
-
Accent
-
- -
-
Informative
-
- -
-
Positive
-
- -
-
Negative
-
- -
-
Notice
-
- - - id: badge-non-semantic - name: Non-Semantic - markup: | -
-
Gray
-
- -
-
Red
-
- -
-
Orange
-
- -
-
Yellow
-
- -
-
Chartreuse
-
- -
-
Celery
-
- -
-
Green
-
- -
-
Seafoam
-
- -
-
Cyan
-
- -
-
Blue
-
- -
-
Indigo
-
- -
-
Purple
-
- -
-
Fuchsia
-
- -
-
Magenta
-
- - - id: badge-sizing - name: Sizing - markup: | -

Label Only

-
-
-
Small
-
- -
-
Medium
-
- -
-
Large
-
- -
-
Extra Large
-
- -
-
-
-
- -

Icon Only

-
-
- -
- -
- -
- -
- -
- -
- -
- -
-
-
-
- -

Icon with Label

-
-
- -
Small
-
- -
- -
Medium
-
- -
- -
Large
-
- -
- -
Extra Large
-
- - - id: badge-text-wrapping - name: Text Wrapping - markup: | -
- -
Label Text Wrapping Behavior
-
- - - id: badge-fixed-edge - name: Fixed Edge - markup: | - -
-
-

Fixed Inline Start

- -
- -
Label Text
-
-
- -
-

Fixed Inline End

- -
- -
Label Text
-
-
- -
-

Fixed Block Start

- -
- -
Label Text
-
-
- -
-

Fixed Block End

- -
- -
Label Text
-
-
- -
diff --git a/components/breadcrumb/metadata/breadcrumb.yml b/components/breadcrumb/metadata/breadcrumb.yml deleted file mode 100644 index aac5cae9412..00000000000 --- a/components/breadcrumb/metadata/breadcrumb.yml +++ /dev/null @@ -1,379 +0,0 @@ -name: Breadcrumbs -SpectrumSiteSlug: https://spectrum.adobe.com/page/breadcrumbs/ -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration Guide - description: | - ### New Action Button markup - Action Button requires `.spectrum-ActionButton-icon` class on icons nested inside of Action Button. - - ### Remove focus-ring class - We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. -examples: - - id: breadcrumb - name: Standard - status: Verified - markup: | - - - id: breadcrumb-dragged - name: Dragged - status: Verified - markup: | - - - id: breadcrumb-nested - name: Nested - status: Verified - markup: | - - - id: breadcrumb-nested-root - name: Nested (root visible) - status: Verified - markup: | - - - id: breadcrumb-multiline - name: Multiline - status: Verified - markup: | - - - id: breadcrumb-multiline-dragged - name: Multiline (dragged) - status: Verified - markup: | - - - id: breadcrumb-multiline-nested - name: Multiline Nested - status: Verified - markup: | - - - id: breadcrumb-multiline-nested-root - name: Multiline Nested (root visible) - status: Verified - markup: | - - - id: breadcrumb-compact - name: Compact - status: Verified - markup: | - - - id: breadcrumb-compact-nested - name: Compact Nested - status: Verified - markup: | - - - id: breadcrumb-compact-nested-root - name: Compact Nested (root visible) - status: Verified - markup: | - - - id: breadcrumb-disabled - name: Disabled - status: Verified - markup: | - - diff --git a/components/button/metadata/button-accent.yml b/components/button/metadata/button-accent.yml deleted file mode 100644 index 8d3be60b926..00000000000 --- a/components/button/metadata/button-accent.yml +++ /dev/null @@ -1,260 +0,0 @@ -name: Button - accent -status: Verified -description: The call to action button communicates strong emphasis and is reserved for encouraging critical actions. -SpectrumSiteSlug: https://spectrum.adobe.com/page/button/#Call-to-action-variant -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration Guide - description: | - ### Fill or Outline class required - All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class. - - ### CTA replaced by Accent with Fill - Replace all `.spectrum-Button--cta` with `.spectrum-Button--accent .spectrum-Button--fill`. - - ### Icon Only - Add the `.spectrum-Button--iconOnly` class to apply the correct styling when an icon is used without a label. - Provide an `aria-label` on the button itself when using this variant for accessibility. - - ### T-shirt sizing - Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class. - - ### Change workflow icon size - - Previously, all Buttons used `.spectrum-Icon--sizeS`. This has changed: - - | Button classname | Workflow icon classname | - | -------------------------- | --------------------------------- | - | `.spectrum-Button--sizeS` | `.spectrum-Icon--sizeS` | - | `.spectrum-Button--sizeM` | `.spectrum-Icon--sizeM` | - | `.spectrum-Button--sizeL` | `.spectrum-Icon--sizeL` | - | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL` | - - ### Remove focus-ring class - We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. -examples: - - id: button-accent - name: Sizing - markup: | -
-
-

S

- - - - - - -
-
-

M (default)

- - - - - - -
- -
-

L

- - - - - - -
- -
-

XL

- - - - - - -
-
- - - id: button-accent-disabled - name: Disabled - markup: | -
-
- - - - - -
-
- - - id: button-accent-outline - name: Outline - markup: | -
-
-

S

- - - - - - -
-
-

M (default)

- - - - - - -
- -
-

L

- - - - - - -
- -
-

XL

- - - - - - -
-
- - - id: button-accent-outline-disabled - name: Outline- Disabled - markup: | -
-
- - - - - -
-
diff --git a/components/button/metadata/button-negative.yml b/components/button/metadata/button-negative.yml deleted file mode 100644 index 9acb42c7e1f..00000000000 --- a/components/button/metadata/button-negative.yml +++ /dev/null @@ -1,255 +0,0 @@ -name: Button - negative -status: Verified -description: The negative button is for high emphasis of negative or destructive actions. -SpectrumSiteSlug: https://spectrum.adobe.com/page/button/#Negative -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration Guide - description: | - ### Fill or Outline class required - All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class. - - ### Negative replaced by Negative with Outline - Replace all `.spectrum-Button--negative` with `.spectrum-Button--negative .spectrum-Button--outline`. - - ### Negative Quiet replaced by Negative with Outline - Replace all `.spectrum-Button--negative .spectrum-Button--quiet` with `.spectrum-Button--negative .spectrum-Button--outline`. - - ### Icon Only - Add the `.spectrum-Button--iconOnly` class to apply the correct styling when an icon is used without a label. - Provide an `aria-label` on the button itself when using this variant for accessibility. - - ### T-shirt sizing - Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class. - - ### Change workflow icon size - - Previously, all Buttons used `.spectrum-Icon--sizeS`. This has changed: - - | Button classname | Workflow icon classname | - | -------------------------- | --------------------------------- | - | `.spectrum-Button--sizeS` | `.spectrum-Icon--sizeS` | - | `.spectrum-Button--sizeM` | `.spectrum-Icon--sizeM` | - | `.spectrum-Button--sizeL` | `.spectrum-Icon--sizeL` | - | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL` | - - ### Remove focus-ring class - We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. -examples: - - id: button-negative - name: Sizing - markup: | -
-
-

S

- - - - - - -
-
-

M (default)

- - - - - - -
- -
-

L

- - - - - - -
- -
-

XL

- - - - - - -
-
- - - id: button-negative-disabled - name: Disabled - markup: | - - - - - - - - id: button-negative-outline - name: Outline - markup: | -
-
-

S

- - - - - - -
-
-

M (default)

- - - - - - -
- -
-

L

- - - - - - -
- -
-

XL

- - - - - - -
-
- - - id: button-negative-outline-disabled - name: Outline - Disabled - markup: | - - - - - diff --git a/components/button/metadata/button-pending.yml b/components/button/metadata/button-pending.yml deleted file mode 100644 index 1c9fd32a4ec..00000000000 --- a/components/button/metadata/button-pending.yml +++ /dev/null @@ -1,1067 +0,0 @@ -name: Button - pending -status: Verified -description: The pending button is for indicating that a quick progress action is taking place. In this case, the label and optional icon disappear and a progress circle appears. The progress circle always shows an indeterminate progress. We recommend the use of the `.is-pending` class on the component's parent container, but there is also an option to use an attribute of `pending` instead. Buttons should have the `disabled` attribute when the pending state is applied. -SpectrumSiteSlug: https://spectrum.adobe.com/page/button/#Pending -examples: - - id: button-pending - name: Default (accent, negative, primary, and secondary) - markup: | -
-
-

S

- - - - - -
- -
-

M (default)

- - - - - -
- -
-

L

- - - - - -
- -
-

XL

- - - - - -
-
- - id: button-pending-outline - name: Outline (accent, negative, primary, and secondary) - markup: | -
-
-

S

- - - - - -
- -
-

M (default)

- - - - - -
- -
-

L

- - - - - -
- -
-

XL

- - - - - -
-
- - id: button-pending-static - name: Static white - description: Pending button state is only supported for static white, not for static black. - markup: | -
-
-
-

S

- - - - - -
- -
-

M (default)

- - - - - -
- -
-

L

- - - - - -
- -
-

XL

- - - - - -
-
-
- - id: button-pending-static-outline - name: Outline on Static White - description: Pending button state is only supported for static white, not for static black. - markup: | -
-
-
-

S

- - - - - -
- -
-

M (default)

- - - - - -
- -
-

L

- - - - - -
- -
-

XL

- - - - - -
-
-
diff --git a/components/button/metadata/button-primary.yml b/components/button/metadata/button-primary.yml deleted file mode 100644 index e7bb7f449ec..00000000000 --- a/components/button/metadata/button-primary.yml +++ /dev/null @@ -1,255 +0,0 @@ -name: Button - primary -status: Verified -description: The primary button is used for medium emphasis. -SpectrumSiteSlug: https://spectrum.adobe.com/page/button/#Primary -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration Guide - description: | - ### Fill or Outline class required - All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class. - - ### Primary replaced by Primary with Outline - Replace all `.spectrum-Button--primary` with `.spectrum-Button--primary .spectrum-Button--outline`. - - ### Primary Quiet replaced by Secondary with Outline - Replace all `.spectrum-Button--primary .spectrum-Button--quiet` with `.spectrum-Button--secondary .spectrum-Button--outline`. - - ### Icon Only - Add the `.spectrum-Button--iconOnly` class to apply the correct styling when an icon is used without a label. - Provide an `aria-label` on the button itself when using this variant for accessibility. - - ### T-shirt sizing - Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class. - - ### Change workflow icon size - - Previously, all Buttons used `.spectrum-Icon--sizeS`. This has changed: - - | Button classname | Workflow icon classname | - | -------------------------- | --------------------------------- | - | `.spectrum-Button--sizeS` | `.spectrum-Icon--sizeS` | - | `.spectrum-Button--sizeM` | `.spectrum-Icon--sizeM` | - | `.spectrum-Button--sizeL` | `.spectrum-Icon--sizeL` | - | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL` | - - ### Remove focus-ring class - We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. -examples: - - id: button-primary - name: Sizing - markup: | -
-
-

S

- - - - - - -
-
-

M (default)

- - - - - - -
- -
-

L

- - - - - - -
- -
-

XL

- - - - - - -
-
- - - id: button-primary-disabled - name: Disabled - markup: | - - - - - - - - id: button-primary-outline - name: Outline - markup: | -
-
-

S

- - - - - - -
-
-

M (default)

- - - - - - -
- -
-

L

- - - - - - -
- -
-

XL

- - - - - - -
-
- - - id: button-primary-outline-disabled - name: Outline - Disabled - markup: | - - - - - diff --git a/components/button/metadata/button-secondary.yml b/components/button/metadata/button-secondary.yml deleted file mode 100644 index 7b86a380ffc..00000000000 --- a/components/button/metadata/button-secondary.yml +++ /dev/null @@ -1,255 +0,0 @@ -name: Button - secondary -status: Verified -description: The secondary button is for low emphasis. -SpectrumSiteSlug: https://spectrum.adobe.com/page/button/#Secondary -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration Guide - description: | - ### Fill or Outline class required - All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class. - - ### Secondary replaced by Secondary with Outline - Replace all `.spectrum-Button--secondary` with `.spectrum-Button--secondary .spectrum-Button--outline`. - - ### Secondary Quiet replaced by Secondary with Outline - Replace all `.spectrum-Button--secondary .spectrum-Button--quiet` with `.spectrum-Button--secondary .spectrum-Button--outline`. - - ### Icon Only - Add the `.spectrum-Button--iconOnly` class to apply the correct styling when an icon is used without a label. - Provide an `aria-label` on the button itself when using this variant for accessibility. - - ### T-shirt sizing - Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class. - - ### Change workflow icon size - - Previously, all Buttons used `.spectrum-Icon--sizeS`. This has changed: - - | Button classname | Workflow icon classname | - | -------------------------- | --------------------------------- | - | `.spectrum-Button--sizeS` | `.spectrum-Icon--sizeS` | - | `.spectrum-Button--sizeM` | `.spectrum-Icon--sizeM` | - | `.spectrum-Button--sizeL` | `.spectrum-Icon--sizeL` | - | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL` | - - ### Remove focus-ring class - We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. -examples: - - id: button-secondary - name: Sizing - markup: | -
-
-

S

- - - - - - -
-
-

M (default)

- - - - - - -
- -
-

L

- - - - - - -
- -
-

XL

- - - - - - -
-
- - - id: button-secondary - name: Disabled - markup: | - - - - - - - - id: button-secondary - name: Outline - markup: | -
-
-

S

- - - - - - -
-
-

M (default)

- - - - - - -
- -
-

L

- - - - - - -
- -
-

XL

- - - - - - -
-
- - - id: button-secondary-outline-disabled - name: Outline - Disabled - markup: | - - - - - diff --git a/components/button/metadata/button-staticcolor.yml b/components/button/metadata/button-staticcolor.yml deleted file mode 100644 index ae8792424af..00000000000 --- a/components/button/metadata/button-staticcolor.yml +++ /dev/null @@ -1,575 +0,0 @@ -name: Button - static color -status: Verified -description: "When a button needs to be placed on top of a colored background or a visual, use the over background button. In order to implement this button, you must set the CSS color property of a parent element to the same value as the background the button is placed against." -SpectrumSiteSlug: https://spectrum.adobe.com/page/button/#Over-background -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration Guide - description: | - ### Fill or Outline class required - All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class. - - ### Over background replaced by StaticWhite with Outline - Replace all `.spectrum-Button--overBackground` with `.spectrum-Button--staticWhite .spectrum-Button--outline`. - - ### Over background Quiet replaced by StaticWhite with Outline - Replace all `.spectrum-Button--overBackground .spectrum-Button--quiet` with `.spectrum-Button--staticWhite .spectrum-Button--outline`. - - ### Icon Only - Add the `.spectrum-Button--iconOnly` class to apply the correct styling when an icon is used without a label. - Provide an `aria-label` on the button itself when using this variant for accessibility. - - ### T-shirt sizing - Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class. - - ### Change workflow icon size - - Previously, all Buttons used `.spectrum-Icon--sizeS`. This has changed: - - | Button classname | Workflow icon classname | - | -------------------------- | --------------------------------- | - | `.spectrum-Button--sizeS` | `.spectrum-Icon--sizeS` | - | `.spectrum-Button--sizeM` | `.spectrum-Icon--sizeM` | - | `.spectrum-Button--sizeL` | `.spectrum-Icon--sizeL` | - | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL` | - - ### Remove focus-ring class - We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. -examples: - - id: button-staticcolor - name: Static White - markup: | -
-
-
-

S

- - - - - - -
-
-

M (default)

- - - - - - -
- -
-

L

- - - - - - -
- -
-

XL

- - - - - - -
-
-
- - - id: button-staticcolor - name: Static White - Disabled - markup: | -
- - - - - -
- - - id: button-staticcolor - name: Static White - Secondary - markup: | -
- - - - - -
- - - id: button-staticcolor - name: Static Black - markup: | -
-
-
-

S

- - - - - - -
-
-

M (default)

- - - - - - -
- -
-

L

- - - - - - -
- -
-

XL

- - - - - - -
-
-
- - - id: button-staticcolor - name: Static Black - Disabled - markup: | -
- - - - - -
- - - id: button-staticcolor - name: Static Black - Secondary - markup: | -
- - - - - -
- - - id: button-staticcolor - name: Static White - Outline - markup: | -
-
-
-

S

- - - - - - -
-
-

M (default)

- - - - - - -
- -
-

L

- - - - - - -
- -
-

XL

- - - - - - -
-
-
- - - id: button-staticcolor - name: Static White - Outline, Disabled - markup: | -
- - - - - -
- - - id: button-staticcolor - name: Static White - Outline, Secondary - markup: | -
- - - - - -
- - - id: button-staticcolor - name: Static Black - Outline - markup: | -
-
-
-

S

- - - - - - -
-
-

M (default)

- - - - - - -
- -
-

L

- - - - - - -
- -
-

XL

- - - - - - -
-
-
- - - id: button-staticcolor - name: Static Black - Outline, Disabled - markup: | -
- - - - - -
- - - id: button-staticcolor - name: Static Black - Outline, Secondary - markup: | -
- - - - - -
diff --git a/components/buttongroup/metadata/buttongroup.yml b/components/buttongroup/metadata/buttongroup.yml deleted file mode 100644 index f35ccb05ec5..00000000000 --- a/components/buttongroup/metadata/buttongroup.yml +++ /dev/null @@ -1,74 +0,0 @@ -name: Button group -SpectrumSiteSlug: https://spectrum.adobe.com/page/button/ -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. -examples: - - id: buttongroup-horizontal - name: Horizontal - description: | - Default spacing for Medium, Large, and Extra Large t-shirt sizes. - markup: | -
- - - -
- - - id: buttongroup-horizontal-small - name: Horizontal - Small - description: | - Spacing for the Small t-shirt size. - markup: | -
- - - -
- - - id: buttongroup-vertical - name: Vertical - description: | - Default spacing for Medium, Large, and Extra Large t-shirt sizes. - markup: | -
- - - -
- - - id: buttongroup-vertical-small - name: Vertical - Small - description: | - Spacing for the Small t-shirt size. - markup: | -
- - - -
diff --git a/components/calendar/metadata/calendar.yml b/components/calendar/metadata/calendar.yml deleted file mode 100644 index 06611f7c127..00000000000 --- a/components/calendar/metadata/calendar.yml +++ /dev/null @@ -1,458 +0,0 @@ -name: Calendar -sections: - - name: Migration Guide - description: | - ### Previous/Next Icon size change - ChevronLeftLarge/ChevronRightLarge was changed to ChevronLeftMedium/ChevronRightMedium. -examples: - - id: calendar - name: Standard - markup: | -
-
-
August 2017
- - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - id: calendar - name: Standard with calendar day of the week abbreviations - markup: | -
-
-
August 2017
- - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - id: calendar - name: Disabled - markup: | -
-
-
August 2017
- - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - id: calendar - name: Focused - markup: | -
-
-
August 2017
- - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - id: calendar - name: Range Selection - description: | - A calendar with a range selected. - `.is-selection-start` goes on the first day in the selection, and `.is-range-start` goes on the first day of each week or month in the middle of a selection (but not the first day of the selection). - `.is-selection-end` goes on the last day of the selection, and `.is-range-end` goes on the last day of each week or month in the middle of the selection (but not on the last day of the selection). - markup: | -
-
-
August 2017
- - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
diff --git a/components/card/metadata/card-asset.yml b/components/card/metadata/card-asset.yml deleted file mode 100644 index 39137eeedca..00000000000 --- a/components/card/metadata/card-asset.yml +++ /dev/null @@ -1,47 +0,0 @@ -name: Card - asset preview -description: A standard cards with a full-sized asset preview. -SpectrumSiteSlug: https://spectrum.adobe.com/page/cards/ -sections: - - name: Migration Guide - description: | - ### Use Spectrum Heading for title and Spectrum Detail for subtitle - To make the card component more flexible, products can have more fine control over the typography by using the Heading and Detail components with their corresponding sizes. To be more consistent with previous card designs you can use the following: - * Add the `spectrum-Heading` and `spectrum-Heading--sizeXS` or `spectrum-Heading--sizeXXS` to the `spectrum-Card-title` element. - * Add the `spectrum-Detail` and `spectrum-Detail--sizeS` classes to `spectrum-Card-subtitle`. - ### Small Card deprecated - Card only has one size moving forward and the minimum width has been updated to allow for smaller card widths if needed. There is no longer a need for the `spectrum-Card--sizeM` class on this component. -examples: - - id: card-asset - name: Standard - markup: | -
-
-
-
- -
-
-
-
-
-
Card Title
-
-
-
jpg
-
-
-
-
- - - - - -
-
-
-
diff --git a/components/card/metadata/card-gallery.yml b/components/card/metadata/card-gallery.yml deleted file mode 100644 index 3fa7e8c9b99..00000000000 --- a/components/card/metadata/card-gallery.yml +++ /dev/null @@ -1,58 +0,0 @@ -name: Card - gallery -status: Beta -description: A gallery card for an image. -SpectrumSiteSlug: https://spectrum.adobe.com/page/cards/ -sections: - - name: Migration Guide - description: | - ### Change workflow icon size to medium - Please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`. - ### Use Spectrum Heading for title and Spectrum Detail for subtitle - To make the card component more flexible, products can have more fine control over the typography by using the Heading and Detail components with their corresponding sizes. To be more consistent with previous card designs you can use the following: - * Add the `spectrum-Heading` and `spectrum-Heading--sizeXS` or `spectrum-Heading--sizeXXS` to the `spectrum-Card-title` element. - * Add the `spectrum-Detail` and `spectrum-Detail--sizeS` classes to `spectrum-Card-subtitle`. - ### Small Card deprecated - Card only has one size moving forward and the minimum width has been updated to allow for smaller card widths if needed. There is no longer a need for the `spectrum-Card--sizeM` class on this component. -examples: - - id: card-gallery - name: Standard - markup: | -
-
-
-
- -
-
-
-
-
-
Name
-
jpg
-
10/15/18
-
-
- -
-
-
-
-
-
- - - - - -
-
-
-
diff --git a/components/card/metadata/card.yml b/components/card/metadata/card.yml deleted file mode 100644 index 93bfcaa50fd..00000000000 --- a/components/card/metadata/card.yml +++ /dev/null @@ -1,428 +0,0 @@ -name: Card -SpectrumSiteSlug: https://spectrum.adobe.com/page/cards/ -sections: - - name: Migration Guide - description: | - ### New Action Button markup - Action Button requires `.spectrum-ActionButton-icon` class on icons nested inside of Action Button. - - ### Change workflow icon size to medium - Please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`. - ### Use Spectrum Heading for title - To make the card component more flexible, products can have more fine control over the typography by using the Heading component with its corresponding sizes. To be more consistent with previous card designs you can use the following: - * Add the `spectrum-Heading` and `spectrum-Heading--sizeXS` or `spectrum-Heading--sizeXXS` to the `spectrum-Card-title` element. - ### Subtitle deprecated - For this first Card iteration, the `subtitle` option has been removed. - ### Small Card deprecated - Card only has one size moving forward and the minimum width has been updated to allow for smaller card widths if needed. There is no longer a need for the `spectrum-Card--sizeM` class on this component. -examples: - - id: card - name: Standard - description: A standard card with cover photo and footer. - markup: | -
-
-
-
-
-
Card Title
-
- -
-
-
-
Optional description; should be kept to one or two lines
-
-
-
- Footer -
-
-
- - - - - -
-
-
- - id: card-long-title - name: Standard (long title) - description: A standard card with a title that wraps - markup: | -
-
-
-
-
-
This is an exceptionally long card title
-
- -
-
-
-
Optional description; should be kept to one or two lines
-
-
-
- Footer -
-
-
- - - - - -
-
-
- - id: card-no-image - name: Standard (no image) - description: A standard card with no photo - markup: | -
-
-
-
Card Title
-
- -
-
-
-
Optional description; should be kept to one or two lines
-
-
-
-
- - - - - -
-
-
- - id: card-focused - name: Standard (focused) - markup: | -
-
-
-
-
-
-
-
Card Title
-
- -
-
-
-
Optional description; should be kept to one or two lines
-
-
-
- Footer -
-
-
- - - - - -
-
-
-
-
- - id: card-selected - name: Standard (selected) - markup: | -
-
-
-
-
-
-
-
Card Title
-
- -
-
-
-
Optional description; should be kept to one or two lines
-
-
-
- Footer -
-
-
- - - - - -
-
-
-
-
- - id: card-quiet - name: Quiet - description: A quiet card for an image. - markup: | -
-
-
-
- -
-
-
-
-
Name
-
- -
-
-
-
10/15/18
-
-
-
-
- - - - - -
-
-
-
- - id: card-quiet-selected - name: Quiet (selected) - markup: | -
-
-
-
- -
-
-
-
-
Name
-
- -
-
-
-
10/15/18
-
-
-
-
- - - - - -
-
-
-
- - id: card-quiet-focused - name: Quiet (focused) - markup: | -
-
-
-
- -
-
-
-
-
Name
-
- -
-
-
-
10/15/18
-
-
-
-
- - - - - -
-
-
-
- - id: card-quiet-file - name: Quiet (file) - description: A quiet card for a file asset. - markup: | -
-
-
-
- - - - -
-
-
-
-
FileName
-
-
-
PDF
-
-
-
-
- - - - - -
-
-
-
- - id: card-quiet-folder - name: Quiet (folder) - description: A quiet card for a folder asset. - markup: | -
-
-
-
- - - - -
-
-
-
-
FolderName
-
-
-
Folder
-
-
-
-
- - - - - -
-
-
-
- - id: card-horizontal - name: Horizontal - description: A card with a horizontal layout. - markup: | -
-
- -
-
-
-
FileName
-
-
-
PDF
-
-
-
diff --git a/components/checkbox/metadata/checkbox.yml b/components/checkbox/metadata/checkbox.yml deleted file mode 100644 index bb6268fa972..00000000000 --- a/components/checkbox/metadata/checkbox.yml +++ /dev/null @@ -1,617 +0,0 @@ -name: Checkbox -status: Verified -SpectrumSiteSlug: https://spectrum.adobe.com/page/checkbox/ -description: | - - Checkboxes allow users to select multiple items from a list of individual items, or mark one individual item as selected. - - Checkboxes should not be used on their own, they should always be used within a [FieldGroup](fieldgroup.html). - - Invalid checkboxes are indicated with an alert [HelpText](helptext.html) when included in a Fieldgroup. - -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration Guide - description: | - ### Quiet and emphasized - Spectrum has chosen the variant previously known as `quiet` to be the default and has added an `emphasized` variant with the same styles as the previous default. - If you were using the `quiet` variant, the `.spectrum-Checkbox--quiet` class is no longer required and can be removed. - If you need a switch to look like it did before this change, add `.spectrum-Checkbox--emphasized`. - ### T-shirt sizing - Checkbox now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-Checkbox--size*` class. - Using the classes `.spectrum-Checkbox .spectrum-Checkbox--sizeM` will get result in the previous default checkbox size. -examples: - - id: checkbox-default - name: Standard - markup: | -
-
-

Default

- - - -
- - - -
- - -
- -
-

Invalid

- - -
- - - -
- - -
- -
-

Disabled

- - - -
- - - -
- - -
- -
-

Read-only

- - - -
- - - -
- - -
-
- - - id: checkbox-emphasized - name: Emphasized - markup: | -
-
-

Default

- - - -
- - - -
- - -
- -
-

Invalid

- - -
- - - -
- - -
- -
-

Disabled

- - - -
- - - -
- - -
- -
-

Read-only

- - - -
- - - -
- - -
-
- - id: t-shirt-sizes - name: T-Shirt Sizes - markup: | -
-
-

S

- - - -
- - - -
- - - -
-
-

M (default)

- - - -
- - - -
- - - -
- -
-

L

- - - -
- - - -
- - - - - -
- -
-

XL

- - - -
- - - -
- - - -
-
- - id: checkbox-wrapping - name: Wrapping behavior - markup: | - diff --git a/components/clearbutton/metadata/clearbutton.yml b/components/clearbutton/metadata/clearbutton.yml deleted file mode 100644 index b97e778950c..00000000000 --- a/components/clearbutton/metadata/clearbutton.yml +++ /dev/null @@ -1,106 +0,0 @@ -name: Clear button -description: Used in search and tags. -sections: - - name: Migration Guide - description: | - ### New markup - In order to support Express, ClearButton has new markup that includes an inner `.spectrum-ClearButton-fill` element. - - ### T-shirt sizing - ClearButton now supports t-shirt sizing and requires that you specify the size of the clear button by adding a `.spectrum-ClearButton--size*` class. - - Also, use the correct icon size for cross icons: - - | T-shirt Size | Icon Size | - |--------------------------------|------------------------------| - | `spectrum-ClearButton--sizeS` | `spectrum-css-icon-Cross75` | - | `spectrum-ClearButton--sizeM` | `spectrum-css-icon-Cross100` | - | `spectrum-ClearButton--sizeL` | `spectrum-css-icon-Cross200` | - | `spectrum-ClearButton--sizeXL` | `spectrum-css-icon-Cross300` | - - ### Remove focus-ring class - We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. -examples: - - id: clearbutton - name: Sizing - markup: | -
-
-

S

- - -
-
-

M (default)

- - -
- -
-

L

- - -
- -
-

XL

- - -
-
- - id: clearbutton-disabled - name: Disabled - markup: | - - - id: clearbutton-quiet - name: Quiet - markup: | - - - id: clearbutton-overbackground - name: Overbackground - markup: | -
- -
diff --git a/components/closebutton/metadata/closebutton.yml b/components/closebutton/metadata/closebutton.yml deleted file mode 100644 index 26e2d624c45..00000000000 --- a/components/closebutton/metadata/closebutton.yml +++ /dev/null @@ -1,204 +0,0 @@ -name: Close button -SpectrumSiteSlug: https://spectrum.adobe.com/page/close-button/ -status: Verified -description: | - A button used to close or dismiss components. -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration Guide - description: | - ### Sizing - Close button supports different sized icons. By default, you should use the following icons: - - | Close button classname | UI icon classname | - | ------------------------------- | --------------------------- | - | `.spectrum-CloseButton--sizeS` | `.spectrum-UIIcon-Cross75` | - | `.spectrum-CloseButton--sizeM` | `.spectrum-UIIcon-Cross100` | - | `.spectrum-CloseButton--sizeL` | `.spectrum-UIIcon-Cross200` | - | `.spectrum-CloseButton--sizeXL` | `.spectrum-UIIcon-Cross300` | - - ### Remove focus-ring class - We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. -examples: - - id: close - name: Icon Size - Regular - markup: | -
-
-

S

- -
- -
-
-
-

M (default)

- -
- -
-
- -
-

L

- -
- -
-
- -
-

XL

- -
- -
-
-
- - id: closebutton-largeicon - name: Icon Size - Large - description: | - Close button supports different sized icons. For cases where you need large icons, you should use the following icons: - - | Close button classname | UI icon classname | - | ------------------------------- | --------------------------- | - | `.spectrum-CloseButton--sizeS` | `.spectrum-UIIcon-Cross200` | - | `.spectrum-CloseButton--sizeM` | `.spectrum-UIIcon-Cross300` | - | `.spectrum-CloseButton--sizeL` | `.spectrum-UIIcon-Cross400` | - | `.spectrum-CloseButton--sizeXL` | `.spectrum-UIIcon-Cross500` | - markup: | -
-
-

S

- -
- -
-
-
-

M (default)

- -
- -
-
- -
-

L

- -
- -
-
- -
-

XL

- -
- -
-
-
- - - id: closebutton-disabled - name: Disabled - markup: | - - - - id: closebutton-staticwhite - name: Static White - markup: | -
-
-
-

Default

- -
- -
-
-
-

Disabled

- -
- -
-
-
-
- - - id: closebutton-staticblack - name: Static Black - markup: | -
-
-
-

Default

- -
- -
-
-
-

Disabled

- -
- -
-
-
-
diff --git a/components/coachindicator/metadata/coachindicator.yml b/components/coachindicator/metadata/coachindicator.yml deleted file mode 100644 index 383b91c4fd7..00000000000 --- a/components/coachindicator/metadata/coachindicator.yml +++ /dev/null @@ -1,47 +0,0 @@ -name: Coach indicator -SpectrumSiteSlug: https://spectrum.adobe.com/page/coach-mark/ -sections: - - name: Migration Guide - description: | - - Coach Indicator is now a seperate component from Coach Mark -examples: - - id: coach-indicator - name: Standard - markup: | -
-
-
-
-
- -
-
-
-
-
- -
-
-
-
-
- - id: coach-indicator-quiet - name: Quiet - markup: | -
-
-
-
-
- -
-
-
-
-
- -
-
-
-
-
diff --git a/components/coachmark/metadata/coachmark.yml b/components/coachmark/metadata/coachmark.yml deleted file mode 100644 index 077941d0cf6..00000000000 --- a/components/coachmark/metadata/coachmark.yml +++ /dev/null @@ -1,211 +0,0 @@ -name: Coach mark -SpectrumSiteSlug: https://spectrum.adobe.com/page/coach-mark/ -sections: - - name: Migration Guide - description: | - - Coach Mark is now a seperate component from Coach Indicator -examples: - - id: coachmark - name: Standard - markup: | -
-
-
-
-
Try playing with a pixel brush
-
-
- Pixel brushes use pixels to create brush strokes, just like in other design and drawing tools. Start drawing, and zoom in to see the pixels in each stroke. -
-
-
2 of 8
-
- - - -
- -
- -
- -
-
-
-
- -
-
-
-
-
Try playing with a pixel brush
-
- - - - - -
-
- -
-
-
-
- Pixel brushes use pixels to create brush strokes, just like in other design and drawing tools. Start drawing, and zoom in to see the pixels in each stroke. -
-
-
2 of 8
-
- - - -
- -
- -
-
-
-
-
- - - id: coachmark - name: With Media - markup: | -
-
- -
-
- -
-
-
Try playing with a pixel brush
-
-
- Pixel brushes use pixels to create brush strokes, just like in other design and drawing tools. Start drawing, and zoom in to see the pixels in each stroke. -
- -
-
2 of 8
-
- - -
-
- -
-
-
-
-
- -
-
-
-
- -
-
-
Try playing with a pixel brush
-
- - - - - -
-
- -
-
-
-
- Pixel brushes use pixels to create brush strokes, just like in other design and drawing tools. Start drawing, and zoom in to see the pixels in each stroke. -
-
-
2 of 8
-
- - - -
- -
- -
-
-
-
-
diff --git a/components/colorarea/metadata/colorarea.yml b/components/colorarea/metadata/colorarea.yml deleted file mode 100644 index ae2e5ea9e5b..00000000000 --- a/components/colorarea/metadata/colorarea.yml +++ /dev/null @@ -1,65 +0,0 @@ -name: Color area -status: Verified -SpectrumSiteSlug: https://spectrum.adobe.com/page/color-area/ -description: | - - 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) -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration Guide - description: | - - canvas variant has been removed -examples: - - id: color-area - name: Standard - markup: | -
-
- -
-
- - - -
- - - -
- - - id: color-area - name: Disabled - markup: | -
-
- -
-
-
- - - -
- - - id: color-area - name: Custom Size - markup: | -
-
- -
-
- - - -
- - - -
diff --git a/components/colorhandle/metadata/colorhandle.yml b/components/colorhandle/metadata/colorhandle.yml deleted file mode 100644 index 1367e3caf31..00000000000 --- a/components/colorhandle/metadata/colorhandle.yml +++ /dev/null @@ -1,60 +0,0 @@ -name: Color handle -status: Verified -SpectrumSiteSlug: https://spectrum.adobe.com/page/color-area/ -description: | - - Set the `--spectrum-picked-color` custom property to the CSS color value you want to show - - Apply `.is-open` to `.spectrum-ColorLoupe` display the loupe -sections: - - name: Migration Guide - description: | - ### Remove focus-ring class - We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. -examples: - - id: color-area - name: Standard - demoClassName: spectrum-CSSExample-example--spacious - markup: | -
-
-
- - id: color-area - name: Disabled - demoClassName: spectrum-CSSExample-example--spacious - markup: | -
-
-
- - id: color-area - name: Open - demoClassName: spectrum-CSSExample-example--spacious - markup: | -
-
- - - - - - - - - - - - - - - - - - - - - - - -
diff --git a/components/colorloupe/index.css b/components/colorloupe/index.css index 2f243c42612..26cec28142f 100644 --- a/components/colorloupe/index.css +++ b/components/colorloupe/index.css @@ -73,7 +73,7 @@ } /* The checkerboard classes use opacity checkerboard tokens for dark and light color. - The opacity-checkerboard-square-size token is not able to be used witin the SVG pattern and instead colorloupe.yml is using two different patterns toggled by --spectrum-colorloupe-checkerboard-fill */ + The opacity-checkerboard-square-size token is not able to be used witin the SVG pattern and instead colorloupe docs are using two different patterns toggled by --spectrum-colorloupe-checkerboard-fill */ .spectrum-ColorLoupe-checkerboard-pattern { fill: var(--spectrum-colorloupe-checkerboard-dark-color); diff --git a/components/colorloupe/metadata/colorloupe.yml b/components/colorloupe/metadata/colorloupe.yml deleted file mode 100644 index 00520ee320d..00000000000 --- a/components/colorloupe/metadata/colorloupe.yml +++ /dev/null @@ -1,39 +0,0 @@ -name: Color loupe -status: Verified -SpectrumSiteSlug: https://spectrum.adobe.com/page/color-loupe/ -description: | - - Set the `--spectrum-picked-color` custom property to the CSS color value you want to show - - Apply `.is-open` to display the loupe - - Color Loupe does not have a disabled style; do not show it when the handle its attached to is disabled. -examples: - - id: color-loupe - name: Standard - demoClassName: spectrum-CSSExample-example--spacious - markup: | - - - - - - - - - - - - - - - - - - - - - - - diff --git a/components/colorslider/metadata/colorslider.yml b/components/colorslider/metadata/colorslider.yml deleted file mode 100644 index 50edaee50bb..00000000000 --- a/components/colorslider/metadata/colorslider.yml +++ /dev/null @@ -1,197 +0,0 @@ -name: Color slider -status: Verified -SpectrumSiteSlug: https://spectrum.adobe.com/page/color-slider/ -description: | - - Set the color of the nested Color handle component to match 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 you set the `min` and `max` attributes of the `.spectrum-ColorSlider-slider` input to the corresponding scale (i.e. `0` to `1` for `a`, `0` to `255` for `r`, etc). - - Ensure that you set the `step` attribute of the `.spectrum-ColorSlider-slider` input appropriately (i.e. `0.1` for `a`, `s`, `v` or `1` and `h`, `r`, etc). - - Set the `background` style property of `.spectrum-ColorSlider-gradient` 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. - - Alternatively, provide a `` or `` element with the gradient you want to use and apply the `.spectrum-ColorSlider-gradient` class. -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration Guide - description: | - - The component now supports a RTL (right-to-left) base direction with logical properties, and reverses the gradient. - - Color slider examples no longer display a "canvas" variant. -examples: - - id: color-slider - name: Standard - markup: | -
- - -
-
- - - -
- - -
- - - id: color-slider-alpha - name: Alpha - markup: | -
- - -
-
- - - -
- - -
- - - id: color-slider-disabled - name: Disabled - markup: | -
- - -
-
- - - -
- - -
- - - id: color-slider-vertical - name: Vertical - markup: | -
- - -
-
- - - -
- - -
- - - id: color-slider-with-image - name: Standard (with image) - markup: | -
- - -
-
- - - - - - -
- - -
- - - id: color-slider-full - name: Full example - demoClassName: spectrum-CSSExample-example--spacious - markup: | -
- - -
-
- - - - - - - - - - - - - - - - - - - - - - - -
- - -
- - - id: color-slider-full-alpha - name: Full example (alpha) - demoClassName: spectrum-CSSExample-example--spacious - markup: | -
- - -
-
- - - - - - - - - - - - - - - - - - - - - - - -
- - -
diff --git a/components/colorwheel/metadata/colorwheel.yml b/components/colorwheel/metadata/colorwheel.yml deleted file mode 100644 index 27dd8f12780..00000000000 --- a/components/colorwheel/metadata/colorwheel.yml +++ /dev/null @@ -1,91 +0,0 @@ -name: Color wheel -status: Verified -SpectrumSiteSlug: https://spectrum.adobe.com/page/color-wheel/ -description: | - - For a given rotation on the wheel, `X`, the `.spectrum-ColorHandle` should be moved by applying the style property `transform: translate(${Y * Math.cos(X)}px, ${Y * Math.sin(X)}px)`, where Y is ((radius - `.spectrum-colorwheel-track-width`) / 2)) - - Set the `value` attribute of `.spectrum-ColorWheel-value` to the currently selected color (i.e. `hsl(326, 100%, 50%)`) - - Add `.is-dragged` when the handle is being dragged - - To display with ColorArea inside of ColorWheel, add ColorArea to `spectrum-ColorWheel-colorarea-container` with `style="--mod-colorarea-width: 70.1%; --mod-colorarea-height: 70.1%"` - - `.spectrum-colorwheel-colorarea-container-size` is hard coded to position the ColorArea within the ColorWheel using `.spectrum-color-wheel-color-area-margin`. Using JS container size can be calcaulted with `Math.sqrt(2 * R * R)`, where R is the innerRadius as calcaulted for the clip paths - - `.spectrum-colorwheel-path`, `.spectrum-colorwheel-path-borders` and `.spectrum-colorwheel-colorarea-container` are hard coded in CSS and include token values in custom CSS variables so they can be accessed with JS to and used to calcualte these values, `const wheel = document.querySelector(".spectrum-ColorWheel-wheel") getComputedStyle(wheel).getPropertyValue('--track-width'))` -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration Guide - description: | - - Colorwheel no longer displays a canvas variant - - ColorWheel refactored to use a clip-path instead of an svg with a mask -examples: - - id: color-wheel - name: Standard - markup: | -
-
-
-
-
-
-
-
-
- - - - - - -
- -
- - id: color-wheel - name: Disabled - markup: | -
-
-
-
-
-
-
-
-
- - - - - - -
- -
- - id: color-wheel - name: Standard with ColorArea - markup: | -
-
-
-
-
-
-
- - - -
- - -
-
-
-
-
-
-
-
- - - -
- -
diff --git a/components/combobox/metadata/combobox.yml b/components/combobox/metadata/combobox.yml deleted file mode 100644 index c0b03aa21c7..00000000000 --- a/components/combobox/metadata/combobox.yml +++ /dev/null @@ -1,376 +0,0 @@ -name: Combobox -description: Combobox combines a text field with a picker menu. -SpectrumSiteSlug: https://spectrum.adobe.com/page/combo-box/ -sections: - - name: Migration Guide - description: | - ### Component separated from InputGroup - This component was previously a variant style for InputGroup. **InputGroup is now deprecated**. - The classes containing `InputGroup` have been renamed or removed. For details, see the "renamed" and "removed" sections below or the example markup. - - ### New Picker markup - Instead of a `.spectrum-Picker`, Combobox now uses `.spectrum-PickerButton`. Refer to the example markup for usage details. - - ### New Textfield markup - Combobox now uses the new Textfield markup. See the [Textfield migration guide](textfield.html#migrationguide) for more information. - - ### Additional clases - The following classes must be added: - - * `.spectrum-Combobox-textfield` is now required on the Textfield outer element (`.spectrum-Textfield`) - * `.spectrum-Combobox-input` is now required on the `` element inside of Textfields (`.spectrum-Textfield-input`) - * `.spectrum-Combobox-button` is now required on the FieldButton (`.spectrum-ActionButton spectrum-ActionButton--sizeM`) - - ### Indicating validity and focus - Validity and focus must be bubbled up to the parent so descendants siblings can be styled. - - Thus, implementations should add the following classes to the `.spectrum-Combobox` parent class in the following situations: - - * `.is-focused` - when the input or button is focused with the mouse - * `.is-keyboardFocused` - when the input or button is focused with the keyboard - * `.is-valid` - when the input has an explicit valid state - * `.is-invalid` - when the input has an explicit invalid state - * `.is-disabled` - when the control is disabled; should also add to the `.spectrum-Combobox-textfield` and include a `[disabled]` attribute to the `.spectrum-Combobox-button` - * `.is-loading` - when the progress circle is being shown - - ### Renamed classes - - * `.spectrum-InputGroup-textfield` -> `.spectrum-Combobox-textfield` - * `.spectrum-InputGroup-input` -> `.spectrum-Combobox-input` - * `.spectrum-InputGroup-button` -> `.spectrum-Combobox-button` - - ### Removed classes - - * `.InputGroup` (can be be removed from the parent element) - -examples: - - id: combobox - name: Standard - markup: | -
-
-

Default

- -
-
-
- -
- - -
-
-
-
-

With Field Label

- -
-
Country
- -
-
- -
- - -
-
-
-
-

Disabled

- -
-
-
- -
- - -
-
-
-
-

Open

- -
-
-
- -
- - - -
-
    -
  • - Ballard -
    • -
  • - Fremont -
    • -
  • - Greenwood -
    • - -
  • - United States of America -
    • -
-
-
-
-
-
- - - id: combobox-quiet - name: Quiet - markup: | -
-
-

Default

- -
-
-
- -
- - -
-
-
-
-

With Field Label

- -
-
Country
- -
-
- -
- - -
-
-
-
-

Disabled

- -
-
-
- -
- - -
-
-
-
-

Open

- -
-
-
- -
- - - -
-
    -
  • - Ballard -
    • -
  • - Fremont -
    • -
  • - Greenwood -
    • - -
  • - United States of America -
    • -
-
-
-
-
-
- - - id: combobox - name: Invalid - markup: | -
-
-

Standard

- -
-
-
- - -
- - -
-
-
-
-

Quiet

- -
-
-
- - -
- - -
-
-
-
- - - id: combobox - name: Loading - markup: | -
-
-

Standard

- -
-
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
-
-
- -
-

Quiet

- -
-
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
-
-
-
diff --git a/components/contextualhelp/metadata/contextualhelp.yml b/components/contextualhelp/metadata/contextualhelp.yml deleted file mode 100644 index 7e06a9641ca..00000000000 --- a/components/contextualhelp/metadata/contextualhelp.yml +++ /dev/null @@ -1,61 +0,0 @@ -name: Contextual help -status: Verified -SpectrumSiteSlug: https://spectrum.adobe.com/page/contextual-help/ -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. -examples: - - id: contextualhelp-variants - name: Info Icon - markup: | -
-
-
- - -
-
-
-
-
- -
- -
-
-
- - id: contextualhelp-variants - name: Help Icon - markup: | -
-
-
- - -
-
-
-
diff --git a/components/datepicker/metadata/datepicker.yml b/components/datepicker/metadata/datepicker.yml deleted file mode 100644 index 06dce8a4789..00000000000 --- a/components/datepicker/metadata/datepicker.yml +++ /dev/null @@ -1,313 +0,0 @@ -name: Date picker -description: A date picker displays a Text Field input with a button next to it, and can display two Text Fields next to each other for choosing a date range. -sections: - - name: Migration Guide - description: | - ### Component separated from InputGroup - This component was previously a variant within InputGroup. **InputGroup is now deprecated**. - The classes containing `InputGroup` have been renamed or removed. For details, see the "renamed" and "removed" sections below or the example markup. - - ### New Picker markup - Instead of a `.spectrum-Picker`, DatePicker now uses `.spectrum-PickerButton`. Refer to the example markup for usage details. - - ### Workflow icon size changed to medium - If your markup is still using the small icon, replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`. - - ### Renamed classes - - * v1.0.0: All date picker classes have been renamed to have a capital P: `.spectrum-Datepicker` is now `.spectrum-DatePicker` - * v1.0.0: `.spectrum-InputGroup-textfield` is now `.spectrum-DatePicker-textfield`, `.spectrum-InputGroup-input` is now `.spectrum-DatePicker-input`, and `.spectrum-InputGroup-button` is now `.spectrum-DatePicker-button` - * `.spectrum-Datepicker--rangeDash` was renamed to `.spectrum-DatePicker-rangeDash` - - ### Removed elements - - * v1.0.0: The class `.InputGroup` is no longer used and can be be removed from the parent element - * `.spectrum-Datepicker-focusRing` is no longer required and should be removed - -examples: - - id: datepicker - name: Standard - markup: | -
-
- -
- -
- - id: datepicker-readonly - name: Read-only - markup: | -
-
- -
-
- - id: datepicker-quiet - name: Quiet - markup: | -
-
- -
- -
- - id: datepicker-invalid - name: Invalid - markup: | -
-
-

Standard

- -
- -
-
-
-

Quiet

- -
-
- - -
- -
-
- -
-
-
- - - id: datepicker-range - name: Range - markup: | - - -

- -

- -

- -

- -

- -

-

- -

- - id: datepicker-range-quiet - name: Range (quiet) - markup: | - - -

- -

- -

- -

-

- -

-

- -

diff --git a/components/dial/metadata/dial.yml b/components/dial/metadata/dial.yml deleted file mode 100644 index 26f8ddd44b2..00000000000 --- a/components/dial/metadata/dial.yml +++ /dev/null @@ -1,83 +0,0 @@ -name: Dial -description: A dial for turning it up to 11. -examples: - - id: dial - name: Standard - markup: | -
-
-
- -
-
-
-
-
-
- -
-
-
-

-
-
-
- -
-
-
-
-
-
- -
-
-
- - id: dial - name: With label - markup: | -
-
- - -
-
-
- -
-
-
-
-
- - -
-
-
- -
-
-
-

-
-
- -
54
-
-
-
- -
-
-
-
-
- -
54
-
-
-
- -
-
-
diff --git a/components/dialog/metadata/dialog.yml b/components/dialog/metadata/dialog.yml deleted file mode 100644 index a587473500b..00000000000 --- a/components/dialog/metadata/dialog.yml +++ /dev/null @@ -1,333 +0,0 @@ -name: Dialog -description: 'In order to avoid blurry Dialogs, wrap them in `
` and apply `.is-open` to both the Wrapper and the Dialog at the same time. See [this example](#dialog-wrapped) for a working demonstration.' -SpectrumSiteSlug: https://spectrum.adobe.com/page/dialog/ -sections: - - name: Migration Guide - description: | - - Alert variants of Dialog have been removed from Dialog into their own compoment, Alert Dialog. -examples: - - id: dialog - name: Dialog - Small - status: Verified - description: A small dialog - demoClassName: spectrum-CSSExample-example--overlay - markup: | - - -
-
- -
-
- - id: dialog - name: Dialog - Medium - status: Verified - description: A medium dialog - demoClassName: spectrum-CSSExample-example--overlay - markup: | - - -
-
- -
-
- - id: dialog - name: Dialog - Large - status: Verified - description: A large dialog - demoClassName: spectrum-CSSExample-example--overlay - markup: | - - -
-
- -
-
- - id: dialog - name: Dialog - Dismissible - status: Verified - description: A dialog that can be dismissed without taking an action. Dismissible dialogs should never have buttons. - demoClassName: spectrum-CSSExample-example--overlay - markup: | - - -
-
- -
-
- - id: dialog - name: Dialog - No Divider - status: Verified - description: Dialogs can forgo the divider if they have content that spans the entire width of the dialog. - demoClassName: spectrum-CSSExample-example--overlay - markup: | - - -
-
- -
-
- - id: dialog - name: Dialog - Hero - status: Verified - description: Dialogs can have a hero header. - demoClassName: spectrum-CSSExample-example--overlay - markup: | - -
-
- -
-
- - id: dialog-scrolling - name: Dialog - Scrolling - status: Contribution - description: A dialog without `.spectrum-Dialog--alert` can expand to a larger size to house larger contents. - demoClassName: spectrum-CSSExample-example--overlay - markup: | - -
-
-
-
-

EULA

-
-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis - aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam - voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed - quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis - autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

-

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui - officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat - facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum - rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis - aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam - voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed - quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis - autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

-

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui - officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat - facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum - rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis - aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam - voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed - quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis - autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

-

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui - officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat - facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum - rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

-
-
- - -
-
-
-
-
- - id: dialog-fullscreen - name: Dialog - Fullscreen - status: Contribution - description: A fullscreen dialog will automatically fill almost all of the available screen space. - demoClassName: spectrum-CSSExample-example--overlay - markup: | - -
-
-
-
-

Default Dialog - Fullscreen

-
-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis - aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam - voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed - quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis - autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

-

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui - officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat - facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum - rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis - aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam - voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed - quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis - autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

-

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui - officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat - facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum - rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis - aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam - voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed - quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis - autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

-

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui - officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat - facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum - rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

-
-
- - -
-
-
-
-
- - id: dialog-fullscreen - name: Dialog - Fullscreen Takeover - status: Contribution - description: A fullscreen takeover dialog will fill all of the available screen space. - demoClassName: spectrum-CSSExample-example--overlay - markup: | - -
-
-
-
-

Fullscreen Takeover

-
-
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover - dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a - fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover - dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a - fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover - dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a - fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover - dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a - fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover - dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a - fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover - dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a - fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover - dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a - fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover - dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a - fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover - dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a - fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover - dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a - fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover - dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a - fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
-
-
- - -
-
-
-
-
diff --git a/components/divider/metadata/divider.yml b/components/divider/metadata/divider.yml deleted file mode 100644 index f994fc5f66a..00000000000 --- a/components/divider/metadata/divider.yml +++ /dev/null @@ -1,126 +0,0 @@ -name: Divider -status: Verified -SpectrumSiteSlug: https://spectrum.adobe.com/page/divider/ -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration Guide - description: | - ### Change workflow icon size to medium - Please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`. - - ### T-shirt sizing - Divider supports t-shirt sizes of small, medium and large. Divider requires that you specify the size by adding a `.spectrum-Divider--size*` class. No specified size class results in a medium size divider. -examples: - - id: divider-large - name: "Large" - markup: | -

Large

-
-

Page or Section Titles.

- - - id: divider-medium - name: "Medium" - markup: | -

Medium

-
-

Divide subsections, or divide different groups of elements (between panels, rails, etc.)

- - - id: divider-small - name: "Small" - markup: | -

Small

-
-

Divide like-elements (tables, tool groups, elements within a panel, etc.)

- - - id: divider-vertical-small - name: "Vertical" - description: | - When a vertical Divider is used inside of a flex container, use `align-self: stretch; height: auto` on the Divider. - markup: | -
-
-

Small

-
- -
- -
-
- -
-

Medium

-
- -
- -
-
- -
-

Large

-
- -
- -
-
- -
- - - id: divider-static-white - name: Static White - markup: | -
-
-

Small

-
- -

Medium

-
- -

Large

-
-
-
- - - id: divider-static-black - name: Static Black - markup: | -
-
-

Small

-
- -

Medium

-
- -

Large

-
-
-
diff --git a/components/dropindicator/metadata/dropindicator.yml b/components/dropindicator/metadata/dropindicator.yml deleted file mode 100644 index a63b135eb70..00000000000 --- a/components/dropindicator/metadata/dropindicator.yml +++ /dev/null @@ -1,10 +0,0 @@ -name: Drop indicator -description: A Drop Indicator is used to show the insertion position into a list or table. -examples: - - id: dropindicator - name: Standard - markup: | -
-
-
-
diff --git a/components/dropzone/metadata/dropzone.yml b/components/dropzone/metadata/dropzone.yml deleted file mode 100644 index ee00e8e082d..00000000000 --- a/components/dropzone/metadata/dropzone.yml +++ /dev/null @@ -1,33 +0,0 @@ -name: Drop zone -description: 'A Drop Zone is an area on the screen into a which an object can be dragged and dropped to accomplish a task. For example, a Drop Zone might be used in an upload workflow to enable the user to simply drop a file from their operating system into the Drop Zone, which is a more efficient and intuitive action, rather than utilize the standard "Choose File" dialog.' -examples: - - id: dropzone - name: Default - markup: | -
-
- -

Drag and drop your file

-

Select a file from your computer.

-
-
- - id: dropzone-dragged - name: Dragged - markup: | -
-
- -

Drag and drop your file

-

Select a file from your computer.

-
-
- - id: dropzone-filled - name: Filled and dragged - markup: | -
-
- -
-
diff --git a/components/fieldgroup/metadata/fieldgroup.yml b/components/fieldgroup/metadata/fieldgroup.yml deleted file mode 100644 index 291711c17e8..00000000000 --- a/components/fieldgroup/metadata/fieldgroup.yml +++ /dev/null @@ -1,527 +0,0 @@ -name: Field group -description: | - - A group of fields, usually Radios or Checkboxes. - - Field group incorporates the Help text component which may appear below a Field group. - - Help text is necessary to denote invalid checkbox fields, invalid radio button fields, and required fields. - - Invalid radio buttons are signified only by negative Help text. - - Invalid checkboxes are signified by negative Help text and the negative/invalid color on the input box. -sections: - - name: Migration Guide - description: | - ### Field group now includes Field label and Help text - - Include Field Label as size medium, `spectrum-FieldLabel spectrum-FieldLabel--sizeM`. - - Include Help text as `spectrum-HelpText-text`. - ### Field group label has two layout options - - Label can be top aligned with `spectrum-FieldGroup spectrum-FieldGroup--toplabel`. - - Label can be side aligned with `spectrum-FieldGroup spectrum-FieldGroup--sidelabel`. - ### Field group must now include `spectrum-FieldGroupInputLayout` as the immediate parent of the Field group items - - Due to the addition of label, a new nested div must wrap the fieldgroup items to control their layout separately from the label - -examples: - - id: fieldgroup-vertical - name: Vertical - description: A vertical group of fields. - markup: | -
-
-

Radio

-
-
-
Radio Group Label
- -
-
- - - -
- -
- - - -
- -
-
Select an option.
-
-
-
-
-
- -
-

Radio

-
-
-
Radio Group Label
- -
-
- - - -
- -
- - - -
- -
-
Select an option.
-
-
-
-
-
- -
-

Checkbox

-
-
-
Checkbox Group Label
- -
- - - - -
-
Select an option.
-
-
-
-
-
- -
- - - id: fieldgroup-horizontal - name: Horizontal - description: A horizontal group of fields. - markup: | -
-
-

Radio

-
-
-
Radio Group Label
- -
-
- - - -
- -
- - - -
- -
-
Select an option.
-
-
-
-
-
- -
-

Checkbox

-
-
-
Checkbox Group Label
- -
- - - - -
-
Select an option.
-
-
-
-
-
- -
- - - id: fieldgroup-invalid - name: Invalid - description: An invalid group of fields. - markup: | - -
-
-

Radio

-
-
-
Radio Group Label
- -
-
- - - -
- -
- - - -
- -
- -
Select an option.
-
-
-
-
-
- - -
-

Checkbox

-
-
-
Checkbox Group Label
- -
- - - - -
- -
Select an option.
-
-
-
-
-
- -
- - - id: fieldgroup-required-optional - name: Required or Optional - description: An optional or required group of fields. - markup: | -
-
-

Required

-
-
-
Radio Group Label (required)
- -
-
- - - -
- -
- - - -
- -
-
Select an option.
-
-
-
-
-
- -
-

Required Asterisk

-
-
-
Radio Group Label - -
- -
-
- - - -
- -
- - - -
- -
-
Select an option.
-
-
-
-
-
- -
-

Optional

-
-
-
Radio Group Label (optional)
- -
-
- - - -
- -
- - - -
-
-
-
-
-
- - - id: fieldgroup-sidelabel - name: Side Label Position - markup: | -
- -
-

Side Label Vertical Radio

-
-
-
Radio Group Label
- -
-
- - - -
- -
- - - -
- -
-
Select an option.
-
-
-
-
-
- -
-

Side Label Vertical Checkbox

-
-
-
Checkbox Group Label
- -
- - - -
-
Select an option.
-
-
-
-
-
- -
-

Side Label Horizontal Radio

-
-
-
Radio Group Label
- -
-
- - - -
- -
- - - -
- -
-
Select an option.
-
-
-
-
- -
- -

Side Label Horizontal Checkbox

-
-
-
Checkbox Group Label
- -
- - - - -
-
Select an option.
-
-
-
-
-
- -
- - - id: fieldgroup-readonly-checkboxes - name: Read-only Checkboxes - description: A group of read-only checkboxes that have been `checked`. In U.S. English, use commas to delineate items within read-only checkbox groups. In other languages, use the locale-specific formatting. - markup: | -
- - - - - -
diff --git a/components/fieldlabel/metadata/fieldlabel.yml b/components/fieldlabel/metadata/fieldlabel.yml deleted file mode 100644 index 4a1a2c3ab65..00000000000 --- a/components/fieldlabel/metadata/fieldlabel.yml +++ /dev/null @@ -1,121 +0,0 @@ -name: Field label -SpectrumSiteSlug: https://spectrum.adobe.com/page/text-field/#Include-a-label -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration Guide - description: | - ### T-shirt sizing - Field label now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-FieldLabel--size*` class. -examples: - - id: fieldlabel-sizing - name: Sizing - markup: | -
-
-

S

- - -
- -
-
-
-

M (default)

- - -
- -
-
- -
-

L

- - -
- -
-
- -
-

XL

- - -
- -
-
-
- - id: fieldlabel-standard - name: Standard - markup: | - -
- -
- - -
- -
- - id: fieldlabel-side-left - name: Left - description: A left aligned Field label. - markup: | - - -
- -
- - id: fieldlabel-side-right - name: Right - description: A right aligned Field label. - markup: | - - -
- -
- - id: fieldlabel-required - name: Required - description: A Field label for a required field can display either the text "(required)", or an asterisk. If using the asterisk icon, do not leave any space between the label text and the start of the `` element in the markup, so extra space is not added in addition to the inline margin. - markup: | - -
- -
- - -
- -
- -
-
- - -
- -
- - -
- -
diff --git a/components/fieldlabel/metadata/form.yml b/components/fieldlabel/metadata/form.yml deleted file mode 100644 index 92375a2152c..00000000000 --- a/components/fieldlabel/metadata/form.yml +++ /dev/null @@ -1,261 +0,0 @@ -name: Form -description: Form provides structure and spacing for your form fields. -examples: - - id: form-labels-left - name: Standard - left-aligned text - description: A two column layout with left-aligned label text. Apply `.spectrum-FieldLabel--left` to each Field label. - markup: | -
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
- -
-
- -
-
Interests
-
-
- - -
-
-
- -
- -
-
-
- -
-
- - -
-
-
-
-
- - id: form-labels-right - name: Right-aligned text - description: A two column layout with right-aligned label text. Apply `.spectrum-FieldLabel--right` to each Field label. - markup: | -
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
- -
-
- -
-
Interests
-
-
- - -
-
-
- -
- -
-
-
- -
-
- - -
-
-
-
-
- - id: form-labels-above - name: Labels above - description: "A stacked layout with the labels above the form fields. Apply the variant class `.spectrum-Form--labelsAbove` to the Form itself. You do not need to apply a specific class to the Field label." - markup: | -
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
- -
-
- -
-
Interests
-
-
- - -
-
-
- -
- -
-
-
- -
-
- - -
-
-
-
-
diff --git a/components/floatingactionbutton/metadata/floatingactionbutton.yml b/components/floatingactionbutton/metadata/floatingactionbutton.yml deleted file mode 100644 index c2d5f13c39f..00000000000 --- a/components/floatingactionbutton/metadata/floatingactionbutton.yml +++ /dev/null @@ -1,27 +0,0 @@ -name: Floating action button -status: Verified -SpectrumSiteSlug: https://spectrum.adobe.com/page/floating-action-button/ -description: | - - Floating action button is used to give users a more prominent button for high frequency actions - - When using Floating Action Button in dark themes, the `background-layer-color-2` will often show up on the base color `gray-50` or `gray-75` or on content, images, etc. -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. -examples: - - id: floatingactionbutton-primary - name: Primary - markup: | - - - id: floatingactionbutton-secondary - name: Secondary - markup: | - diff --git a/components/helptext/metadata/helptext.yml b/components/helptext/metadata/helptext.yml deleted file mode 100644 index 5e1b6d9eb31..00000000000 --- a/components/helptext/metadata/helptext.yml +++ /dev/null @@ -1,123 +0,0 @@ -name: Help text -status: Verified -SpectrumSiteSlug: https://spectrum.adobe.com/page/help-text/ -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. -examples: - - id: helptext-sizing - name: Sizing - markup: | -
-
-

S

-
-
Create a password with at least 8 characters.
-
-
-
-

M

-
-
Create a password with at least 8 characters.
-
-
-
-

L

-
-
Create a password with at least 8 characters.
-
-
-
-

XL

-
-
Create a password with at least 8 characters.
-
-
-
- - id: helptext-negative - name: Negative - markup: | -
-
-

Negative

-
-
Create a password with at least 8 characters.
-
-
-
-

Negative with icon

-
- -
Create a password with at least 8 characters.
-
-
-
- - id: helptext-negative-sizing - name: Negative Sizing (with icons) - markup: | -
-
-

S

-
- -
Create a password with at least 8 characters.
-
-
-
-

M

-
- -
Create a password with at least 8 characters.
-
-
-
-

L

-
- -
Create a password with at least 8 characters.
-
-
-
-

XL

-
- -
Create a password with at least 8 characters.
-
-
-
- - id: helptext-wrapping - name: Wrapping - markup: | -
-
-

Wrapping

-
- -
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
-
-
- - id: helptext-disabled - name: Disabled - markup: | -
-
-

Disabled

-
-
Create a password with at least 8 characters.
-
-
-
diff --git a/components/illustratedmessage/metadata/illustratedmessage.yml b/components/illustratedmessage/metadata/illustratedmessage.yml deleted file mode 100644 index 3760b7ba401..00000000000 --- a/components/illustratedmessage/metadata/illustratedmessage.yml +++ /dev/null @@ -1,26 +0,0 @@ -name: Illustrated message -description: The Illustrated Message displays an illustration along with a heading and description. Optionally, part of the illustration can use an accent color. It can be used for status and errors, or as a call to action. For example, the Drop Zone component makes use of Illustrated Message as an area to drag and drop files. -SpectrumSiteSlug: https://spectrum.adobe.com/page/informational-illustrations/ -sections: - - name: Migration Guide - description: | - ### Removed Classes - `.spectrum-IllustratedMessage--cta` — The Standard variant currently provides the same styles. -examples: - - id: illustratedmessage-default - name: Standard - markup: | -
- Asset 1 -

Error 404: Page not found

-

This page isn't available. Try checking the URL or visit a different page.

-
- - id: illustratedmessage-default - name: Illustration Accent Color - description: To use the accent color, the class `.spectrum-IllustratedMessage-accent` can be added to element(s) within the illustration SVG. - markup: | -
- -

Drag and drop your file

-

Select a file from your computer.

-
diff --git a/components/infieldbutton/metadata/infieldbutton.yml b/components/infieldbutton/metadata/infieldbutton.yml deleted file mode 100644 index 4fff0bdff64..00000000000 --- a/components/infieldbutton/metadata/infieldbutton.yml +++ /dev/null @@ -1,220 +0,0 @@ -name: In-field button -status: Contribution -SpectrumSiteSlug: https://spectrum.adobe.com/page/picker/ -sections: - - name: Migration Guide - description: | - ### In-field button uses the [Quiet](infieldbutton.html#quiet) variant instead of loudness levels. - - The Loudness level classes, `.spectrum-InfieldButton--low`, `.spectrum-InfieldButton--medium`, and `.spectrum-InfieldButton--high`, have been removed. - - - Use the base class, `.spectrum-InfieldButton`, to apply the default button styles. The default styles correspond to what was previously the Loudness - High variant, which used the class `.spectrum-InfieldButton--high`. - - Use the modifier class, `spectrum-InfieldButton--quiet`, to apply the quiet variant styles. Quiet corresponds to what was previously the Loudness - Low variant, which used the class `.spectrum-InfieldButton--low` class. - - The Loudness - Medium variant has been removed, so there is no equivalent. - - ### Stacked in-field buttons - - In order to create the stacked In-field buttons, give the first button a class of `spectrum-InfieldButton--top` and the second a class of `spectrum-InfieldButton--bottom` - -examples: - - id: infieldbutton-sizing - name: Sizing - markup: | -
-
-

S

- -
- -
-

M

- -
- -
-

L

- -
- -
-

XL

- -
-
- - - id: infieldbutton-quiet - name: Quiet - markup: | -
-
- -
-
- - - id: infieldbutton-position - name: Position - markup: | -
-
-

Start

- -
-
-

End

- -
-
- - - id: infieldbutton-disabled - name: Disabled - markup: | - - - - id: infieldbutton-stacked - name: Stacked - markup: | -
-
-

M

- - -
- - - - id: infieldbutton-stacked - name: Stacked - markup: | -
-
-

S

- - -
- -
-

M

- - -
- -
-

L

- - -
- -
-

XL

- - -
-
diff --git a/components/inlinealert/metadata/inlinealert.yml b/components/inlinealert/metadata/inlinealert.yml deleted file mode 100644 index 12435584c79..00000000000 --- a/components/inlinealert/metadata/inlinealert.yml +++ /dev/null @@ -1,89 +0,0 @@ -name: In-line alert -SpectrumSiteSlug: https://spectrum.adobe.com/page/in-line-alert/ -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. -examples: - - id: inlinealert-neutral - name: Neutral - markup: | -
-
Neutral in-line alert header
-
This is an alert.
-
- - id: inlinealert-info - name: Informative - description: | - *Spectrum for Adobe Express uses a different icon. Use the `SX_Info_18_S.svg` icon in the Express workflow icon set.* - markup: | -
-
- Information in-line alert header - -
-
This is an alert.
-
- - id: inlinealert-positive - name: Positive - description: | - *Spectrum for Adobe Express uses a different icon. Use the `SX_CheckmarkCircle_18_S.svg` icon in the Express workflow icon set.* - markup: | -
-
- Positive in-line alert header - -
-
This is an alert.
-
- - id: inlinealert-notice - name: Notice - description: | - *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_S.svg` icon in the Express workflow icon set.* - markup: | -
-
- Notice in-line alert - Oh no - -
-
This is an alert.
-
- - id: inlinealert-negative - name: Negative - description: | - *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_S.svg` icon in the Express workflow icon set.* - markup: | -
-
- Negative in-line alert header - -
-
This is an alert.
-
- - id: inlinealert-closable - name: Closable - dnaStatus: Contribution - description: | - An in-line alert with a close button in the footer. Combine this strategy with any variant. - - *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_S.svg` icon in the Express workflow icon set.* - markup: | -
-
Incorrect Payment Information - Error - -
-
This is an alert.
-
- -
-
diff --git a/components/link/metadata/link.yml b/components/link/metadata/link.yml deleted file mode 100644 index 58bc1ccb4c3..00000000000 --- a/components/link/metadata/link.yml +++ /dev/null @@ -1,75 +0,0 @@ -id: link-primary-m -name: Link -SpectrumSiteSlug: https://spectrum.adobe.com/page/link/ -status: Verified -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration Guide - description: | - ### Subtle variant - Subtle variant was removed. Please use Quiet. -examples: - - id: link-primary - name: Primary - status: Verified - markup: | - Link using spectrum-Link - - id: link-secondary - name: Secondary - status: Verified - markup: | - Link using spectrum-Link--secondary - - - id: link-static-white - name: Static White - status: Verified - markup: | -
-

- Hello, this is my spectrum-Link--staticWhite. This is just filler text, but if you keep reading maybe something good will happen. -

-
- - - id: link-static-black - name: Static Black - status: Verified - markup: | -
-

- Hello, this is my spectrum-Link--staticBlack. This is just filler text, but if you keep reading maybe something good will happen. -

-
- - - id: link-quiet-primary-m - name: Quiet (Primary) - status: Verified - markup: | -

This uses spectrum-Link--quiet.

- - - id: link-quiet-secondary-m - name: Quiet (Secondary) - status: Verified - markup: | -

This uses spectrum-Link--quiet and spectrum-Link--secondary.

- - - id: link-quiet-static-white - name: Quiet (Static White) - status: Verified - markup: | -
-

- Hello, this is my spectrum-Link--staticWhite and spectrum-Link--quiet. This is just filler text, but if you keep reading maybe something good will happen. -

-
- - - id: link-quiet-static-black - name: Quiet (Static Black) - status: Verified - markup: | -
-

- Hello, this is my spectrum-Link--staticBlack and spectrum-Link--quiet. This is just filler text, but if you keep reading maybe something good will happen. -

-
diff --git a/components/logicbutton/metadata/logicbutton.yml b/components/logicbutton/metadata/logicbutton.yml deleted file mode 100644 index f8dba482fc8..00000000000 --- a/components/logicbutton/metadata/logicbutton.yml +++ /dev/null @@ -1,19 +0,0 @@ -id: logicbutton-and -name: Logic button -description: A LogicButton displays an operator within a boolean logic sequence. -sections: - - name: Migration Guide - description: | - ### Remove focus-ring class - We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. -examples: - - id: logicbutton-and - name: And - markup: | - - - - id: logicbutton-or - name: Or - markup: | - - diff --git a/components/menu/metadata/menu.yml b/components/menu/metadata/menu.yml deleted file mode 100644 index 27f5e85cf32..00000000000 --- a/components/menu/metadata/menu.yml +++ /dev/null @@ -1,1411 +0,0 @@ -name: Menu -SpectrumSiteSlug: https://spectrum.adobe.com/page/menu/ -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration Guide - description: | - ### T-shirt sizing - Menu now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-Menu--size*` class. - - ### Use small divider classes - When using a section divider, add `.spectrum-Divider` and `spectrum-Divider--sizeS` classes to `spectrum-Menu-divider`. The divider has also changed from medium to small. - - ### Change workflow icon size to medium - Please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`. - - ### Menu item with switch mark up ### - In the case of a menu item that includes an icon and a switch, the label and icon should be seperate elements. As opposed to the icon SVG being with in the label. This matches the pattern of other variants with icons within the menu item. - -examples: - - id: sizing - name: Sizing - markup: | -
-
-

S

-
- -
-
-
-

M

-
- -
-
-
-

L

-
- -
-
-
-

XL

-
- -
-
-
- - id: sizing-with-icons - name: Sizing with Icons - markup: | -
-
-

S

-
- -
-
-
-

M

-
- -
-
-
-

L

-
- -
-
-
-

XL

-
- -
-
-
- - id: with-disabled-items - name: With disabled item(s) - markup: | -
-
-

Menu with icons

-
- -
-
-
-

Menu with descriptions

-
- -
-
-
-

Menu with icons & descriptions

-
- -
-
-
- - id: text-overflow - name: Text overflow - markup: | -
-
-

Menu without descriptions

-
- -
-
-
-

Menu with descriptions

-
- -
-
-
- - id: sizing-descriptions - name: Sizing with descriptions - markup: | -
-
-

S

-
- -
-
-
-

M

-
- -
-
-
-

L

-
- -
-
-
-

XL

-
- -
-
-
- - id: sizing-descriptions-icons - name: Sizing with descriptions and icons - markup: | -
-
-

S

-
- -
-
-
-

M

-
- -
-
-
-

L

-
- -
-
-
-

XL

-
- -
-
-
- - id: collapsible - name: Collapsible - markup: | -
-
-

S

-
- -
-
-
-

M

-
- -
-
-
-

L

-
- -
-
-
-

XL

-
- -
-
-
- - id: standard-with-dividers - name: Standard with dividers - markup: | -
-
- -
-
- - id: standard-with-section-headers-and-dividers - name: Standard with section headers and dividers - markup: | -
-
- -
-
- - id: single-selection - name: Single Selection - markup: | -
-
-

Without icons

-
- -
-
-
-

With icons

-
- -
-
-
- - id: multi-selection - name: Multi-Selection - markup: | -
-
-

Without icons

-
- -
-
-
-

With icons

-
- -
-
-
- - id: with-switch - name: With Switch - markup: | -
-
-

Without icons

-
- -
-
-
-

With icons

-
- -
-
-
- - id: submenu-drillin - name: Drill-in for submenu - description: Use the class `spectrum-Menu-itemLabel--truncate` on the item label or section heading that should truncate within a menu. When text would typically overflow beyond the available horizontal space and wrap (default behavior), ellipsis will appear instead. This is demonstrated here by setting an `inline-size` on the menu. - markup: | -
-
- -
-
- - id: tray-submenus - name: Tray submenus - description: - "When a menu is displayed within a tray, a submenu will replace the tray content when the parent menu item is selected. A submenu displays a back button (labeled by the title of the parent item) at the top of the tray to return the user to the previous level of the menu. - The back arrow size scale used with the various menu sizes are small: `200`, medium: `300`, large: `400`, and extra large: `500`." - markup: | -
-
-
-
- - - id: menu-truncate - name: Menu with truncating text - description: Use the class `spectrum-Menu-itemLabel--truncate` on the item label or section heading that should truncate with in a menu with a set `inline-size` or `max-inline-size` - markup: | -
-
- -
-
diff --git a/components/miller/metadata/miller.yml b/components/miller/metadata/miller.yml deleted file mode 100644 index fc5b01b03b8..00000000000 --- a/components/miller/metadata/miller.yml +++ /dev/null @@ -1,180 +0,0 @@ -name: Miller columns -examples: - - id: miller-column - name: Miller Columns (Branches Selectable) - description: Miller columns that allow both files and folders to be selected. - markup: | -
-
-
    -
  • - - File 1 - -
    • -
  • - - File 2 - -
    • -
  • - - asset item thumbnail - File 3 - -
    • -
-
-
-
    -
  • - - File 1 - -
    • -
  • - - File 2 - -
    • -
  • - - asset item thumbnail - File 3 - -
    • -
-
-
- - id: miller-column - name: Miller Columns (Files Selectable) - description: Miller columns that only allow files to be selected. - markup: | -
-
-
    -
  • - File 1 - -
    • -
  • - File 2 - - -
    • -
  • - asset item thumbnail - File 3 - - -
    • -
-
- -
-
    -
  • - File 1 - -
    • -
  • - File 2 - - -
    • -
  • - asset item thumbnail - File 3 - - -
    • -
-
-
diff --git a/components/modal/metadata/modal.yml b/components/modal/metadata/modal.yml deleted file mode 100644 index f4addf1d0a0..00000000000 --- a/components/modal/metadata/modal.yml +++ /dev/null @@ -1,17 +0,0 @@ -name: Modal -description: A modal component that is used primarily by Dialog. -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. -examples: - - id: modal - name: Modal - demoClassName: spectrum-CSSExample-example--overlay - description: - This is a base component used by other components, and should not be used on its own like the following example. If you need a full-featured modal for - displaying content, take a look at the Dialog component instead. - markup: | -
-
A basic example of the Modal markup.
-
diff --git a/components/opacitycheckerboard/metadata/opacitycheckerboard.yml b/components/opacitycheckerboard/metadata/opacitycheckerboard.yml deleted file mode 100644 index ca741c75676..00000000000 --- a/components/opacitycheckerboard/metadata/opacitycheckerboard.yml +++ /dev/null @@ -1,17 +0,0 @@ -name: Opacity checkerboard -description: Opacity checkerboard is a class used to highlight background color opacity. -examples: - - id: opacity-checkerboard - name: Opacity checkerboard - markup: | -
-
-
-
- - id: opacity-checkerboard - name: Opacity checkerboard with color overlay - markup: | -
-
-
-
diff --git a/components/page/metadata/page.yml b/components/page/metadata/page.yml deleted file mode 100644 index 750d2cbdd73..00000000000 --- a/components/page/metadata/page.yml +++ /dev/null @@ -1,22 +0,0 @@ -name: Page -description: | - The outer page container. A parent tag should only have the `.spectrum` class if using a standalone CSS file. - If using multistops, a parent tag should have both the `.spectrum` class and the corresponding colorstop variant class, i.e. `.spectrum--light`. - Finally, if scaling to large with the diff strategy, a parent tag should have the `.spectrum--large` class. -examples: - - id: page - name: Standard - markup: | - Text here!
-

-
- Text here!
-
-

- - -

-
- -
-

diff --git a/components/pagination/metadata/pagination-button-style.yml b/components/pagination/metadata/pagination-button-style.yml deleted file mode 100644 index 9d5e4d4146e..00000000000 --- a/components/pagination/metadata/pagination-button-style.yml +++ /dev/null @@ -1,50 +0,0 @@ -name: Pagination - button style -examples: - - id: pagination-button - name: CTA - markup: | - - - id: pagination-button - name: Primary - markup: | - - - id: pagination-button - name: Secondary - markup: | - diff --git a/components/pagination/metadata/pagination-explicit.yml b/components/pagination/metadata/pagination-explicit.yml deleted file mode 100644 index 5172823a889..00000000000 --- a/components/pagination/metadata/pagination-explicit.yml +++ /dev/null @@ -1,27 +0,0 @@ -id: pagination-explicit -name: Pagination - explicit -sections: - - name: Migration Guide - description: | - ### New Textfield markup - Pagination(Explicit) now uses the new Textfield markup. See the [Textfield migration guide](textfield.html#migrationguide) for more information. You must add `.spectrum-Pagination-textfield` modifier to the outer element `div.spectrum-Textfield`. -examples: - - id: pagination-explicit - name: Standard - markup: | - diff --git a/components/pagination/metadata/pagination-listing.yml b/components/pagination/metadata/pagination-listing.yml deleted file mode 100644 index 169cafa911a..00000000000 --- a/components/pagination/metadata/pagination-listing.yml +++ /dev/null @@ -1,18 +0,0 @@ -name: Pagination - page -status: Contribution -examples: - - id: pagination-listing - name: Standard - markup: | - diff --git a/components/picker/metadata/picker.yml b/components/picker/metadata/picker.yml deleted file mode 100644 index 5339feeca39..00000000000 --- a/components/picker/metadata/picker.yml +++ /dev/null @@ -1,539 +0,0 @@ -name: Picker -status: Verified -SpectrumSiteSlug: https://spectrum.adobe.com/page/picker/ -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration Guide - description: | - ### Component renamed - Dropdown is now known as Picker. Replace all `.spectrum-Dropdown*` classnames with `.spectrum-Picker*`. - - ### Markup change - The outer `
` is now gone and `.spectrum-FieldButton` is no longer used. Instead, the outer tag is now ` -
- - -
-

Open

- -
-
    -
  • - Donaudampfschifffahrtsgesellschaftskapitän - -
    • -
  • - Some long value that should be cut off - -
    • -
  • - Very long text with hyphens-between-words - -
    • - -
  • - United States of America - -
    • -
-
-
- -
- - -
-

Side Label

-
Country
- -
- - -
- -

Open with Thumbnails

-
Country
- -
-
    -
  • - - Donaudampfschifffahrtsgesellschaftskapitän - -
    • -
  • - - Some long value that should be cut off - -
    • -
  • - - Very long text with hyphens-between-words - -
    • - -
  • - - United States of America - -
    • -
-
-
- -
- - -
-

Disabled

- -
- - -
-

Closed and Loading

- - -
- - -
-

Closed and Invalid

- -
- - -
-

Closed and Invalid with Help Text

-
- Preferred contact method - -
- -
-
Select a contact method.
-
-
- - - -
-

Open and Invalid

- -
-
    -
  • - Ballard - -
    • -
  • - Fremont - -
    • -
  • - Greenwood - -
    • - -
  • - United States of America - -
    • -
-
-
- -
- -
-

Closed and Disabled with Thumbnails

-
- -
-
-
- - - id: picker-sizing - name: Sizing - markup: | -

S

- - -

M

- - -

L

- - -

XL

- - - id: picker-quiet - name: Quiet - status: Verified - markup: | -

Closed

-
Country
- - -

Open

- -
-
    -
  • - Ballard - -
    • -
  • - Fremont - -
    • -
  • - Greenwood - -
    • - -
  • - United States of America - -
    • -
-
- -
- -

Open - With Thumbnails

- -
-
    -
  • - - Ballard - -
    • -
  • - - Fremont - -
    • -
  • - - Greenwood - -
    • - -
  • - - United States of America - -
    • -
-
- -
- -

Side Label

-
Country
- - -

Disabled

- - -

Closed and Invalid

- - -

Open and Invalid

- -
-
    -
  • - Ballard - -
    • -
  • - Fremont - -
    • -
  • - Greenwood - -
    • - -
  • - United States of America - -
    • -
-
- -
- -

Disabled and Invalid

- diff --git a/components/pickerbutton/metadata/pickerbutton.yml b/components/pickerbutton/metadata/pickerbutton.yml deleted file mode 100644 index be4fbe0f6a6..00000000000 --- a/components/pickerbutton/metadata/pickerbutton.yml +++ /dev/null @@ -1,154 +0,0 @@ -name: Picker button -status: Contribution -SpectrumSiteSlug: https://spectrum.adobe.com/page/picker/ -sections: - - name: Migration Guide - description: | - ### Picker button uses the [Quiet](pickerbutton.html#quiet) variant instead of loudness levels. - - The Loudness level classes, `.spectrum-PickerButton--low`, `.spectrum-PickerButton--medium`, and `.spectrum-PickerButton--high`, have been removed. - - - Use the base class, `.spectrum-PickerButton`, to apply the default button styles. The default styles correspond to what was previously the Loudness - High variant, which used the class `.spectrum-InfieldButton--high`. - - Use the modifier class, `spectrum-PickerButton--quiet`, to apply the quiet variant styles. Quiet corresponds to what was previously the Loudness - Low variant, which used the class `.spectrum-InfieldButton--low` class. - - The Loudness - Medium variant has been removed, so there is no equivalent. - - ### .spectrum-PickerButton-UIIcon class removed - - The `.spectrum-PickerButton-UIIcon` class no longer matches our naming convention. Both types of icons now use the `spectrum-PickerButton-icon` class - -examples: - - id: pickerbutton-sizing - name: Sizing - markup: | -
-
-

S

- -
- -
-

M

- -
- -
-

L

- -
- -
-

XL

- -
-
- - - id: pickerbutton-quiet - name: Quiet - markup: | - - - - id: pickerbutton-texticon - name: Text icon - markup: | - - - - id: pickerbutton-icononly - name: UI icon only - markup: | - - - - id: pickerbutton-icononly-custom - name: Custom icon only - markup: | - - - - id: pickerbutton-rounded - name: Rounded - markup: | - - - - id: pickerbutton-open - name: Open - markup: | - - - - id: pickerbutton-disabled - name: Disabled - markup: | - diff --git a/components/popover/metadata/popover.yml b/components/popover/metadata/popover.yml deleted file mode 100644 index 6bcff1652b6..00000000000 --- a/components/popover/metadata/popover.yml +++ /dev/null @@ -1,666 +0,0 @@ -name: Popover -SpectrumSiteSlug: https://spectrum.adobe.com/page/popover/ -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration Guide - description: | - ### New Popover Positions - - Popover has 22 available positions. 10 positions use logical properties. - - Popover position and distance to source should be handled by implementation. - - In this document, Popover positions will appear to only impact default tip positioning because popovers in this document are already open by default. - - Animation direction, speed, and distance are handled by overlay. - - #### Position Class Naming - - First position term is popover position, second term is source position. - - Example: --top-left = popover is to top and source is to left. - - Popover has 8px spacing from the source by default. - - #### Position of Tip - - Default tip position is centered on the edge for top/bottom/left/right/start/end positions. - - Default tip position distance from edge is equal to popover corner radius for all other positions. - - Popover tip position can be overridden in implementation to center with the source by setting '--spectrum-popover-pointer-edge-offset' equal to half the width of the source (for top and bottom popovers) or half the height of the source (for side popovers). - - #### Tip SVG - - Tip SVG should be updated in the markup - - Popover tip SVG polygon can retain the same markup and points for top and bottom (it is flipped in the CSS) - - Popover tip SVG polygon can retain the same markup and points for left/right/start/end (it is flipped in the CSS) - -examples: - - id: popover - name: Standard - markup: | -
-
-

Default

-
-
-
    -
  • - Ballard -
    • -
  • - Fremont -
    • -
  • - Greenwood -
    • - -
  • - United States of America -
    • -
-
-
- -
- -
-

With Tip

-
-
-
    -
  • - Ballard -
    • -
  • - Fremont -
    • -
  • - Greenwood -
    • - -
  • - United States of America -
    • -
- - - -
-
- -
-
- - - id: popover-offset-animation - name: Popover - Offset and Animation - description: Spectrum Popover has an offset default of 8px distance from the source that is applied with an animation transform when the `.is-open` class is added. - markup: | -
-
-

Top with Tip

-
- -
- - -
-
- -
-

Bottom with Tip

- - - - -
-
-
- - - id: popover-cross-offset - name: Popover - Cross Offset - description: Spectrum Popover tip distance to edge can be overridden in implementation by setting the property to half of the source width or height. This results in the tip centering with the center of the source. - markup: | -
-
-

Cross Offset of Tip = 50px

-
- -
- - -
-
- -
-

Cross Offset of Tip = 50px

- - - - -
-
-
- - - id: popover-dialog - name: Popover - Dialog style - description: Spectrum Popovers are implemented using the Dialog and Alert Dialog inner elements. - markup: | -
-
-

Dialog

- -
-
- -
-

Alert Dialog - Error

- -
-
-
- - - id: popover-top - name: Popover - Position Top - markup: | -
-
-

Top

- -
-
-
- -
-
-

Top Start

- -
-
- -
-

Top End

- -
-
-
- -
-
-

Top Left

- -
-
- -
-

Top Right

- -
-
-
- - - id: popover-bottom - name: Popover - Position Bottom - markup: | -
-
-

Bottom

- -
-
-
-
- -
-
-

Bottom Start

- -
-
-
- -
-

Bottom End

- -
-
-
-
- -
-
-

Bottom Left

- -
-
-
- -
-

Bottom Right

- -
-
-
- - - id: popover-left - name: Popover - Position Left - markup: | -
-
-

Left

- -
-
-
- -
-
-

Left Top

- -
-
- -
-

Left Bottom

- -
-
-
- - - id: popover-right - name: Popover - Position Right - markup: | -
-
-

Right

- -
-
-
-
- -
-
-

Right Top

- -
-
- -
-

Right Bottom

- -
-
-
- - - id: popover-start - name: Popover - Position Start - markup: | -
-
-

Start

- -
-
-
- -
-
-

Start Top

- -
-
- -
-

Start Bottom

- -
-
-
- - - id: popover-end - name: Popover - Position End - markup: | -
-
-

End

- -
-
-
- -
-
-

End Top

- -
-
- -
-

End Bottom

- -
-
-
diff --git a/components/progressbar/metadata/meter.yml b/components/progressbar/metadata/meter.yml deleted file mode 100644 index c04b96c7955..00000000000 --- a/components/progressbar/metadata/meter.yml +++ /dev/null @@ -1,114 +0,0 @@ -name: Meter -description: | - Meter is implemented using the [Progress bar](progressbar.html) component. Refer to the [Progress bar API docs](progressbar.html) for API details. - Meter should be only used with `S` or `L` t-shirt sizes. [The Meter table of options](https://spectrum.adobe.com/page/meter/#Table-of-options) provides further details on which variants are available. - - | Previous size classname | New size classname | - | ------------------------------- | --------------------------------- | - | `.spectrum-ProgressBar--sizeS` | `.spectrum-Meter--sizeS` | - | `.spectrum-ProgressBar--sizeL` | `.spectrum-Meter--sizeL` | -SpectrumSiteSlug: https://spectrum.adobe.com/page/meter/ -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration Guide - description: | - ### spectrum-Meter class - Meter now uses the class `spectrum-Meter` on the parent `div` -examples: - - id: meter-sizes - name: Sizing - markup: | -
-
-
-
Storage Space
-
50%
-
-
-
-
-
-
-
-
-
Storage Space
-
80%
-
-
-
-
- - id: meter-colors - name: Colors - markup: | -
-
-
Storage Space
-
50%
-
-
-
-
-
-
-
-
Storage Space
-
80%
-
-
-
-
-
-
-
-
Storage Space
-
90%
-
-
-
-
-
-
-
Storage Space
-
40%
-
-
-
-
-
- - id: meter-neutral - name: Neutral - markup: | -
-
-
Storage Space
-
50%
-
-
-
-
-
- - id: meter-notice - name: Notice - markup: | -
-
-
Storage Space
-
80%
-
-
-
-
-
- - id: meter-negative - name: Negative - markup: | -
-
-
Storage Space
-
90%
-
-
-
-
diff --git a/components/progressbar/metadata/progressbar.yml b/components/progressbar/metadata/progressbar.yml deleted file mode 100644 index 0d1cb0b47a9..00000000000 --- a/components/progressbar/metadata/progressbar.yml +++ /dev/null @@ -1,151 +0,0 @@ -name: Progress bar -SpectrumSiteSlug: https://spectrum.adobe.com/page/progress-bar/ -status: Verified -id: progressbar-m -sections: - - name: Migration Guide - description: | - ### Component renamed - Bar loader is now known as Progress bar. Replace all `.spectrum-BarLoader*` classnames with `.spectrum-ProgressBar*`. - - ### T-shirt sizing - Progress bar now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-ProgressBar--size*` class. - - ### Size classnames changed - Previous size classnames map as follows: - - | Previous size classname | New size classname | - | ------------------------------- | --------------------------------- | - | `.spectrum-ProgressBar--small` | `.spectrum-ProgressBar--sizeS` | - | `.spectrum-ProgressBar--large` | `.spectrum-ProgressBar--sizeM` | - - ### Label and percentage now use Field Label - Progress bar now uses [Field label](fieldlabel.html) for its label and percentage. Add the appropriately sized Field label to match the t-shirt size of the Progress bar. -examples: - - id: progressbar-m - name: Sizing - markup: | -
-
-

S

- -
-
Loading
-
50%
-
-
-
- -
-
-
-

M (default)

- -
-
Loading
-
50%
-
-
-
- -
-
- -
-

L

- -
-
Loading
-
50%
-
-
-
- -
-
- -
-

XL

- -
-
Loading
-
50%
-
-
-
- -
-
-
- - id: progressbar-m - name: Top label (default) - markup: | -
-
Loading
-
50%
-
-
-
-
- - id: progressbar-m - name: Side label - markup: | -
-
Loading
-
50%
-
-
-
-
- - id: progressbar-static-white - name: Static White - markup: | -
- -
-
Loading
-
50%
-
-
-
-
- -
- - id: progressbar-indeterminate-m - name: Indeterminate - markup: | -
-
-
-
- -
- - id: progressbar-indeterminate-m - name: Indeterminate (with label) - markup: | -
-
Loading
-
-
-
-
- - id: progressbar-m - name: Custom width - markup: | -
-
Loading
-
50%
-
-
-
-
- - id: progressbar-m - name: Custom width (side label) - markup: | -
-
Loading
-
50%
-
-
-
-
diff --git a/components/progresscircle/metadata/progresscircle.yml b/components/progresscircle/metadata/progresscircle.yml deleted file mode 100644 index 3a421c35475..00000000000 --- a/components/progresscircle/metadata/progresscircle.yml +++ /dev/null @@ -1,236 +0,0 @@ -name: Progress circle -status: Verified -SpectrumSiteSlug: https://spectrum.adobe.com/page/progress-circle/ -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration Guide - description: | - ### Component renamed - Circle loader is now known as Progress circle. Replace all `.spectrum-CircleLoader*` classnames with `.spectrum-ProgressCircle*`. -examples: - - id: progresscircle-sizes - name: Standard - markup: | - -
-
-

Small

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-

Medium

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-

Large

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - id: progresscircle-indeterminate - name: Indeterminate - markup: | -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - id: progresscircle-static-white - name: Static White - markup: | -
-
-

Standard

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-

Indeterminate

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/components/radio/metadata/radio.yml b/components/radio/metadata/radio.yml deleted file mode 100644 index 3de30ce5942..00000000000 --- a/components/radio/metadata/radio.yml +++ /dev/null @@ -1,242 +0,0 @@ -name: Radio -status: Verified -SpectrumSiteSlug: https://spectrum.adobe.com/page/radio-button/ -description: | - - Radio buttons allow users to select a single option from a list of mutually exclusive options. All possible options are exposed up front for users to compare. - - Radio buttons should not be used on their own, they should always be used within a [FieldGroup](fieldgroup.html). - - Invalid radio buttons are signified by including [HelpText](helptext.html) in a [FieldGroup](fieldgroup.html). Sample usage for an invalid radio state is included in the [FieldGroup](fieldgroup.html#invalid) documentation. - -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration Guide - description: | - ### T-shirt sizing - Radio Button now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-RadioButton--size*` class. Default styling is medium. - - ### Read-only - Radio Button now includes a read-only state in addition to the disabled state. - - Read-only radio buttons are disabled, but not all disabled radio buttons are read-only. - - Read-only radio buttons do not have a focus ring, but the button should be focusable.] - - ### Invalid/Error State - - Invalid radio buttons are signified by including [Help text](helptext.html) in a [Field group](fieldgroup.html). The `.is-invalid` class has been removed. See Field group for an example with an invalid radio group. - - ### Remove focus-ring class - We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. -examples: - - id: radio - name: Sizing - markup: | -
- -
-

S

- -
-
- - - -
-
-
- - - -
-
- -
- -
-

M (default)

- -
-
- - - -
-
-
- - - -
-
- -
- -
-

L

- -
-
- - - -
-
-
- - - -
-
- -
- -
-

XL

- -
-
- - - -
-
-
- - - -
-
- -
-
- - - id: radio - name: Standard - markup: | -
-
-

Default

- -
-
- - - -
-
-
- - - -
-
- -
- -
-

Disabled

- -
-
- - - -
-
-
- - - -
-
- -
- -
-

Read-only

- -
-
- - - -
-
-
- - - -
-
- -
-
- - - id: radio-emphasized - name: Emphasized - markup: | -
-
-

Default

- -
-
- - - -
-
-
- - - -
-
- -
- -
-

Disabled

- -
-
- - - -
-
-
- - - -
-
- -
- -
-

Read-only

- -
-
- - - -
-
-
- - - -
-
- -
-
- - - id: radio-wrapping - name: Wrapping behavior - markup: | -
- - - -
diff --git a/components/rating/metadata/rating.yml b/components/rating/metadata/rating.yml deleted file mode 100644 index 576a4c2e438..00000000000 --- a/components/rating/metadata/rating.yml +++ /dev/null @@ -1,366 +0,0 @@ -name: Rating -status: Verified -SpectrumSiteSlug: https://spectrum.adobe.com/page/rating/ -sections: - - name: A note on emphasized and quiet - description: | - Spectrum has chosen the variant previously known as `quiet` to be the default and has added an `emphasized` variant with the same styles as the previous default. -examples: - - id: rating - name: Standard - markup: | -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- - id: rating - name: Selected - markup: | -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- - id: rating - name: Read-only - description: A non-interactive rating. - markup: | -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- - id: rating-emphasized - name: Emphasized - markup: | -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- - id: rating-emphasized - name: Emphasized (selected) - markup: | -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- - id: rating-emphasized - name: Emphasized (read-only) - markup: | -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- - id: rating - name: Disabled - markup: | -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
diff --git a/components/search/metadata/search.yml b/components/search/metadata/search.yml deleted file mode 100644 index db7ce1ebc4c..00000000000 --- a/components/search/metadata/search.yml +++ /dev/null @@ -1,256 +0,0 @@ -name: Search -SpectrumSiteSlug: https://spectrum.adobe.com/page/search-field/ -description: 'This component contains a single input field with both a magnifying glass icon and a clear ("reset") button displayed within it. When making use of this component, the clear button should only be displayed when the input has a value.' -sections: - - name: Migration Guide - description: | - ### New Textfield markup - Search now uses the new Textfield markup. See the [Textfield migration guide](textfield.html#migrationguide) for more information. - - ### Quiet Search requires `.spectrum-Search--quiet` - You now must add `.spectrum-Search--quiet` for Quiet Search. - - ### `.spectrum-Search-icon` is required again - You need to add the `.spectrum-Search-icon` class for Express support. This was previously not required, but has been added back to support the Express design. - - ### New ClearButton markup - See the [ClearButton migration guide](clearbutton.html#migrationguide) for more information. - - ### `.spectrum-Search-clearButton` must be added to `.spectrum-ClearButton` - The `.spectrum-Search-clearButton` class is now required on the `.spectrum-ClearButton`. - - ### `.spectrum-Search-textfield` must be added to `.spectrum-Textfield` - The `.spectrum-Search-textfield` class is now required on the `.spectrum-Textfield`. - -examples: - - id: search - name: Standard - markup: | -
-
-

Default

- -
-
- - -
- -
-
-
-

Disabled

- -
-
- - -
- -
-
-
- - - id: search-quiet - name: Quiet - markup: | -
-
-

Default

- -
-
- - -
- -
-
-
-

Disabled

- -
-
- - -
- -
-
-
- - - id: search-with-help-text - name: With Help Text - markup: | -
-
-

Standard

- -
-
- - -
-
-
Example help text. Lorem ipsum dolor sit amet.
-
- -
-
-
-

Quiet

- -
-
- - -
-
-
Example help text. Lorem ipsum dolor sit amet.
-
- -
-
-
- - - id: search-standard-sizes - name: Standard Sizes - markup: | -
-
-

Small

- -
-
- - -
-
-
Example help text. Lorem ipsum dolor sit amet.
-
- -
-
-
-

Medium

- -
-
- - -
-
-
Example help text. Lorem ipsum dolor sit amet.
-
- -
-
-
-

Large

- -
-
- - -
-
-
Example help text. Lorem ipsum dolor sit amet.
-
- -
-
-
-

Extra Large

- -
-
- - -
-
-
Example help text. Lorem ipsum dolor sit amet.
-
- -
-
-
diff --git a/components/sidenav/metadata/sidenav.yml b/components/sidenav/metadata/sidenav.yml deleted file mode 100644 index 60f24ef0c93..00000000000 --- a/components/sidenav/metadata/sidenav.yml +++ /dev/null @@ -1,220 +0,0 @@ -name: Side navigation -status: Verified -SpectrumSiteSlug: https://spectrum.adobe.com/page/side-navigation/ -description: | - Side navigation lets users navigate the entire content of a product or a section. Make sure to use the appropriate variant for the context and user needs. Don’t mix behavior, styles, or variations together in a single navigation menu. -sections: - - name: Migration Guide - description: | - Core token migration work and design updates added a span tag wrapping the link text. - -examples: - - id: sidenav - name: Standard - description: When navigation is simple use the standard or single level navigation. - markup: | - - - id: sidenav - name: Multilevel - description: Use a multi-level side navigation when there are multiple layers of hierarchical navigation. - markup: | - - - - id: sidenav - name: Heading - description: When navigation is simple but categorical, use the single level side navigation with headings. - markup: | - - - id: sidenav - name: Icon - description: Icons can be displayed in first-level items of any type of side navigation (single level or multi-level). - markup: | - diff --git a/components/slider/metadata/slider.yml b/components/slider/metadata/slider.yml deleted file mode 100644 index f16fb512e45..00000000000 --- a/components/slider/metadata/slider.yml +++ /dev/null @@ -1,487 +0,0 @@ -name: Slider -SpectrumSiteSlug: https://spectrum.adobe.com/page/slider/ -sections: - - name: Migration Guide - description: | - ### Dial is now a separate component - Dial has been moved to the [Dial](dial.html) component. - - ### Color slider is now a separate component - Color slider has been moved to the [Color Slider](colorslider.html) component. - Replace class names starting with `.spectrum-Slider` with `.spectrum-ColorSlider`. - - ### Use class `is-dragged` instead of `u-isGrabbing` - On `spectrum-Slider-handle` when dragging, use `is-dragged` instead of `u-isGrabbing`. - - ### Three Handles is included in the `range` variant - When using a slider with three handles, classify it as a `range` variant to apply correct styling - - ### Indicating focus - Focus must be bubbled up to the parent so descendants siblings can be styled. - - Thus, implementations should add the following class to the `.spectrum-Slider` parent class in the following situations: - - * `.is-disabled` - when the slider is disabled - - Implementations should also bubble the following class to the `.spectrum-Slider-controls` parent class in the following situations: - - * `.is-focused` - when the handle input is focused with the mouse or keyboard -examples: - - id: slider - name: Standard - markup: | -
-
-
-
- -
-
-
-
-
-
-
-
- -
-
-
-
- - id: slider-sizes - name: Sizes - markup: | -
-
-

S

-
-
- -
14
-
-
-
-
- -
-
-
-
-
-
-
-
- -
-
-
-
-
- -
-

M

-
-
- -
14
-
-
-
-
- -
-
-
-
-
-
-
-
- -
-
-
-
-
- -
-

L

-
-
- -
14
-
-
-
-
- -
-
-
-
-
-
-
-
- -
-
-
-
-
- -
-

XL

-
-
- -
14
-
-
-
-
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
- - id: slider-label - name: With Label - markup: | -
-
- -
14
-
-
-
-
- -
-
-
-
-
-
- -
14
-
-
-
-
- -
-
-
-
- - id: slider-side-label - name: With Side Label - markup: | -
-
- -
-
-
-
- -
-
-
-
-
14
-
-
- - - id: slider-fill - name: Filled - description: With fill. - markup: | -
-
- -
14
-
-
-
-
- -
-
-
-
-
-
- -
14
-
-
-
-
- -
-
-
-
- - id: slider-fill - name: Filled-Offset - description: With fill and offset. - markup: | -
-
- -
14
-
-
-
-
- -
-
-
-
-
-
-
- -
14
-
-
-
-
- -
-
-
-
-
-
-
- -
14
-
-
-
-
- -
-
-
-
-
- - id: slider-range - name: Range - description: A range slider with two handles. - markup: | -
- - -
- -
- - -
- - id: slider-tick - name: Tick - description: Spectrum tick slider - markup: | -
-
- -
14
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
- -
14
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
- - id: slider-tick - name: Tick with Labels - description: Spectrum tick slider with labels - markup: | -
-
- -
14
-
-
-
-
-
0
-
-
-
20
-
-
-
40
-
-
-
60
-
-
-
80
-
-
-
100
-
-
-
-
-
-
-
-
- -
-
-
-
- -
-
- -
14
-
-
-
-
-
0
-
-
-
20
-
-
-
40
-
-
-
60
-
-
-
80
-
-
-
100
-
-
-
-
-
-
-
-
- -
-
-
-
- - id: slider-ramp - name: Ramp - markup: | -
-
- -
14
-
-
-
- -
-
- -
-
-
-
-
- -
14
-
-
-
- -
-
- -
-
-
diff --git a/components/splitview/metadata/splitview.yml b/components/splitview/metadata/splitview.yml deleted file mode 100644 index cec1ec13231..00000000000 --- a/components/splitview/metadata/splitview.yml +++ /dev/null @@ -1,70 +0,0 @@ -name: Split view -examples: - - id: splitview - name: Horizontal - markup: | -
-
Left
-
-
Right
-
- - id: splitview-horizontal - name: Horizontally resizable - markup: | -
-
Left
-
-
-
-
Right
-
- - id: splitview-left - name: Horizontal collapsed left - markup: | -
-
Left
-
-
-
-
Right
-
- - id: splitview-right - name: Horizontal collapsed right - markup: | -
-
Left
-
-
-
-
Right
-
- - id: splitview-vertical - name: Vertically resizable - markup: | -
-
Left
-
-
-
-
Right
-
- - id: splitview-vertical-top - name: Vertical collapsed top - markup: | -
-
Left
-
-
-
-
Right
-
- - id: splitview-vertical-bottom - name: Vertical collapsed bottom - markup: | -
-
Left
-
-
-
-
Right
-
diff --git a/components/statuslight/metadata/statuslight.yml b/components/statuslight/metadata/statuslight.yml deleted file mode 100644 index 09359419d1c..00000000000 --- a/components/statuslight/metadata/statuslight.yml +++ /dev/null @@ -1,93 +0,0 @@ -name: Status light -SpectrumSiteSlug: https://spectrum.adobe.com/page/status-light/ -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration Guide - description: | - ### T-shirt sizing - Status Light now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-StatusLight--size*` class. -examples: - - id: statuslight-sizing - name: Sizing - status: Verified - markup: | -
-
-

S

- -
Small
-
-
-

M (default)

- -
Medium
-
- -
-

L

- -
Large
-
- -
-

XL

- -
Extra Large
-
-
- - id: statuslight-wrapping - name: Wrapping - status: Verified - markup: | -
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Convallis tellus id interdum velit laoreet id donec ultrices tincidunt. Sollicitudin nibh sit amet commodo nulla facilisi. Auctor urna nunc id cursus. Sem viverra aliquet eget sit amet tellus cras adipiscing.
- - - id: statuslight-colors - name: Colors - status: Verified - markup: | -
Gray Status
-
Red Status
-
Orange Status
-
Yellow Status
-
Chartreuse Status
-
Celery Status
-
Green Status
-
Seafoam Status
-
Cyan Status
-
Blue Status
-
Indigo Status
-
Purple Status
-
Fuchsia Status
-
Magenta Status
- - id: statuslight-neutral - name: Neutral - status: Verified - markup: | -
Paused
- - id: statuslight-accent - name: Accent - status: Verified - markup: | -
Accent
- - id: statuslight-info - name: Info - status: Verified - markup: | -
Active
- - id: statuslight-positive - name: Positive - status: Verified - markup: | -
Approved
- - id: statuslight-notice - name: Notice - status: Verified - markup: | -
Needs Approval
- - id: statuslight-negative - name: Negative - status: Verified - markup: | -
Rejected
diff --git a/components/steplist/metadata/steplist.yml b/components/steplist/metadata/steplist.yml deleted file mode 100644 index 30c45638424..00000000000 --- a/components/steplist/metadata/steplist.yml +++ /dev/null @@ -1,274 +0,0 @@ -name: Steplist -examples: - - id: steplist-current - name: Standard (static) - description: A basic steplist. - markup: | -
-
- - - - - -
-
- - - - -
-
- - - - -
-
- - - - -
-
- - id: steplist-current - name: Standard (interactive) - description: A basic interactive steplist. - markup: | -
-
- - - - - - - -
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
- - id: steplist-current - name: With label (static) - description: A static steplist with labels. - markup: | -
-
- Step 1 - - - - -
-
- Step 2 - - - - -
-
- Step 3 - - - - -
-
- Step 4 - - - - -
-
- - id: steplist-current - name: With label (interactive) - description: An interactive steplist with labels. - markup: | -
-
- - Step 1 - - - - - -
-
- - Step 2 - - - - - -
-
- - Step 3 - - - - - -
-
- - Step 4 - - - - - -
-
- - id: steplist-current - name: With tooltip (static) - description: A static steplist with tooltips. - markup: | -

Static variant

- -
-
-
-
- Step 1 - -
-
-
-
- - - -
-
-
-
- Step 2 - -
-
-
-
- - - -
-
-
-
- Step 3 - -
-
-
-
- - - -
-
- - - Step 4 - - - - - - - - -
-
- - id: steplist-current - name: With tooltip (interactive) - description: An interactive steplist with tooltips. - markup: | -
-
- - - - Step 1 - - - - - - - - - -
-
- - - - Step 2 - - - - - - - - - -
-
- - - - Step 3 - - - - - - - - - -
-
- - - - Step 4 - - - - - - - - - -
-
diff --git a/components/stepper/metadata/stepper.yml b/components/stepper/metadata/stepper.yml deleted file mode 100644 index 5e92079ede1..00000000000 --- a/components/stepper/metadata/stepper.yml +++ /dev/null @@ -1,439 +0,0 @@ -name: Stepper -status: Contribution -sections: - - name: Migration Guide - description: | - ### New Textfield markup - Stepper now uses the new Textfield markup. See the [Textfield migration guide](textfield.html#migrationguide) for more information. - - ### Use InFieldButton instead of FieldButton - Stepper now uses InFieldButtons instead of FieldButtons for the up/down buttons. - - ### Icon classes removed - `.spectrum-Stepper-stepUpIcon` and `.spectrum-Stepper-stepDownIcon` are no longer needed and have been removed. - - ### Indicating validity, focus, and disable - Validity and focus must be bubbled up to the parent so descendants siblings can be styled. - - Thus, implementations must add the following classes in the following situations: - - * `.spectrum-Stepper.is-focused` - when the input or button is focused with the mouse - * `.spectrum-Stepper.is-keyboardFocused` - when the input or button is focused with the keyboard - * `.spectrum-Stepper.is-valid` - when the input has an explicit valid state - * `.spectrum-Stepper.is-invalid` - when the input has an explicit invalid state - * `.spectrum-Stepper.is-disabled` - when the component is disabled. Note that the Textfield must have `.is-disabled`, and the `` and `` must have the `[disabled]` property. - -examples: - - id: stepper - name: Standard - markup: | -
-
-

S

-
-
- -
- - - - -
-
-
-

M

-
-
- -
-
- - -
-
-
-
-

L

-
-
- -
- - - - -
-
-
-

XL

-
-
- -
- - - - -
-
-
- - id: stepper-focused - name: Focused - markup: | -
-
- -
- - - - -
- - id: stepper-keyboard-focused - name: Keyboard Focused - markup: | -
-
- -
- - - - -
- - id: stepper-invalid - name: Invalid - markup: | -
-
- -
- - - - -
- - id: stepper-invalid-focused - name: Invalid (focused) - markup: | -
-
- -
- - - - -
- - id: stepper-invalid-keyboard-focused - name: Invalid (keyboard focused) - markup: | -
-
- -
- - - - -
- - id: stepper-disabled - name: Disabled - markup: | -
-
- -
- - - - -
- - id: stepper-quiet - name: Quiet - markup: | -
-
- -
- - - - -
- - id: stepper-quiet-focused - name: Quiet (focused) - markup: | -
-
- -
- - - - -
- - id: stepper-quiet-keyboard-focused - name: Quiet (keyboard focused) - markup: | -
-
- -
- - - - -
- - id: stepper-quiet-invalid - name: Quiet (invalid) - markup: | -
-
- -
- - - - -
- - id: stepper-quiet-invalid-focused - name: Quiet (invalid, focused) - markup: | -
-
- -
- - - - -
- - id: stepper-quiet-invalid-keyboard-focused - name: Quiet (invalid, keyboard focused) - markup: | -
-
- -
- - - - -
- - id: stepper-quiet-disabled - name: Quiet (disabled) - markup: | -
-
- -
- - - - -
diff --git a/components/swatch/metadata/swatch.yml b/components/swatch/metadata/swatch.yml deleted file mode 100644 index 85c28dfeb29..00000000000 --- a/components/swatch/metadata/swatch.yml +++ /dev/null @@ -1,301 +0,0 @@ -name: Swatch -status: Verified -SpectrumSiteSlug: https://spectrum.adobe.com/page/swatch/ -description: | - - Set `--spectrum-picked-color` to customize the swatch fill background color. -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. -examples: - - id: swatch-sizing - name: Sizing - markup: | -
-
-

XS

- -
-
-
-
-
-
-
-
-
-
-
-

S

- -
-
-
-
-
-
-
-
-
-
-
-

M (default)

- -
-
-
-
-
-
-
-
-
-
- -
-

L

- -
-
-
-
-
-
-
-
-
-
- -
- - id: swatch-roundingnone - name: Rounding - None - markup: | -
-
-
-
- - id: swatch-roundingfull - name: Rounding - Full - markup: | -
-
-
-
- - id: swatch-lightborder - name: Light border - markup: | -
-
-
-
- - id: swatch-noborder - name: No border - markup: | -
-
-
-
- - id: swatch-rectangle - name: Shape - Rectangle - markup: | -
-
-
-
- - id: swatch-image - name: Image - markup: | -
-
- -
-
- - id: swatch-gradient - name: Gradient - markup: | -
-
-
-
-
- - id: swatch-selection - name: Selected - markup: | -
-
-
- - id: swatch-mixedvalue - name: Mixed Value - markup: | -
-
- -
-
- - id: swatch-nothing - name: Nothing - markup: | -
-
-

XS

- -
-
-
-
-
-
-
-
-
-
-
-
-
-

S

- -
-
-
-
-
-
-
-
-
-
-
-
-
-

M (default)

- -
-
-
-
-
-
-
-
-
-
-
-
- -
-

L

- -
-
-
-
-
-
-
-
-
-
-
-
- -
- - id: swatch-selection - name: Disabled - description: | - [Hide unavailable swatches when possible](https://spectrum.corp.adobe.com/page/swatch/#Hide-unavailable-swatches-when-possible) - markup: | - -
-
-

XS

- -
-
-
- - - - -
-
-
-
- - - - -
-
-
-
-
-

S

- -
-
-
- - - - -
-
-
-
- - - - -
-
-
-
-
-

M (default)

- -
-
-
- - - - -
-
-
-
- - - - -
-
-
-
- -
-

L

- -
-
-
- - - - -
-
-
-
- - - - -
-
-
-
- -
diff --git a/components/swatchgroup/metadata/swatchgroup.yml b/components/swatchgroup/metadata/swatchgroup.yml deleted file mode 100644 index 2c9905783d6..00000000000 --- a/components/swatchgroup/metadata/swatchgroup.yml +++ /dev/null @@ -1,296 +0,0 @@ -name: Swatch group -status: Verified -SpectrumSiteSlug: https://spectrum.adobe.com/page/swatchgroup/ -description: | - - Grouped swatches must use the `.spectrum-Swatch--roundingNone` class to help minimize the Hermann grid illusion - - Swatches with a color that have a contrast ratio of less than 3:1 should have `.spectrum-Swatch--lightBorder` class, otherwise, it should have the `.spectrum-Swatch--noBorder` class -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. -examples: - - id: swatchgroup-compact - name: Density - Compact - markup: | -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - id: swatchgroup-regular - name: Density - Regular - markup: | -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - id: swatchgroup-spacious - name: Density - Spacious - markup: | -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - id: swatchgroup-sizing - name: Sizing - description: Use any size swatches as necessary. - markup: | -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - id: swatchgroup-rounding - name: Rounding - Regular - description: Only use rounded swatches if there is a single row. - markup: | -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - id: swatchgroup-rounding - name: Rounding - Full - description: Only use rounded swatches if there is a single row. - markup: | -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/components/switch/metadata/switch.yml b/components/switch/metadata/switch.yml deleted file mode 100644 index 0cebd67302d..00000000000 --- a/components/switch/metadata/switch.yml +++ /dev/null @@ -1,129 +0,0 @@ -name: Switch -SpectrumSiteSlug: https://spectrum.adobe.com/page/switch/ -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration Guide - description: | - ### Component renamed - Toggle is now known as Switch. Replace all `.spectrum-ToggleSwitch*` classnames with `.spectrum-Switch*`. - ### T-shirt sizing - Switch now supports t-shirt sizing and requires that you specify the size by adding a .spectrum-Switch--size* class. The default size is "medium". - ### Quiet and emphasized - Spectrum has chosen the variant previously known as `quiet` to be the default and has added an `emphasized` variant with the same styles as the previous default. - If you were using the `quiet` variant, the `.spectrum-Switch--quiet` class is no longer required and can be removed. - If you need a switch to look like it did before this change, add `.spectrum-Switch--emphasized`. - - ### A/B toggle variant removed - It's been deprecated and removed. A similar use case could be served by using Radio buttons. - - ### Remove focus-ring class - We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. -examples: - - id: switch - name: Standard - status: Verified - description: The on/off variant of the Switch. - markup: | -
- - - -
-
- - - -
- -
- -
- - - -
-
- - - -
- - id: switch - name: Sizes - status: Verified - description: The t-shirt sizes of the Switch. - markup: | - -
- - - -
- -
- -
- - - -
- -
- -
- - - -
- -
- -
- - - -
- - id: switch - name: Emphasis - status: Verified - description: The emphasized variant of the Switch. - markup: | -
- - - -
-
- - - -
- -
- -
- - - -
-
- - - -
- - id: switch - name: Disabled - status: Verified - description: The disabled variant of the Switch. - markup: | -
- - - -
-
- - - -
diff --git a/components/table/metadata/table.yml b/components/table/metadata/table.yml deleted file mode 100644 index df332cdf499..00000000000 --- a/components/table/metadata/table.yml +++ /dev/null @@ -1,1347 +0,0 @@ -name: Table -description: The Table component is for displaying tabular info, with the option for sorting or row selection. -SpectrumSiteSlug: https://spectrum.adobe.com/page/table/ -sections: - - name: Custom properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration guide - description: | - ### Sorted icon moved to left side of text - The sorted icon was previously on the right side of the text, but has been moved to the left in the markup. If used on the right side of the text, the spacing between icon and text will be incorrect. - - ### Remove whitespace between column title text and sort icon(s) - In the column header, when the sort icon or header menu icon is displayed, remove any white space in the HTML markup between the icon and the column title. This ensures that no extra space is created. Also, the column title text is now wrapped in a `` element when the column is sortable. -examples: - - id: table-medium - name: Default (medium) - description: "Tables come in four different sizes: small, medium, large, and extra-large. The medium size is the default and recommended option." - markup: | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Column title - - Column title - Column title
Row Item AlphaRow Item AlphaRow Item Alpha
Row Item BravoRow Item BravoRow Item Bravo
Row Item CharlieRow Item CharlieRow Item Charlie
Row Item DeltaRow Item DeltaRow Item Delta
Row Item EchoRow Item EchoRow Item Echo
- - id: table-small - name: T-Shirt sizes - description: "Tables come in four different sizes: small, medium, large, and extra-large. The medium size is the default and recommended option." - markup: | -
-

Small

- - - - - - - - - - - - - - - - - - - - - -
- - Column title - - - Column title - Column title
Row Item BravoRow Item BravoRow Item Bravo
Row Item AlphaRow Item AlphaRow Item Alpha
-
-
-

Medium

- - - - - - - - - - - - - - - - - - - - - -
- - Column title - - - Column title - Column title
Row Item BravoRow Item BravoRow Item Bravo
Row Item AlphaRow Item AlphaRow Item Alpha
-
-
-

Large

- - - - - - - - - - - - - - - - - - - - - -
- - Column title - - - Column title - Column title
Row Item BravoRow Item BravoRow Item Bravo
Row Item AlphaRow Item AlphaRow Item Alpha
-
- -
-

Extra Large

- - - - - - - - - - - - - - - - - - - - - -
- - Column title - - - Column title - Column title
Row Item BravoRow Item BravoRow Item Bravo
Row Item AlphaRow Item AlphaRow Item Alpha
-
- - id: table-compact - name: Compact - description: The compact variant decreases the spacing used within the table. - markup: | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Column title - - Column title - Column title
Row Item AlphaRow Item AlphaRow Item Alpha
Row Item BravoRow Item BravoRow Item Bravo
Row Item CharlieRow Item CharlieRow Item Charlie
Row Item DeltaRow Item DeltaRow Item Delta
Row Item EchoRow Item EchoRow Item Echo
- - id: table-spacious - name: Spacious - description: The spacious variant increases the spacing used within the table. - markup: | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Column title - - Column title - Column title
Row Item AlphaRow Item AlphaRow Item Alpha
Row Item BravoRow Item BravoRow Item Bravo
Row Item CharlieRow Item CharlieRow Item Charlie
Row Item DeltaRow Item DeltaRow Item Delta
Row Item EchoRow Item EchoRow Item Echo
- - id: table-multi-select - name: Multi-select - description: The standard multi-select table includes a column of checkboxes used for selecting rows. - markup: | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - Column title - - Column title - Column title
- - - Row Item Alpha - Row Item AlphaRow Item Alpha
- - - Row Item Bravo - Row Item BravoRow Item Bravo
- - - Row Item Charlie - Row Item CharlieRow Item Charlie
- - - Row Item Delta - Row Item DeltaRow Item Delta
- - - Row Item Echo - Row Item EchoRow Item Echo
- - id: table-multi-select-non-emphasized - name: Non-emphasized multi-select - description: Excluding the `spectrum-Table--emphasized` class will change the style of selected rows. - markup: | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - Column title - - Column title - Column title
- - - Row Item Alpha - Row Item AlphaRow Item Alpha
- - - Row Item Bravo - Row Item BravoRow Item Bravo
- - - Row Item Charlie - Row Item CharlieRow Item Charlie
- - - Row Item Delta - Row Item DeltaRow Item Delta
- - - Row Item Echo - Row Item EchoRow Item Echo
- - id: table-quiet - name: Quiet - description: The quiet table has a transparent background and no borders on the left and right. - markup: | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Column title - - Column title - Column title
Row Item AlphaRow Item AlphaRow Item Alpha
Row Item BravoRow Item BravoRow Item Bravo
Row Item CharlieRow Item CharlieRow Item Charlie
Row Item DeltaRow Item DeltaRow Item Delta
Row Item EchoRow Item EchoRow Item Echo
- - id: table-quiet-multi-select - name: Multi-select (quiet) - markup: | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - Column title - - Column title - Column title
- - - Row Item Alpha - Row Item AlphaRow Item Alpha
- - - Row Item Bravo - Row Item BravoRow Item Bravo
- - - Row Item Charlie - Row Item CharlieRow Item Charlie
- - - Row Item Delta - Row Item DeltaRow Item Delta
- - - Row Item Echo - Row Item EchoRow Item Echo
- - id: table-column-dividers - name: Column dividers - description: The standard table can display column dividers by including the `spectrum-Table-cell--divider` class with `spectrum-Table-cell`. Use sparingly to group related content (see guidelines for more info). - markup: | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Column title - - Column title - Column title
Row Item EchoRow Item EchoRow Item Echo
Row Item DeltaRow Item DeltaRow Item Delta
Row Item CharlieRow Item CharlieRow Item Charlie
Row Item BravoRow Item BravoRow Item Bravo
Row Item AlphaRow Item AlphaRow Item Alpha
- - id: table-summary-row - name: Summary row - description: "Tables can have a summary row to show totals, at either the top or the bottom of the table." - markup: | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Column title - - Column title - Column title
Row Item Alpha182875
Row Item Bravo233679
Row Item Delta71308
Summary487862
- - id: table-section-header-row - name: Section header row - description: "Tables can style one or more rows as section headers." - markup: | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Column title - - Column title - Column title
Section header
Row Item AlphaRow Item AlphaRow Item Alpha
Row Item AlphaRow Item AlphaRow Item Alpha
Row Item BravoRow Item BravoRow Item Bravo
Another section header for the table
Row Item DeltaRow Item DeltaRow Item Delta
Row Item EchoRow Item EchoRow Item Echo
- - id: table-section-header-row-quiet - name: Section header row (quiet) - markup: | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Column title - - Column title - Column title
Section header
Row Item AlphaRow Item AlphaRow Item Alpha
Row Item AlphaRow Item AlphaRow Item Alpha
Row Item BravoRow Item BravoRow Item Bravo
Another section header for the table
Row Item DeltaRow Item DeltaRow Item Delta
Row Item EchoRow Item EchoRow Item Echo
- - id: table-scrollable - name: Scrollable with fixed column headers - description: | - A table can be wrapped in a fixed height div with the `spectrum-Table-scroller` class. This allows scrolling of the table body and makes the column headers sticky (i.e. fixed to the top on scroll). - - When using the scrollable wrapper, the column headers must have a solid background color set. This can be customized to match the parent background with the custom property `--mod-table-header-background-color-scrollable`. - - To make sure that reverse keyboard link navigation (shift-tab) keeps the whole cell in focus, `--mod-table-current-header-height` should be dynamically updated with JS to match the height of `.spectrum-Table-head`. - markup: | -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Column title - - Column title - Column title
Row Item AlphaRow Item AlphaRow Item Alpha
Row Item BravoRow Item BravoRow Item Bravo
Row Item CharlieRow Item CharlieRow Item Charlie
Row Item DeltaRow Item DeltaRow Item Delta
Row Item EchoRow Item EchoRow Item Echo
Row Item FoxtrotRow Item FoxtrotRow Item Foxtrot
-
- - id: table-divs - name: Divs - description: A table can alternatively be composed entirely of `
` tags, instead of a ``. This example also uses the scrollable wrapper. - markup: | -
-
-
-
-
- Column title -
-
- Column title -
-
Column title
-
-
-
-
-
Row Item Alpha
-
Row Item Alpha
-
Row Item Alpha
-
-
-
Row Item Bravo
-
Row Item Bravo
-
Row Item Bravo
-
-
-
Row Item Charlie
-
Row Item Charlie
-
Row Item Charlie
-
-
-
Row Item Delta
-
Row Item Delta
-
Row Item Delta
-
-
-
Row Item Echo
-
Row Item Echo
-
Row Item Echo
-
-
-
Row Item Foxtrot
-
Row Item Foxtrot
-
Row Item Foxtrot
-
-
-
-
- - id: table-collapsible - name: Collapsible rows - description: "In a table with collapsible rows, all child items must have columns that match the parent items. See the Guidelines for more info on how and when to use collapsible rows." - markup: | -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Column title - - Column title - Column title
-
- -
Row Item Alpha -
-
Row Item AlphaRow Item Alpha
-
- -
Row Item Bravo -
-
Row Item BravoRow Item Bravo
-
- -
Row Item Delta
-
- 		Row Item DeltaRow Item Delta
-
-
Row Item Echo
-
- 		Row Item EchoRow Item Echo
-
-
Row Item Foxtrot
-
- 		Row Item FoxtrotRow Item Foxtrot
- - id: table-thumbnails - name: Thumbnails - description: "Thumbnails can be used in the table content, with some additional markup and classes for alignment. This variant can also be combined with collapsible rows." - markup: | - - - - - - - - - - - - - - - - - - - - - - - - - -
- - Animals - - - Number -
-
-
-
- Placeholder image -
-
-
Birds
-
- 		2
-
-
-
- Placeholder image -
-
-
Ducks
-
- 		23
-
-
-
- Placeholder image -
-
-
Goats
-
- 		7
-
-
-
- Placeholder image -
-
-
Rabbits
-
- 		18
- - id: table-body-dropzone-table - name: Body dropzone - markup: | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Column title - - Column title - Column title
Row Item AlphaRow Item AlphaRow Item Alpha
Row Item BravoRow Item BravoRow Item Bravo
Row Item CharlieRow Item CharlieRow Item Charlie
Row Item DeltaRow Item DeltaRow Item Delta
Row Item EchoRow Item EchoRow Item Echo
- - id: table-row-dropzone - name: Row dropzone - description: Rows that accept dropped content. - markup: | -
-
-
-
-
- Column title -
-
- Column title -
-
Column title
-
-
-
-
-
Row Item Alpha
-
Row Item Alpha
-
Row Item Alpha
-
-
-
Row Item Bravo
-
Row Item Bravo
-
Row Item Bravo
-
-
-
Row Item Charlie
-
Row Item Charlie
-
Row Item Charlie
-
-
-
Row Item Delta
-
Row Item Delta
-
Row Item Delta
-
-
-
Row Item Echo
-
Row Item Echo
-
Row Item Echo
-
-
-
-
- - id: table-row-dropzone-quiet - name: Row dropzone (quiet) - markup: | -
-
-
-
-
- Column title -
-
- Column title -
-
Column title
-
-
-
-
-
Row Item Alpha
-
Row Item Alpha
-
Row Item Alpha
-
-
-
Row Item Bravo
-
Row Item Bravo
-
Row Item Bravo
-
-
-
Row Item Charlie
-
Row Item Charlie
-
Row Item Charlie
-
-
-
Row Item Delta
-
Row Item Delta
-
Row Item Delta
-
-
-
Row Item Echo
-
Row Item Echo
-
Row Item Echo
-
-
-
-
diff --git a/components/tabs/metadata/tabs.yml b/components/tabs/metadata/tabs.yml deleted file mode 100644 index a76e85dbef3..00000000000 --- a/components/tabs/metadata/tabs.yml +++ /dev/null @@ -1,738 +0,0 @@ -name: Tabs -SpectrumSiteSlug: https://spectrum.adobe.com/page/tabs/ -sections: - - name: Migration Guide - description: | - ### T-shirt sizing - Tabs now support t-shirt sizing and require that you specify the size by adding a `.spectrum-Tabs--size*` class. - - ### Change workflow icon size to medium - If you use a workflow icon with tab items, please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`. - - ### Compact Tabs - Compact tabs should not be used without `.spectrum-Tabs--quiet`. -examples: - - id: tabs-sizing - name: Sizing - markup: | -

S

-
-
- Tab 1 -
-
- Tab 2 -
-
- Tab 3 -
-
- Tab 4 -
-
-
-

M (default)

-
-
- Tab 1 -
-
- Tab 2 -
-
- Tab 3 -
-
- Tab 4 -
-
-
-

L

-
-
- Tab 1 -
-
- Tab 2 -
-
- Tab 3 -
-
- Tab 4 -
-
-
-

XL

-
-
- Tab 1 -
-
- Tab 2 -
-
- Tab 3 -
-
- Tab 4 -
-
-
- - id: tabs - name: Basic tabs - status: Verified - markup: | -
-
- Tab 1 -
-
- Tab 2 -
-
- Tab 3 -
-
- Tab 4 -
-
-
- - id: tabs-icon - name: Tabs with icons - status: Verified - markup: | -
-
- - Tab 1 -
-
- - Tab 2 -
-
- - Tab 3 -
-
- - Tab 4 -
-
-
- - id: tabs-disabled - name: Disabled - status: Verified - markup: | -
-
- Tab 1 -
-
- Tab 2 -
-
- Tab 3 -
-
- Tab 4 -
-
-
- - id: tabs-quiet - name: Quiet - status: Verified - markup: | -
-
- Tab 1 -
-
- Tab 2 -
-
- Tab 3 -
-
- Tab 4 -
-
-
- - id: tabs-quiet-emphasized - name: Quiet and emphasized - status: Verified - markup: | -
-
- Tab 1 -
-
- Tab 2 -
-
- Tab 3 -
-
- Tab 4 -
-
-
- - id: tabs-quiet-icon - name: Quiet tabs with icons - status: Verified - markup: | -
-
- - Tab 1 -
-
- - Tab 2 -
-
- - Tab 3 -
-
- - Tab 4 -
-
-
- - id: tabs-emphasized - name: Emphasized tabs - markup: | -
-
- Tab 1 -
-
- Tab 2 -
-
- Tab 3 -
-
- Tab 4 -
-
-
- - id: tabs-emphasized-icon - name: Emphasized tabs with icons - markup: | -
-
- - Tab 1 -
-
- - Tab 2 -
-
- - Tab 3 -
-
- - Tab 4 -
-
-
- - id: tabs-compact - name: Compact (quiet) - description: "Compact tabs should never be used without the quiet variation." - markup: | -
-
- Tab 1 -
-
- Tab 2 -
-
- Tab 3 -
-
- Tab 4 -
-
-
- - id: tabs-compact-emphasized-quiet - name: Compact emphasized (quiet) - markup: | -
-
- Tab 1 -
-
- Tab 2 -
-
- Tab 3 -
-
- Tab 4 -
-
-
- - id: tabs-quiet-compact-icons-text - name: Compact tabs with icons and text (quiet) - markup: | -
-
- - Tab 1 -
-
- - Tab 2 -
-
- - Tab 3 -
-
- - Tab 4 -
-
-
- - id: tabs-quiet-compact-emphasized-icons-text - name: Compact, emphasized tabs with icons and text (quiet) - markup: | -
-
- - Tab 1 -
-
- - Tab 2 -
-
- - Tab 3 -
-
- - Tab 4 -
-
-
- - id: tabs-quiet-compact-only-icons - name: Compact tabs with icons only (quiet) - markup: | -
-
- -
-
- -
-
- -
-
- -
-
-
- - id: tabs-quiet-compact-emphasized-icon - name: Compact, emphasized tabs with icons only (quiet) - markup: | -
-
- -
-
- -
-
- -
-
- -
-
-
- - id: tabs-vertical - name: Vertical tabs - markup: | -
-
- Tab 1 -
-
- Tab 2 -
-
- Tab 3 -
-
- Tab 4 -
-
-
- - id: tabs-vertical-right - name: Vertical Right tabs - markup: | -
-
- Tab 1 -
-
- Tab 2 -
-
- Tab 3 -
-
- Tab 4 -
-
-
- - id: tabs-vertical-emphasized - name: Vertical, emphasized tabs - markup: | -
-
- Tab 1 -
-
- Tab 2 -
-
- Tab 3 -
-
- Tab 4 -
-
-
- - id: tabs-vertical-icon - name: Vertical tabs with icon and text - markup: | -
-
- - Tab 1 -
-
- - Tab 2 -
-
- - Tab 3 -
-
- - Tab 4 -
-
-
- - id: tabs-vertical-icon-emphasized - name: Vertical, emphasized tabs with icon and text - markup: | -
-
- - Tab 1 -
-
- - Tab 2 -
-
- - Tab 3 -
-
- - Tab 4 -
-
-
- - id: tabs-compact-vertical - name: Compact vertical tabs - markup: | -
-
- Tab 1 -
-
- Tab 2 -
-
- Tab 3 -
-
- Tab 4 -
-
-
- - id: tabs-compact-vertical-emphasized - name: Compact, emphasized vertical tabs - markup: | -
-
- Tab 1 -
-
- Tab 2 -
-
- Tab 3 -
-
- Tab 4 -
-
-
- - id: tabs-compact-vertical-icon - name: Compact vertical tabs with icon and text - markup: | -
-
- - Tab 1 -
-
- - Tab 2 -
-
- - Tab 3 -
-
- - Tab 4 -
-
-
- - id: tabs-compact-vertical-icon-emphasized - name: Compact, emphasized vertical tabs with icon and text - markup: | -
-
- - Tab 1 -
-
- - Tab 2 -
-
- - Tab 3 -
-
- - Tab 4 -
-
-
- - id: tabs-with-overflow - name: Basic tabs with overflow - status: Verified - markup: | -

Closed

-
- -
-
- -

Open

-
- -
-
-
-
    -
  • - Tab 1 - -
    • -
  • - Tab 2 -
    • -
  • - Tab 3 -
    • -
  • - Tab 4 -
    • -
-
- -
- - id: tabs-compact-overflow - name: Compact tabs with overflow - status: Verified - markup: | -

Closed

-
- -
-
- -

Open

-
- -
-
-
-
-
    -
  • - Tab 1 - -
    • -
  • - Tab 2 -
    • -
  • - Tab 3 -
    • -
  • - Tab 4 -
    • -
-
- -
- - id: tabs-with-anchors - name: Tabs with anchors - status: Verified - markup: | -
- - Tab 1 - - - Tab 2 - - - Tab 3 - - - Tab 4 - -
-
diff --git a/components/tag/metadata/tag.yml b/components/tag/metadata/tag.yml deleted file mode 100644 index 36becfb308a..00000000000 --- a/components/tag/metadata/tag.yml +++ /dev/null @@ -1,449 +0,0 @@ -name: Tag -status: Verified -description: Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request. -SpectrumSiteSlug: https://spectrum.adobe.com/page/tag/ -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration Guide - description: | - ### Pluralized classes changed to singular - - `spectrum-Tags-itemLabel` is now `spectrum-Tag-itemLabel` - - `spectrum-Tags-itemIcon` is now `spectrum-Tag-itemIcon` - - ### New emphasized variant has been added - ### A div wrapper is required for avatar - ``` -
- Avatar -
- ``` - ### Icon size changed to small - If you use an icon (`spectrum-Tag-itemIcon`) along with a tag, please replace `.spectrum-Icon--sizeXS` with `.spectrum-Icon--sizeS`. - - ### Invalid - Docs updated to show invalid tags always including the alert icon. Invalid tags should have an icon to idenfity itself as invalid and not rely soley on the red background and border color. - -examples: - - id: tag - name: Standard - markup: | -
-
-

Default

- -
- Tag label -
- -
- - Tag label -
- -
-
- Avatar -
- Tag label - -
-
- -
-

Selected

- -
- Tag label -
- -
- - Tag label -
-
-
- Avatar -
- Tag label - -
-
- -
-

Invalid

- -
- - Tag label -
- -
- - Tag label - -
-
- -
-

Disabled

- -
- Tag label -
- -
- - Tag label -
- -
-
- Avatar -
- Tag label - -
-
- -
-

Selected + Invalid

-
- - Tag label -
- -
- - Tag label - -
-
- -
-

Emphasized

- -
- Tag label -
- -
- - Tag label -
- -
-
- Avatar -
- Tag label - -
-
- -
- - - id: tag - name: Sizing - markup: | -
-
-

S (default)

- -
- Tag label -
- -
- - Tag label -
- -
- Tag label - -
- -
-
- Avatar -
- Tag label - -
-
- -
-

M

- -
- Tag label -
- -
- - Tag label -
- -
- Tag label - -
- -
-
- Avatar -
- Tag label - -
-
- -
-

L

- -
- Tag label -
- -
- - Tag label -
- -
- Tag label - -
- -
-
- Avatar -
- Tag label - -
- -
-
- - id: tag - name: Removable - markup: | -
-
-

Default

- -
- Tag label - -
- -
- - Tag label - -
- -
-
-

Selected

- -
- Tag label - -
- -
- - Tag label - -
- -
-
-

Invalid

-
- - Tag label - -
- -
-
-

Disabled

- -
- Tag label - -
- -
- - Tag label - -
-
-
-

Selected + Invalid

- -
- - Tag label - -
- -
-
diff --git a/components/taggroup/metadata/taggroup.yml b/components/taggroup/metadata/taggroup.yml deleted file mode 100644 index 8f8786951b7..00000000000 --- a/components/taggroup/metadata/taggroup.yml +++ /dev/null @@ -1,177 +0,0 @@ -name: Tag group -status: Verified -description: A group of tags. Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request. When horizontal space is limited in a tag group, the individual tags wrap to form another line. -SpectrumSiteSlug: https://spectrum.adobe.com/page/tag/ -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration Guide - description: | - ### Updated tag classes - The examples now use the latest markup from the tag component. This includes additional classes: - - `spectrum-Tag-itemLabel` - - `spectrum-Tag-itemIcon` - - `spectrum-Tag-clearButton` - - ### A div wrapper is required for avatar - ``` -
- Avatar -
- ``` - ### Icon size changed to small - If you use an icon (`spectrum-Tag-itemIcon`) along with a tag, please replace `.spectrum-Icon--sizeXS` with `.spectrum-Icon--sizeS`. -examples: - - id: taggroup - name: Standard - markup: | -
-
- Tag 1 -
-
- Tag 2 -
-
- -

- -
-
-
- Avatar -
- Shantanu -
-
-
- Avatar -
- Shantanu -
-
- -

- -
-
- - Shantanu -
-
- - Shantanu -
-
- - Shantanu -
-
- - id: tag-removable - name: Removable - description: An editable taglist. - markup: | -
-
- Tag 1 - -
-
- Tag 2 - -
-
- -

- -
-
-
- Avatar -
- Shantanu - -
-
-
- Avatar -
- Shantanu - -
-
- -

- -
-
- - Shantanu - -
-
- - Shantanu - -
-
- - Shantanu - -
-
diff --git a/components/textfield/metadata/textarea.yml b/components/textfield/metadata/textarea.yml deleted file mode 100644 index 76a927e543e..00000000000 --- a/components/textfield/metadata/textarea.yml +++ /dev/null @@ -1,281 +0,0 @@ -name: Text area -status: Verified -description: A multi-line text field using the ` -
-
50/50 characters remaining
-
-
- -
- - 50 - -
-
50/50 characters remaining
-
-
- -
- - 50 - -
-
50/50 characters remaining
-
-
- -
- - 50 - -
-
50/50 characters remaining
-
-
- - - id: textfield-helptext - name: Textfield with Help Text - markup: | -
- - -
-
Tags must be comma separated.
-
-
- - - id: textfield-character-count - name: With Character Count - markup: | -
- - 50 - -
- - - id: textfield-sidelabel - name: Textfield with Side Label - markup: | -
- - 50 - -
-
50/50 characters remaining
-
-
- - - id: textfield - name: Disabled - markup: | -
- - -
- - - id: textfield - name: Valid - markup: | -
- - - -
- - - id: textfield - name: Valid (disabled) - markup: | -
- - - -
- - - id: textfield - name: Invalid - description: | - *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_N.svg` icon in the Express workflow icon set.* - markup: | -
- - - -
- - - id: textfield - name: Invalid (disabled) - markup: | -
- - - -
- - - id: textfield - name: Focused - markup: | -
- - -
- - - id: textfield - name: Keyboard Focused - markup: | -
- - -
- - - id: textfield - name: Focused (invalid) - description: | - *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_N.svg` icon in the Express workflow icon set.* - markup: | -
- - - -
- - - id: textfield - name: Keyboard Focused (invalid) - description: | - *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_N.svg` icon in the Express workflow icon set.* - markup: | -
- - - -
- - - id: textfield-quiet - name: Quiet - markup: | -
- - -
- - - id: textfield-quiet - name: Quiet Disabled - markup: | -
- - -
- - - id: textfield-quiet - name: Quiet Valid - description: | - *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_N.svg` icon in the Express workflow icon set.* - markup: | -
- - - -
- - - id: textfield-quiet - name: Quiet Valid (disabled) - markup: | -
- - - -
- - - id: textfield-quiet - name: Quiet Invalid - description: | - *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_N.svg` icon in the Express workflow icon set.* - markup: | -
- - - -
- - - id: textfield-quiet - name: Quiet Invalid (disabled) - markup: | -
- - - -
- - - id: textfield-quiet - name: Quiet Focused - markup: | -
- - -
- - - id: textfield-quiet - name: Quiet Keyboard Focused - markup: | -
- - -
- - - id: textfield-quiet - name: Quiet Focused (invalid) - description: | - *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_N.svg` icon in the Express workflow icon set.* - markup: | -
- - - -
- - - id: textfield-quiet - name: Quiet Keyboard Focused (invalid) - description: | - *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_N.svg` icon in the Express workflow icon set.* - markup: | -
- - - -
diff --git a/components/textfield/metadata/textfield.yml b/components/textfield/metadata/textfield.yml deleted file mode 100644 index 74c4fe721f2..00000000000 --- a/components/textfield/metadata/textfield.yml +++ /dev/null @@ -1,425 +0,0 @@ -name: Text field -status: Verified -description: A single-line text field using the `` element. -SpectrumSiteSlug: https://spectrum.adobe.com/page/text-field/ -sections: - - name: Migration Guide - description: | - - ### T-shirt sizes - As of token migration, textfield now has t-shirt sizes. Medium is the default size if no size variant is applied. Icon sizes must match each t-shirt size. Validation icons are as follows. - - ### Label - As of token migration, textfield must always have a label. Label placement is top or on the side (start). - - ### Character Count - As of token migration, textfield now has an optional character count. The character count moves to the side (end) when the label position is on the side (start). This count needs to be read by a screen reader but we cannot just use a live region as that will result in an overly verbose experience Adjust the markup of the character count for optimal accessibility for each API. - - ### Help Text - As of token migration, Help text is optional and has only one position below the textfield input. Help text aligns with the input in both standard and side label layouts. - - ### Composition - As of 3.0.0, Textfield is now composed the same way a DecoratedTextfield was previously. - - That is, the outer element `div.spectrum-Textfield` contains a `input.spectrum-Textfield-input`. - - As of spectrum tokens migration, Textfield uses grid to align the label, character count, helptext, and focus indicator in both the default and sidelabel layouts. - - Any application using Textarea Grows (Textarea input which automatically resizes vertically to accommodate content that is entered) will need to place the sizer element within the same grid area as the input and focus indicator. - - ### Icons - Icons are now added as SVGs, with `svg.spectrum-Textfield-validationIcon` used for the UI icons that can indicate valid or invalid input. - - The `` element should appear before the `
- - 50 - -
-
Create a password with at least 8 characters.
-
-
- -
- - 50 - -
-
Create a password with at least 8 characters.
-
-
- -
- - 50 - -
-
Create a password with at least 8 characters.
-
-
- -
- - 50 - -
-
Create a password with at least 8 characters.
-
-
- - - id: textfield-helptext - name: Textfield with Help Text - markup: | -
- - -
-
Create a password with at least 8 characters.
-
-
- - - id: textfield-character-count - name: With Character Count - markup: | -
- - 50 - -
- - - id: textfield-sidelabel - name: Textfield with Side Label - markup: | -
- - 50 - -
-
Create a password with at least 8 characters.
-
-
- - - id: textfield-focused - name: Focused - markup: | -
- - -
- - - id: textfield-keyboard-focused - name: Keyboard Focused - markup: | -
- - -
- - - id: textfield-disabled - name: Disabled - markup: | -
- - -
- - - id: textfield-readonly - name: Read-only - markup: | -
- - -
- - - id: textfield-valid - name: Valid - description: | - *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_N.svg` icon in the Express workflow icon set.* - markup: | -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- - - id: textfield-valid-disabled - name: Valid (disabled) - markup: | -
- - - -
- - - id: textfield-invalid - name: Invalid - description: | - *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_N.svg` icon in the Express workflow icon set.* - markup: | -
- - - -
-
Create a password with at least 8 characters.
-
-
- -
- - - -
-
Create a password with at least 8 characters.
-
-
- -
- - - -
-
Create a password with at least 8 characters.
-
-
- -
- - - -
-
Create a password with at least 8 characters.
-
-
- - - id: textfield-invalid-disabled - name: Invalid (disabled) - markup: | -
- - - -
- - - id: textfield-focused-invalid - name: Focused (invalid) - description: | - *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_N.svg` icon in the Express workflow icon set.* - markup: | -
- - - -
- - - id: textfield-keyboard-focused-invalid - name: Keyboard Focused (invalid) - description: | - *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_N.svg` icon in the Express workflow icon set.* - markup: | -
- - - -
- - - id: textfield-quiet - name: Quiet - markup: | -
- - -
- - - id: textfield-quiet-disabled - name: Quiet Disabled - markup: | -
- - -
- - - id: textfield-quiet-valid - name: Quiet Valid - markup: | -
- - - -
- - - id: textfield-quiet-valid-disabled - name: Quiet Valid (disabled) - markup: | -
- - - -
- - - id: textfield-quiet-invalid - name: Quiet Invalid - description: | - *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_N.svg` icon in the Express workflow icon set.* - markup: | -
- - - -
- - - id: textfield-quiet-invalid-disabled - name: Quiet Invalid (disabled) - description: | - *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_N.svg` icon in the Express workflow icon set.* - markup: | -
- - - -
- - - id: textfield-quiet-focused - name: Quiet Focused - markup: | -
- - -
- - - id: textfield-quiet-keyboard-focused - name: Quiet Keyboard Focused - markup: | -
- - -
- - - id: textfield-quiet-focused-invalid - name: Quiet Focused (invalid) - description: | - *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_N.svg` icon in the Express workflow icon set.* - markup: | -
- - - -
- - - id: textfield-quiet-keyboard-focused-invalid - name: Quiet Keyboard Focused (invalid) - description: | - *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_N.svg` icon in the Express workflow icon set.* - markup: | -
- - - -
diff --git a/components/thumbnail/metadata/thumbnail.yml b/components/thumbnail/metadata/thumbnail.yml deleted file mode 100644 index 999ae628740..00000000000 --- a/components/thumbnail/metadata/thumbnail.yml +++ /dev/null @@ -1,209 +0,0 @@ -name: Thumbnail -status: Contribution -sections: - - name: Migration Guide - description: | - ### Thumbnail sizing - Thumbnail sizes are specified by appending a number to the size class: `.spectrum-Thumbnail--size*`. Sizes scale expotentially and are based on the Spectrum type scale. These range from size-50 to size-1000. - - ### Image Cover - Thumbnail now offers a way to control the content inside a child `img` tag by adding a modifier `spectrum-Thumbnail--cover` class in addition to the `spectrum-Thumbnail` class. - - ### Layer - Adds variant for when thumbnails are used in layer management (such as the Compact or Detail Layers panels). When used this way the thumbnail is given a thick blue border when selected. - - ### Remove focus-ring class - We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. -examples: - - id: thumbnail-image - name: Thumbnail - markup: | -
-
- women resting head in hands -
-
- - id: thumbnail-focus - name: Thumbnail (focused) - markup: | -
-
- Woman crouching -
-
- - id: thumbnail-disabled - name: Thumbnail (disabled) - description: Thumbnail should only be displayed as disabled if the entire componet is also disabled. - markup: | -
-
- Woman crouching -
-
- - id: thumbnail-landscape-image - name: Thumbnail (landscape image) - description: Landscape images will fill horizontally and have space above and below. - markup: | -
-
- Landscape with mountains and lake -
-
- - id: thumbnail-portrait-image - name: Thumbnail (portrait image) - description: Portrait images will fill vertically and have space on either side. - markup: | -
-
- Eiffel Tower at night -
-
- - id: thumbnail-layer - name: Thumbnail (layer) - description: When used in layer management (such as the Compact or Detail Layers panels) - markup: | -
-
- women resting head in hands
-
- - id: thumbnail-selected - name: Thumbnail (layer, selected) - description: The thumbnail is given a thick blue border to indicate its selection when used in layer management. - markup: | -
-
- Woman crouching -
-
- - id: thumbnail-landscape-image-cover - name: Thumbnail Cover (landscape image) - description: Images will maintain their aspect ratio while filling the entire content box. - markup: | -
-
- Landscape with mountains and lake -
-
- - id: thumbnail-image-over-background - name: Thumbnail (image against background) - description: Thumbnail supports transparent images with a background (color or image) behind it. - markup: | -
-
-
- Woman crouching -
-
- - - id: thumbnail-sizes - name: Thumbnail sizes - markup: | -
-
-

50

-
-
- Woman crouching -
-
-
- -
-

75

-
-
- Woman crouching -
-
-
- -
-

100

-
-
- Woman crouching -
-
-
- -
-

200

-
-
- Woman crouching -
-
-
- -
-

300

-
-
- Woman crouching -
-
-
- -
-

400

-
-
- Woman crouching -
-
-
- -
-

500

-
-
- Woman crouching -
-
-
- -
-

600

-
-
- Woman crouching -
-
-
- -
-

700

-
-
- Woman crouching -
-
-
- -
-

800

-
-
- Woman crouching -
-
-
- -
-

900

-
-
- Woman crouching -
-
-
- -
-

1000

-
-
- Woman crouching -
-
-
-
diff --git a/components/toast/metadata/toast.yml b/components/toast/metadata/toast.yml deleted file mode 100644 index 6165311d23a..00000000000 --- a/components/toast/metadata/toast.yml +++ /dev/null @@ -1,187 +0,0 @@ -name: Toast -SpectrumSiteSlug: https://spectrum.adobe.com/page/toast/ -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration Guide - description: | - ### Clear button replaced by Close button - Replace `spectrum-ClearButton spectrum-ClearButton--overBackground spectrum-ClearButton--sizeM` with `spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticWhite` and remove the `
` element. - ### Over background replaced by Static White with Outline - Replace all `.spectrum-Button--overBackground .spectrum-Button--quiet` with `.spectrum-Button--staticWhite .spectrum-Button--outline`. -examples: - - id: toast - name: Default - status: Verified - markup: | -
-
-
Button.xd has been archived
- -
-
- -
-
- - id: toast-info - name: Info - status: Verified - description: | - *Spectrum for Adobe Express uses a different icon. Use the `SX_Info_18_S.svg` icon in the Express workflow icon set.* - markup: | -
- -
-
The toast is done
-
-
- -
-
- - id: toast-negative - name: Negative - status: Verified - description: | - *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_18_S.svg` icon in the Express workflow icon set.* - markup: | -
- -
-
The toast is on fire
- -
-
- -
-
- - id: toast-positive - name: Positive - status: Verified - description: | - *Spectrum for Adobe Express uses a different icon. Use the `SX_CheckmarkCircle_18_S.svg` icon in the Express workflow icon set.* - markup: | -
- -
-
The toast is golden brown
- -
-
- -
-
- - id: toast - name: Wrapping - status: Verified - markup: | - -
- -
-
- A new version of Lightroom Classic is now available -
- -
-
- -
-
- -

- -
- -
-
- A new version of Lightroom Classic is now available. Use the Update button below to start using the new version. -
- -
-
- -
-
- -

- -
- -
-
- A new version of Lightroom Classic is now available -
-
-
- -
-
- -

- -
- -
-
An update is available
-
-
- -
-
diff --git a/components/tooltip/metadata/tooltip.yml b/components/tooltip/metadata/tooltip.yml deleted file mode 100644 index ec589f02056..00000000000 --- a/components/tooltip/metadata/tooltip.yml +++ /dev/null @@ -1,531 +0,0 @@ -name: Tooltip -SpectrumSiteSlug: https://spectrum.adobe.com/page/tooltip/ -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration Guide - description: | - ### Version 6.1.1 - This patch includes tooltip placement adjustments for RTL bugs and increased coverage with Chromatic VRTs. Some clarification on placements: - - - If you use a Start or End placement, the tooltip *will* change to the other side of the source when the text direction (LTR/RTL) is changed - - If you use a Left or Right placement, the tooltip *will not* change sides when text direction is changed - - As a result of the placement specifications, some placements intentionally use non-logical properties in the CSS (particularly for tooltips that show on hover). - - ### Tooltip now has 22 directions - - 10 of the new directions are logical and should be tested both left-to-right and right-to-left -examples: - - id: tooltip - name: Neutral - status: Verified - markup: | - - Label - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit - - - - id: tooltip-info - name: Informative - status: Verified - description: | - *Spectrum for Adobe Express uses a different icon. Use the `SX_Info_14_S.svg` icon in the Express workflow icon set.* - markup: | - - Label - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit - - - - - Info - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit - - - - id: tooltip-positive - name: Positive - status: Verified - description: | - *Spectrum for Adobe Express uses a different icon. Use the `SX_CheckmarkCircle_14_S.svg` icon in the Express workflow icon set.* - markup: | - - Label - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit - - - - - Success - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit - - - - id: tooltip-negative - name: Negative - status: Verified - description: | - *Spectrum for Adobe Express uses a different icon. Use the `SX_Alert_14_S.svg` icon in the Express workflow icon set.* - markup: | - - Label - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit - - - - - Warning - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit - - - - id: tooltip - name: Directions - status: Verified - description: "Tooltips can be top, top left, top right, top start, top end, bottom, bottom left, bottom right, bottom start, bottom end, left, left top, left bottom, start, start top, start bottom, right, right top, right bottom, end, end top, end bottom. The default placement value is at the top." - markup: | -
-
-

Top

- - - Top - - -

- - - Top Left - - -

- - - Top Right - - -

- - - Top Start - - -

- - - Top End - - -

-
- -
-

Left

- - Left - - -

- - - Left Top - - -

- - - Left Bottom - - -

-
- -
-

Right

- - Right - - -

- - - Right Top - - -

- - - Right Bottom - - -

-
- -
-

Bottom

- - Bottom - - -

- - - Bottom Left - - -

- - - Bottom Right - - -

- - - Bottom Start - - -

- - - Bottom End - - -

-
- -
-

Start

- - Start - - -

- - - Start Top - - -

- - - Start Bottom - - -

-
- -
-

End

- - End - - -

- - - End Top - - -

- - - End Bottom - - -

-
-
- - - id: tooltip-success - name: Success - status: Deprecated - details: Use `positive` instead. - markup: | - - Label - - - - id: tooltip-error - name: Error - status: Deprecated - details: Use `negative` instead. - markup: | - - Label - - - - id: tooltip-help - name: Help - status: Deprecated - details: Use `info` - description: | - An informative tooltip with a help icon. - - *Spectrum for Adobe Express uses a different icon. Use the `SX_Help_14_S.svg` icon in the Express workflow icon set.* - markup: | - - - Help - - - - id: tooltip-showOnHover - name: Show on hover - status: Contribution - description: A tooltip that shows on hover using CSS only. Note that this approach does not support text wrapping. Also, note that these Tooltips will likely not work on touch-enabled devices without additional client-side scripting. - markup: | -
-
-

Top

- - - Top - - Top - - - - -

- - - Top Left - - Top Left - - - -

- - - Top Right - - Top Right - - - -

- - - Top Start - - Top Start - - - -

- - - Top End - - Top End - - - -

-
- -
-

Left

- - Left - - Left - - - -

- - - Left Top - - Left Top - - - -

- - - Left Bottom - - Left Bottom - - - -

-
- -
-

Right

- - Right - - Right - - - -

- - - Right Top - - Right Top - - - -

- - - Right Bottom - - Right Bottom - - - -

-
- -
-

Bottom

- - Bottom - - Bottom - - - -

- - - Bottom Left - - Bottom Left - - - -

- - - Bottom Right - - Bottom Right - - - -

- - - Bottom Start - - Bottom Start - - - -

- - - Bottom End - - Bottom End - - - -

-
- -
-

Start

- - Start - - Start - - - -

- - - Start Top - - Start Top - - - -

- - - Start Bottom - - Start Bottom - - - -

-
- -
-

End

- - End - - End - - - -

- - - End Top - - End Top - - - -

- - - End Bottom - - End Bottom - - - -

-
-
diff --git a/components/tray/metadata/tray.yml b/components/tray/metadata/tray.yml deleted file mode 100644 index e0f5f5c138c..00000000000 --- a/components/tray/metadata/tray.yml +++ /dev/null @@ -1,25 +0,0 @@ -name: Tray -description: | - The Tray component is typically used to portray information on mobile devices or smaller screens. - -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. -SpectrumSiteSlug: https://spectrum.adobe.com/page/tray/ -examples: - - id: tray - name: Standard - description: The following example displays differently depending on the orientation of the viewport, using the `orientation` CSS media feature. In portrait orientation, a Tray is displayed at the bottom of the screen and takes up the full width of the view. In landscape orientation, it keeps its portrait width, is centered horizontally, and has rounded upper corners. - markup: | -
-
- -
-
diff --git a/components/treeview/metadata/treeview.yml b/components/treeview/metadata/treeview.yml deleted file mode 100644 index b55aba22534..00000000000 --- a/components/treeview/metadata/treeview.yml +++ /dev/null @@ -1,846 +0,0 @@ -name: Tree view -description: | - The typical usage of a Tree view involves nesting a `.spectrum-Treeview` element within the `.spectrum-TreeView-item` parent element. - The visibility of child treeviews is controlled by adding `.is-open` to the `.spectrum-TreeView-item` of the parent element. -SpectrumSiteSlug: https://spectrum.adobe.com/page/tree-view/ -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Migration Guide - description: | - ### T-shirt sizing - Tree view now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-TreeView--size*` class. - - ### Additional classes - - The following classes must be added: - - * `.spectrum-TreeView-label` is now required to wrap labels to enable truncation behavior - * `.spectrum-Treeview-icon` is now required on all non-indicator icons - - ### Renamed classes - - * `.spectrum-TreeView-standalone` renamed to `.spectrum-TreeView-detached` - * `.spectrum-TreeView-indicator` renamed to `.spectrum-TreeView-itemIndicator` - * `.spectrum-TreeView-icon` renamed to `.spectrum-TreeView-itemIcon` - - ### Moved classes - - * `.is-drop-target` and `.is-selected` must be placed on the `.spectrum-TreeView-item` element - - ### Workflow icon size - - * Please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`. - - ### Removed `focus-ring` class - We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. - - ### Revised sections markup - The markup for sections has changed so that the heading is now a child of an `li` instead of the `ul`, to ensure valid markup. An additional - class `spectrum-TreeView-section` has been added for the first level `li` elements that contain the section heading and its child Tree view. - -examples: - - id: treeview-standard - name: Standard - description: | - Standard treeviews span the entire width of their parent container and are used within panels. - markup: | - - - - id: treeview-selected - name: Selected - description: | - A Tree view with a selected item. - markup: | - - - - id: treeview-quiet - name: Quiet - description: | - A Tree view with quiet selection. - markup: | - - - - id: treeview-detached - name: Detached - description: | - Detached Tree views are meant to be used outside of a panel. Items in detached Tree views have rounded corners. - markup: | - - - - id: treeview-detached-quiet - name: Detached (quiet) - description: | - A detached, quiet Tree view. - markup: | - - - - id: treeview-folders-files - name: Folders & Files - description: A nested Tree view with folders and files. - markup: | - - - - id: treeview-thumbnail - name: Thumbnail - description: Use Thumbnails when a user needs to have a preview of the content contained in a Tree view item. For its primary use within layer panels, the first example uses the layer variant of Thumbnail. The second example uses the default Thumbnail. - markup: | - - - - - - id: treeview-thumbnail-quiet - name: Thumbnail (quiet) - description: A quiet Tree view with Thumbnails using the layer variant. - When using the quiet variant, less visual emphasis is given to the selected Tree view item. - markup: | - - - - id: treeview-disabled - name: Disabled - markup: | -
    -
  • - Layer 1 -
    • - -
  • - - - Group 1 - - -
    • - -
  • - Layer 4 -
    • -
  • - Layer 5 -
    • - -
  • - - - Group 2 - - - - - id: treeview-sections - name: Sections - markup: | - - - - id: treeview-drop-target - name: Drop target - description: | - A Tree view with an item that's a drop target. - markup: | - - - - id: treeview-sizing - name: Sizing - description: | - Tree view supports t-shirt sizing (`s`, `m`, `l`, `xl`) - markup: | -
    -

    S

    - -
    -
    -

    M

    - -
    -
    -

    L

    - -
    -
    -

    XL

    - -
    - - - id: treeview-icons - name: Icons - description: A Tree view with icons. - markup: | - - - - id: treeview-flat - name: Flat - description: | - A Tree view drawn without nesting, suitable for infinite scrolling. With this version of the treeview, you must manage the visibility of "child items" manually based on the open state of the "parent item." The level of visual indentation is handled by a numbered `indent` variant class. - markup: | - diff --git a/components/typography/metadata/typography-body.yml b/components/typography/metadata/typography-body.yml deleted file mode 100644 index d95a3979a93..00000000000 --- a/components/typography/metadata/typography-body.yml +++ /dev/null @@ -1,115 +0,0 @@ -name: Typography body -id: body-m -description: Body is a typography component primarily used within Spectrum components and for blocks of text. -SpectrumSiteSlug: https://spectrum.adobe.com/page/body/ -examples: - - id: body-m - name: Body - status: Verified - description: Default body text sizes. - markup: | -
    -

    BodyXXXL Text BodyXXXL Emphasis BodyXXXL Strong.

    -

    BodyXXL Text BodyXXL Emphasis BodyXXL Strong.

    -

    BodyXL Text BodyXL Emphasis BodyXL Strong.

    -

    BodyL text BodyL Emphasis BodyL Strong.

    -

    BodyM Text BodyM Emphasis BodyM Strong.

    -

    BodyS Text BodyS Emphasis BodyS Strong.

    -

    BodyXS Text BodyXS Emphasis BodyXS Strong.

    -
    -
    -
    -

    BodyXXXL Text Serif BodyXXXL Emphasis Serif BodyXXXL Strong Serif.

    -

    BodyXXL Text Serif BodyXXL Emphasis Serif BodyXXL Strong Serif.

    -

    BodyXL Text Serif BodyXL Emphasis Serif BodyXL Strong Serif.

    -

    BodyL text Serif BodyL Emphasis Serif BodyL Strong Serif.

    -

    BodyM Text Serif BodyM Emphasis Serif BodyM Strong Serif.

    -

    BodyS Text Serif BodyS Emphasis Serif BodyS Strong Serif.

    -

    BodyXS Text Serif BodyXS Emphasis Serif BodyXS Strong Serif.

    -
    - - - id: heading-m - name: Standard - status: Verified - description: Typography elements paired to display clear content hierarchies. - markup: | -
    -
    -
    -

    Heading Size XXXL with body size XXXL:

    -

    Aliquet Mauris Eu

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

    -

    Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    -
    -
    -
    -
    -
    -
    -

    Heading Size XXL with body size XXL:

    -

    Aliquet Mauris Eu

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

    -

    Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    -
    -
    -
    -
    -
    -
    -

    Heading size XL with body size XL:

    -

    Aliquet Mauris Eu

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

    -

    Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    -
    -
    -
    -
    -
    -
    -

    Heading size L with body size L:

    -

    Aliquet Mauris Eu

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

    -

    Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    -
    -
    -
    -
    -
    -
    -

    Heading size M with body size M:

    -

    Lorem Ipsum Dolor

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

    -

    Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    -
    -
    -
    -
    -
    -
    -

    Heading size S with body size S:

    -

    Lorem Ipsum Dolor

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

    -

    Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    -
    -
    -
    -
    -
    -
    -

    Heading size XS with body size XS:

    -
    Lorem Ipsum Dolor
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

    -

    Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    -
    -
    -
    -
    -
    -
    -

    Heading size XXS with body size XS

    -
    Lorem Ipsum Dolor
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

    -

    Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    -
    -
    -
    diff --git a/components/typography/metadata/typography-code.yml b/components/typography/metadata/typography-code.yml deleted file mode 100644 index 67335b0807d..00000000000 --- a/components/typography/metadata/typography-code.yml +++ /dev/null @@ -1,37 +0,0 @@ -name: Typography code -id: code-m -description: Code is a typography component used for text that represents code. -SpectrumSiteSlug: https://spectrum.adobe.com/page/code/ -examples: - - id: code-m - name: Typography - Code - status: Verified - description: Typographic styles for computer code. - markup: | - CodeXL Text Strong Emphasis - -
    - - CodeL Text Strong Emphasis - -
    - - CodeM Text Strong Emphasis - -
    - - CodeS Text Strong Emphasis - -
    - - CodeXS Text Strong Emphasis - -
    -
    - - 
    CodeM text
-      wrapped in
-      pre tags for
-      multiline
-      goodness
-
    diff --git a/components/typography/metadata/typography-detail.yml b/components/typography/metadata/typography-detail.yml deleted file mode 100644 index 1b0c10e9984..00000000000 --- a/components/typography/metadata/typography-detail.yml +++ /dev/null @@ -1,20 +0,0 @@ -name: Typography detail -status: Verified -description: Detail is a typography component used for disclosing extra information or smaller items in hierarchical relationships of text. -SpectrumSiteSlug: https://spectrum.adobe.com/page/detail/ -examples: - - id: detail-m - status: Verified - name: Detail - markup: | -
    -

    DetailXL DetailXL Emphasis DetailXL Light DetailXL Strong.

    -

    DetailL DetailL Emphasis DetailL Light DetailL Strong.

    -

    DetailM DetailM Emphasis DetailM Light DetailM Strong.

    -

    DetailS DetailS Emphasis DetailS Light DetailS Strong.

    -
    -

    DetailXL DetailXL Emphasis DetailXL Light DetailXL Strong.

    -

    DetailL DetailL Emphasis DetailL Light DetailL Strong.

    -

    DetailM DetailM Emphasis DetailM Light DetailM Strong.

    -

    DetailS DetailS Emphasis DetailS Light DetailS Strong.

    -
    diff --git a/components/typography/metadata/typography-heading.yml b/components/typography/metadata/typography-heading.yml deleted file mode 100644 index f9018cbc79a..00000000000 --- a/components/typography/metadata/typography-heading.yml +++ /dev/null @@ -1,149 +0,0 @@ -name: Typography heading -id: heading-m -description: Heading is a typography component used to create various levels of hierarchies between text. -SpectrumSiteSlug: https://spectrum.adobe.com/page/heading/ -examples: - - id: heading-m - name: Heading - status: Verified - description: Headings for typography. - markup: | -
    -

    HeadingXXXL Emphasis Strong.

    -

    HeadingXXL Emphasis Strong.

    -

    HeadingXL Emphasis Strong.

    -

    HeadingL Emphasis Strong.

    -

    HeadingM Emphasis Strong.

    -

    HeadingS Emphasis Strong.

    -
    HeadingXS Emphasis Strong.
    -
    HeadingXXS Emphasis Strong.
    -
    -

    HeadingXXXL Serif Emphasis Strong.

    -

    HeadingXXL Serif Emphasis Strong.

    -

    HeadingXL Serif Emphasis Strong.

    -

    HeadingL Serif Emphasis Strong.

    -

    HeadingM Serif Emphasis Strong.

    -

    HeadingS Serif Emphasis Strong.

    -
    HeadingXS Serif Emphasis Strong.
    -
    HeadingXXS Serif Emphasis Strong.
    -
    - - - id: heading-heavy-m - name: Heading (Heavy) - status: Verified - description: Heavy headings for typography. - markup: | -
    -

    HeadingXXXL Emphasis Strong.

    -

    HeadingXXL Emphasis Strong.

    -

    HeadingXL Emphasis Strong.

    -

    HeadingL Emphasis strong.

    -
    -

    HeadingXXXL Serif Emphasis Strong.

    -

    HeadingXXL Serif Emphasis Strong.

    -

    HeadingXL Serif Emphasis Strong.

    -

    HeadingL Serif Emphasis strong.

    -
    - - - id: heading-light-m - name: Heading (Light) - status: Verified - description: Light headings for typography. - markup: | -
    -

    HeadingXXXL Emphasis Strong.

    -

    HeadingXXL Emphasis Strong.

    -

    HeadingXL Emphasis Strong.

    -

    HeadingL Emphasis Strong.

    -
    -

    HeadingXXXL Serif Emphasis Strong.

    -

    HeadingXXL Serif Emphasis Strong.

    -

    HeadingXL Serif Emphasis Strong.

    -

    HeadingL Serif Emphasis Strong.

    -
    - - - id: heading-m - name: Typography - status: Verified - description: Typography elements paired to display clear content hierarchies. - markup: | -
    -
    -
    -

    Heading Size XXXL with body size XXXL:

    -

    Aliquet Mauris Eu

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

    -

    Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    -
    -
    -
    -
    -
    -
    -

    Heading Size XXL with body size XXL:

    -

    Aliquet Mauris Eu

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

    -

    Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    -
    -
    -
    -
    -
    -
    -

    Heading size XL with body size XL:

    -

    Aliquet Mauris Eu

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

    -

    Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    -
    -
    -
    -
    -
    -
    -

    Heading size L with body size L:

    -

    Aliquet Mauris Eu

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

    -

    Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    -
    -
    -
    -
    -
    -
    -

    Heading size M with body size M:

    -

    Lorem Ipsum Dolor

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

    -

    Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    -
    -
    -
    -
    -
    -
    -

    Heading size S with body size S:

    -

    Lorem Ipsum Dolor

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

    -

    Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    -
    -
    -
    -
    -
    -
    -

    Heading size XS with body size XS:

    -
    Lorem Ipsum Dolor
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

    -

    Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    -
    -
    -
    -
    -
    -
    -

    Heading size XXS with body size XS

    -
    Lorem Ipsum Dolor
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

    -

    Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    -
    -
    -
    diff --git a/components/typography/metadata/typography-international.yml b/components/typography/metadata/typography-international.yml deleted file mode 100644 index a2e47307b87..00000000000 --- a/components/typography/metadata/typography-international.yml +++ /dev/null @@ -1,270 +0,0 @@ -name: Typography (internationalized) -description: Internationalized typography examples. Note that, for these examples to work correctly, your Typekit needs to include the appropriate Han fonts. -SpectrumSiteSlug: https://spectrum.adobe.com/page/typography/ -status: Verified -id: heading-han-m -examples: - - id: heading-m - name: Heading - status: Verified - description: Headings for typography. - markup: | -
    -

    HeadingXXXL HeadingXXXL Emphasis Strong.

    -

    HeadingXXL HeadingXXL Emphasis Strong.

    -

    HeadingXL HeadingXL Emphasis Strong.

    -

    HeadingL HeadingL Emphasis Strong.

    -

    HeadingM HeadingM Emphasis Strong.

    -

    HeadingS HeadingS Emphasis Strong.

    -
    HeadingXS HeadingXS Emphasis Strong.
    -
    HeadingXXS HeadingXXS Emphasis Strong.
    -
    -

    HeadingXXXL Serif Emphasis Strong.

    -

    HeadingXXL Serif Emphasis Strong.

    -

    HeadingXL Serif Emphasis Strong.

    -

    spectrum-Heading--serif

    -

    HeadingM Serif Emphasis Strong.

    -

    HeadingS Serif Emphasis Strong.

    -
    HeadingXS Serif Emphasis Strong.
    -
    HeadingXXS Serif Emphasis Strong.
    -
    - -
    -

    見出しXXXL 見出しXXXL 重点 見出しXXXL 強い強調.

    -

    見出しXXL 見出しXXL 重点 見出しXXL 強い強調.

    -

    見出しXL 見出しXL 重点 見出しXL 強い強調.

    -

    見出しL 見出しL 重点 見出しL 強い強調.

    -

    見出しM 見出しM 重点 見出しM 強い強調.

    -

    見出しS 見出しS 重点 見出しS 強い強調.

    -
    見出しXS 見出しXS 重点 見出しXS 強い強調.
    -
    見出しXXS 見出しXXS 重点 見出しXXS 強い強調.
    -
    - -
    -

    XXXLالقسم XXXLالقسم تشديد XXXLالقسم تأكيد قو.

    -

    XXLالقسم XXLالقسم تشديد XXLالقسم تأكيد قو.

    -

    XLالقسم XLالقسم تشديد XLالقسم تأكيد قو.

    -

    Lالقسم Lالقسم تشديد Lالقسم تأكيد قو.

    -

    Mالقسم Mالقسم تشديد Mالقسم تأكيد قو.

    -

    Sالقسم Sالقسم تشديد Sالقسم تأكيد قو.

    -
    XSالقسم XSالقسم تشديد XSالقسم تأكيد قو.
    -
    XSSالقسم XSSالقسم تشديد XXSالقسم تأكيد قو.
    -
    - -
    -

    XXXLדגש כותרת XXXLמאמר XXXLחזק.

    -

    XXLדגש כותרת XXLמאמר XXLחזק.

    -

    XLדגש כותרת XLמאמר XLחזק.

    -

    Lדגש כותרת Lמאמר Lחזק.

    -

    Mדגש כותרת Mמאמר Mחזק.

    -

    Sדגש כותרת Sמאמר Sחזק.

    -
    XSדגש כותרת XSמאמר XSחזק.
    -
    XXSדגש כותרת XXSמאמר XXSחזק.
    -
    - - - id: heading-heavy-m - name: Heading (Heavy) - status: Verified - description: Strong headings for typography. - markup: | -
    -

    HeadingXXXL Emphasis Strong.

    -

    HeadingXXL Emphasis Strong.

    -

    HeadingXL Emphasis Strong.

    -

    spectrum-Heading--heavy

    -
    -

    HeadingXXXL Serif Emphasis Strong.

    -

    HeadingXXL Serif Emphasis Strong.

    -

    HeadingXL Serif Emphasis Strong.

    -

    spectrum-Heading--heavy spectrum-Heading--serif

    -
    - -
    -

    見出しXXXL 見出し XXXL >見出しXXXL 強い強調.

    -

    見出しXXL 見出し XXL 重点 見出しXXL 強い強調.

    -

    見出しXL 見出しXL 重点 見出しXL強い強調.

    -

    spectrum-Heading--heavy

    -
    - -
    -

    القسمXXXL القسم XXXL تشديد القسم 2XXXL تأكيد قو.

    -

    القسمXXL القسم 1XXL تشديد Emphasis القسم XXL تأكيد قو.

    -

    القسمXLالقسم 1XL تشديد القسم XL تأكيد قو.

    -

    spectrum-Heading--heavy

    -
    - -
    -

    XXXLדגש כותרת XXXLמאמר XXXLחזק.

    -

    XXLדגש כותרת XXLמאמר XXLחזק.

    -

    XLדגש כותרת XLמאמר XLחזק.

    -

    spectrum-Heading--heavy

    -
    - - - id: heading-light-m - name: Heading (Light) - status: Verified - description: Light headings for typography. - markup: | -
    -

    HeadingXXXL Emphasis Strong.

    -

    HeadingXXL Emphasis Strong.

    -

    HeadingXL Emphasis Strong.

    -

    spectrum-Heading--light

    -
    -

    HeadingXXXL Serif Emphasis Strong.

    -

    HeadingXXL Serif Emphasis Strong.

    -

    HeadingXL Serif Emphasis Strong.

    -

    spectrum-Heading--light spectrum-Heading--serif

    -
    - -
    -

    見出しXXXL 見出しXXXL 重点 見出しXXXL 強い強調.

    -

    見出しXXL 見出しXXL 重点 見出しXXL 強い強調.

    -

    見出しXL 見出しXL 重点 見出しXL 強い強調.

    -

    spectrum-Heading--light

    -
    - -
    -

    XXXLالقسم القسم XXXL تشديد XXXLالقسم تأكيد قو.

    -

    XXLالقسم القسم XXL تشديد XXLالقسم تأكيد قو.

    -

    XLالقسم القسم XL تشديد XLالقسم تأكيد قو.

    -

    spectrum-Heading--light

    -
    - -
    -

    XXXLדגש כותרת XXXLמאמר XXXLחזק.

    -

    XXLדגש כותרת XXLמאמר XXLחזק.

    -

    XLדגש כותרת XLמאמר XLחזק.

    -

    Lדגש כותרת Lמאמר Lחזק.

    -
    - - - id: body-m - name: Body - status: Verified - description: Default body text sizes. - markup: | -
    -

    BodyXXXL Text BodyXXXL Emphasis BodyXXXL Strong.

    -

    BodyXXL Text BodyXXL Emphasis BodyXXL Strong.

    -

    BodyXL Text BodyXL Emphasis BodyXL Strong.

    -

    BodyL text BodyL Emphasis BodyL Strong.

    -

    BodyM Text BodyM Emphasis BodyM Strong.

    -

    BodyS Text BodyS Emphasis BodyS Strong.

    -

    BodyXS Text BodyXS Emphasis BodyXS Strong.

    -
    -

    BodyXXXL Text Serif BodyXXXL Emphasis BodyXXXL Strong.

    -

    BodyXXL Text Serif BodyXXL Emphasis BodyXXL Strong.

    -

    BodyXL Text Serif BodyXL Emphasis BodyXL Strong.

    -

    BodyL text Serif BodyL Emphasis BodyL Strong.

    -

    BodyM Text Serif BodyM Emphasis BodyM Strong.

    -

    BodyS Text Serif BodyS Emphasis BodyS Strong.

    -

    BodyXS Text Serif BodyXS Emphasis BodyXS Strong.

    -
    - -
    -

    見出しXXXL 見出しXXXL 重点 見出しXXXL 強い強調.

    -

    見出しXXL 見出しXXL 重点 見出しXXL 強い強調.

    -

    見出しXL 見出しXL 重点 見出しXL 強い強調.

    -

    見出しL 見出しL 重点 見出しL 強い強調.

    -

    見出しM 見出しM 重点 見出しM 強い強調.

    -

    見出しS 見出しS 重点 見出しS 強い強調.

    -

    見出しXS 見出しXS 重点 見出しXS 強い強調.

    -
    - -
    -

    القسم XXXL القسم XXXL تشديد القسم XXXL تأكيد قو.

    -

    القسم XXL القسم XXL تشديد القسم XXL تأكيد قو.

    -

    القسم XL القسم XL تشديد القسم XL تأكيد قو.

    -

    القسم L القسم L تشديد القسم L تأكيد قو.

    -

    القسم M القسم M تشديد القسم M تأكيد قو.

    -

    القسم S القسم S تشديد القسم S تأكيد قو.

    -

    القسم XS القسم XS تشديد القسم XS تأكيد قو.

    -
    - -
    -

    XXXLטקסט גוף הדגשות XXXLגוף חזק XXXLגוף חזק.

    -

    XXLטקסט גוף הדגשות XXLגוף חזק XXLגוף חזק.

    -

    XLטקסט גוף הדגשות XLגוף חזק XLגוף חזק.

    -

    Lטקסט גוף הדגשות Lגוף חזק Lגוף חזק.

    -

    Mטקסט גוף הדגשות Mגוף חזק Mגוף חזק.

    -

    Sטקסט גוף הדגשות Sגוף חזק Sגוף חזק.

    -

    XSטקסט גוף הדגשות XSגוף חזק XSגוף חזק.

    -
    - - - id: detail-m - status: Verified - name: Detail - description: Subheadings for typography. - markup: | -
    -

    DetailXL DetailXL Emphasis DetailXL Strong.

    -

    DetailL DetailL Emphasis DetailL Strong.

    -

    DetailL DetailM Emphasis DetailM Strong.

    -

    DetailL DetailS Emphasis DetailS Strong.

    -
    -

    DetailXL DetailXL Emphasis DetailXL Strong.

    -

    DetailL DetailL Emphasis DetailL Strong.

    -

    DetailL DetailM Emphasis DetailM Strong.

    -

    DetailL DetailS Emphasis DetailS Strong.

    -
    - -
    -

    見出しXL 見出しXL 見出しXL.

    -

    見出しL 見出しL 見出しL.

    -

    見出しM 見出しM 見出しM.

    -

    見出しS 見出しS 見出しS.

    -
    - -
    -

    القسم XL القسم XL تشديد القسم XL تأكيد قو.

    -

    L L تشديد L تأكيد قو.

    -

    القسم M القسم M تشديد القسم M تأكيد قو.

    -

    القسم S القسم S تشديد القسم S تأكيد قو.

    -
    - -
    -

    XLטקסט גוף הדגשות XLגוף חזק XLגוף חזק.

    -

    Lטקסט גוף הדגשות Lגוף חזק Lגוף חזק.

    -

    Mالقسم טקסט גוף הדגשות Mגוף חזק Mגוף חזק.

    -

    Sالقسم טקסט גוף הדגשות Sגוף חזק Sגוף חזק.

    -
    - - - id: heading-han-m - name: Han - status: Verified - description: Typographic pairings for Adobe Clean Han. - markup: | -
    -

    見出しXXXL

    -

    見出しとよく対になる本文。

    -

    見出しXXL

    -

    見出しとよく対になる本文。

    -

    見出しXL

    -

    見出しとよく対になる本文。

    -

    見出しL

    -

    見出しとよく対になる本文。

    -

    見出しM

    -

    見出しとよく対になる本文。

    -

    見出しS

    -

    見出しとよく対になる本文。

    -
    見出しXS
    -

    見出しとよく対になる本文。

    -
    見出しXXS
    -

    見出しとよく対になる本文。

    -
    - - - id: code-m - name: Typography - Code - status: Verified - description: Typographic styles for computer code. - markup: | -
    - 暗号 XL Code Strong - 暗号 L Code Strong - 暗号 M Code Strong - 暗号 S Code Strong - 暗号 XS Code Strong - 
    暗号 M Code Wrapped in:
-        pre tags for
-        goodness
    -
    diff --git a/components/typography/metadata/typography.yml b/components/typography/metadata/typography.yml deleted file mode 100644 index 5b52468117b..00000000000 --- a/components/typography/metadata/typography.yml +++ /dev/null @@ -1,173 +0,0 @@ -name: Typography -status: Verified -description: | - Spectrum Typography is broken out into several separate components. - - In addition, the previous deprecated Typogaphy implementations ([legacy](typography-legacy.html), [depreacted](typography-deprecated.html)) are still shipped, but their usage is discouraged. -SpectrumSiteSlug: https://spectrum.adobe.com/page/typography/ -examplesHeading: Components -examples: - - id: heading-m - name: Heading - status: Verified - description: | - Heading is used to create various levels of typographic hierarchies. - - [View the Heading typography component](typography-heading.html) - markup: | -

    Hello world.

    - - id: body-m - name: Body - status: Verified - description: | - Body is primarily used for Spectrum components and for blocks of text. - - [View the Body typography component](typography-body.html) - markup: | -

    Spectrum is based on real-world situations.

    - - id: detail-m - status: Verified - name: Detail - description: | - Detail is used for disclosing extra information or smaller items in hierarchical relationships of text. - - [View the Detail typography component](typography-detail.html) - markup: | -

    Our recommendations

    - - id: code-m - name: Code - status: Verified - description: | - Code is used for text that represents code. - - [View the Code typography component](typography-code.html) - markup: | - alert("Hello world"); -sections: - - name: Custom Properties API - description: | - This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - - name: Applying margins - description: | - By default, Typography components do not include outer margins. If you would like to add margins, simply add the `.spectrum-Typography` class to your container, and every typography component inside of your container will have the correct margins. - markup: | -
    -

    Aliquet Mauris Eu

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.

    -
    - - - name: Migrating from deprecated Typography - description: | - See the table below to reference what will need to change when migrating to the new Typography API. Cells with a dash indicate the typography style did not exist in the previous API. - - Note that all instances of typography now require the component class in addition to the modifier class. For example, to get a large Heading, you will need the `.spectrum-Heading--sizeL` modifier class as well as the `.spectrum-Heading` component class. - - ### Heading - - | Deprecated Classname | New Classname | - | --------------------------------------------------------- | ---------------------------------------------------------------------- | - | `~.spectrum-Heading1--display~` | `.spectrum-Heading.spectrum-Heading--sizeXXXL` | - | `~.spectrum-Heading1--display.spectrum-Heading1--quiet~` | `.spectrum-Heading.spectrum-Heading--sizeXXXL.spectrum-Heading--light` | - | `~.spectrum-Heading1--display.spectrum-Heading1--strong~` | `.spectrum-Heading.spectrum-Heading--sizeXXXL.spectrum-Heading--heavy` | - | `~.spectrum-Heading2--display~` | `.spectrum-Heading.spectrum-Heading--sizeXXL` | - | `~.spectrum-Heading2--display.spectrum-Heading2--quiet~` | `.spectrum-Heading.spectrum-Heading--sizeXXL.spectrum-Heading--light` | - | `~.spectrum-Heading2--display.spectrum-Heading2--strong~` | `.spectrum-Heading.spectrum-Heading--sizeXXL.spectrum-Heading--heavy` | - | `~.spectrum-Heading1~` | `.spectrum-Heading.spectrum-Heading--sizeXL` | - | `~.spectrum-Heading1--quiet~` | `.spectrum-Heading.spectrum-Heading--sizeXL.spectrum-Heading--light` | - | `~.spectrum-Heading1--strong~` | `.spectrum-Heading.spectrum-Heading--sizeXL.spectrum-Heading--heavy` | - | `~.spectrum-Heading2~` | `.spectrum-Heading.spectrum-Heading--sizeL` | - | `~.spectrum-Heading1--quiet~` | `.spectrum-Heading.spectrum-Heading--sizeL.spectrum-Heading--light` | - | `~.spectrum-Heading2--strong~` | `.spectrum-Heading.spectrum-Heading--sizeL.spectrum-Heading--heavy` | - | `~.spectrum-Heading3~` | `.spectrum-Heading.spectrum-Heading--sizeM` | - | `~.spectrum-Heading4~` | `.spectrum-Heading.spectrum-Heading--sizeS` | - | `~.spectrum-Heading5~` | `.spectrum-Heading.spectrum-Heading--sizeXS` | - | `~.spectrum-Heading6~` | `.spectrum-Heading.spectrum-Heading--sizeXXS` | - - - ### Body - - | Deprecated Classname | New Classname | - | ---------------------- | ---------------------------------------- | - | - | `.spectrum-Body.spectrum-Body--sizeXXXL` | - | - | `.spectrum-Body.spectrum-Body--sizeXXL` | - | `~.spectrum-Body1~` | `.spectrum-Body.spectrum-Body--sizeXL` | - | `~.spectrum-Body2~` | `.spectrum-Body.spectrum-Body--sizeL` | - | `~.spectrum-Body3~` | `.spectrum-Body.spectrum-Body--sizeM` | - | `~.spectrum-Body4~` | `.spectrum-Body.spectrum-Body--sizeS` | - | `~.spectrum-Body5~` | `.spectrum-Body.spectrum-Body--sizeXS` | - - - - ### Detail - - | Deprecated Classname | New Classname | - | ------------------------ | ------------------------------------------------- | - | - | `.spectrum-Detail--sizeXL` | - | - | `.spectrum-Detail--sizeXL.spectrum-Detail--light` | - | - | `.spectrum-Detail--sizeL` | - | - | `.spectrum-Detail--sizeL.spectrum-Detail--light` | - | - | `.spectrum-Detail--sizeM` | - | - | `.spectrum-Detail--sizeM.spectrum-Detail--light` | - | `~.spectrum-Subheading~` | `.spectrum-Detail--sizeS` | - | `~.spectrum-Detail~` | `.spectrum-Detail--sizeS.spectrum-Detail--light` | - - - ### Code - - | Deprecated Classname | New Classname | - | -------------------- | ----------------------- | - | `~.spectrum-Code-1~` | `.spectrum-Code--sizeXL`| - | `~.spectrum-Code-2~` | `.spectrum-Code--sizeL` | - | `~.spectrum-Code-3~` | `.spectrum-Code--sizeM` | - | `~.spectrum-Code-4~` | `.spectrum-Code--sizeS` | - | `~.spectrum-Code-5~` | `.spectrum-Code--sizeXS`| - - - name: Updating sizing syntax - description: | - To be more consistent with other t-shirt sizing syntax, the Typography components now use the word `size` in the class name syntax. - - ### Heading - - | Deprecated Classname | New Classname | - |--------------------------------------------|------------------------------------------------| - | `.spectrum-Heading.spectrum-Heading--XXXL` | `.spectrum-Heading.spectrum-Heading--sizeXXXL` | - | `.spectrum-Heading.spectrum-Heading--XXL` | `.spectrum-Heading.spectrum-Heading--sizeXXL` | - | `.spectrum-Heading.spectrum-Heading--XL` | `.spectrum-Heading.spectrum-Heading--sizeXL` | - | `.spectrum-Heading.spectrum-Heading--L` | `.spectrum-Heading.spectrum-Heading--sizeL` | - | `.spectrum-Heading.spectrum-Heading--M` | `.spectrum-Heading.spectrum-Heading--sizeM` | - | `.spectrum-Heading.spectrum-Heading--S` | `.spectrum-Heading.spectrum-Heading--sizeS` | - | `.spectrum-Heading.spectrum-Heading--XS` | `.spectrum-Heading.spectrum-Heading--sizeXS` | - | `.spectrum-Heading.spectrum-Heading--XXS` | `.spectrum-Heading.spectrum-Heading--sizeXXS` | - - ### Body - - | Deprecated Classname | New Classname | - |--------------------------------------|------------------------------------------| - | `.spectrum-Body.spectrum-Body--XXXL` | `.spectrum-Body.spectrum-Body--sizeXXXL` | - | `.spectrum-Body.spectrum-Body--XXL` | `.spectrum-Body.spectrum-Body--sizeXXL` | - | `.spectrum-Body.spectrum-Body--XL` | `.spectrum-Body.spectrum-Body--sizeXL` | - | `.spectrum-Body.spectrum-Body--L` | `.spectrum-Body.spectrum-Body--sizeL` | - | `.spectrum-Body.spectrum-Body--M` | `.spectrum-Body.spectrum-Body--sizeM` | - | `.spectrum-Body.spectrum-Body--S` | `.spectrum-Body.spectrum-Body--sizeS` | - | `.spectrum-Body.spectrum-Body--XS` | `.spectrum-Body.spectrum-Body--sizeXS` | - | `.spectrum-Body.spectrum-Body--XXS` | `.spectrum-Body.spectrum-Body--sizeXXS` | - - ### Detail - - | Deprecated Classname | New Classname | - |----------------------------------------|--------------------------------------------| - | `.spectrum-Detail.spectrum-Detail--XL` | `.spectrum-Detail.spectrum-Detail--sizeXL` | - | `.spectrum-Detail.spectrum-Detail--L` | `.spectrum-Detail.spectrum-Detail--sizeL` | - | `.spectrum-Detail.spectrum-Detail--M` | `.spectrum-Detail.spectrum-Detail--sizeM` | - | `.spectrum-Detail.spectrum-Detail--S` | `.spectrum-Detail.spectrum-Detail--sizeS` | - - - ### Code - - | Deprecated Classname | New Classname | - |--------------------------------------|------------------------------------------| - | `.spectrum-Detail.spectrum-Code--XL` | `.spectrum-Detail.spectrum-Code--sizeXL` | - | `.spectrum-Detail.spectrum-Code--L` | `.spectrum-Detail.spectrum-Code--sizeL` | - | `.spectrum-Detail.spectrum-Code--M` | `.spectrum-Detail.spectrum-Code--sizeM` | - | `.spectrum-Detail.spectrum-Code--S` | `.spectrum-Detail.spectrum-Code--sizeS` | - | `.spectrum-Detail.spectrum-Code--XS` | `.spectrum-Detail.spectrum-Code--sizeXS` | diff --git a/components/well/metadata/well.yml b/components/well/metadata/well.yml deleted file mode 100644 index c80b992ae80..00000000000 --- a/components/well/metadata/well.yml +++ /dev/null @@ -1,15 +0,0 @@ -name: Well -examples: - - id: well - name: Standard - markup: | -

    Well Label (Optional)

    - -

    - Well done is better than well said. -
    - Benjamin Franklin -

    - Well said Ben! -

    -     diff --git a/lint-staged.config.js b/lint-staged.config.js index aed9e4e5671..358bbfa8d86 100644 --- a/lint-staged.config.js +++ b/lint-staged.config.js @@ -8,24 +8,12 @@ module.exports = { "dist/*.css": [ "prettier --no-config --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write" ], - "components/*/metadata/*.{yml,yaml}": (files) => { - return [ - ...(files.map(file => `pajv test --valid -s ./schemas/documentation.schema.json -d "${file}"`) ?? []), - `prettier --no-config --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write ${files.join(" ")}` - ]; - }, "components/*/metadata/metadata.json": (files) => { return [ ...(files.map(file => `pajv test --valid -s ./schemas/metadata.schema.json -d "${file}"`) ?? []), `prettier --no-config --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write ${files.join(" ")}` ]; }, - ".storybook/deprecated/*/*.yml": (files) => { - return [ - ...(files.map(file => `pajv test --valid -s ./schemas/documentation.schema.json -d "${file}"`) ?? []), - `prettier --no-config --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write ${files.join(" ")}` - ]; - }, "*.{md,mdx}": [ "prettier --no-config --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write" ] diff --git a/nx.json b/nx.json index 3412161dcec..06e9967be85 100644 --- a/nx.json +++ b/nx.json @@ -9,7 +9,6 @@ }, "namedInputs": { "core": ["{projectRoot}/*.css", "{projectRoot}/themes/*.css"], - "docs": ["{projectRoot}/metadata/*.yml"], "eslint": ["{workspaceRoot}/.eslintrc"], "metadata": ["{projectRoot}/metadata/*.json"], "prettier": ["{workspaceRoot}/.prettierrc"], @@ -123,7 +122,7 @@ "commands": [ "prettier --write --cache --log-level error --ignore-unknown --no-error-on-unmatched-pattern {projectRoot}/*.css {projectRoot}/**/*.css && stylelint --fix --cache --allow-empty-input {projectRoot}/*.css {projectRoot}/**/*.css", "eslint --fix --cache --no-error-on-unmatched-pattern {projectRoot}/*.json {projectRoot}/stories/*.js", - "prettier --write --cache --log-level error --ignore-unknown --no-error-on-unmatched-pattern {projectRoot}/*.{yml,md,mdx} {projectRoot}/**/*.{yml,md,mdx}" + "prettier --write --cache --log-level error --ignore-unknown --no-error-on-unmatched-pattern {projectRoot}/*.{md,mdx} {projectRoot}/**/*.{md,mdx}" ] } }, @@ -176,15 +175,12 @@ "validate": { "executor": "nx:run-commands", "inputs": [ - "{workspaceRoot}/schemas/documentation.schema.json", "{workspaceRoot}/schemas/metadata.schema.json", - "docs", "metadata", { "externalDependencies": ["pajv"] } ], "options": { "commands": [ - "test -e {projectRoot}/metadata && pajv validate -s ./schemas/documentation.schema.json -d \"{projectRoot}/metadata/*.yml\" || exit 0", "test -e {projectRoot}/metadata && pajv validate -s ./schemas/metadata.schema.json -d \"{projectRoot}/metadata/metadata.json\" || exit 0" ] } diff --git a/schemas/documentation.schema.json b/schemas/documentation.schema.json deleted file mode 100644 index 5cc7fdff71d..00000000000 --- a/schemas/documentation.schema.json +++ /dev/null @@ -1,152 +0,0 @@ -{ - "$schema": "http://json-schema.org/draft-04/schema#", - "title": "JSON schema for Spectrum CSS documentation", - "type": "object", - "version": "1", - "description": "A validation schema for the Spectrum CSS documentation data.", - "properties": { - "id": { - "type": "string", - "description": "The unique identifier to use for this example set." - }, - "name": { - "type": "string", - "description": "The human-readable title for the element." - }, - "description": { - "type": "string", - "description": "A short description of the element's purpose and goals. For migration or additional context, add that information to the sections property." - }, - "status": { - "$ref": "#/definitions/status" - }, - "SpectrumSiteSlug": { - "type": "string", - "format": "uri", - "description": "The URL for the Spectrum design specifications for this element." - }, - "sections": { - "description": "These are the sections of the documentation for the element that describe how to use the component and best practices.", - "type": "array", - "items": { - "type": "object", - "properties": { - "id": { - "type": "string", - "description": "The id for the section." - }, - "name": { - "type": "string", - "description": "The title for the section." - }, - "description": { - "type": "string", - "description": "The content of the section." - } - }, - "required": ["description"] - } - }, - "examplesHeading": { - "type": "string", - "description": "The human-readable title for the element." - }, - "examples": { - "description": "These are the examples of the element in use.", - "type": "array", - "items": { - "oneOf": [ - { - "type": "object", - "properties": { - "id": { - "type": "string", - "description": "The unique identifier to use for this example set." - }, - "name": { - "type": "string", - "description": "The specific human-readable title for the example set." - }, - "demoClassName": { - "type": "string", - "description": "The specific human-readable title for the example set." - }, - "description": { - "type": "string", - "description": "The description for the example set." - }, - "status": { - "$ref": "#/definitions/status" - }, - "markup": { - "description": "The HTML markup for the example.", - "oneOf": [ - { - "type": "string" - }, - { - "type": "array", - "items": { - "oneOf": [ - { - "type": "object", - "properties": { - "id": { - "type": "string", - "description": "The unique identifier to use for this example set." - }, - "title": { - "type": "string", - "description": "The title for the section." - }, - "description": { - "type": "string", - "description": "The description for the example set." - }, - "group": { - "oneOf": [ - { - "type": "string" - }, - { - "type": "array", - "description": "The content of the section.", - "items": [ - { - "type": "string" - } - ] - } - ] - } - } - }, - { - "type": "string" - } - ] - } - } - ] - } - }, - "required": ["id", "markup"], - "oneOf": [{ "required": ["name"] }, { "required": ["title"] }] - }, - { - "type": "string" - } - ] - } - } - }, - "definitions": { - "status": { - "type": "string", - "description": "The design status of the element.", - "enum": ["Verified", "Experimental", "Deprecated", "Contribution", "Beta"] - } - }, - "oneOf": [{ "required": ["name"] }, { "required": ["title"] }], - "additionalProperties": false -}