Static progress followup (#5125)

iamwillpowell · snowystinger · LFDanLu · web-flow · commit b47220fddb4f · 2023-09-28T13:50:36.000-07:00
* Fix HCM barloader style

* Fix High Contrast Mode for circle loader

* Update packages/@adobe/spectrum-css-temp/components/barloader/skin.css

* Fix edge case where variant is overbackground and static color is black

* barloader fix and reoder circloader vars

* Deprecate `variant` prop for overBackground

* story tweaks

* Add border color to isPending button mode for WHCM Forced Colors

* Update Accessibility docs for progress

* Update packages/@react-spectrum/progress/docs/ProgressBar.mdx

---------

Co-authored-by: Robert Snow &lt;rsnow@adobe.com&gt;
Co-authored-by: Daniel Lu &lt;dl1644@gmail.com&gt;
diff --git a/packages/@adobe/spectrum-css-temp/components/barloader/skin.css b/packages/@adobe/spectrum-css-temp/components/barloader/skin.css
@@ -12,6 +12,8 @@ governing permissions and limitations under the License.
 
 .spectrum-BarLoader {
   --spectrum-barloader-large-track-fill-color: var(--spectrum-accent-color-900);
+  --spectrum-barloader-static-black-track-color: rgba(0, 0, 0, 0.25);
+  --spectrum-barloader-static-black-fill-color: var(--spectrum-global-color-static-black);
 
   .spectrum-BarLoader-fill {
     background: var(--spectrum-barloader-large-track-fill-color);
@@ -39,16 +41,16 @@ governing permissions and limitations under the License.
   /* TODO: use semantic tokens or spectrum variables when available */
   &.spectrum-BarLoader--staticBlack {
     .spectrum-BarLoader-track {
-      background-color: rgba(0, 0, 0, 0.25);
+      background-color: var(--spectrum-barloader-static-black-track-color);
     }
 
     .spectrum-BarLoader-label,
     .spectrum-BarLoader-percentage {
-      color: var(--spectrum-global-color-static-black);
+      color: var(--spectrum-barloader-static-black-fill-color);
     }
 
     .spectrum-BarLoader-fill {
-      background: var(--spectrum-global-color-static-black);
+      background: var(--spectrum-barloader-static-black-fill-color);
     }
   }
   &.is-positive {
@@ -84,6 +86,9 @@ governing permissions and limitations under the License.
     forced-color-adjust: none;
     --spectrum-barloader-large-track-fill-color: ButtonText;
     --spectrum-barloader-large-over-background-track-fill-color: ButtonText;
+    --spectrum-barloader-large-over-background-track-color: ButtonFace;
+    --spectrum-barloader-static-black-track-color: ButtonFace;
+    --spectrum-barloader-static-black-fill-color: ButtonText;
     --spectrum-meter-large-track-color-positive: ButtonText;
     --spectrum-meter-large-track-color-warning: ButtonText;
     --spectrum-meter-large-track-color-critical: ButtonText;
diff --git a/packages/@adobe/spectrum-css-temp/components/button/skin.css b/packages/@adobe/spectrum-css-temp/components/button/skin.css
@@ -420,6 +420,13 @@ governing permissions and limitations under the License.
   }
 }
 
+@media (forced-colors: active) {
+  .spectrum-Button--pending.is-disabled {
+    /* Force the border for WHCM */
+    border-color: var(--spectrum-high-contrast-gray-text);
+  }
+}
+
 .spectrum-ActionButton {
   background-color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-actionbutton-background-color));
   border-color: xvar(--spectrum-high-contrast-button-text, var(--spectrum-actionbutton-border-color));
diff --git a/packages/@adobe/spectrum-css-temp/components/circleloader/skin.css b/packages/@adobe/spectrum-css-temp/components/circleloader/skin.css
@@ -11,7 +11,10 @@ governing permissions and limitations under the License.
 */
 
 .spectrum-CircleLoader {
+  /* TODO: Update to use semantic tokens when available */
   --spectrum-loader-circle-medium-track-fill-color: var(--spectrum-accent-color-900);
+  --spectrum-loader-circle-static-black-track-color: rgba(0, 0, 0, 0.25);
+  --spectrum-loader-circle-static-black-fill-color: var(--spectrum-global-color-static-black);
 }
 
 .spectrum-CircleLoader-track {
@@ -32,29 +35,22 @@ governing permissions and limitations under the License.
   }
 }
 
