fix(Decorator): allow decorator to inherit parent theme (#5358)

* fix: allow decorator to inherit parent theme * fix: cspell and mdx formatting issues
carbon-design-system · Jun 18, 2024 · 904602b · 904602b
1 parent 8a0d1a4
commit 904602b
Show file tree

Hide file tree

Showing 16 changed files with 82 additions and 33 deletions.
diff --git a/cspell.json b/cspell.json
@@ -146,6 +146,7 @@
     "scrollend",
     "semibold",
     "serializers",
+    "setlabeltitle",
     "setsize",
     "sidepanel",
     "skipnav",
@@ -173,6 +174,7 @@
     "treegrid",
     "treeview",
     "typeahead",
+    "typeof",
     "unauthorizedemptystate",
     "userprofileimage",
     "uuidv",

diff --git a/packages/ibm-products/src/components/Decorator/Decorator.js b/packages/ibm-products/src/components/Decorator/Decorator.js
@@ -108,7 +108,8 @@ Decorator.propTypes = {
   small: PropTypes.bool,
 
   /**
-   * Determines the theme of the component.
+   * Override the default theme of the component.
+   * Useful if you want "invert" the component's theme.
    */
   theme: PropTypes.oneOf(['light', 'dark']),
 

diff --git a/packages/ibm-products/src/components/Decorator/Decorator.mdx b/packages/ibm-products/src/components/Decorator/Decorator.mdx
@@ -1,4 +1,3 @@
-{/* cspell:ignore setlabeltitle */}
 import { Story, Controls, Source, Canvas } from '@storybook/addon-docs';
 import { CodesandboxLink } from '../../global/js/utils/story-helper';
 import { Decorator } from '.';

diff --git a/packages/ibm-products/src/components/Decorator/Decorator.stories.jsx b/packages/ibm-products/src/components/Decorator/Decorator.stories.jsx
@@ -52,6 +52,18 @@ export default {
       mapping: Object.values(scoreOptions),
       options: Object.values(scoreOptions).map((_k, i) => i),
     },
+    theme: {
+      control: {
+        type: 'select',
+        labels: ['use default', 'light', 'dark'],
+      },
+      mapping: {
+        0: null,
+        1: 'light',
+        2: 'dark',
+      },
+      options: [0, 1, 2],
+    },
     truncateValue: {
       control: {
         type: 'select',
@@ -72,6 +84,7 @@ export default {
     },
   },
   args: {
+    theme: 0,
     truncateValue: 0,
   },
 };
@@ -113,7 +126,6 @@ Default.args = {
     }`;
   },
   small: false,
-  theme: 'light',
   value: '192.168.0.50',
   valueTitle: '',
 };
diff --git a/packages/ibm-products/src/components/DecoratorBase/DecoratorBase.js b/packages/ibm-products/src/components/DecoratorBase/DecoratorBase.js
@@ -26,7 +26,6 @@ const defaults = {
   onContextMenuLabel: () => {},
   onContextMenuValue: () => {},
   scoreThresholds: [0, 4, 7, 10],
-  theme: 'light',
 };
 
 /**
@@ -54,7 +53,7 @@ export let DecoratorBase = React.forwardRef(
       score,
       scoreThresholds = defaults.scoreThresholds,
       small,
-      theme = defaults.theme,
+      theme,
       truncateValue,
       value,
       valueTitle,
@@ -69,7 +68,8 @@ export let DecoratorBase = React.forwardRef(
     const _value = truncate(value, truncateValue);
 
     // These class names apply to all types of DecoratorBase.
-    const classNames = cx(blockClass, className, `${blockClass}--${theme}`, {
+    const classNames = cx(blockClass, className, {
+      [`${blockClass}--${theme}`]: theme,
       [`${blockClass}--sm`]: small,
       [`${blockClass}--truncate-end`]: truncateValue === 'end',
       [`${blockClass}--truncate-start`]: truncateValue === 'start',

diff --git a/packages/ibm-products/src/components/DecoratorBase/DecoratorBase.mdx b/packages/ibm-products/src/components/DecoratorBase/DecoratorBase.mdx
@@ -1,9 +1,5 @@
-{/* cspell:ignore setlabeltitle */}
 import { Story, Controls, Source, Canvas } from '@storybook/addon-docs';
-import {
-  getStoryId,
-  CodesandboxLink,
-} from '../../global/js/utils/story-helper';
+import { CodesandboxLink } from '../../global/js/utils/story-helper';
 import { DecoratorBase } from '.';
 import * as DecoratorBaseStories from './DecoratorBase.stories';
 

diff --git a/packages/ibm-products/src/components/DecoratorBase/DecoratorBase.stories.jsx b/packages/ibm-products/src/components/DecoratorBase/DecoratorBase.stories.jsx
@@ -57,6 +57,18 @@ export default {
       mapping: Object.values(scoreOptions),
       options: Object.values(scoreOptions).map((_k, i) => i),
     },
+    theme: {
+      control: {
+        type: 'select',
+        labels: ['use default', 'light', 'dark'],
+      },
+      mapping: {
+        0: null,
+        1: 'light',
+        2: 'dark',
+      },
+      options: [0, 1, 2],
+    },
     truncateValue: {
       control: {
         type: 'select',
@@ -77,6 +89,7 @@ export default {
     },
   },
   args: {
+    theme: 0,
     truncateValue: 0,
   },
 };
@@ -124,7 +137,6 @@ Default.args = {
     }`;
   },
   small: false,
-  theme: 'light',
   value: '192.168.0.50',
   valueTitle: '',
 };
