docs(react-swatch-picker): fixed icon in HC and image example (#31547)

microsoft · Jun 4, 2024 · b633efa · b633efa
1 parent acfa5b4
commit b633efa
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 4 deletions.
diff --git a/...react-components/react-swatch-picker/stories/SwatchPicker/ColorSwatchVariants.stories.tsx b/...react-components/react-swatch-picker/stories/SwatchPicker/ColorSwatchVariants.stories.tsx
@@ -8,6 +8,11 @@ const useStyles = makeStyles({
     display: 'flex',
     gap: '8px',
   },
+  icon: {
+    '@media (forced-colors: active)': {
+      forcedColorAdjust: 'none',
+    },
+  },
 });
 
 export const ColorSwatchVariants = () => {
@@ -16,7 +21,12 @@ export const ColorSwatchVariants = () => {
     <div className={styles.example}>
       <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="#c8eeff"
+        icon={<HeartFilled color="red" className={styles.icon} />}
+        value="icon"
+        aria-label="heart-icon"
+      />
       <ColorSwatch color="#016ab0" disabled value="blue" aria-label="blue" />
       <ColorSwatch color="#ff659a" value="initials" aria-label="initials">
         A

diff --git a/packages/react-components/react-swatch-picker/stories/SwatchPicker/EmptySwatch.stories.tsx b/packages/react-components/react-swatch-picker/stories/SwatchPicker/EmptySwatch.stories.tsx
@@ -69,7 +69,14 @@ export const EmptySwatchExample = () => {
 
       <div className={styles.example} style={{ backgroundColor: selectedColor }} />
       <Label htmlFor="color-select">Add more colors:</Label>
-      <input className={styles.input} ref={inputRef} type="color" id="color-select" name="color-select" />
+      <input
+        aria-label="Open color picker"
+        className={styles.input}
+        ref={inputRef}
+        type="color"
+        id="color-select"
+        name="color-select"
+      />
       <Button
         className={styles.button}
         appearance="primary"

diff --git a/...s/react-components/react-swatch-picker/stories/SwatchPicker/SwatchPickerImage.stories.tsx b/...s/react-components/react-swatch-picker/stories/SwatchPicker/SwatchPickerImage.stories.tsx
@@ -4,14 +4,19 @@ import { SwatchPicker, SwatchPickerOnSelectEventHandler, ImageSwatch } from '@fl
 
 const useStyles = makeStyles({
   example: {
-    width: '700px',
+    width: '100%',
     height: '466px',
-    backgroundSize: 'cover',
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
     margin: '20px 0',
   },
   swatch: {
     width: '100px',
     height: '100px',
+    '@media (max-width: 768px)': {
+      width: '50px',
+      height: '50px',
+    },
   },
 });