From 3f92d7021487724544b5ad6ef7d0c8c3a0572e54 Mon Sep 17 00:00:00 2001 From: Carlos Matallin Date: Wed, 11 Oct 2023 20:15:19 +0000 Subject: [PATCH 1/6] [TextField] Add styles for AI generated values --- .../src/components/TextField/TextField.scss | 28 +++++++++++++++++++ .../TextField/TextField.stories.tsx | 16 +++++++++++ .../src/components/TextField/TextField.tsx | 6 ++++ polaris-tokens/src/themes/base/color.ts | 20 ++++++++++--- 4 files changed, 66 insertions(+), 4 deletions(-) diff --git a/polaris-react/src/components/TextField/TextField.scss b/polaris-react/src/components/TextField/TextField.scss index 73b61196482..6430d997b06 100644 --- a/polaris-react/src/components/TextField/TextField.scss +++ b/polaris-react/src/components/TextField/TextField.scss @@ -127,6 +127,34 @@ $spinner-icon-size: 12px; } // stylelint-enable +// stylelint-disable selector-max-specificity, selector-max-class, selector-max-combinators -- specificity bump for magic styles to override +.magic { + > .Input { + color: var(--p-color-text-magic); + } + + > .Backdrop { + background-color: var(--p-color-bg-surface-magic); + border-color: var(--p-color-border-magic-secondary); + } + + &:not(.disabled):not(.error):not(.readOnly) + > .Input:hover:not(:focus-visible) { + ~ .Backdrop { + background-color: var(--p-color-bg-surface-magic-hover); + border-color: var(--p-color-border-magic-secondary-hover); + } + } + + &.focus > .Input, + &.focus > .VerticalContent, + &.TextField:focus-within > .Input, + &.Input:focus-visible { + color: var(--p-color-text); + } +} +// stylelint-enable + .disabled { color: var(--p-color-text-disabled); cursor: initial; diff --git a/polaris-react/src/components/TextField/TextField.stories.tsx b/polaris-react/src/components/TextField/TextField.stories.tsx index 62cce032b3b..898522c867e 100644 --- a/polaris-react/src/components/TextField/TextField.stories.tsx +++ b/polaris-react/src/components/TextField/TextField.stories.tsx @@ -41,6 +41,22 @@ export function Default() { ); } +export function Magic() { + const [value, setValue] = useState('Jaded Pixel'); + + const handleChange = useCallback((newValue) => setValue(newValue), []); + + return ( + + ); +} + export function Number() { const [value, setValue] = useState('1.0'); const [value1, setValue1] = useState('1.0'); diff --git a/polaris-react/src/components/TextField/TextField.tsx b/polaris-react/src/components/TextField/TextField.tsx index b28f52d6692..9aaf3befd00 100644 --- a/polaris-react/src/components/TextField/TextField.tsx +++ b/polaris-react/src/components/TextField/TextField.tsx @@ -52,6 +52,8 @@ type InputMode = | 'email' | 'url'; +type Tone = 'magic'; + interface SelectSuggestion { suggestion?: string; } @@ -175,6 +177,8 @@ interface NonMutuallyExclusiveProps { onFocus?: (event?: React.FocusEvent) => void; /** Callback fired when input is blurred */ onBlur?(event?: React.FocusEvent): void; + /** Indicates the tone of the text field */ + tone?: Tone; } export type MutuallyExclusiveSelectionProps = @@ -241,6 +245,7 @@ export function TextField({ onSpinnerChange, onFocus, onBlur, + tone, }: TextFieldProps) { const i18n = useI18n(); const [height, setHeight] = useState(null); @@ -290,6 +295,7 @@ export function TextField({ disabled && styles.disabled, readOnly && styles.readOnly, error && styles.error, + tone && tone === 'magic' && styles.magic, multiline && styles.multiline, focus && !disabled && styles.focus, variant !== 'inherit' && styles[variant], diff --git a/polaris-tokens/src/themes/base/color.ts b/polaris-tokens/src/themes/base/color.ts index 2b8453be563..f1cfa271281 100644 --- a/polaris-tokens/src/themes/base/color.ts +++ b/polaris-tokens/src/themes/base/color.ts @@ -134,6 +134,7 @@ export type ColorBorderAlias = | 'border-inverse-hover' | 'border-inverse' | 'border-magic-secondary' + | 'border-magic-secondary-hover' | 'border-magic' | 'border-secondary' | 'border-success' @@ -202,6 +203,7 @@ export type ColorTextAlias = | 'text-link' | 'text-magic-on-bg-fill' | 'text-magic' + | 'text-magic-secondary' | 'text-secondary' | 'text-success-active' | 'text-success-hover' @@ -399,15 +401,15 @@ export const color: { 'The active state (on press) color for elements indicating areas of focus in editors.', }, 'color-bg-surface-magic': { - value: colors.purple[3], + value: colors.purple[2], description: 'Use for backgrounds of elements suggested by magic AI.', }, 'color-bg-surface-magic-hover': { - value: colors.purple[4], + value: colors.purple[3], description: 'The hover state color for elements suggested by magic AI.', }, 'color-bg-surface-magic-active': { - value: colors.purple[6], + value: colors.purple[5], description: 'The active state (on press) color for elements suggested by magic AI.', }, @@ -851,6 +853,11 @@ export const color: { value: colors.purple[14], description: 'Use for text suggested by magic AI.', }, + 'color-text-magic-secondary': { + value: colors.purple[12], + description: + 'Use for text suggested by magic AI with a secondary level of prominence.', + }, 'color-text-magic-on-bg-fill': { value: colors.purple[1], description: 'Use for text and icons on bg-fill-magic.', @@ -936,10 +943,15 @@ export const color: { 'The active state (on press) color for borders indicating areas of focus.', }, 'color-border-magic': { - value: colors.purple[10], + value: colors.purple[6], description: 'Use for borders suggested by magic AI.', }, 'color-border-magic-secondary': { + value: colors.purple[11], + description: + 'Use for borders suggested by magic AI, such as borders on text fields.', + }, + 'color-border-magic-secondary-hover': { value: colors.purple[12], description: 'Use for borders suggested by magic AI, such as borders on text fields.', From 9e0b67569d404c310ef9e1109e72a4763d46f1c8 Mon Sep 17 00:00:00 2001 From: Carlos Matallin Date: Tue, 24 Oct 2023 19:52:21 +0000 Subject: [PATCH 2/6] [Radio] Add styles for AI generated values --- polaris-react/src/components/Choice/Choice.scss | 4 ++++ polaris-react/src/components/Choice/Choice.tsx | 6 +++++- .../src/components/ChoiceList/ChoiceList.tsx | 6 +++++- .../src/components/RadioButton/RadioButton.scss | 15 +++++++++++++++ .../src/components/RadioButton/RadioButton.tsx | 10 +++++++++- .../src/components/TextField/TextField.tsx | 4 +--- polaris-react/src/types.ts | 2 ++ 7 files changed, 41 insertions(+), 6 deletions(-) diff --git a/polaris-react/src/components/Choice/Choice.scss b/polaris-react/src/components/Choice/Choice.scss index 1ea088bdbda..a0f0bbfa620 100644 --- a/polaris-react/src/components/Choice/Choice.scss +++ b/polaris-react/src/components/Choice/Choice.scss @@ -114,6 +114,10 @@ } } +.magic > .Label { + color: var(--p-color-text-magic); +} + .disabled + .Descriptions { // the component in the HelpText markup in Choice.tsx is set to `undefined` when the disabled prop is true // Which tells it to inherit whatever color we specify here. diff --git a/polaris-react/src/components/Choice/Choice.tsx b/polaris-react/src/components/Choice/Choice.tsx index 863590c7ff3..8173692241d 100644 --- a/polaris-react/src/components/Choice/Choice.tsx +++ b/polaris-react/src/components/Choice/Choice.tsx @@ -8,7 +8,7 @@ import { sanitizeCustomProperties, } from '../../utilities/css'; import type {ResponsiveProp} from '../../utilities/css'; -import type {Error} from '../../types'; +import type {Error, Tone} from '../../types'; import {InlineError} from '../InlineError'; import {Text} from '../Text'; @@ -70,6 +70,8 @@ interface ChoiceProps extends ChoiceBleedProps { error?: Error | boolean; /** Additional text to aide in use. Will add a wrapping
*/ helpText?: React.ReactNode; + /** Indicates the tone of the choice */ + tone?: Tone; } export function Choice({ @@ -88,11 +90,13 @@ export function Choice({ bleedBlockEnd, bleedInlineStart, bleedInlineEnd, + tone, }: ChoiceProps) { const className = classNames( styles.Choice, labelHidden && styles.labelHidden, disabled && styles.disabled, + tone && tone === 'magic' && styles.magic, labelClassName, ); diff --git a/polaris-react/src/components/ChoiceList/ChoiceList.tsx b/polaris-react/src/components/ChoiceList/ChoiceList.tsx index 5f8c1f4b307..f8556b9eafc 100644 --- a/polaris-react/src/components/ChoiceList/ChoiceList.tsx +++ b/polaris-react/src/components/ChoiceList/ChoiceList.tsx @@ -1,6 +1,6 @@ import React, {useId} from 'react'; -import type {Error} from '../../types'; +import type {Error, Tone} from '../../types'; import {Checkbox} from '../Checkbox'; import {RadioButton} from '../RadioButton'; import {InlineError, errorTextID} from '../InlineError'; @@ -46,6 +46,8 @@ export interface ChoiceListProps { disabled?: boolean; /** Callback when the selected choices change */ onChange?(selected: string[], name: string): void; + /** Indicates the tone of the choice list */ + tone?: Tone; } export function ChoiceList({ @@ -58,6 +60,7 @@ export function ChoiceList({ error, disabled = false, name: nameProp, + tone, }: ChoiceListProps) { // Type asserting to any is required for TS3.2 but can be removed when we update to 3.3 // see https://github.com/Microsoft/TypeScript/issues/28768 @@ -119,6 +122,7 @@ export function ChoiceList({ ariaDescribedBy={ error && describedByError ? errorTextID(finalName) : null } + tone={tone} /> {children} diff --git a/polaris-react/src/components/RadioButton/RadioButton.scss b/polaris-react/src/components/RadioButton/RadioButton.scss index 8a76884875b..4ac8718fdf0 100644 --- a/polaris-react/src/components/RadioButton/RadioButton.scss +++ b/polaris-react/src/components/RadioButton/RadioButton.scss @@ -47,6 +47,21 @@ } } + &.magic:checked:not([disabled]) + .Backdrop { + &, + .ChoiceLabel:hover & { + background-color: var(--p-color-bg-fill-magic); + border-color: var(--p-color-bg-fill-magic); + } + } + + &.magic:checked:not([disabled]) + .Backdrop::before { + &, + .ChoiceLabel:hover & { + background-color: var(--p-color-text-magic-on-bg-fill); + } + } + + .Backdrop { .ChoiceLabel:hover & { cursor: pointer; diff --git a/polaris-react/src/components/RadioButton/RadioButton.tsx b/polaris-react/src/components/RadioButton/RadioButton.tsx index 992e9eb140a..1301ea7efdb 100644 --- a/polaris-react/src/components/RadioButton/RadioButton.tsx +++ b/polaris-react/src/components/RadioButton/RadioButton.tsx @@ -4,6 +4,7 @@ import {classNames} from '../../utilities/css'; import type {ResponsiveProp} from '../../utilities/css'; import {Choice, helpTextID} from '../Choice'; import type {ChoiceBleedProps} from '../Choice'; +import type {Tone} from '../../types'; import styles from './RadioButton.scss'; @@ -34,6 +35,8 @@ export interface RadioButtonProps extends ChoiceBleedProps { fill?: ResponsiveProp; /** Additional text to aide in use */ helpText?: React.ReactNode; + /** Indicates the tone of the text field */ + tone?: Tone; } export function RadioButton({ @@ -55,6 +58,7 @@ export function RadioButton({ bleedBlockEnd, bleedInlineStart, bleedInlineEnd, + tone, }: RadioButtonProps) { const uniqId = useId(); const id = idProp ?? uniqId; @@ -80,7 +84,10 @@ export function RadioButton({ ? describedBy.join(' ') : undefined; - const inputClassName = classNames(styles.Input); + const inputClassName = classNames( + styles.Input, + tone && tone === 'magic' && styles.magic, + ); const extraChoiceProps = { helpText, @@ -100,6 +107,7 @@ export function RadioButton({ labelClassName={styles.ChoiceLabel} fill={fill} {...extraChoiceProps} + {...(checked ? {tone} : {})} > Date: Thu, 26 Oct 2023 18:12:02 +0000 Subject: [PATCH 3/6] [Checkbox] Add styles for AI generated values --- .../src/components/Checkbox/Checkbox.scss | 34 +++++++++++++++++-- .../src/components/Checkbox/Checkbox.tsx | 7 +++- 2 files changed, 37 insertions(+), 4 deletions(-) diff --git a/polaris-react/src/components/Checkbox/Checkbox.scss b/polaris-react/src/components/Checkbox/Checkbox.scss index 5228729aae8..57445e5be0a 100644 --- a/polaris-react/src/components/Checkbox/Checkbox.scss +++ b/polaris-react/src/components/Checkbox/Checkbox.scss @@ -30,7 +30,7 @@ box-shadow: inset 0 0 0 var(--p-space-050) var(--p-color-bg-fill-brand); } -// stylelint-disable selector-max-specificity, selector-max-class -- Much easier to read the rules when written like this +// stylelint-disable selector-max-specificity, selector-max-class, selector-max-combinators, max-nesting-depth -- Much easier to read the rules when written like this .Input { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @include visually-hidden; @@ -62,7 +62,6 @@ transform var(--p-motion-duration-150) var(--p-motion-ease-out); opacity: 1; - /* stylelint-disable-next-line selector-max-combinators -- need to target svg from icons package */ svg { fill: var(--p-color-text-brand-on-bg-fill); } @@ -88,7 +87,6 @@ } } - // stylelint-disable-next-line selector-max-combinators -- target disabled icon color ~ .Icon svg { color: var(--p-color-checkbox-icon-disabled); } @@ -104,6 +102,36 @@ } } } + + &.magic { + + .Backdrop { + background-color: var(--p-color-bg-surface-magic); + box-shadow: inset 0 0 0 var(--p-border-width-0165) + var(--p-color-border-magic-secondary); + + .ChoiceLabel:hover & { + background-color: var(--p-color-bg-surface-magic-hover); + box-shadow: inset 0 0 0 var(--p-border-width-0165) + var(--p-color-border-magic-secondary-hover); + } + } + + &:checked, + &.Input-indeterminate { + + .Backdrop { + border-color: var(--p-color-bg-fill-magic); + background-color: var(--p-color-bg-fill-magic); + box-shadow: inset 0 0 0 var(--p-space-800) var(--p-color-bg-fill-magic); + + .ChoiceLabel:hover & { + border-color: var(--p-color-bg-fill-magic); + background-color: var(--p-color-bg-fill-magic); + box-shadow: inset 0 0 0 var(--p-space-800) + var(--p-color-bg-fill-magic); + } + } + } + } // stylelint-enable selector-max-specificity, selector-max-class } diff --git a/polaris-react/src/components/Checkbox/Checkbox.tsx b/polaris-react/src/components/Checkbox/Checkbox.tsx index 7d7a0c90fd2..ad165ad6096 100644 --- a/polaris-react/src/components/Checkbox/Checkbox.tsx +++ b/polaris-react/src/components/Checkbox/Checkbox.tsx @@ -13,7 +13,7 @@ import type {ChoiceBleedProps} from '../Choice'; import {Choice, helpTextID} from '../Choice'; import {errorTextID} from '../InlineError'; import {Icon} from '../Icon'; -import type {Error, CheckboxHandles} from '../../types'; +import type {Error, CheckboxHandles, Tone} from '../../types'; import {WithinListboxContext} from '../../utilities/listbox/context'; import styles from './Checkbox.scss'; @@ -51,6 +51,8 @@ export interface CheckboxProps extends ChoiceBleedProps { helpText?: React.ReactNode; /** Display an error message */ error?: Error | boolean; + /** Indicates the tone of the checkbox */ + tone?: Tone; } export const Checkbox = forwardRef( @@ -77,6 +79,7 @@ export const Checkbox = forwardRef( bleedBlockEnd, bleedInlineStart, bleedInlineEnd, + tone, }: CheckboxProps, ref, ) { @@ -153,6 +156,7 @@ export const Checkbox = forwardRef( const inputClassName = classNames( styles.Input, isIndeterminate && styles['Input-indeterminate'], + tone && tone === 'magic' && styles.magic, ); const extraChoiceProps = { @@ -173,6 +177,7 @@ export const Checkbox = forwardRef( disabled={disabled} labelClassName={classNames(styles.ChoiceLabel, labelClassName)} fill={fill} + tone={tone} {...extraChoiceProps} > From 9c1f7abce5015c6cbbe5600e657506419495089c Mon Sep 17 00:00:00 2001 From: Carlos Matallin Date: Fri, 27 Oct 2023 17:17:33 +0000 Subject: [PATCH 4/6] Add stories --- .../components/Checkbox/Checkbox.stories.tsx | 18 +++++++++++++ .../ChoiceList/ChoiceList.stories.tsx | 20 ++++++++++++++ .../RadioButton/RadioButton.stories.tsx | 26 +++++++++++++++++++ 3 files changed, 64 insertions(+) diff --git a/polaris-react/src/components/Checkbox/Checkbox.stories.tsx b/polaris-react/src/components/Checkbox/Checkbox.stories.tsx index 7156958daeb..023d1c704c3 100644 --- a/polaris-react/src/components/Checkbox/Checkbox.stories.tsx +++ b/polaris-react/src/components/Checkbox/Checkbox.stories.tsx @@ -77,6 +77,24 @@ export function Error() { ); } +export function Magic() { + const [checked, setChecked] = useState(false); + const handleChange = () => { + console.error('This should never be fired'); + }; + + return ( + + + + + ); +} + export function WithBleedAndFill() { const [checked1, setChecked1] = useState(false); const [checked2, setChecked2] = useState(false); diff --git a/polaris-react/src/components/ChoiceList/ChoiceList.stories.tsx b/polaris-react/src/components/ChoiceList/ChoiceList.stories.tsx index 4b191f6bc2a..8682f64e686 100644 --- a/polaris-react/src/components/ChoiceList/ChoiceList.stories.tsx +++ b/polaris-react/src/components/ChoiceList/ChoiceList.stories.tsx @@ -45,6 +45,26 @@ export function WithError() { ); } +export function Magic() { + const [selected, setSelected] = useState(['hidden']); + + const handleChange = useCallback((value) => setSelected(value), []); + + return ( + + ); +} + export function WithMultiChoice() { const [selected, setSelected] = useState(['hidden']); diff --git a/polaris-react/src/components/RadioButton/RadioButton.stories.tsx b/polaris-react/src/components/RadioButton/RadioButton.stories.tsx index a25e70c6322..5dcac607b68 100644 --- a/polaris-react/src/components/RadioButton/RadioButton.stories.tsx +++ b/polaris-react/src/components/RadioButton/RadioButton.stories.tsx @@ -70,6 +70,32 @@ export function DisabledRadio() { ); } +export function Magic() { + const handleChange = useCallback((_checked, newValue) => { + // eslint-disable-next-line no-alert + alert('This should never ever get called'); + }, []); + return ( + + + + + ); +} + export function WithBleed() { const [value1, setValue1] = useState('disabled'); const [value2, setValue2] = useState('disabled2'); From 9ab63d7ba2f5ebe4864daf1b7debbfe6c151aeb1 Mon Sep 17 00:00:00 2001 From: Carlos Matallin Date: Wed, 11 Oct 2023 20:46:09 +0000 Subject: [PATCH 5/6] Changeset --- .changeset/fair-eggs-cross.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/fair-eggs-cross.md diff --git a/.changeset/fair-eggs-cross.md b/.changeset/fair-eggs-cross.md new file mode 100644 index 00000000000..d100afc66f1 --- /dev/null +++ b/.changeset/fair-eggs-cross.md @@ -0,0 +1,7 @@ +--- +'@shopify/polaris': minor +--- + +- Added `tone` prop with `magic` value to `TextField` +- Added `tone` prop with `magic` value to `ChoiceList` +- Added `tone` prop with `magic` value to `Checkbox` From f67eb0bd8c02c172b08edd95a26fb72eb7e35932 Mon Sep 17 00:00:00 2001 From: Carlos Matallin Date: Fri, 27 Oct 2023 14:23:23 -0700 Subject: [PATCH 6/6] PR changes --- .../src/components/Checkbox/Checkbox.scss | 6 ++-- .../components/Checkbox/Checkbox.stories.tsx | 20 +++++-------- .../src/components/Checkbox/Checkbox.tsx | 8 ++--- .../src/components/Choice/Choice.scss | 2 +- .../src/components/Choice/Choice.tsx | 7 +++-- .../ChoiceList/ChoiceList.stories.tsx | 30 +++++++++++++++++++ .../src/components/ChoiceList/ChoiceList.tsx | 4 +-- .../components/RadioButton/RadioButton.scss | 12 ++++---- .../RadioButton/RadioButton.stories.tsx | 20 ++++++++----- .../components/RadioButton/RadioButton.tsx | 7 ++--- .../src/components/TextField/TextField.scss | 2 +- .../src/components/TextField/TextField.tsx | 6 ++-- polaris-react/src/types.ts | 2 -- 13 files changed, 78 insertions(+), 48 deletions(-) diff --git a/polaris-react/src/components/Checkbox/Checkbox.scss b/polaris-react/src/components/Checkbox/Checkbox.scss index 57445e5be0a..4183fd7f29c 100644 --- a/polaris-react/src/components/Checkbox/Checkbox.scss +++ b/polaris-react/src/components/Checkbox/Checkbox.scss @@ -103,7 +103,7 @@ } } - &.magic { + &.toneMagic { + .Backdrop { background-color: var(--p-color-bg-surface-magic); box-shadow: inset 0 0 0 var(--p-border-width-0165) @@ -132,7 +132,7 @@ } } } - // stylelint-enable selector-max-specificity, selector-max-class + // stylelint-enable selector-max-specificity, selector-max-class, selector-max-combinators, max-nesting-depth } .Backdrop { @@ -235,7 +235,7 @@ } } } -// stylelint-enable selector-max-specificity, selector-max-class, selector-max-combinators, selector-max-compound-selectors +// stylelint-enable selector-max-specificity, selector-max-class, selector-max-combinators // stylelint-disable-next-line selector-max-combinators, selector-max-type -- override .animated svg > path { diff --git a/polaris-react/src/components/Checkbox/Checkbox.stories.tsx b/polaris-react/src/components/Checkbox/Checkbox.stories.tsx index 023d1c704c3..522e71da3d6 100644 --- a/polaris-react/src/components/Checkbox/Checkbox.stories.tsx +++ b/polaris-react/src/components/Checkbox/Checkbox.stories.tsx @@ -78,20 +78,16 @@ export function Error() { } export function Magic() { - const [checked, setChecked] = useState(false); - const handleChange = () => { - console.error('This should never be fired'); - }; + const [checked, setChecked] = useState(); + const handleChange = useCallback((newChecked) => setChecked(newChecked), []); return ( - - - - + ); } diff --git a/polaris-react/src/components/Checkbox/Checkbox.tsx b/polaris-react/src/components/Checkbox/Checkbox.tsx index ad165ad6096..eee6141f744 100644 --- a/polaris-react/src/components/Checkbox/Checkbox.tsx +++ b/polaris-react/src/components/Checkbox/Checkbox.tsx @@ -7,13 +7,13 @@ import React, { } from 'react'; import {MinusMinor} from '@shopify/polaris-icons'; -import {classNames} from '../../utilities/css'; +import {classNames, variationName} from '../../utilities/css'; import type {ResponsiveProp} from '../../utilities/css'; import type {ChoiceBleedProps} from '../Choice'; import {Choice, helpTextID} from '../Choice'; import {errorTextID} from '../InlineError'; import {Icon} from '../Icon'; -import type {Error, CheckboxHandles, Tone} from '../../types'; +import type {Error, CheckboxHandles} from '../../types'; import {WithinListboxContext} from '../../utilities/listbox/context'; import styles from './Checkbox.scss'; @@ -52,7 +52,7 @@ export interface CheckboxProps extends ChoiceBleedProps { /** Display an error message */ error?: Error | boolean; /** Indicates the tone of the checkbox */ - tone?: Tone; + tone?: 'magic'; } export const Checkbox = forwardRef( @@ -156,7 +156,7 @@ export const Checkbox = forwardRef( const inputClassName = classNames( styles.Input, isIndeterminate && styles['Input-indeterminate'], - tone && tone === 'magic' && styles.magic, + tone && styles[variationName('tone', tone)], ); const extraChoiceProps = { diff --git a/polaris-react/src/components/Choice/Choice.scss b/polaris-react/src/components/Choice/Choice.scss index a0f0bbfa620..2b568c5f0c7 100644 --- a/polaris-react/src/components/Choice/Choice.scss +++ b/polaris-react/src/components/Choice/Choice.scss @@ -114,7 +114,7 @@ } } -.magic > .Label { +.toneMagic > .Label { color: var(--p-color-text-magic); } diff --git a/polaris-react/src/components/Choice/Choice.tsx b/polaris-react/src/components/Choice/Choice.tsx index 8173692241d..3464d28efdd 100644 --- a/polaris-react/src/components/Choice/Choice.tsx +++ b/polaris-react/src/components/Choice/Choice.tsx @@ -6,9 +6,10 @@ import { getResponsiveValue, classNames, sanitizeCustomProperties, + variationName, } from '../../utilities/css'; import type {ResponsiveProp} from '../../utilities/css'; -import type {Error, Tone} from '../../types'; +import type {Error} from '../../types'; import {InlineError} from '../InlineError'; import {Text} from '../Text'; @@ -71,7 +72,7 @@ interface ChoiceProps extends ChoiceBleedProps { /** Additional text to aide in use. Will add a wrapping
*/ helpText?: React.ReactNode; /** Indicates the tone of the choice */ - tone?: Tone; + tone?: 'magic'; } export function Choice({ @@ -96,7 +97,7 @@ export function Choice({ styles.Choice, labelHidden && styles.labelHidden, disabled && styles.disabled, - tone && tone === 'magic' && styles.magic, + tone && styles[variationName('tone', tone)], labelClassName, ); diff --git a/polaris-react/src/components/ChoiceList/ChoiceList.stories.tsx b/polaris-react/src/components/ChoiceList/ChoiceList.stories.tsx index 8682f64e686..e3c6424478b 100644 --- a/polaris-react/src/components/ChoiceList/ChoiceList.stories.tsx +++ b/polaris-react/src/components/ChoiceList/ChoiceList.stories.tsx @@ -94,6 +94,36 @@ export function WithMultiChoice() { ); } +export function MagicWithMultiChoice() { + const [selected, setSelected] = useState(['hidden']); + + const handleChange = useCallback((value) => setSelected(value), []); + + return ( + + ); +} + export function WithChildrenContent() { const [selected, setSelected] = useState(['none']); const [textFieldValue, setTextFieldValue] = useState(''); diff --git a/polaris-react/src/components/ChoiceList/ChoiceList.tsx b/polaris-react/src/components/ChoiceList/ChoiceList.tsx index f8556b9eafc..6226bdbdec0 100644 --- a/polaris-react/src/components/ChoiceList/ChoiceList.tsx +++ b/polaris-react/src/components/ChoiceList/ChoiceList.tsx @@ -1,6 +1,6 @@ import React, {useId} from 'react'; -import type {Error, Tone} from '../../types'; +import type {Error} from '../../types'; import {Checkbox} from '../Checkbox'; import {RadioButton} from '../RadioButton'; import {InlineError, errorTextID} from '../InlineError'; @@ -47,7 +47,7 @@ export interface ChoiceListProps { /** Callback when the selected choices change */ onChange?(selected: string[], name: string): void; /** Indicates the tone of the choice list */ - tone?: Tone; + tone?: 'magic'; } export function ChoiceList({ diff --git a/polaris-react/src/components/RadioButton/RadioButton.scss b/polaris-react/src/components/RadioButton/RadioButton.scss index 4ac8718fdf0..8c33cd76e0f 100644 --- a/polaris-react/src/components/RadioButton/RadioButton.scss +++ b/polaris-react/src/components/RadioButton/RadioButton.scss @@ -47,18 +47,18 @@ } } - &.magic:checked:not([disabled]) + .Backdrop { + &.toneMagic:checked:not([disabled]) + .Backdrop { &, .ChoiceLabel:hover & { background-color: var(--p-color-bg-fill-magic); border-color: var(--p-color-bg-fill-magic); } - } - &.magic:checked:not([disabled]) + .Backdrop::before { - &, - .ChoiceLabel:hover & { - background-color: var(--p-color-text-magic-on-bg-fill); + &::before { + &, + .ChoiceLabel:hover & { + background-color: var(--p-color-text-magic-on-bg-fill); + } } } diff --git a/polaris-react/src/components/RadioButton/RadioButton.stories.tsx b/polaris-react/src/components/RadioButton/RadioButton.stories.tsx index 5dcac607b68..37e76022991 100644 --- a/polaris-react/src/components/RadioButton/RadioButton.stories.tsx +++ b/polaris-react/src/components/RadioButton/RadioButton.stories.tsx @@ -71,24 +71,30 @@ export function DisabledRadio() { } export function Magic() { - const handleChange = useCallback((_checked, newValue) => { - // eslint-disable-next-line no-alert - alert('This should never ever get called'); - }, []); + const [value, setValue] = useState('disabled'); + + const handleChange = useCallback( + (_checked, newValue) => setValue(newValue), + [], + ); + return ( diff --git a/polaris-react/src/components/RadioButton/RadioButton.tsx b/polaris-react/src/components/RadioButton/RadioButton.tsx index 1301ea7efdb..0afbe3a7723 100644 --- a/polaris-react/src/components/RadioButton/RadioButton.tsx +++ b/polaris-react/src/components/RadioButton/RadioButton.tsx @@ -1,10 +1,9 @@ import React, {useRef, useId} from 'react'; -import {classNames} from '../../utilities/css'; +import {classNames, variationName} from '../../utilities/css'; import type {ResponsiveProp} from '../../utilities/css'; import {Choice, helpTextID} from '../Choice'; import type {ChoiceBleedProps} from '../Choice'; -import type {Tone} from '../../types'; import styles from './RadioButton.scss'; @@ -36,7 +35,7 @@ export interface RadioButtonProps extends ChoiceBleedProps { /** Additional text to aide in use */ helpText?: React.ReactNode; /** Indicates the tone of the text field */ - tone?: Tone; + tone?: 'magic'; } export function RadioButton({ @@ -86,7 +85,7 @@ export function RadioButton({ const inputClassName = classNames( styles.Input, - tone && tone === 'magic' && styles.magic, + tone && styles[variationName('tone', tone)], ); const extraChoiceProps = { diff --git a/polaris-react/src/components/TextField/TextField.scss b/polaris-react/src/components/TextField/TextField.scss index 6430d997b06..8843aa30a00 100644 --- a/polaris-react/src/components/TextField/TextField.scss +++ b/polaris-react/src/components/TextField/TextField.scss @@ -128,7 +128,7 @@ $spinner-icon-size: 12px; // stylelint-enable // stylelint-disable selector-max-specificity, selector-max-class, selector-max-combinators -- specificity bump for magic styles to override -.magic { +.toneMagic { > .Input { color: var(--p-color-text-magic); } diff --git a/polaris-react/src/components/TextField/TextField.tsx b/polaris-react/src/components/TextField/TextField.tsx index 3137275358b..72d5413d49c 100644 --- a/polaris-react/src/components/TextField/TextField.tsx +++ b/polaris-react/src/components/TextField/TextField.tsx @@ -15,7 +15,7 @@ import {Labelled, helpTextID, labelID} from '../Labelled'; import type {LabelledProps} from '../Labelled'; import {Connected} from '../Connected'; import {Key} from '../../types'; -import type {Error, Tone} from '../../types'; +import type {Error} from '../../types'; import {Icon} from '../Icon'; import {Text} from '../Text'; import {useEventListener} from '../../utilities/use-event-listener'; @@ -176,7 +176,7 @@ interface NonMutuallyExclusiveProps { /** Callback fired when input is blurred */ onBlur?(event?: React.FocusEvent): void; /** Indicates the tone of the text field */ - tone?: Tone; + tone?: 'magic'; } export type MutuallyExclusiveSelectionProps = @@ -293,7 +293,7 @@ export function TextField({ disabled && styles.disabled, readOnly && styles.readOnly, error && styles.error, - tone && tone === 'magic' && styles.magic, + tone && styles[variationName('tone', tone)], multiline && styles.multiline, focus && !disabled && styles.focus, variant !== 'inherit' && styles[variant], diff --git a/polaris-react/src/types.ts b/polaris-react/src/types.ts index cee16cbcace..57e31856a1a 100644 --- a/polaris-react/src/types.ts +++ b/polaris-react/src/types.ts @@ -48,8 +48,6 @@ export type Error = | React.ReactElement | (string | React.ReactElement)[]; -export type Tone = 'magic'; - export interface BaseButton { /** A unique identifier for the button */ id?: string;