-/* TODO: use semantic tokens or spectrum variables when available */
 .spectrum-CircleLoader--staticBlack {
   .spectrum-CircleLoader-track {
-    border-color: rgba(0, 0, 0, 0.25);
+    border-color: var(--spectrum-loader-circle-static-black-track-color);
   }
   .spectrum-CircleLoader-fill {
-    border-color: var(--spectrum-global-color-static-black);
-  }
-}
-
-.spectrum-CircleLoader--indeterminate.spectrum-CircleLoader--overBackground {
-  .spectrum-CircleLoader-track {
-    border-color: var(--spectrum-loader-circle-medium-over-background-track-color);
-  }
-  .spectrum-CircleLoader-fill {
-    border-color: var(--spectrum-loader-circle-medium-over-background-track-fill-color);
+    border-color: var(--spectrum-loader-circle-static-black-fill-color);
   }
 }
 
 @media (forced-colors: active) {
   .spectrum-CircleLoader {
     --spectrum-loader-circle-medium-track-fill-color: Highlight;
     --spectrum-loader-circle-medium-over-background-track-fill-color: Highlight;
-    --spectrum-loader-circle-medium-track-color: CanvasText;
+    --spectrum-loader-circle-static-black-fill-color: Highlight;
+    --spectrum-loader-circle-medium-track-color: Background;
+    --spectrum-loader-circle-medium-over-background-track-color: Background;
+    --spectrum-loader-circle-static-black-track-color: Background;
   }
 }
