docs(react-swatch-picker): storybook fixes (microsoft#31052)

GeoffCoxMSFT · Apr 15, 2024 · fba0b71 · fba0b71
1 parent effdc42
commit fba0b71
Show file tree

Hide file tree

Showing 10 changed files with 9 additions and 13 deletions.
diff --git a/...mponents/react-swatch-picker-preview/stories/SwatchPicker/ColorSwatchVariants.stories.tsx b/...mponents/react-swatch-picker-preview/stories/SwatchPicker/ColorSwatchVariants.stories.tsx
@@ -17,7 +17,6 @@ export const ColorSwatchVariants = () => {
       <ColorSwatch color="purple" value="purple-color" aria-label="Purple" />
       <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="#6fc8ff" disabled value="light-blue" aria-label="light-blue" />
       <ColorSwatch color="#c8eeff" icon={<HeartFilled color="red" />} value="icon" aria-label="heart-icon" />
       <ColorSwatch color="#016ab0" disabled value="blue" aria-label="blue" />
       <ColorSwatch color="#ff659a" value="initials" aria-label="initials">

diff --git a/...react-components/react-swatch-picker-preview/stories/SwatchPicker/EmptySwatch.stories.tsx b/...react-components/react-swatch-picker-preview/stories/SwatchPicker/EmptySwatch.stories.tsx
@@ -27,7 +27,7 @@ export const EmptySwatchExample = () => {
   const inputRef = React.useRef<HTMLInputElement>(null);
   const [items, setItems] = React.useState<Array<{ color: string; value: string; 'aria-label': string }>>([
     { color: '#FF1921', value: 'FF1921', 'aria-label': 'red' },
-    { color: '#FFC12E', value: 'FFC12E', 'aria-label': 'orange' },
+    { color: '#FF7A00', value: 'FF7A00', 'aria-label': 'dark orange' },
     { color: '#90D057', value: '90D057', 'aria-label': 'light green' },
     { color: '#00B053', value: '00B053', 'aria-label': 'green' },
   ]);

diff --git a/...mponents/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerDefault.stories.tsx b/...mponents/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerDefault.stories.tsx
@@ -25,8 +25,7 @@ export const Default = () => {
     <>
       <SwatchPicker aria-label="SwatchPicker default" selectedValue={selectedValue} onSelectionChange={handleSelect}>
         <ColorSwatch color="#FF1921" value="FF1921" aria-label="red" />
-        <ColorSwatch color="#FFC12E" value="FFC12E" aria-label="orange" />
-        <ColorSwatch color="#FEFF37" value="FEFF37" aria-label="yellow" />
+        <ColorSwatch color="#FF7A00" value="FF7A00" aria-label="orange" />
         <ColorSwatch color="#90D057" value="90D057" aria-label="light green" />
         <ColorSwatch color="#00B053" value="00B053" aria-label="green" />
         <ColorSwatch color="#00AFED" value="00AFED" aria-label="light blue" />

diff --git a/...components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerImage.stories.tsx b/...components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerImage.stories.tsx
@@ -39,7 +39,7 @@ const images = [
 ];
 
 export const SwatchPickerImage = () => {
-  const [selectedValue, setSelectedValue] = React.useState('bridge');
+  const [selectedValue, setSelectedValue] = React.useState('1');
   const [selectedImage, setSelectedImage] = React.useState(DEFAULT_IMAGE);
   const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {
     setSelectedValue(data.selectedValue);

diff --git a/...omponents/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerLayout.stories.tsx b/...omponents/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerLayout.stories.tsx
@@ -19,7 +19,7 @@ const useStyles = makeStyles({
 
 const colors: ColorSwatchProps[] = [
   { color: '#FF1921', value: 'FF1921', 'aria-label': 'red' },
-  { color: '#FFC12E', value: 'FFC12E', 'aria-label': 'orange' },
+  { color: '#FF7A00', value: '#FF7A00', 'aria-label': 'orange' },
   { color: '#90D057', value: '90D057', 'aria-label': 'light green' },
   { color: '#00B053', value: '00B053', 'aria-label': 'green' },
   { color: '#00AFED', value: '00AFED', 'aria-label': 'light blue' },

diff --git a/...components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerPopup.stories.tsx b/...components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerPopup.stories.tsx
@@ -13,8 +13,8 @@ const useStyles = makeStyles({
 
 const colors = [
   { color: '#FF1921', value: 'FF1921', 'aria-label': 'red' },
+  { color: '#FF7A00', value: 'FF7A00', 'aria-label': 'dark orange' },
   { color: '#FFC12E', value: 'FFC12E', 'aria-label': 'orange' },
-  { color: '#FEFF37', value: 'FEFF37', 'aria-label': 'yellow' },
   { color: '#90D057', value: '90D057', 'aria-label': 'light green' },
   { color: '#00B053', value: '00B053', 'aria-label': 'green' },
   { color: '#00AFED', value: '00AFED', 'aria-label': 'light blue' },

diff --git a/...components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerShape.stories.tsx b/...components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerShape.stories.tsx
@@ -12,8 +12,8 @@ const useStyles = makeStyles({
 
 const colors = [
   { color: '#FF1921', value: 'FF1921', 'aria-label': 'red' },
+  { color: '#FF7A00', value: 'FF7A00', 'aria-label': 'dark orange' },
   { color: '#FFC12E', value: 'FFC12E', 'aria-label': 'orange' },
-  { color: '#FEFF37', value: 'FEFF37', 'aria-label': 'yellow' },
   { color: '#90D057', value: '90D057', 'aria-label': 'light green' },
   { color: '#00B053', value: '00B053', 'aria-label': 'green' },
   { color: '#00AFED', value: '00AFED', 'aria-label': 'light blue' },

diff --git a/...-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerSize.stories.tsx b/...-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerSize.stories.tsx
@@ -12,8 +12,7 @@ const useStyles = makeStyles({
 
 const colors = [
   { color: '#FF1921', value: 'FF1921', 'aria-label': 'red' },
-  { color: '#FFC12E', value: 'FFC12E', 'aria-label': 'orange' },
-  { color: '#FEFF37', value: 'FEFF37', 'aria-label': 'yellow' },
+  { color: '#FF7A00', value: 'FF7A00', 'aria-label': 'orange' },
   { color: '#90D057', value: '90D057', 'aria-label': 'light green' },
   { color: '#00B053', value: '00B053', 'aria-label': 'green' },
   { color: '#00AFED', value: '00AFED', 'aria-label': 'light blue' },

diff --git a/...mponents/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerSpacing.stories.tsx b/...mponents/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerSpacing.stories.tsx
@@ -12,8 +12,8 @@ const useStyles = makeStyles({
 
 const colors = [
   { color: '#FF1921', value: 'FF1921', 'aria-label': 'red' },
+  { color: '#FF7A00', value: 'FF7A00', 'aria-label': 'dark orange' },
   { color: '#FFC12E', value: 'FFC12E', 'aria-label': 'orange' },
-  { color: '#FEFF37', value: 'FEFF37', 'aria-label': 'yellow' },
   { color: '#90D057', value: '90D057', 'aria-label': 'light green' },
   { color: '#00B053', value: '00B053', 'aria-label': 'green' },
   { color: '#00AFED', value: '00AFED', 'aria-label': 'light blue' },

diff --git a/...ents/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerWithTooltip.stories.tsx b/...ents/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerWithTooltip.stories.tsx
@@ -30,8 +30,7 @@ export const SwatchPickerWithTooltip = () => {
     <>
       <SwatchPicker aria-label="SwatchPicker default" selectedValue={selectedValue} onSelectionChange={handleSelect}>
         <ColorSwatchWithTooltip color="#FF1921" value="FF1921" aria-label="red" />
-        <ColorSwatchWithTooltip color="#FFC12E" value="FFC12E" aria-label="orange" />
-        <ColorSwatchWithTooltip color="#FEFF37" value="FEFF37" aria-label="yellow" />
+        <ColorSwatchWithTooltip color="#FF7A00" value="FF7A00" aria-label="orange" />
         <ColorSwatchWithTooltip color="#90D057" value="90D057" aria-label="light green" />
         <ColorSwatchWithTooltip color="#00B053" value="00B053" aria-label="green" />
         <ColorSwatchWithTooltip color="#00AFED" value="00AFED" aria-label="light blue" />