feat(react-swatch-picker): Added borderColor prop and fixed styles (m…

…icrosoft#31358)
miroslavstastny · Jun 14, 2024 · 872d6b5 · 872d6b5
1 parent 9030834
commit 872d6b5
Show file tree

Hide file tree

Showing 12 changed files with 54 additions and 32 deletions.
diff --git a/change/@fluentui-react-swatch-picker-preview-3c1d6888-87ae-4c23-8e52-31fd298123de.json b/change/@fluentui-react-swatch-picker-preview-3c1d6888-87ae-4c23-8e52-31fd298123de.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat(react-swatch-picker): added contrast ratio utils",
+  "packageName": "@fluentui/react-swatch-picker-preview",
+  "email": "vkozlova@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-swatch-picker-preview/docs/MIGRATION.md b/packages/react-components/react-swatch-picker-preview/docs/MIGRATION.md
@@ -52,6 +52,7 @@
 
 #### New props
 
+- `borderColor`
 - `size`
 - `shape`
 

diff --git a/packages/react-components/react-swatch-picker-preview/docs/Spec.md b/packages/react-components/react-swatch-picker-preview/docs/Spec.md
@@ -184,13 +184,14 @@ import { renderSwatchPickerGrid } from '@fluentui/react-swatch-picker-preview';
 
 ### ColorSwatch
 
-| Property | Values                                   | Default  | Purpose                          |
-| -------- | ---------------------------------------- | -------- | -------------------------------- |
-| color    | `string`                                 |          | Color in hex, RGB or named color |
-| shape    | `square`, `circular`, `rounded`          | `square` | Sets shape                       |
-| size     | `extraSmall`, `small`, `medium`, `large` | `medium` | Defines size of the Swatch cell  |
-| disabled | `boolean`                                |          |                                  |
-| value    | `string`                                 |          | Unique value of the swatch       |
+| Property    | Values                                   | Default  | Purpose                          |
+| ----------- | ---------------------------------------- | -------- | -------------------------------- |
+| borderColor | `string`                                 |          | Sets border color                |
+| color       | `string`                                 |          | Color in hex, RGB or named color |
+| shape       | `square`, `circular`, `rounded`          | `square` | Sets shape                       |
+| size        | `extraSmall`, `small`, `medium`, `large` | `medium` | Defines size of the Swatch cell  |
+| disabled    | `boolean`                                |          |                                  |
+| value       | `string`                                 |          | Unique value of the swatch       |
 
 | Slots        | Values   | Default  | Description                                                             |
 | ------------ | -------- | -------- | ----------------------------------------------------------------------- |

diff --git a/...t-components/react-swatch-picker-preview/etc/react-swatch-picker-preview.api.md b/...t-components/react-swatch-picker-preview/etc/react-swatch-picker-preview.api.md
@@ -24,6 +24,7 @@ export const colorSwatchClassNames: SlotClassNames<ColorSwatchSlots>;
 
 // @public
 export type ColorSwatchProps = ComponentProps<ColorSwatchSlots> & Pick<SwatchPickerProps, 'size' | 'shape'> & {
+    borderColor?: string;
     color: string;
     disabled?: boolean;
     value: string;
@@ -101,6 +102,7 @@ export const renderSwatchPickerRow_unstable: (state: SwatchPickerRowState) => JS
 // @public (undocumented)
 export const swatchCSSVars: {
     color: string;
+    borderColor: string;
 };
 
 // @public

diff --git a/...ct-components/react-swatch-picker-preview/src/components/ColorSwatch/ColorSwatch.test.tsx b/...ct-components/react-swatch-picker-preview/src/components/ColorSwatch/ColorSwatch.test.tsx
@@ -29,7 +29,7 @@ describe('ColorSwatch', () => {
           aria-checked="false"
           class="fui-ColorSwatch"
           role="radio"
-          style="--fui-SwatchPicker--color: #f09;"
+          style="--fui-SwatchPicker--color: #f09; --fui-SwatchPicker--borderColor: var(--colorTransparentStroke);"
           type="button"
         />
       </div>

diff --git a/...ct-components/react-swatch-picker-preview/src/components/ColorSwatch/ColorSwatch.types.ts b/...ct-components/react-swatch-picker-preview/src/components/ColorSwatch/ColorSwatch.types.ts
@@ -12,6 +12,11 @@ export type ColorSwatchSlots = {
  */
 export type ColorSwatchProps = ComponentProps<ColorSwatchSlots> &
   Pick<SwatchPickerProps, 'size' | 'shape'> & {
+    /**
+     * Border color when contrast is low
+     */
+    borderColor?: string;
+
     /**
      * Swatch color
      */

diff --git a/...eact-components/react-swatch-picker-preview/src/components/ColorSwatch/useColorSwatch.tsx b/...eact-components/react-swatch-picker-preview/src/components/ColorSwatch/useColorSwatch.tsx
@@ -4,6 +4,7 @@ import type { ColorSwatchProps, ColorSwatchState } from './ColorSwatch.types';
 import { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';
 import { swatchCSSVars } from './useColorSwatchStyles.styles';
 import { ProhibitedFilled } from '@fluentui/react-icons';
+import { tokens } from '@fluentui/react-theme';
 
 /**
  * Create the state required to render ColorSwatch.
@@ -18,7 +19,7 @@ export const useColorSwatch_unstable = (
   props: ColorSwatchProps,
   ref: React.Ref<HTMLButtonElement>,
 ): ColorSwatchState => {
-  const { color, disabled, disabledIcon, icon, value, onClick, size, shape, style, ...rest } = props;
+  const { borderColor, color, disabled, disabledIcon, icon, value, onClick, size, shape, style, ...rest } = props;
   const _size = useSwatchPickerContextValue_unstable(ctx => ctx.size);
   const _shape = useSwatchPickerContextValue_unstable(ctx => ctx.shape);
   const isGrid = useSwatchPickerContextValue_unstable(ctx => ctx.isGrid);
@@ -37,6 +38,7 @@ export const useColorSwatch_unstable = (
 
   const rootVariables = {
     [swatchCSSVars.color]: color,
+    [swatchCSSVars.borderColor]: borderColor ?? tokens.colorTransparentStroke,
   };
 
   const role = isGrid ? 'gridcell' : 'radio';

diff --git a/...nts/react-swatch-picker-preview/src/components/ColorSwatch/useColorSwatchStyles.styles.ts b/...nts/react-swatch-picker-preview/src/components/ColorSwatch/useColorSwatchStyles.styles.ts
@@ -12,9 +12,10 @@ export const colorSwatchClassNames: SlotClassNames<ColorSwatchSlots> = {
 
 export const swatchCSSVars = {
   color: `--fui-SwatchPicker--color`,
+  borderColor: `--fui-SwatchPicker--borderColor`,
 };
 
-const { color } = swatchCSSVars;
+const { color, borderColor } = swatchCSSVars;
 
 /**
  * Styles for the root slot
@@ -25,7 +26,7 @@ const useResetStyles = makeResetStyles({
   alignItems: 'center',
   justifyContent: 'center',
   boxSizing: 'border-box',
-  border: `1px solid ${tokens.colorTransparentStroke}`,
+  border: `1px solid var(${borderColor})`,
   background: `var(${color})`,
   overflow: 'hidden',
   padding: '0',
@@ -131,8 +132,10 @@ const useShapeStyles = makeStyles({
 const useIconStyles = makeStyles({
   disabledIcon: {
     color: tokens.colorNeutralForegroundInverted,
+    filter: 'drop-shadow(0 1px 1px rgb(0 0 0 / 1))',
   },
   icon: {
+    position: 'absolute',
     display: 'flex',
     alignSelf: 'center',
   },

diff --git a/...-components/react-swatch-picker-preview/src/components/SwatchPicker/SwatchPicker.test.tsx b/...-components/react-swatch-picker-preview/src/components/SwatchPicker/SwatchPicker.test.tsx
@@ -32,15 +32,15 @@ describe('SwatchPicker', () => {
             aria-checked="false"
             class="fui-ColorSwatch"
             role="radio"
-            style="--fui-SwatchPicker--color: #f09;"
+            style="--fui-SwatchPicker--color: #f09; --fui-SwatchPicker--borderColor: var(--colorTransparentStroke);"
             type="button"
           />
           <button
             aria-checked="false"
             class="fui-ColorSwatch"
             disabled=""
             role="radio"
-            style="--fui-SwatchPicker--color: #0f0;"
+            style="--fui-SwatchPicker--color: #0f0; --fui-SwatchPicker--borderColor: var(--colorTransparentStroke);"
             type="button"
           >
             <span

diff --git a/...-components/react-swatch-picker-preview/src/utils/__snapshots__/renderUtils.test.tsx.snap b/...-components/react-swatch-picker-preview/src/utils/__snapshots__/renderUtils.test.tsx.snap
@@ -17,23 +17,23 @@ exports[`Render utils of SwatchPicker renders custom row 1`] = `
         aria-selected="false"
         class="fui-ColorSwatch"
         role="gridcell"
-        style="--fui-SwatchPicker--color: #FF1921;"
+        style="--fui-SwatchPicker--color: #FF1921; --fui-SwatchPicker--borderColor: var(--colorTransparentStroke);"
         type="button"
       />
       <button
         aria-label="orange"
         aria-selected="false"
         class="fui-ColorSwatch"
         role="gridcell"
-        style="--fui-SwatchPicker--color: #FF7A00;"
+        style="--fui-SwatchPicker--color: #FF7A00; --fui-SwatchPicker--borderColor: var(--colorTransparentStroke);"
         type="button"
       />
       <button
         aria-label="light green"
         aria-selected="false"
         class="fui-ColorSwatch"
         role="gridcell"
-        style="--fui-SwatchPicker--color: #90D057;"
+        style="--fui-SwatchPicker--color: #90D057; --fui-SwatchPicker--borderColor: var(--colorTransparentStroke);"
         type="button"
       />
     </div>
@@ -46,23 +46,23 @@ exports[`Render utils of SwatchPicker renders custom row 1`] = `
         aria-selected="false"
         class="fui-ColorSwatch"
         role="gridcell"
-        style="--fui-SwatchPicker--color: #00B053;"
+        style="--fui-SwatchPicker--color: #00B053; --fui-SwatchPicker--borderColor: var(--colorTransparentStroke);"
         type="button"
       />
       <button
         aria-label="light blue"
         aria-selected="false"
         class="fui-ColorSwatch"
         role="gridcell"
-        style="--fui-SwatchPicker--color: #00AFED;"
+        style="--fui-SwatchPicker--color: #00AFED; --fui-SwatchPicker--borderColor: var(--colorTransparentStroke);"
         type="button"
       />
       <button
         aria-label="blue"
         aria-selected="false"
         class="fui-ColorSwatch"
         role="gridcell"
-        style="--fui-SwatchPicker--color: #006EBD;"
+        style="--fui-SwatchPicker--color: #006EBD; --fui-SwatchPicker--borderColor: var(--colorTransparentStroke);"
         type="button"
       />
     </div>
@@ -113,23 +113,23 @@ exports[`Render utils of SwatchPicker renders custom swatch 1`] = `
         aria-selected="false"
         class="fui-ColorSwatch custom-swatch"
         role="gridcell"
-        style="--fui-SwatchPicker--color: #FF1921;"
+        style="--fui-SwatchPicker--color: #FF1921; --fui-SwatchPicker--borderColor: var(--colorTransparentStroke);"
         type="button"
       />
       <button
         aria-label="orange"
         aria-selected="false"
         class="fui-ColorSwatch custom-swatch"
         role="gridcell"
-        style="--fui-SwatchPicker--color: #FF7A00;"
+        style="--fui-SwatchPicker--color: #FF7A00; --fui-SwatchPicker--borderColor: var(--colorTransparentStroke);"
         type="button"
       />
       <button
         aria-label="light green"
         aria-selected="false"
         class="fui-ColorSwatch custom-swatch"
         role="gridcell"
-        style="--fui-SwatchPicker--color: #90D057;"
+        style="--fui-SwatchPicker--color: #90D057; --fui-SwatchPicker--borderColor: var(--colorTransparentStroke);"
         type="button"
       />
     </div>
@@ -142,23 +142,23 @@ exports[`Render utils of SwatchPicker renders custom swatch 1`] = `
         aria-selected="false"
         class="fui-ColorSwatch custom-swatch"
         role="gridcell"
-        style="--fui-SwatchPicker--color: #00B053;"
+        style="--fui-SwatchPicker--color: #00B053; --fui-SwatchPicker--borderColor: var(--colorTransparentStroke);"
         type="button"
       />
       <button
         aria-label="light blue"
         aria-selected="false"
         class="fui-ColorSwatch custom-swatch"
         role="gridcell"
-        style="--fui-SwatchPicker--color: #00AFED;"
+        style="--fui-SwatchPicker--color: #00AFED; --fui-SwatchPicker--borderColor: var(--colorTransparentStroke);"
         type="button"
       />
       <button
         aria-label="blue"
         aria-selected="false"
         class="fui-ColorSwatch custom-swatch"
         role="gridcell"
-        style="--fui-SwatchPicker--color: #006EBD;"
+        style="--fui-SwatchPicker--color: #006EBD; --fui-SwatchPicker--borderColor: var(--colorTransparentStroke);"
         type="button"
       />
     </div>
@@ -183,23 +183,23 @@ exports[`Render utils of SwatchPicker renders default grid layout 1`] = `
         aria-selected="false"
         class="fui-ColorSwatch"
         role="gridcell"
-        style="--fui-SwatchPicker--color: #FF1921;"
+        style="--fui-SwatchPicker--color: #FF1921; --fui-SwatchPicker--borderColor: var(--colorTransparentStroke);"
         type="button"
       />
       <button
         aria-label="orange"
         aria-selected="false"
         class="fui-ColorSwatch"
         role="gridcell"
-        style="--fui-SwatchPicker--color: #FF7A00;"
+        style="--fui-SwatchPicker--color: #FF7A00; --fui-SwatchPicker--borderColor: var(--colorTransparentStroke);"
         type="button"
       />
       <button
         aria-label="light green"
         aria-selected="false"
         class="fui-ColorSwatch"
         role="gridcell"
-        style="--fui-SwatchPicker--color: #90D057;"
+        style="--fui-SwatchPicker--color: #90D057; --fui-SwatchPicker--borderColor: var(--colorTransparentStroke);"
         type="button"
       />
     </div>
@@ -212,23 +212,23 @@ exports[`Render utils of SwatchPicker renders default grid layout 1`] = `
         aria-selected="false"
         class="fui-ColorSwatch"
         role="gridcell"
-        style="--fui-SwatchPicker--color: #00B053;"
+        style="--fui-SwatchPicker--color: #00B053; --fui-SwatchPicker--borderColor: var(--colorTransparentStroke);"
         type="button"
       />
       <button
         aria-label="light blue"
         aria-selected="false"
         class="fui-ColorSwatch"
         role="gridcell"
-        style="--fui-SwatchPicker--color: #00AFED;"
+        style="--fui-SwatchPicker--color: #00AFED; --fui-SwatchPicker--borderColor: var(--colorTransparentStroke);"
         type="button"
       />
       <button
         aria-label="blue"
         aria-selected="false"
         class="fui-ColorSwatch"
         role="gridcell"
-        style="--fui-SwatchPicker--color: #006EBD;"
+        style="--fui-SwatchPicker--color: #006EBD; --fui-SwatchPicker--borderColor: var(--colorTransparentStroke);"
         type="button"
       />
     </div>

diff --git a/...mponents/react-swatch-picker-preview/stories/SwatchPicker/ColorSwatchVariants.stories.tsx b/...mponents/react-swatch-picker-preview/stories/SwatchPicker/ColorSwatchVariants.stories.tsx
@@ -14,14 +14,14 @@ export const ColorSwatchVariants = () => {
   const styles = useStyles();
   return (
     <div className={styles.example}>
-      <ColorSwatch color="purple" value="purple-color" aria-label="Purple" />
       <ColorSwatch color="#E3008C" value="hot-pink-color" aria-label="Hot pink" />
       <ColorSwatch color="linear-gradient(0deg, #E3008C, #fff232)" value="gradient" aria-label="Gradient yellow pink" />
       <ColorSwatch color="#c8eeff" icon={<HeartFilled color="red" />} value="icon" aria-label="heart-icon" />
       <ColorSwatch color="#016ab0" disabled value="blue" aria-label="blue" />
       <ColorSwatch color="#ff659a" value="initials" aria-label="initials">
         A
       </ColorSwatch>
+      <ColorSwatch disabled color="#c8eeff" value="icon" aria-label="heart-icon" />
     </div>
   );
 };

diff --git a/...s/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerBestPractices.md b/...s/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerBestPractices.md
@@ -8,6 +8,7 @@
 - Maximum recommended number of swatches per row is 8.
 - Use a grid layout when there are more than 4 swatches. The maximum recommended number of swatches in a grid is 64 - an 8 x 8 grid.
 - Tooltip should be shown for each color.
+- Consider using [Polished](https://polished.js.org/) or [color-parse](https://www.npmjs.com/package/color-parse) library for calculation of contrast ratio.
 - When using an icon, make sure that the contrast ratio between the icon and a swatch is a least 3:1.
 
 ### Don't