[Select, Text] Add magic tone

.changeset/odd-seahorses-compare.md

@@ -0,0 +1,9 @@
+---
+'@shopify/polaris': minor
+'@shopify/polaris-tokens': minor
+---
+
+- Bumped `color-text-magic-secondary` to purple 13
+- Added `tone` prop with `magic` value to `Select`
+- Added `magic` value to `tone` prop of `Text`
+- Added `magic-subdued` value to `tone` prop of `Text`

polaris-react/src/components/Select/Select.scss

@@ -175,6 +175,47 @@
   }
 }
 
+.toneMagic {
+  .Content {
+    color: var(--p-color-text-magic);
+  }
+
+  .InlineLabel {
+    color: inherit;
+  }
+
+  .Backdrop {
+    border-color: var(--p-color-border-magic-secondary);
+    background-color: var(--p-color-bg-surface-magic);
+  }
+
+  // stylelint-disable-next-line selector-max-combinators -- set Icon fill
+  .Icon svg {
+    fill: var(--p-color-icon-magic);
+  }
+
+  // stylelint-disable selector-max-specificity, selector-max-class, selector-max-combinators, selector-max-compound-selectors, max-nesting-depth -- apply hover and active styles
+  &:not(.disabled):not(.error) {
+    &:not(:focus-within) {
+      &:hover .Backdrop {
+        border-color: var(--p-color-border-magic-secondary-hover);
+        background-color: var(--p-color-bg-surface-magic-hover);
+      }
+    }
+
+    .Input:focus-visible {
+      ~ .Content {
+        color: var(--p-color-text);
+
+        .Icon svg {
+          fill: var(--p-color-icon-secondary);
+        }
+      }
+    }
+  }
+  // stylelint-enable selector-max-specificity, selector-max-class, selector-max-combinators
+}
+
 @media (-ms-high-contrast: active) {
   .Content {
     color: windowText;

polaris-react/src/components/Select/Select.stories.tsx

@@ -77,6 +77,46 @@ export function Disabled() {
   );
 }
 
+export function Magic() {
+  return (
+    <Select
+      label="Date range"
+      tone="magic"
+      options={[
+        {label: 'Today', value: 'today'},
+        {label: 'Yesterday', value: 'yesterday'},
+        {label: 'Last 7 days', value: 'lastWeek'},
+      ]}
+    />
+  );
+}
+
+export function WithInlineLabelMagic() {
+  const [selected, setSelected] = useState('newestUpdate');
+
+  const handleSelectChange = useCallback((value) => setSelected(value), []);
+
+  const options = [
+    {label: 'Newest update', value: 'newestUpdate'},
+    {label: 'Oldest update', value: 'oldestUpdate'},
+    {label: 'Most spent', value: 'mostSpent'},
+    {label: 'Most orders', value: 'mostOrders'},
+    {label: 'Last name A–Z', value: 'lastNameAlpha'},
+    {label: 'Last name Z–A', value: 'lastNameReverseAlpha'},
+  ];
+
+  return (
+    <Select
+      label="Sort by"
+      tone="magic"
+      labelInline
+      options={options}
+      onChange={handleSelectChange}
+      value={selected}
+    />
+  );
+}
+
 export function WithPrefix() {
   const [selected, setSelected] = useState('enabled');
 
@@ -205,6 +245,13 @@ export function All() {
           onChange={() => {}}
           error="Province is required"
         />
+        <Select
+          label="Magic"
+          options={['Ontario', 'Newfoundland and Labrador']}
+          value="Ontario"
+          tone="magic"
+          onChange={() => {}}
+        />
         <Select
           label="Required"
           options={['Ontario', 'Newfoundland and Labrador']}
@@ -253,6 +300,14 @@ export function All() {
           onChange={() => {}}
           labelInline
         />
+        <Select
+          label="Label inline magic"
+          tone="magic"
+          options={['Ontario', 'Newfoundland and Labrador']}
+          value="Ontario"
+          onChange={() => {}}
+          labelInline
+        />
         <Select
           label="Label hidden"
           options={['Ontario', 'Newfoundland and Labrador']}

polaris-react/src/components/Select/Select.tsx

@@ -1,13 +1,14 @@
-import React, {useId} from 'react';
+import React, {useCallback, useId} from 'react';
 import {SelectMinor} from '@shopify/polaris-icons';
 
-import {classNames} from '../../utilities/css';
+import {classNames, variationName} from '../../utilities/css';
 import {Labelled, helpTextID} from '../Labelled';
 import type {LabelledProps} from '../Labelled';
 import {Box} from '../Box';
 import {Icon} from '../Icon';
 import {Text} from '../Text';
 import type {Error} from '../../types';
+import {useToggle} from '../../utilities/use-toggle';
 
 import styles from './Select.scss';
 
@@ -75,6 +76,8 @@ export interface SelectProps {
   onBlur?(): void;
   /** Visual required indicator, add an asterisk to label */
   requiredIndicator?: boolean;
+  /** Indicates the tone of the select */
+  tone?: 'magic';
 }
 
 const PLACEHOLDER_VALUE = '';
@@ -96,17 +99,25 @@ export function Select({
   onFocus,
   onBlur,
   requiredIndicator,
+  tone,
 }: SelectProps) {
+  const {value: focused, toggle: toggleFocused} = useToggle(false);
+
   const uniqId = useId();
   const id = idProp ?? uniqId;
   const labelHidden = labelInline ? true : labelHiddenProp;
 
   const className = classNames(
     styles.Select,
     error && styles.error,
+    tone && styles[variationName('tone', tone)],
     disabled && styles.disabled,
   );
 
+  const handleFocus = useCallback(() => {
+    toggleFocused();
+  }, [toggleFocused]);
+
   const handleChange = onChange
     ? (event: React.ChangeEvent<HTMLSelectElement>) =>
         onChange(event.currentTarget.value, id)
@@ -136,7 +147,13 @@ export function Select({
 
   const inlineLabelMarkup = labelInline && (
     <Box paddingInlineEnd="100">
-      <Text as="span" tone="subdued" truncate>
+      <Text
+        as="span"
+        tone={
+          tone && tone === 'magic' && !focused ? 'magic-subdued' : 'subdued'
+        }
+        truncate
+      >
         {label}
       </Text>
     </Box>
@@ -179,8 +196,14 @@ export function Select({
           value={value}
           className={styles.Input}
           disabled={disabled}
-          onFocus={onFocus}
-          onBlur={onBlur}
+          onFocus={() => {
+            handleFocus();
+            onFocus?.();
+          }}
+          onBlur={() => {
+            toggleFocused();
+            onBlur?.();
+          }}
           onChange={handleChange}
           aria-invalid={Boolean(error)}
           aria-describedby={

polaris-react/src/components/Text/Text.scss

@@ -52,6 +52,14 @@
   color: var(--p-color-text-secondary);
 }
 
+.magic {
+  color: var(--p-color-text-magic);
+}
+
+.magic-subdued {
+  color: var(--p-color-text-magic-secondary);
+}
+
 .text-inverse {
   color: var(--p-color-text-inverse);
 }

polaris-react/src/components/Text/Text.stories.tsx

@@ -102,6 +102,12 @@ export const WithTone = () => (
       Use in combination with a symbol showing a decreasing value to indicate a
       downward trend.
     </Text>
+    <Text as="p" tone="magic">
+      Recommended for text generated by magic AI.
+    </Text>
+    <Text as="p" tone="magic-subdued">
+      Recommended for secondary-level prominence of text suggested by magic AI.
+    </Text>
   </LegacyStack>
 );
 

polaris-react/src/components/Text/Text.tsx

@@ -35,7 +35,14 @@ type Alignment = 'start' | 'center' | 'end' | 'justify';
 
 type FontWeight = 'regular' | 'medium' | 'semibold' | 'bold';
 
-type Tone = 'success' | 'critical' | 'caution' | 'subdued' | 'text-inverse';
+type Tone =
+  | 'success'
+  | 'critical'
+  | 'caution'
+  | 'subdued'
+  | 'text-inverse'
+  | 'magic'
+  | 'magic-subdued';
 
 type TextDecorationLine = 'line-through';
 

polaris-tokens/src/themes/base/color.ts

@@ -854,7 +854,7 @@ export const color: {
     description: 'Use for text suggested by magic AI.',
   },
   'color-text-magic-secondary': {
-    value: colors.purple[12],
+    value: colors.purple[13],
     description:
       'Use for text suggested by magic AI with a secondary level of prominence.',
   },