diff --git a/.changeset/mighty-pigs-accept.md b/.changeset/mighty-pigs-accept.md new file mode 100644 index 00000000000..83be0beb618 --- /dev/null +++ b/.changeset/mighty-pigs-accept.md @@ -0,0 +1,15 @@ +--- +"@spectrum-css/progressbar": minor +"@spectrum-css/meter": minor +--- + +Adjust progressbar styles, story and template to support proper width token and sizes for medium (desktop) and large (mobile) platforms. + +- Progress bar and meter now use the same tokens to control their width. +- Progress bar and meter now have a set width regardless of t-shirt size. + +Removed mods +`--mod-meter-inline-size` + +New mods +`--mod-progressbar-inline-size` diff --git a/components/meter/dist/metadata.json b/components/meter/dist/metadata.json index 12d5893d69d..0a67dc91088 100644 --- a/components/meter/dist/metadata.json +++ b/components/meter/dist/metadata.json @@ -7,13 +7,8 @@ ".spectrum-Meter.is-positive", ".spectrum-Meter.spectrum-Meter--sizeL" ], - "modifiers": [ - "--mod-meter-inline-size", - "--mod-meter-max-width", - "--mod-meter-min-width" - ], + "modifiers": ["--mod-meter-max-width", "--mod-meter-min-width"], "component": [ - "--spectrum-meter-default-width", "--spectrum-meter-maximum-width", "--spectrum-meter-minimum-width", "--spectrum-meter-thickness-large", @@ -26,15 +21,13 @@ "--spectrum-font-size-75", "--spectrum-negative-visual-color", "--spectrum-notice-visual-color", - "--spectrum-positive-visual-color", - "--spectrum-progressbar-size-2500" + "--spectrum-positive-visual-color" ], "passthroughs": [ "--mod-progressbar-fill-color", "--mod-progressbar-font-size", "--mod-progressbar-max-size", "--mod-progressbar-min-size", - "--mod-progressbar-size-default", "--mod-progressbar-spacing-top-to-text", "--mod-progressbar-thickness" ], diff --git a/components/meter/index.css b/components/meter/index.css index 2db081b1e9d..e11210b675e 100644 --- a/components/meter/index.css +++ b/components/meter/index.css @@ -13,7 +13,6 @@ /* @passthrough start */ .spectrum-Meter { - --mod-progressbar-size-default: var(--mod-meter-inline-size, var(--spectrum-meter-default-width)); --mod-progressbar-max-size: var(--mod-meter-max-width, var(--spectrum-meter-maximum-width)); --mod-progressbar-min-size: var(--mod-meter-min-width, var(--spectrum-meter-minimum-width)); @@ -22,7 +21,6 @@ --mod-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); &.spectrum-Meter--sizeL { - --mod-progressbar-size-default: var(--mod-meter-inline-size, var(--spectrum-progressbar-size-2500)); --mod-progressbar-thickness: var(--spectrum-meter-thickness-large); --mod-progressbar-font-size: var(--spectrum-font-size-100); --mod-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200); diff --git a/components/progressbar/dist/metadata.json b/components/progressbar/dist/metadata.json index 25c7fd682a6..0ac94c7f15c 100644 --- a/components/progressbar/dist/metadata.json +++ b/components/progressbar/dist/metadata.json @@ -35,12 +35,12 @@ "--mod-progressbar-fill-color-white", "--mod-progressbar-fill-size-indeterminate", "--mod-progressbar-font-size", + "--mod-progressbar-inline-size", "--mod-progressbar-label-and-value-white", "--mod-progressbar-line-height", "--mod-progressbar-line-height-cjk", "--mod-progressbar-max-size", "--mod-progressbar-min-size", - "--mod-progressbar-size-default", "--mod-progressbar-spacing-label-to-progressbar", "--mod-progressbar-spacing-label-to-text", "--mod-progressbar-spacing-top-to-text", @@ -63,15 +63,12 @@ "--spectrum-progressbar-fill-color-white", "--spectrum-progressbar-fill-size-indeterminate", "--spectrum-progressbar-font-size", + "--spectrum-progressbar-inline-size", "--spectrum-progressbar-label-and-value-white", "--spectrum-progressbar-line-height", "--spectrum-progressbar-line-height-cjk", "--spectrum-progressbar-max-size", "--spectrum-progressbar-min-size", - "--spectrum-progressbar-size-2400", - "--spectrum-progressbar-size-2500", - "--spectrum-progressbar-size-2800", - "--spectrum-progressbar-size-default", "--spectrum-progressbar-spacing-label-to-progressbar", "--spectrum-progressbar-spacing-label-to-text", "--spectrum-progressbar-spacing-top-to-text", @@ -96,6 +93,7 @@ "--spectrum-font-size-75", "--spectrum-gray-300", "--spectrum-line-height-100", + "--spectrum-meter-width", "--spectrum-neutral-subdued-content-color-default", "--spectrum-spacing-200", "--spectrum-spacing-75", diff --git a/components/progressbar/index.css b/components/progressbar/index.css index a45e9285b09..198e9fd2c5e 100644 --- a/components/progressbar/index.css +++ b/components/progressbar/index.css @@ -19,17 +19,8 @@ --spectrum-progressbar-fill-size-indeterminate: 70%; - /* --spectrum-global-dimension-static-size-2400 */ - --spectrum-progressbar-size-2400: 192px; - - /* --spectrum-global-dimension-static-size-2500 */ - --spectrum-progressbar-size-2500: 200px; - - /* --spectrum-global-dimension-static-size-2800 */ - --spectrum-progressbar-size-2800: 224px; - /* Size */ - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400); + --spectrum-progressbar-inline-size: var(--spectrum-meter-width); --spectrum-progressbar-font-size: var(--spectrum-font-size-100); --spectrum-progressbar-line-height: var(--spectrum-line-height-100); @@ -55,8 +46,6 @@ } .spectrum-ProgressBar--sizeS { - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400); - --spectrum-progressbar-font-size: var(--spectrum-font-size-75); --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-small); @@ -64,8 +53,6 @@ } .spectrum-ProgressBar--sizeL { - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2500); - --spectrum-progressbar-font-size: var(--spectrum-font-size-200); --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-large); @@ -73,8 +60,6 @@ } .spectrum-ProgressBar--sizeXL { - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2800); - --spectrum-progressbar-font-size: var(--spectrum-font-size-300); --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-extra-large); @@ -89,9 +74,9 @@ align-items: center; font-size: var(--mod-progressbar-font-size, var(--spectrum-progressbar-font-size)); vertical-align: top; - word-break: break-word; + overflow-wrap: break-word; - inline-size: var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)); + inline-size: var(--mod-progressbar-inline-size, var(--spectrum-progressbar-inline-size)); max-inline-size: var(--mod-progressbar-max-size, var(--spectrum-progressbar-max-size)); min-inline-size: var(--mod-progressbar-min-size, var(--spectrum-progressbar-min-size)); @@ -160,7 +145,7 @@ word-break: normal; .spectrum-ProgressBar-track { - flex: 1 1 var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)); + flex: 1 1 var(--mod-progressbar-inline-size, var(--spectrum-progressbar-inline-size)); } .spectrum-ProgressBar-label { @@ -211,17 +196,17 @@ } to { - transform: translate(var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default))); + transform: translate(var(--mod-progressbar-inline-size, var(--spectrum-progressbar-inline-size))); } } @keyframes indeterminate-loop-rtl { from { - transform: translate(var(--mod-progressbar-size-default, var(--spectrum-progressbar-fill-size-indeterminate))); + transform: translate(var(--mod-progressbar-inline-size, var(--spectrum-progressbar-fill-size-indeterminate))); } to { - transform: translate(calc(-1 * var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)))); + transform: translate(calc(-1 * var(--mod-progressbar-inline-size, var(--spectrum-progressbar-inline-size)))); } } diff --git a/components/progressbar/stories/progressbar.stories.js b/components/progressbar/stories/progressbar.stories.js index f55387d875a..15ff9ff525a 100644 --- a/components/progressbar/stories/progressbar.stories.js +++ b/components/progressbar/stories/progressbar.stories.js @@ -18,18 +18,6 @@ export default { title: "Progress bar", component: "ProgressBar", argTypes: { - customWidth: { - name: "Custom width", - defaultValue: 192, - description: "A number to adjust the width of the component. Spectrum 2 specifications limit the component width to be between 48px and 768px.", - type: { name: "number" }, - table: { - type: { summary: "number" }, - category: "Component", - defaultValue: { summary: 200 }, - }, - control: { type: "range", min: 48, max: 768,}, - }, size: size(["s", "m", "l", "xl"]), isIndeterminate, labelPosition: { @@ -87,7 +75,6 @@ export default { label: "Loading", labelPosition: "top", value: 0, - customWidth: 200, isIndeterminate: false, showValueLabel: true, }, @@ -143,13 +130,15 @@ Indeterminate.parameters = { }; /** - * The minimum width of a progress bar is 48px and the maximum width of a progress bar is 768px, for both desktop and mobile platform scale. Smaller progress bars should only be used in places where it’s not necessary to have a label. + * By default, the progress bar has a minimum, maximum, and fixed size. The progress bar may be displayed at a custom width by setting `--mod-progressbar-inline-size` to the desired width. The progress bar below is displayed at `400px` using that modifiable custom property. */ export const CustomWidth = Template.bind({}); CustomWidth.storyName = "Custom width"; CustomWidth.args = { value: 83, - customWidth: 400, + customStyles: { + "--mod-progressbar-inline-size": "400px", + }, }; CustomWidth.tags = ["!dev"]; CustomWidth.parameters = { diff --git a/components/progressbar/stories/template.js b/components/progressbar/stories/template.js index 30c9cfeb827..b1ae6067515 100644 --- a/components/progressbar/stories/template.js +++ b/components/progressbar/stories/template.js @@ -13,7 +13,6 @@ export const Template = ({ customClasses = [], labelPosition, staticColor, - customWidth, isIndeterminate = false, label, value, @@ -33,12 +32,11 @@ export const Template = ({ [`${rootClass}--indeterminate`]: isIndeterminate, ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} - style=${styleMap({ - "width": `${customWidth}px`, + style=${ifDefined(styleMap({ ...customStyles, "--mod-progressbar-track-color": trackFill, "--mod-progressbar-fill-color": progressBarFill, - })} + }))} value=${ifDefined(value ? `${value}%` : undefined)} aria-valuenow=${ifDefined(value ? `${value}%` : undefined)} role="progressbar"