From a8d0ddda772a2c2d406b42c422ab95461ef4b663 Mon Sep 17 00:00:00 2001 From: Valentyna Date: Tue, 7 Jan 2025 12:07:39 +0100 Subject: [PATCH 1/6] feat(react-color-picker): Added `transparent` option to the AlphaSlider --- .../AlphaSlider/AlphaSlider.types.ts | 4 +++- .../AlphaSlider/useAlphaSliderState.ts | 24 +++++++++++++++---- .../AlphaSliderDefault.stories.tsx | 15 +++++++++--- 3 files changed, 34 insertions(+), 9 deletions(-) diff --git a/packages/react-components/react-color-picker-preview/library/src/components/AlphaSlider/AlphaSlider.types.ts b/packages/react-components/react-color-picker-preview/library/src/components/AlphaSlider/AlphaSlider.types.ts index 7a471fa974f46..8cbae92ad635f 100644 --- a/packages/react-components/react-color-picker-preview/library/src/components/AlphaSlider/AlphaSlider.types.ts +++ b/packages/react-components/react-color-picker-preview/library/src/components/AlphaSlider/AlphaSlider.types.ts @@ -6,7 +6,9 @@ export type AlphaSliderSlots = ColorSliderSlots; /** * AlphaSlider Props */ -export type AlphaSliderProps = ColorSliderProps; +export type AlphaSliderProps = ColorSliderProps & { + transparency?: boolean; +}; /** * State used in rendering AlphaSlider diff --git a/packages/react-components/react-color-picker-preview/library/src/components/AlphaSlider/useAlphaSliderState.ts b/packages/react-components/react-color-picker-preview/library/src/components/AlphaSlider/useAlphaSliderState.ts index 153975294f8e5..a18d0c27ae230 100644 --- a/packages/react-components/react-color-picker-preview/library/src/components/AlphaSlider/useAlphaSliderState.ts +++ b/packages/react-components/react-color-picker-preview/library/src/components/AlphaSlider/useAlphaSliderState.ts @@ -15,13 +15,19 @@ export const useAlphaSliderState_unstable = (state: AlphaSliderState, props: Alp const { dir } = useFluent(); const onChangeFromContext = useColorPickerContextValue_unstable(ctx => ctx.requestChange); const colorFromContext = useColorPickerContextValue_unstable(ctx => ctx.color); - const { color, onChange = onChangeFromContext } = props; + const { color, onChange = onChangeFromContext, transparency } = props; const hsvColor = color || colorFromContext; const hslColor = tinycolor(hsvColor).toHsl(); + function adjustToTransparency(value: number) { + return transparency ? 100 - value : value; + } + + const defaultState = props.defaultColor?.a !== undefined ? props.defaultColor.a * 100 : undefined; + const _state = hsvColor?.a !== undefined ? hsvColor.a * 100 : undefined; const [currentValue, setCurrentValue] = useControllableState({ - defaultState: props.defaultColor?.a ? props.defaultColor.a * 100 : undefined, - state: hsvColor?.a ? hsvColor.a * 100 : undefined, + defaultState: defaultState && adjustToTransparency(defaultState), + state: _state && adjustToTransparency(_state), initialState: 100, }); const clampedValue = clamp(currentValue, MIN, MAX); @@ -30,15 +36,23 @@ export const useAlphaSliderState_unstable = (state: AlphaSliderState, props: Alp const inputOnChange = state.input.onChange; const _onChange: React.ChangeEventHandler = useEventCallback(event => { - const newValue = Number(event.target.value); + const newValue = adjustToTransparency(Number(event.target.value)); const newColor: HsvColor = { ...hsvColor, a: newValue / 100 }; setCurrentValue(newValue); inputOnChange?.(event); onChange?.(event, { type: 'change', event, color: newColor }); }); + const sliderDirection = state.vertical + ? transparency + ? '180deg' + : '0deg' + : dir === 'ltr' && !transparency + ? '90deg' + : '-90deg'; + const rootVariables = { - [alphaSliderCSSVars.sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '-90deg', + [alphaSliderCSSVars.sliderDirectionVar]: sliderDirection, [alphaSliderCSSVars.sliderProgressVar]: `${valuePercent}%`, [alphaSliderCSSVars.thumbColorVar]: `transparent`, [alphaSliderCSSVars.railColorVar]: `hsl(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%)`, diff --git a/packages/react-components/react-color-picker-preview/stories/src/ColorPicker/AlphaSliderDefault.stories.tsx b/packages/react-components/react-color-picker-preview/stories/src/ColorPicker/AlphaSliderDefault.stories.tsx index bce95432ff2cc..f837f1dcc65f4 100644 --- a/packages/react-components/react-color-picker-preview/stories/src/ColorPicker/AlphaSliderDefault.stories.tsx +++ b/packages/react-components/react-color-picker-preview/stories/src/ColorPicker/AlphaSliderDefault.stories.tsx @@ -27,13 +27,16 @@ export const AlphaSliderExample = (props: Partial) => { const styles = useStyles(); const [color, setColor] = React.useState(COLOR); - const [value, setValue] = React.useState(COLOR.a * 100); - const onSliderChange: AlphaSliderProps['onChange'] = (_, data) => { +const [transparancyColor, setTransparancyColor] = React.useState(COLOR); +const [value, setValue] = React.useState(COLOR.a * 100); +const onSliderChange: AlphaSliderProps['onChange'] = (_, data) => { const alpha = data.color.a ?? 1; setColor({ ...data.color, a: alpha }); setValue(alpha * 100); - }; + }; const onTransparancySliderChange: AlphaSliderProps['onChange'] = (_, data) => + setTransparancyColor({ ...data.color, a: data.color.a ?? 1 }); const resetSlider = () => setColor(COLOR); + const resetTransparencySlider = () => setTransparancyColor(COLOR); return (
@@ -48,6 +51,12 @@ export const AlphaSliderExample = (props: Partial) => { />
+

Transparency

+ + +
+
); }; From 9fa9b5e22def3d458c859cd10bf3c04110f11b3e Mon Sep 17 00:00:00 2001 From: Valentyna Date: Tue, 7 Jan 2025 14:29:37 +0100 Subject: [PATCH 2/6] change files --- ...icker-preview-d36c4ad2-9cc0-4131-bdee-dd557b75c0bb.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-color-picker-preview-d36c4ad2-9cc0-4131-bdee-dd557b75c0bb.json diff --git a/change/@fluentui-react-color-picker-preview-d36c4ad2-9cc0-4131-bdee-dd557b75c0bb.json b/change/@fluentui-react-color-picker-preview-d36c4ad2-9cc0-4131-bdee-dd557b75c0bb.json new file mode 100644 index 0000000000000..f30eab37953f9 --- /dev/null +++ b/change/@fluentui-react-color-picker-preview-d36c4ad2-9cc0-4131-bdee-dd557b75c0bb.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "feat: Added `transparent` option to the AlphaSlider", + "packageName": "@fluentui/react-color-picker-preview", + "email": "v.kozlova13@gmail.com", + "dependentChangeType": "patch" +} From 242f40837a2fdd27a778ef8b2f2824875348eda7 Mon Sep 17 00:00:00 2001 From: Valentyna Date: Wed, 8 Jan 2025 11:08:58 +0100 Subject: [PATCH 3/6] fix after resolving conflicts --- .../AlphaSliderDefault.stories.tsx | 29 ++++++++++++++----- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/packages/react-components/react-color-picker-preview/stories/src/ColorPicker/AlphaSliderDefault.stories.tsx b/packages/react-components/react-color-picker-preview/stories/src/ColorPicker/AlphaSliderDefault.stories.tsx index f837f1dcc65f4..82867dbc8a908 100644 --- a/packages/react-components/react-color-picker-preview/stories/src/ColorPicker/AlphaSliderDefault.stories.tsx +++ b/packages/react-components/react-color-picker-preview/stories/src/ColorPicker/AlphaSliderDefault.stories.tsx @@ -27,13 +27,14 @@ export const AlphaSliderExample = (props: Partial) => { const styles = useStyles(); const [color, setColor] = React.useState(COLOR); -const [transparancyColor, setTransparancyColor] = React.useState(COLOR); -const [value, setValue] = React.useState(COLOR.a * 100); -const onSliderChange: AlphaSliderProps['onChange'] = (_, data) => { + const [transparancyColor, setTransparancyColor] = React.useState(COLOR); + const [value, setValue] = React.useState(COLOR.a * 100); + const onSliderChange: AlphaSliderProps['onChange'] = (_, data) => { const alpha = data.color.a ?? 1; setColor({ ...data.color, a: alpha }); setValue(alpha * 100); - }; const onTransparancySliderChange: AlphaSliderProps['onChange'] = (_, data) => + }; + const onTransparancySliderChange: AlphaSliderProps['onChange'] = (_, data) => setTransparancyColor({ ...data.color, a: data.color.a ?? 1 }); const resetSlider = () => setColor(COLOR); const resetTransparencySlider = () => setTransparancyColor(COLOR); @@ -52,9 +53,23 @@ const onSliderChange: AlphaSliderProps['onChange'] = (_, data) => {

Transparency

- - + +
From be321f90ed6d20190acd15f2b662162666b923f6 Mon Sep 17 00:00:00 2001 From: Valentyna Date: Thu, 9 Jan 2025 13:45:40 +0100 Subject: [PATCH 4/6] PR fix --- .../AlphaSlider/useAlphaSliderState.ts | 29 +++++++++++-------- 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/packages/react-components/react-color-picker-preview/library/src/components/AlphaSlider/useAlphaSliderState.ts b/packages/react-components/react-color-picker-preview/library/src/components/AlphaSlider/useAlphaSliderState.ts index a18d0c27ae230..fdcdb2b1ff633 100644 --- a/packages/react-components/react-color-picker-preview/library/src/components/AlphaSlider/useAlphaSliderState.ts +++ b/packages/react-components/react-color-picker-preview/library/src/components/AlphaSlider/useAlphaSliderState.ts @@ -23,13 +23,16 @@ export const useAlphaSliderState_unstable = (state: AlphaSliderState, props: Alp return transparency ? 100 - value : value; } - const defaultState = props.defaultColor?.a !== undefined ? props.defaultColor.a * 100 : undefined; - const _state = hsvColor?.a !== undefined ? hsvColor.a * 100 : undefined; + const calculateTransparencyValue = (value?: number) => { + return value !== undefined ? adjustToTransparency(value * 100) : undefined; + }; + const [currentValue, setCurrentValue] = useControllableState({ - defaultState: defaultState && adjustToTransparency(defaultState), - state: _state && adjustToTransparency(_state), - initialState: 100, + defaultState: calculateTransparencyValue(props.defaultColor?.a), + state: calculateTransparencyValue(hsvColor?.a), + initialState: adjustToTransparency(100), }); + const clampedValue = clamp(currentValue, MIN, MAX); const valuePercent = getPercent(clampedValue, MIN, MAX); @@ -43,13 +46,15 @@ export const useAlphaSliderState_unstable = (state: AlphaSliderState, props: Alp onChange?.(event, { type: 'change', event, color: newColor }); }); - const sliderDirection = state.vertical - ? transparency - ? '180deg' - : '0deg' - : dir === 'ltr' && !transparency - ? '90deg' - : '-90deg'; + function getSliderDirection() { + if (state.vertical) { + return transparency ? '180deg' : '0deg'; + } else { + return dir === 'ltr' && !transparency ? '90deg' : '-90deg'; + } + } + + const sliderDirection = getSliderDirection(); const rootVariables = { [alphaSliderCSSVars.sliderDirectionVar]: sliderDirection, From 8f30c78364b46d577e94f23fb6b7770e128fc39f Mon Sep 17 00:00:00 2001 From: Valentyna Date: Fri, 10 Jan 2025 07:59:57 +0100 Subject: [PATCH 5/6] moved functions to one file --- .../AlphaSlider/alphaSliderUtils.ts | 15 +++++++++++ .../AlphaSlider/useAlphaSliderState.ts | 27 +++++-------------- 2 files changed, 21 insertions(+), 21 deletions(-) create mode 100644 packages/react-components/react-color-picker-preview/library/src/components/AlphaSlider/alphaSliderUtils.ts diff --git a/packages/react-components/react-color-picker-preview/library/src/components/AlphaSlider/alphaSliderUtils.ts b/packages/react-components/react-color-picker-preview/library/src/components/AlphaSlider/alphaSliderUtils.ts new file mode 100644 index 0000000000000..b490ee67ea310 --- /dev/null +++ b/packages/react-components/react-color-picker-preview/library/src/components/AlphaSlider/alphaSliderUtils.ts @@ -0,0 +1,15 @@ +export function adjustToTransparency(value: number, transparency?: boolean) { + return transparency ? 100 - value : value; +} + +export function calculateTransparencyValue(value?: number, transparency?: boolean) { + return value !== undefined ? adjustToTransparency(value * 100, transparency) : undefined; +} + +export function getSliderDirection(dir: 'ltr' | 'rtl', vertical?: boolean, transparency?: boolean) { + if (vertical) { + return transparency ? '180deg' : '0deg'; + } else { + return dir === 'ltr' && !transparency ? '90deg' : '-90deg'; + } +} diff --git a/packages/react-components/react-color-picker-preview/library/src/components/AlphaSlider/useAlphaSliderState.ts b/packages/react-components/react-color-picker-preview/library/src/components/AlphaSlider/useAlphaSliderState.ts index fdcdb2b1ff633..4fe49951042c6 100644 --- a/packages/react-components/react-color-picker-preview/library/src/components/AlphaSlider/useAlphaSliderState.ts +++ b/packages/react-components/react-color-picker-preview/library/src/components/AlphaSlider/useAlphaSliderState.ts @@ -8,6 +8,7 @@ import { useColorPickerContextValue_unstable } from '../../contexts/colorPicker' import { MIN, MAX } from '../../utils/constants'; import { getPercent } from '../../utils/getPercent'; import type { HsvColor } from '../../types/color'; +import { adjustToTransparency, calculateTransparencyValue, getSliderDirection } from './alphaSliderUtils'; export const useAlphaSliderState_unstable = (state: AlphaSliderState, props: AlphaSliderProps) => { 'use no memo'; @@ -19,18 +20,10 @@ export const useAlphaSliderState_unstable = (state: AlphaSliderState, props: Alp const hsvColor = color || colorFromContext; const hslColor = tinycolor(hsvColor).toHsl(); - function adjustToTransparency(value: number) { - return transparency ? 100 - value : value; - } - - const calculateTransparencyValue = (value?: number) => { - return value !== undefined ? adjustToTransparency(value * 100) : undefined; - }; - const [currentValue, setCurrentValue] = useControllableState({ - defaultState: calculateTransparencyValue(props.defaultColor?.a), - state: calculateTransparencyValue(hsvColor?.a), - initialState: adjustToTransparency(100), + defaultState: calculateTransparencyValue(props.defaultColor?.a, transparency), + state: calculateTransparencyValue(hsvColor?.a, transparency), + initialState: adjustToTransparency(100, transparency), }); const clampedValue = clamp(currentValue, MIN, MAX); @@ -39,22 +32,14 @@ export const useAlphaSliderState_unstable = (state: AlphaSliderState, props: Alp const inputOnChange = state.input.onChange; const _onChange: React.ChangeEventHandler = useEventCallback(event => { - const newValue = adjustToTransparency(Number(event.target.value)); + const newValue = adjustToTransparency(Number(event.target.value), transparency); const newColor: HsvColor = { ...hsvColor, a: newValue / 100 }; setCurrentValue(newValue); inputOnChange?.(event); onChange?.(event, { type: 'change', event, color: newColor }); }); - function getSliderDirection() { - if (state.vertical) { - return transparency ? '180deg' : '0deg'; - } else { - return dir === 'ltr' && !transparency ? '90deg' : '-90deg'; - } - } - - const sliderDirection = getSliderDirection(); + const sliderDirection = getSliderDirection(dir, state.vertical, transparency); const rootVariables = { [alphaSliderCSSVars.sliderDirectionVar]: sliderDirection, From 9f355d551d819c275f439a8c64cbc94ee71af8ff Mon Sep 17 00:00:00 2001 From: Valentyna Date: Fri, 10 Jan 2025 17:59:07 +0100 Subject: [PATCH 6/6] Updated API --- .../library/etc/react-color-picker-preview.api.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react-components/react-color-picker-preview/library/etc/react-color-picker-preview.api.md b/packages/react-components/react-color-picker-preview/library/etc/react-color-picker-preview.api.md index 0ff850de65940..8190eeb7f921c 100644 --- a/packages/react-components/react-color-picker-preview/library/etc/react-color-picker-preview.api.md +++ b/packages/react-components/react-color-picker-preview/library/etc/react-color-picker-preview.api.md @@ -20,7 +20,9 @@ export const AlphaSlider: ForwardRefComponent; export const alphaSliderClassNames: SlotClassNames; // @public -export type AlphaSliderProps = ColorSliderProps; +export type AlphaSliderProps = ColorSliderProps & { + transparency?: boolean; +}; // @public (undocumented) export type AlphaSliderSlots = ColorSliderSlots;