diff --git a/packages/ibm-products/src/components/DecoratorDualButton/DecoratorDualButton.js b/packages/ibm-products/src/components/DecoratorDualButton/DecoratorDualButton.js
@@ -136,7 +136,8 @@ DecoratorDualButton.propTypes = {
   small: PropTypes.bool,
 
   /**
-   * Determines the theme of the component.
+   * Override the default theme of the component.
+   * Useful if you want "invert" the component's theme.
    */
   theme: PropTypes.oneOf(['light', 'dark']),
 

diff --git a/packages/ibm-products/src/components/DecoratorDualButton/DecoratorDualButton.mdx b/packages/ibm-products/src/components/DecoratorDualButton/DecoratorDualButton.mdx
@@ -1,9 +1,5 @@
-{/* cspell:ignore setlabeltitle */}
 import { Story, Controls, Source, Canvas } from '@storybook/addon-docs';
-import {
-  getStoryId,
-  CodesandboxLink,
-} from '../../global/js/utils/story-helper';
+import { CodesandboxLink } from '../../global/js/utils/story-helper';
 import { DecoratorDualButton } from '.';
 import * as DecoratorDualButtonStories from './DecoratorDualButton.stories';
 

diff --git a/packages/ibm-products/src/components/DecoratorDualButton/DecoratorDualButton.stories.jsx b/packages/ibm-products/src/components/DecoratorDualButton/DecoratorDualButton.stories.jsx
@@ -57,6 +57,18 @@ export default {
       mapping: Object.values(scoreOptions),
       options: Object.values(scoreOptions).map((_k, i) => i),
     },
+    theme: {
+      control: {
+        type: 'select',
+        labels: ['use default', 'light', 'dark'],
+      },
+      mapping: {
+        0: null,
+        1: 'light',
+        2: 'dark',
+      },
+      options: [0, 1, 2],
+    },
     truncateValue: {
       control: {
         type: 'select',
@@ -77,6 +89,7 @@ export default {
     },
   },
   args: {
+    theme: 0,
     truncateValue: 0,
   },
 };
@@ -126,7 +139,6 @@ Default.args = {
     }`;
   },
   small: false,
-  theme: 'light',
   value: '192.168.0.50',
   valueTitle: '',
 };
diff --git a/packages/ibm-products/src/components/DecoratorLink/DecoratorLink.js b/packages/ibm-products/src/components/DecoratorLink/DecoratorLink.js
@@ -123,7 +123,8 @@ DecoratorLink.propTypes = {
   small: PropTypes.bool,
 
   /**
-   * Determines the theme of the component.
+   * Override the default theme of the component.
+   * Useful if you want "invert" the component's theme.
    */
   theme: PropTypes.oneOf(['light', 'dark']),
 

diff --git a/packages/ibm-products/src/components/DecoratorLink/DecoratorLink.mdx b/packages/ibm-products/src/components/DecoratorLink/DecoratorLink.mdx
@@ -1,9 +1,5 @@
-{/* cspell:ignore setlabeltitle */}
 import { Story, Controls, Source, Canvas } from '@storybook/addon-docs';
-import {
-  getStoryId,
-  CodesandboxLink,
-} from '../../global/js/utils/story-helper';
+import { CodesandboxLink } from '../../global/js/utils/story-helper';
 import { DecoratorLink } from '.';
 import * as DecoratorLinkStories from './DecoratorLink.stories';
 

diff --git a/packages/ibm-products/src/components/DecoratorLink/DecoratorLink.stories.jsx b/packages/ibm-products/src/components/DecoratorLink/DecoratorLink.stories.jsx
@@ -57,6 +57,18 @@ export default {
       mapping: Object.values(scoreOptions),
       options: Object.values(scoreOptions).map((_k, i) => i),
     },
+    theme: {
+      control: {
+        type: 'select',
+        labels: ['use default', 'light', 'dark'],
+      },
+      mapping: {
+        0: null,
+        1: 'light',
+        2: 'dark',
+      },
+      options: [0, 1, 2],
+    },
     truncateValue: {
       control: {
         type: 'select',
@@ -77,6 +89,7 @@ export default {
     },
   },
   args: {
+    theme: 0,
     truncateValue: 0,
   },
 };
@@ -121,7 +134,6 @@ Default.args = {
     }`;
   },
   small: false,
