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 new file mode 100644 index 00000000000000..04c981bc8687c8 --- /dev/null +++ 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 index 57cf71e10c839b..648d7b29ff8337 100644 --- 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 index 8a2273e5251ba9..9747f6e0379935 100644 --- 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/packages/react-components/react-swatch-picker-preview/etc/react-swatch-picker-preview.api.md b/packages/react-components/react-swatch-picker-preview/etc/react-swatch-picker-preview.api.md index 649efdc84e1d0a..c8d4694c94ac4a 100644 --- a/packages/react-components/react-swatch-picker-preview/etc/react-swatch-picker-preview.api.md +++ b/packages/react-components/react-swatch-picker-preview/etc/react-swatch-picker-preview.api.md @@ -24,6 +24,7 @@ export const colorSwatchClassNames: SlotClassNames; // @public export type ColorSwatchProps = ComponentProps & Pick & { + 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/packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/ColorSwatch.test.tsx b/packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/ColorSwatch.test.tsx index c3a9ec1981579c..9fea02586d0d71 100644 --- a/packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/ColorSwatch.test.tsx +++ b/packages/react-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" /> diff --git a/packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/ColorSwatch.types.ts b/packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/ColorSwatch.types.ts index 9d892a3e05d99b..a8b20f49413bb1 100644 --- a/packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/ColorSwatch.types.ts +++ b/packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/ColorSwatch.types.ts @@ -12,6 +12,11 @@ export type ColorSwatchSlots = { */ export type ColorSwatchProps = ComponentProps & Pick & { + /** + * Border color when contrast is low + */ + borderColor?: string; + /** * Swatch color */ diff --git a/packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/useColorSwatch.tsx b/packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/useColorSwatch.tsx index 42fcf9d12400d5..29525fcbab0b1f 100644 --- a/packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/useColorSwatch.tsx +++ b/packages/react-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, ): 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/packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/useColorSwatchStyles.styles.ts b/packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/useColorSwatchStyles.styles.ts index 13aadd65a01c09..6173822015ab12 100644 --- a/packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/useColorSwatchStyles.styles.ts +++ b/packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/useColorSwatchStyles.styles.ts @@ -12,9 +12,10 @@ export const colorSwatchClassNames: SlotClassNames = { 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/packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/SwatchPicker.test.tsx b/packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/SwatchPicker.test.tsx index 557b62bf57f39b..fb6a5ad62a1ab5 100644 --- a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/SwatchPicker.test.tsx +++ b/packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/SwatchPicker.test.tsx @@ -32,7 +32,7 @@ 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" />