diff --git a/packages/@react-spectrum/button/stories/Button.stories.tsx b/packages/@react-spectrum/button/stories/Button.stories.tsx
@@ -60,11 +60,11 @@ export default {
     },
     style: {
       control: 'select',
-      options: ['fill', 'outline']
+      options: [undefined, 'fill', 'outline']
     },
     staticColor: {
       control: 'select',
-      options: ['white', 'black']
+      options: [undefined, 'white', 'black']
     },
     isPending: {
       control: 'boolean',
@@ -279,6 +279,10 @@ function Pending(props) {
             <Text>with onClick</Text>
           </PendingButtonOnClickComponent>
         </PendingButtonContainerComponent>
+
+        <PendingButtonContainerComponent {...props}>
+          <PendingButtonComponent isDisabled {...props}>disabled</PendingButtonComponent>
+        </PendingButtonContainerComponent>
       </Flex>
 
       <View flexBasis={'100%'} paddingTop={16}>Controlled:</View>
diff --git a/packages/@react-spectrum/progress/docs/ProgressBar.mdx b/packages/@react-spectrum/progress/docs/ProgressBar.mdx
@@ -112,7 +112,7 @@ By default, the value label is formatted as a percentage. This can be customized
 
 Depending on the visualization being used (i.e. depending on the `showValueLabel` prop), a `label`, `aria-label`, or `aria-labelledby` prop is required.
 
-If using the over background variant, ensure the background offers enough contrast for the ProgressBar to be legible and meets color contrast guidelines.
+If using the `staticColor` prop, ensure the background offers enough contrast for the ProgressBar to be legible and meets color contrast guidelines.
 
 ### Internationalization
 
@@ -128,20 +128,9 @@ ProgressBar automatically uses the current locale to format the value label.
 
 ## Visual options
 
-### Over background
-[View guidelines](https://spectrum.adobe.com/page/progress-bar/#Over-background-variant)
-
-When a ProgressBar needs to be placed on top of a colored background, use the `overBackground` variant.
-
-```tsx example
-<View backgroundColor="positive" padding="size-300">
-  <ProgressBar label="Loading…" variant="overBackground" value={5} />
-</View>
-```
-
 ### Static color
 
-When a ProgressBar needs to be placed on top of a dark background, use `staticColor='white'`. When it is over a light background, use `staticColor='black'`
+When a ProgressBar needs to be placed on top of a dark background, use `staticColor='white'`. When it is placed over a light background, use `staticColor='black'`.
 
 ```tsx example
 <View backgroundColor="static-blue-700" padding="size-300">
diff --git a/packages/@react-spectrum/progress/docs/ProgressCircle.mdx b/packages/@react-spectrum/progress/docs/ProgressCircle.mdx
@@ -76,7 +76,7 @@ Use an indeterminate ProgressCircle when progress is happening but the time or e
 
 An `aria-label` must be provided for accessibility. If the ProgressCircle is labeled by a separate element, an `aria-labelledby` prop must be provided using the id of the labeling element instead.
 
-If using the `overBackground` variant, ensure the background offers enough contrast for the ProgressCircle to be legible and meets color contrast guidelines.
+If using the `staticColor` prop, ensure the background offers enough contrast for the ProgressCircle to be legible and meets color contrast guidelines.
 
 ### Internationalization
 
@@ -90,21 +90,9 @@ For languages that are read right-to-left (e.g. Hebrew and Arabic), the fill of
 
 ## Visual options
 
-### Over background
-[View guidelines](https://spectrum.adobe.com/page/progress-circle/#Over-background-variant)
-
-When a ProgressCircle needs to be placed on top of a colored background, use the `overBackground` variant.
-
-```tsx example
-<View backgroundColor="positive" padding="size-300">
-  <ProgressCircle aria-label="Loading…" isIndeterminate variant="overBackground" />
-</View>
-```
-
-
 ### Static color
 
-When a ProgressCircle needs to be placed on top of a dark background, use `staticColor='white'`. When it is over a light background, use `staticColor='black'`
+When a ProgressCircle needs to be placed on top of a dark background, use `staticColor='white'`. When it is placed over a light background, use `staticColor='black'`.
 
 ```tsx example
 <View backgroundColor="static-blue-700" padding="size-300">
diff --git a/packages/@react-types/progress/src/index.d.ts b/packages/@react-types/progress/src/index.d.ts
@@ -70,7 +70,11 @@ export interface SpectrumProgressCircleProps extends AriaProgressCircleProps, St
   size?: 'S' | 'M' | 'L',
   /** The static color style to apply. Useful when the button appears over a color background. */
   staticColor?: 'white' | 'black',
-  /** The [visual style](https://spectrum.adobe.com/page/progress-circle/#Over-background-variant) of the ProgressCircle. */
+  /**
+   * The [visual style](https://spectrum.adobe.com/page/progress-circle/#Over-background-variant) of the ProgressCircle.
+   *
+   * @deprecated - use staticColor instead.
+   */
   variant?: 'overBackground'
 }
 
@@ -92,6 +96,9 @@ export interface SpectrumProgressBarBaseProps extends AriaProgressBarBaseProps,
 export interface SpectrumProgressBarProps extends SpectrumProgressBarBaseProps, ProgressBarProps {
   /** The static color style to apply. Useful when the button appears over a color background. */
   staticColor?: 'white' | 'black',
-  /** The [visual style](https://spectrum.adobe.com/page/progress-bar/#Over-background-variant) of the ProgressBar. */
+  /**
+   * The [visual style](https://spectrum.adobe.com/page/progress-bar/#Over-background-variant) of the ProgressBar.
+   * @deprecated - use staticColor instead.
+   */
   variant?: 'overBackground'
 }

Original file line number	Diff line number	Diff line change
`@@ -420,6 +420,13 @@ governing permissions and limitations under the License.`
`420`	`420`	`}`
`421`	`421`	`}`
`422`	`422`
	`423`	`+@media (forced-colors: active) {`
	`424`	`+ .spectrum-Button--pending.is-disabled {`
	`425`	`+ /* Force the border for WHCM */`
	`426`	`+ border-color: var(--spectrum-high-contrast-gray-text);`
	`427`	`+ }`
	`428`	`+}`
	`429`	`+`
`423`	`430`	`.spectrum-ActionButton {`
`424`	`431`	`background-color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-actionbutton-background-color));`
`425`	`432`	`border-color: xvar(--spectrum-high-contrast-button-text, var(--spectrum-actionbutton-border-color));`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,10 @@ governing permissions and limitations under the License.`
`11`	`11`	`*/`
`12`	`12`
`13`	`13`	`.spectrum-CircleLoader {`
	`14`	`+ /* TODO: Update to use semantic tokens when available */`
`14`	`15`	`--spectrum-loader-circle-medium-track-fill-color: var(--spectrum-accent-color-900);`
	`16`	`+ --spectrum-loader-circle-static-black-track-color: rgba(0, 0, 0, 0.25);`
	`17`	`+ --spectrum-loader-circle-static-black-fill-color: var(--spectrum-global-color-static-black);`
`15`	`18`	`}`
`16`	`19`
`17`	`20`	`.spectrum-CircleLoader-track {`
`@@ -32,29 +35,22 @@ governing permissions and limitations under the License.`
`32`	`35`	`}`
`33`	`36`	`}`
`34`	`37`
`35`		`-/* TODO: use semantic tokens or spectrum variables when available */`
`36`	`38`	`.spectrum-CircleLoader--staticBlack {`
`37`	`39`	`.spectrum-CircleLoader-track {`
`38`		`- border-color: rgba(0, 0, 0, 0.25);`
	`40`	`+ border-color: var(--spectrum-loader-circle-static-black-track-color);`
`39`	`41`	`}`
`40`	`42`	`.spectrum-CircleLoader-fill {`
`41`		`- border-color: var(--spectrum-global-color-static-black);`
`42`		`- }`
`43`		`-}`
`44`		`-`
`45`		`-.spectrum-CircleLoader--indeterminate.spectrum-CircleLoader--overBackground {`
`46`		`- .spectrum-CircleLoader-track {`
`47`		`- border-color: var(--spectrum-loader-circle-medium-over-background-track-color);`
`48`		`- }`
`49`		`- .spectrum-CircleLoader-fill {`
`50`		`- border-color: var(--spectrum-loader-circle-medium-over-background-track-fill-color);`
	`43`	`+ border-color: var(--spectrum-loader-circle-static-black-fill-color);`
`51`	`44`	`}`
`52`	`45`	`}`
`53`	`46`
`54`	`47`	`@media (forced-colors: active) {`
`55`	`48`	`.spectrum-CircleLoader {`
`56`	`49`	`--spectrum-loader-circle-medium-track-fill-color: Highlight;`
`57`	`50`	`--spectrum-loader-circle-medium-over-background-track-fill-color: Highlight;`
`58`		`- --spectrum-loader-circle-medium-track-color: CanvasText;`
	`51`	`+ --spectrum-loader-circle-static-black-fill-color: Highlight;`
	`52`	`+ --spectrum-loader-circle-medium-track-color: Background;`
	`53`	`+ --spectrum-loader-circle-medium-over-background-track-color: Background;`
	`54`	`+ --spectrum-loader-circle-static-black-track-color: Background;`
`59`	`55`	`}`
`60`	`56`	`}`