From ce2f3e0d57b6a5732d829fca7c17986e15f875e8 Mon Sep 17 00:00:00 2001 From: aramos-adobe Date: Thu, 6 Feb 2025 15:27:46 -0500 Subject: [PATCH] feat(infield-progress-cirlce): new component, sharing tokens from progress circle (#3430) * feat(infieldprogress): add new component feat(infieldcircle): new component feat(ifpc): updating template and vrts chore(ifpc): updating story changes chore(ifpc): cleaning up build files feat(ifpc): add infield loader to components feat(infieldprogress): add new component feat(ifpc): updating template and vrts feat(ifpc): updating package, story, template chore(ifpc): spectrum two updates chore(ifpc): adding dist files chore(ifpc): changing button id chore(ifpc): updating bundle chore(ifpc): updating package chore(ifpc): testing out files chore(ifpc): adding missing dist files chore(ifpc): removing index css in dist fix(ifpc): fixing typos fix(ifpc): update mods in changeset chore(ifpc): removing mods from ifpc components in changeset * chore(ifpc): update package json) --- .changeset/flat-snails-admire.md | 7 + .github/QUICK-START.md | 2 +- .storybook/blocks/utilities.js | 4 +- README.md | 44 +------ components/button/stories/template.js | 17 +-- components/combobox/stories/template.js | 2 +- components/infieldprogresscircle/README.md | 7 + .../infieldprogresscircle/dist/metadata.json | 25 ++++ components/infieldprogresscircle/index.css | 37 ++++++ components/infieldprogresscircle/package.json | 57 +++++++++ components/infieldprogresscircle/project.json | 17 +++ .../stories/infieldprogresscircle.stories.js | 121 ++++++++++++++++++ .../stories/infieldprogresscircle.test.js | 25 ++++ .../infieldprogresscircle/stories/template.js | 21 +++ components/picker/stories/template.js | 6 +- .../stories/progresscircle.stories.js | 9 +- components/textfield/stories/template.js | 12 +- tasks/clean-up-after-migration.sh | 5 - tokens/README.md | 2 +- tools/bundle/package.json | 1 + tools/bundle/src/index.css | 1 + yarn.lock | 14 ++ 22 files changed, 362 insertions(+), 74 deletions(-) create mode 100644 .changeset/flat-snails-admire.md create mode 100644 components/infieldprogresscircle/README.md create mode 100644 components/infieldprogresscircle/dist/metadata.json create mode 100644 components/infieldprogresscircle/index.css create mode 100644 components/infieldprogresscircle/package.json create mode 100644 components/infieldprogresscircle/project.json create mode 100644 components/infieldprogresscircle/stories/infieldprogresscircle.stories.js create mode 100644 components/infieldprogresscircle/stories/infieldprogresscircle.test.js create mode 100644 components/infieldprogresscircle/stories/template.js diff --git a/.changeset/flat-snails-admire.md b/.changeset/flat-snails-admire.md new file mode 100644 index 00000000000..fa25475ac25 --- /dev/null +++ b/.changeset/flat-snails-admire.md @@ -0,0 +1,7 @@ +--- +"@spectrum-css/infieldprogresscircle": major +--- + +## Infield Progresscircle S2 Migration + +In-field progress circle is a new component created to replace progress circle (size S) in t-shirt size components. The button, textfield, combo box, and picker `template.js` files have all been updated to call for infield progress circles. This component comes in four sizes: (S, M, L, XL), has updated color variants (default, white, black), and has a unified track thickness. diff --git a/.github/QUICK-START.md b/.github/QUICK-START.md index 3e4f04d6c4d..4b97fcab7e8 100644 --- a/.github/QUICK-START.md +++ b/.github/QUICK-START.md @@ -16,7 +16,7 @@ Spectrum CSS components utilize custom properties in order to change themes and ``` -Use the `index.css` files in your project to include component and global styles ([Spectrum and Express contexts](https://github.com/adobe/spectrum-css?tab=readme-ov-file#visual-language), [background theme/colorstop](https://github.com/adobe/spectrum-css?tab=readme-ov-file#themes-colorstops), [platform scaling](https://github.com/adobe/spectrum-css?tab=readme-ov-file#scales), etc.) for the component. If you don't need all of the global styles, peek at the docs for [including assets](https://github.com/adobe/spectrum-css?tab=readme-ov-file#including-assets)). Use this file by including the stylesheet (plus stylesheets for dependencies) in the `` tag: +Use the `index.css` files in your project to include component and global styles ([background theme/colorstop](https://github.com/adobe/spectrum-css?tab=readme-ov-file#themes-colorstops), [platform scaling](https://github.com/adobe/spectrum-css?tab=readme-ov-file#scales), etc.) for the component. If you don't need all of the global styles, peek at the docs for [including assets](https://github.com/adobe/spectrum-css?tab=readme-ov-file#including-assets)). Use this file by including the stylesheet (plus stylesheets for dependencies) in the `` tag: ```html diff --git a/.storybook/blocks/utilities.js b/.storybook/blocks/utilities.js index 204cb83a2e6..220a2acdd27 100644 --- a/.storybook/blocks/utilities.js +++ b/.storybook/blocks/utilities.js @@ -1,4 +1,3 @@ -import legacy from "@spectrum-css/tokens-legacy/dist/json/tokens.json"; import spectrum from "@spectrum-css/tokens/dist/json/tokens.json"; import { useTheme } from "@storybook/theming"; @@ -70,9 +69,8 @@ function fetchTheme({ color, scale, context } = {}) { // Create a platform context based on the scale (platform used in the token data) const platform = scale === "medium" ? "desktop" : "mobile"; - const tokens = context === "spectrum" ? spectrum : legacy; - return { color, scale, context, platform, tokens }; + return { color, scale, context, platform, tokens: spectrum }; } /** diff --git a/README.md b/README.md index e73a4a96e6f..dab6d831ec3 100644 --- a/README.md +++ b/README.md @@ -52,17 +52,6 @@ Spectrum CSS components have build output that is designed to be used in a varie - `index.css` - _Preferred and most commonly used to incorporate Spectrum CSS into a project_. This file includes the component's styles and variable definitions. In this version, token-driven CSS properties[1](#token-footnote) are mapped to empty `--mod` prefixed variables (for customization) with a fallback to variables prefixed with `--spectrum` (sourced from the design tokens). - - This file loads the `.spectrum`, `.spectrum--legacy`, and `.spectrum--express` contexts which are used to toggle components between different [visual styles](https://github.com/adobe/spectrum-css?tab=readme-ov-file#visual-language). The `.spectrum` context is the default. - -- `index-base.css`: This file mimics the `index.css` output, but does not include the `.spectrum` or `.spectrum--express` contexts. - - - If your product only requires the `.spectrum` context, you can use `index-base.css` plus `themes/spectrum-two.css` from the `themes` directory to render the default Spectrum visual language. - - The `.spectrum--legacy` context represents the previous version of Spectrum (also known as Spectrum 1). This means if you only want to use the legacy context, you should load `themes/spectrum.css`. **deprecated** - - The `.spectrum--express` context represents the subtheme of Spectrum 1 called Express . This means if you only want to use the Express context, you should load `themes/express.css`. **deprecated** - - This approach can also be used when you have defined and written your own visual language and only need the base component styles from Spectrum CSS. To wire up your own visual language, you would need to define your own custom properties that match those defined in the `themes/spectrum-two.css` assets. - -- `index-theme.css`: This file provides only the visual language for a component. It is used in conjunction with `index-base.css` and when loaded together, provides the same result as using `index.css` by itself. - 1: Token-driven CSS properties are properties whose values are mapped to a value in the `@spectrum-css/tokens` package. These values represent design-language and are meant to be used across platforms. In contrast, properties specific to web-based implementations will not have a token value assigned, so not all CSS properties will use custom properties. #### Including assets @@ -73,29 +62,10 @@ Start by including the base set of variables: /* Include tokens */ @import "node_modules/@spectrum-css/tokens/dist/index.css"; -/* - For components with no other contexts available, load the - index.css file from the component's package. These are components - that do not have a spectrum or express context available. -*/ @import "node_modules/@spectrum-css/page/dist/index.css"; @import "node_modules/@spectrum-css/typography/dist/index.css"; @import "node_modules/@spectrum-css/icon/dist/index.css"; - -/* - Recommended: For components with multiple contexts available, if you - want access to all contexts, load the index.css file, which includes - all contexts and component variables. -*/ @import "node_modules/@spectrum-css/button/dist/index.css"; - -/* - If you only need the spectrum visual context: For components with - multiple contexts available, load only the spectrum context by sourcing - index-base.css and the spectrum theme from the themes directory. -*/ -@import "node_modules/@spectrum-css/button/dist/index-base.css"; -@import "node_modules/@spectrum-css/button/dist/themes/spectrum.css"; ``` Tokens values are mapped to context-specific classes which can be applied to the `` element or any place in your DOM where you wish to encapsulate or alter the visual language of your Spectrum components. @@ -106,9 +76,7 @@ All contexts you want to use must be defined in order to load all the appropriat ##### Visual language -- `.spectrum` - The default visual language for Spectrum CSS; represents the Spectrum 2 foundations visual language. -- `.spectrum--legacy` - The legacy Spectrum 1 visual language. _This visual language will be deprecated in Spectrum 2_. -- `.spectrum--express` - A variant of the standard visual language. _This visual language will be deprecated in Spectrum 2_. +- `.spectrum` - The default visual language for Spectrum CSS; represents the Spectrum 2 visual language. ##### Scales @@ -134,16 +102,6 @@ Put together, we would define the context for our application in the following w ``` -To switch to Express, **add** the `.spectrum--express` class to the `` element: - -```html - -``` - -Note the `spectrum--legacy` or `spectrum--express` class is added to the existing classes; `spectrum` should always be present to ensure the correct visual language is loaded. - Because CSS custom properties honor the cascading nature of CSS, you can infinitely nest different contexts. For example, you could have a `.spectrum--dark` context inside of a `.spectrum--light` context, and components will honor the innermost context. ### Modifying components diff --git a/components/button/stories/template.js b/components/button/stories/template.js index cecada6f7a9..1fa73697743 100644 --- a/components/button/stories/template.js +++ b/components/button/stories/template.js @@ -1,6 +1,6 @@ import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; +import { Template as InfieldProgressCircle } from "@spectrum-css/infieldprogresscircle/stories/template.js"; import { Container, getRandomId } from "@spectrum-css/preview/decorators"; -import { Template as ProgressCircle } from "@spectrum-css/progresscircle/stories/template.js"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; @@ -89,15 +89,12 @@ export const Template = ({ Icon({ iconName, setName: iconSet, size }, context) )} ${when(isPending, () => - ProgressCircle( - { - size: "s", - testId: "progress-circle", - staticColor, - isIndeterminate: true, - }, - context - ) + InfieldProgressCircle({ + size: size, + staticColor, + isIndeterminate: true, + testId: "infield-progress-circle" + }, context) )} `; diff --git a/components/combobox/stories/template.js b/components/combobox/stories/template.js index 96dfdcf25ee..f8cc0dbc1b1 100644 --- a/components/combobox/stories/template.js +++ b/components/combobox/stories/template.js @@ -63,7 +63,7 @@ const Combobox = ({ ], customInputClasses: [`${rootClass}-input`], isLoading, - customProgressCircleClasses: ["spectrum-Combobox-progress-circle"], + customInfieldProgressCircleClasses: ["spectrum-Combobox-progress-circle"], name: "field", isReadOnly, value, diff --git a/components/infieldprogresscircle/README.md b/components/infieldprogresscircle/README.md new file mode 100644 index 00000000000..4d411cc9502 --- /dev/null +++ b/components/infieldprogresscircle/README.md @@ -0,0 +1,7 @@ +# @spectrum-css/infieldprogresscircle + +> The Spectrum CSS infield progress circle component + +This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). + +See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. diff --git a/components/infieldprogresscircle/dist/metadata.json b/components/infieldprogresscircle/dist/metadata.json new file mode 100644 index 00000000000..ffc95f11390 --- /dev/null +++ b/components/infieldprogresscircle/dist/metadata.json @@ -0,0 +1,25 @@ +{ + "sourceFile": "index.css", + "selectors": [ + ".spectrum-InfieldProgressCircle", + ".spectrum-InfieldProgressCircle .spectrum-ProgressCircle-fill", + ".spectrum-InfieldProgressCircle--sizeL", + ".spectrum-InfieldProgressCircle--sizeS", + ".spectrum-InfieldProgressCircle--sizeXL" + ], + "modifiers": [], + "component": [ + "--spectrum-in-field-progress-circle-edge-to-fill", + "--spectrum-in-field-progress-circle-size-100", + "--spectrum-in-field-progress-circle-size-200", + "--spectrum-in-field-progress-circle-size-300", + "--spectrum-in-field-progress-circle-size-75", + "--spectrum-infieldprogresscircle-padding-block" + ], + "global": ["--spectrum-progress-circle-thickness-small"], + "passthroughs": [ + "--mod-progress-circle-size", + "--mod-progress-circle-thickness" + ], + "high-contrast": [] +} diff --git a/components/infieldprogresscircle/index.css b/components/infieldprogresscircle/index.css new file mode 100644 index 00000000000..e3525eccc40 --- /dev/null +++ b/components/infieldprogresscircle/index.css @@ -0,0 +1,37 @@ +/*! +Copyright 2025 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +.spectrum-InfieldProgressCircle { + --mod-progress-circle-thickness: var(--spectrum-progress-circle-thickness-small); + --mod-progress-circle-size: var(--spectrum-in-field-progress-circle-size-100); + --spectrum-infieldprogresscircle-padding-block: var(--spectrum-in-field-progress-circle-edge-to-fill); +} + +.spectrum-InfieldProgressCircle--sizeS { + --mod-progress-circle-size: var(--spectrum-in-field-progress-circle-size-75); +} + +.spectrum-InfieldProgressCircle--sizeL { + --mod-progress-circle-size: var(--spectrum-in-field-progress-circle-size-200); +} + +.spectrum-InfieldProgressCircle--sizeXL { + --mod-progress-circle-size: var(--spectrum-in-field-progress-circle-size-300); +} + +.spectrum-InfieldProgressCircle { + padding-block: var(--spectrum-infieldprogresscircle-padding-block); + + .spectrum-ProgressCircle-fill { + stroke-linecap: square; + } +} diff --git a/components/infieldprogresscircle/package.json b/components/infieldprogresscircle/package.json new file mode 100644 index 00000000000..c48a50c6389 --- /dev/null +++ b/components/infieldprogresscircle/package.json @@ -0,0 +1,57 @@ +{ + "name": "@spectrum-css/infieldprogresscircle", + "version": "0.0.0", + "description": "The Spectrum CSS infieldprogresscircle component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/?path=/docs/components-in-field-progress-circle--docs", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/infieldprogresscircle" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "exports": { + ".": "./dist/index.css", + "./*.md": "./*.md", + "./dist/*": "./dist/*", + "./index-*.css": "./dist/index-*.css", + "./index.css": "./dist/index.css", + "./metadata.json": "./dist/metadata.json", + "./package.json": "./package.json", + "./stories/*": "./stories/*" + }, + "main": "dist/index.css", + "peerDependencies": { + "@spectrum-css/tokens": ">=16" + }, + "devDependencies": { + "@spectrum-css/tokens": "16.0.0" + }, + "keywords": [ + "design-system", + "spectrum", + "spectrum-css", + "adobe", + "adobe-spectrum", + "component", + "css" + ], + "publishConfig": { + "access": "public" + }, + "spectrum": [ + { + "guidelines": "https://spectrum.adobe.com/page/progress-circle", + "rootClass": "spectrum-InfieldProgressCircle", + "swc": "https://opensource.adobe.com/spectrum-web-components/components/progress-circle/" + } + ], + "peerDependenciesMeta": { + "@spectrum-css/tokens": { + "optional": true + } + } +} diff --git a/components/infieldprogresscircle/project.json b/components/infieldprogresscircle/project.json new file mode 100644 index 00000000000..ff11b0651fc --- /dev/null +++ b/components/infieldprogresscircle/project.json @@ -0,0 +1,17 @@ +{ + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "name": "infieldprogresscircle", + "tags": ["component"], + "targets": { + "build": {}, + "clean": {}, + "compare": {}, + "format": {}, + "lint": {}, + "report": {}, + "test": { + "defaultConfiguration": "scope" + }, + "validate": {} + } +} diff --git a/components/infieldprogresscircle/stories/infieldprogresscircle.stories.js b/components/infieldprogresscircle/stories/infieldprogresscircle.stories.js new file mode 100644 index 00000000000..e8c60ee9d6d --- /dev/null +++ b/components/infieldprogresscircle/stories/infieldprogresscircle.stories.js @@ -0,0 +1,121 @@ +import { Sizes } from "@spectrum-css/preview/decorators"; +import { disableDefaultModes } from "@spectrum-css/preview/modes"; +import { size } from "@spectrum-css/preview/types"; +import { default as ProgressCircle } from "@spectrum-css/progresscircle/stories/progresscircle.stories.js"; +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; +import { InfieldProgressCircleGroup } from "./infieldprogresscircle.test.js"; +import { Template } from "./template.js"; + +/** + * In-field progress circles are used in t-shirt size components such as [buttons](/docs/components-button--docs), [combo boxes](/docs/components-combobox--docs), and [pickers](/docs/components-picker--docs). The in-field progress circle can be used in place of an icon or in tight spaces when space is limited both vertically and horizontally. +*/ + +export default { + title: "In-field progress circle", + component: "InfieldProgressCircle", + argTypes: { + ...ProgressCircle.argTypes, + size: size(["s", "m", "l", "xl"]), + }, + args: { + ...ProgressCircle.args, + rootClass: "spectrum-InfieldProgressCircle", + }, + parameters: { + ...ProgressCircle.parameters, + design: { + type: "figma", + url: "https://www.figma.com/design/eoZHKJH9a3LJkHYCGt60Vb/S2-token-specs?node-id=14970-6050", + }, + packageJson, + metadata, + } +}; + +export const Default = InfieldProgressCircleGroup.bind({}); +Default.args = {}; + +// ********* VRT ONLY ********* // +export const WithForcedColors = InfieldProgressCircleGroup.bind({}); +WithForcedColors.args = Default.args; +WithForcedColors.tags = ["!autodocs", "!dev"]; +WithForcedColors.parameters = { + chromatic: { + forcedColors: "active", + modes: disableDefaultModes, + }, +}; + +// ********* DOCS ONLY ********* // + +export const Sizing = (args, context) => Sizes({ + Template, + withHeading: false, + withBorder: false, + ...args, +}, context); +Sizing.args = {}; +Sizing.tags = ["!dev"]; +Sizing.parameters = { + chromatic: { disableSnapshot: true }, +}; + +/** + * The indeterminate progress circle displays a repeating animation for the inner fill. + */ +export const Indeterminate = (args, context) => Sizes({ + Template, + withHeading: false, + withBorder: false, + ...args, +}, context); +Indeterminate.args = { + isIndeterminate: true, +}; +Indeterminate.tags = ["!dev"]; +Indeterminate.parameters = { + chromatic: { disableSnapshot: true }, +}; + +export const StaticWhiteDeterminate = Sizing.bind({}); +StaticWhiteDeterminate.tags = ["!dev"]; +StaticWhiteDeterminate.storyName = "Static white, default"; +StaticWhiteDeterminate.args = { + staticColor: "white", +}; +StaticWhiteDeterminate.parameters = { + chromatic: { disableSnapshot: true }, +}; + +export const StaticWhiteIndeterminate = Sizing.bind({}); +StaticWhiteIndeterminate.tags = ["!dev"]; +StaticWhiteIndeterminate.storyName = "Static white, indeterminate"; +StaticWhiteIndeterminate.args = { + staticColor: "white", + isIndeterminate: true, +}; +StaticWhiteIndeterminate.parameters = { + chromatic: { disableSnapshot: true }, +}; + +export const StaticBlackDeterminate = Sizing.bind({}); +StaticBlackDeterminate.tags = ["!dev"]; +StaticBlackDeterminate.storyName = "Static black, default"; +StaticBlackDeterminate.args = { + staticColor: "black", +}; +StaticBlackDeterminate.parameters = { + chromatic: { disableSnapshot: true }, +}; + +export const StaticBlackIndeterminate = Sizing.bind({}); +StaticBlackIndeterminate.tags = ["!dev"]; +StaticBlackIndeterminate.storyName = "Static black, indeterminate"; +StaticBlackIndeterminate.args = { + staticColor: "black", + isIndeterminate: true, +}; +StaticBlackIndeterminate.parameters = { + chromatic: { disableSnapshot: true }, +}; diff --git a/components/infieldprogresscircle/stories/infieldprogresscircle.test.js b/components/infieldprogresscircle/stories/infieldprogresscircle.test.js new file mode 100644 index 00000000000..2ef07f947ab --- /dev/null +++ b/components/infieldprogresscircle/stories/infieldprogresscircle.test.js @@ -0,0 +1,25 @@ +import { Variants } from "@spectrum-css/preview/decorators"; +import { Template } from "./template.js"; + +export const InfieldProgressCircleGroup = Variants({ + Template, + testData: [ + { + testHeading: "Default", + }, + { + testHeading: "Static white", + staticColor: "white", + }, + { + testHeading: "Static black", + staticColor: "black", + }, + ], + stateData: [ + { + testHeading: "Indeterminate", + isIndeterminate: true, + } + ] +}); diff --git a/components/infieldprogresscircle/stories/template.js b/components/infieldprogresscircle/stories/template.js new file mode 100644 index 00000000000..7f8fc1f8de1 --- /dev/null +++ b/components/infieldprogresscircle/stories/template.js @@ -0,0 +1,21 @@ +import { Template as ProgressCircle } from "@spectrum-css/progresscircle/stories/template.js"; +import { capitalize } from "lodash-es"; +import "../index.css"; + +export const Template = ({ + customClasses = [], + rootClass = "spectrum-InfieldProgressCircle", + size = "m", + staticColor, + ...item +} = {}, context = {}) => ProgressCircle({ + customClasses: [ + rootClass, + typeof size !== "undefined" ? `${rootClass}--size${size.toUpperCase()}` : null, + typeof staticColor !== "undefined" ? `${rootClass}--static${capitalize(staticColor)}` : null, + ...customClasses + ].filter(Boolean), + size, + staticColor, + ...item +}, context ); diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js index f1219f98085..0d8bec6d42f 100644 --- a/components/picker/stories/template.js +++ b/components/picker/stories/template.js @@ -1,9 +1,9 @@ import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js"; import { Template as HelpText } from "@spectrum-css/helptext/stories/template.js"; import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; +import { Template as InfieldProgressCircle } from "@spectrum-css/infieldprogresscircle/stories/template.js"; import { Template as Popover } from "@spectrum-css/popover/stories/template.js"; import { Container, getRandomId } from "@spectrum-css/preview/decorators"; -import { Template as ProgressCircle } from "@spectrum-css/progresscircle/stories/template.js"; import { Template as Switch } from "@spectrum-css/switch/stories/template.js"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; @@ -78,8 +78,8 @@ export const Picker = ({ } ${placeholder} ${when(isLoading, () => - ProgressCircle({ - size: "s", + InfieldProgressCircle({ + size: size, isIndeterminate: true, }, context) )} diff --git a/components/progresscircle/stories/progresscircle.stories.js b/components/progresscircle/stories/progresscircle.stories.js index ac3f3111330..9146a54f0f1 100644 --- a/components/progresscircle/stories/progresscircle.stories.js +++ b/components/progresscircle/stories/progresscircle.stories.js @@ -17,11 +17,18 @@ export default { isIndeterminate, staticColor, value: { + name: "Percent filled", + type: { name: "number" }, + table: { + type: { summary: "number" }, + category: "Content", + }, control: { type: "range", min: 0, max: 100 - } + }, + if: { arg: "isIndeterminate", truthy: false }, } }, args: { diff --git a/components/textfield/stories/template.js b/components/textfield/stories/template.js index 55c2d55d124..9413a7504e3 100644 --- a/components/textfield/stories/template.js +++ b/components/textfield/stories/template.js @@ -1,8 +1,8 @@ import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js"; import { Template as HelpText } from "@spectrum-css/helptext/stories/template.js"; import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; +import { Template as InfieldProgressCircle } from "@spectrum-css/infieldprogresscircle/stories/template.js"; import { Container, getRandomId } from "@spectrum-css/preview/decorators"; -import { Template as ProgressCircle } from "@spectrum-css/progresscircle/stories/template.js"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; @@ -18,7 +18,7 @@ import "../index.css"; * @property {string[]} [customClasses=[]] * @property {string[]} [customInputClasses=[]] * @property {string[]} [customIconClasses=[]] - * @property {string[]} [customProgressCircleClasses=[]] + * @property {string[]} [customInfieldProgressCircleClasses=[]] * @property {Record} [customStyles={}] * @property {boolean} [isInvalid=false] * @property {boolean} [isValid=false] @@ -58,7 +58,7 @@ export const Template = ({ customClasses = [], customInputClasses = [], customIconClasses = [], - customProgressCircleClasses = [], + customInfieldProgressCircleClasses = [], isInvalid = false, isValid = false, multiline = false, @@ -196,10 +196,10 @@ export const Template = ({ })} />` )} - ${when(isLoading, () => ProgressCircle({ + ${when(isLoading, () => InfieldProgressCircle({ isIndeterminate: true, - size: "s", - customClasses: customProgressCircleClasses, + size: size, + customClasses: customInfieldProgressCircleClasses, }, context))} ${when(helpText, () => HelpText({ diff --git a/tasks/clean-up-after-migration.sh b/tasks/clean-up-after-migration.sh index 101f07e82ee..f04cb29e10c 100644 --- a/tasks/clean-up-after-migration.sh +++ b/tasks/clean-up-after-migration.sh @@ -13,11 +13,6 @@ # After migrating from our old build system, there are a lot of empty folders hanging out still # This script aims to clean up those folders -# Legacy tools folder (included storybook & generator) -# test -d "tools" && rm -rf tools - -test -d "tools" && rm -rf tools - # Remove deprecated files for folder in components/*; do # Only processing nested folders, not top-level files diff --git a/tokens/README.md b/tokens/README.md index a0e99bf2381..ebdf427d75e 100644 --- a/tokens/README.md +++ b/tokens/README.md @@ -29,7 +29,7 @@ Consumers should load only the mappings for the components they are using in the The output is concatenated into a single `dist/index.css` for use in a vanilla HTML application. This entire file should be imported, and the relevant classes should be toggled to swap out core tokens. -On the `` element, start with `.spectrum`, add in `.spectrum--light`, then `.spectrum--medium`. To switch to another context, add `.spectrum--legacy` or `.spectrum--express`. +On the `` element, start with `.spectrum`, add in `.spectrum--light`, then `.spectrum--medium`. For additional guidance on which assets to load, see the architecture section below. diff --git a/tools/bundle/package.json b/tools/bundle/package.json index 734566dc531..7f641c2bacb 100644 --- a/tools/bundle/package.json +++ b/tools/bundle/package.json @@ -74,6 +74,7 @@ "@spectrum-css/icon": "workspace:^", "@spectrum-css/illustratedmessage": "workspace:^", "@spectrum-css/infieldbutton": "workspace:^", + "@spectrum-css/infieldprogresscircle": "workspace:^", "@spectrum-css/inlinealert": "workspace:^", "@spectrum-css/link": "workspace:^", "@spectrum-css/logicbutton": "workspace:^", diff --git a/tools/bundle/src/index.css b/tools/bundle/src/index.css index 31d68ccee09..3f1db509c75 100644 --- a/tools/bundle/src/index.css +++ b/tools/bundle/src/index.css @@ -66,6 +66,7 @@ @import "@spectrum-css/icon"; @import "@spectrum-css/illustratedmessage"; @import "@spectrum-css/infieldbutton"; +@import "@spectrum-css/infieldprogresscircle"; @import "@spectrum-css/inlinealert"; @import "@spectrum-css/link"; @import "@spectrum-css/logicbutton"; diff --git a/yarn.lock b/yarn.lock index 7d92a15f0ba..ddce6fa3a32 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3963,6 +3963,7 @@ __metadata: "@spectrum-css/icon": "workspace:^" "@spectrum-css/illustratedmessage": "workspace:^" "@spectrum-css/infieldbutton": "workspace:^" + "@spectrum-css/infieldprogresscircle": "workspace:^" "@spectrum-css/inlinealert": "workspace:^" "@spectrum-css/link": "workspace:^" "@spectrum-css/logicbutton": "workspace:^" @@ -4648,6 +4649,19 @@ __metadata: languageName: unknown linkType: soft +"@spectrum-css/infieldprogresscircle@workspace:^, @spectrum-css/infieldprogresscircle@workspace:components/infieldprogresscircle": + version: 0.0.0-use.local + resolution: "@spectrum-css/infieldprogresscircle@workspace:components/infieldprogresscircle" + dependencies: + "@spectrum-css/tokens": "npm:16.0.0" + peerDependencies: + "@spectrum-css/tokens": ">=16" + peerDependenciesMeta: + "@spectrum-css/tokens": + optional: true + languageName: unknown + linkType: soft + "@spectrum-css/inlinealert@workspace:^, @spectrum-css/inlinealert@workspace:components/inlinealert": version: 0.0.0-use.local resolution: "@spectrum-css/inlinealert@workspace:components/inlinealert"