-  theme: 'light',
   value: '192.168.0.50',
   valueTitle: '',
   target: '_blank',

diff --git a/packages/ibm-products/src/components/DecoratorSingleButton/DecoratorSingleButton.js b/packages/ibm-products/src/components/DecoratorSingleButton/DecoratorSingleButton.js
@@ -126,7 +126,8 @@ DecoratorSingleButton.propTypes = {
   small: PropTypes.bool,
 
   /**
-   * Determines the theme of the component.
+   * Override the default theme of the component.
+   * Useful if you want "invert" the component's theme.
    */
   theme: PropTypes.oneOf(['light', 'dark']),
 

diff --git a/...ges/ibm-products/src/components/DecoratorSingleButton/DecoratorSingleButton.mdx b/...ges/ibm-products/src/components/DecoratorSingleButton/DecoratorSingleButton.mdx
@@ -1,9 +1,5 @@
-{/* cspell:ignore setlabeltitle */}
 import { Story, Controls, Source, Canvas } from '@storybook/addon-docs';
-import {
-  getStoryId,
-  CodesandboxLink,
-} from '../../global/js/utils/story-helper';
+import { CodesandboxLink } from '../../global/js/utils/story-helper';
 import { DecoratorSingleButton } from '.';
 import * as DecoratorSingleButtonStories from './DecoratorSingleButton.stories';
 

diff --git a/packages/ibm-products/src/components/DecoratorSingleButton/DecoratorSingleButton.stories.jsx b/packages/ibm-products/src/components/DecoratorSingleButton/DecoratorSingleButton.stories.jsx
@@ -55,6 +55,18 @@ export default {
       mapping: Object.values(scoreOptions),
       options: Object.values(scoreOptions).map((_k, i) => i),
     },
+    theme: {
+      control: {
+        type: 'select',
+        labels: ['use default', 'light', 'dark'],
+      },
+      mapping: {
+        0: null,
+        1: 'light',
+        2: 'dark',
+      },
+      options: [0, 1, 2],
+    },
     truncateValue: {
       control: {
         type: 'select',
@@ -75,6 +87,7 @@ export default {
     },
   },
   args: {
+    theme: 0,
     truncateValue: 0,
   },
 };
@@ -122,7 +135,6 @@ Default.args = {
     }`;
   },
   small: false,
-  theme: 'light',
   value: '192.168.0.50',
   valueTitle: '',
 };