Merge remote-tracking branch 'upstream/main' into 5259_notifications-…

…panel--themed

.stylelintrc.js

@@ -16,6 +16,6 @@ module.exports = {
     'carbon/type-use': true,
 
     // CSS Logical properties
-    'csstools/use-logical': 'ignore',
+    'csstools/use-logical': true,
   },
 };

config/storybook-addon-carbon-theme/README.md

@@ -79,25 +79,25 @@ export { decorators, globals };
 @use '@carbon/styles' as styles;
 @use '@carbon/styles/scss/theme' as *;
 
-[storybook-carbon-theme] {
+[data-carbon-theme] {
   @include styles.theme(styles.$white);
 
   /* make sure background and color are set if theme in use */
   background-color: $background;
   color: $text-primary;
 }
 
-[storybook-carbon-theme='g10'],
+[data-carbon-theme='g10'],
 .sb--use-carbon-theme-g10 {
   @include styles.theme(styles.$g10);
 }
 
-[storybook-carbon-theme='g90'],
+[data-carbon-theme='g90'],
 .sb--use-carbon-theme-g90 {
   @include styles.theme(styles.$g90);
 }
 
-[storybook-carbon-theme='g100'],
+[data-carbon-theme='g100'],
 .sb--use-carbon-theme-g100 {
   @include styles.theme(styles.$g100);
 }
@@ -116,7 +116,7 @@ $feature-flags: (
 @import "carbon-components/scss/globals/scss/styles";
 @import "@carbon/themes/scss/themes";
 
-[storybook-carbon-theme] {
+[data-carbon-theme] {
   background: $ui-background;
   color: $ui-01;
 
@@ -126,22 +126,22 @@ $feature-flags: (
   );
 }
 
-[storybook-carbon-theme="g10"] {
+[data-carbon-theme="g10"] {
   @include carbon--theme(
     $theme: $carbon--theme--g10,
     $emit-custom-properties: true
   );
 }
 
-[storybook-carbon-theme="g90"] {
+[data-carbon-theme="g90"] {
   z-index: 90;
   @include carbon--theme(
     $theme: $carbon--theme--g90,
     $emit-custom-properties: true
   );
 }
 
-[storybook-carbon-theme="g100"] {
+[data-carbon-theme="g100"] {
   @include carbon--theme(
     $theme: $carbon--theme--g100,
     $emit-custom-properties: true

config/storybook-addon-carbon-theme/src/decorators/withCarbonTheme.js

@@ -23,7 +23,7 @@ export const withCarbonTheme = (StoryFn, context) => {
     const rootElements = document.querySelectorAll(selector);
     rootElements.forEach((rootElement) => {
       rootElement.setAttribute(
-        'storybook-carbon-theme',
+        'data-carbon-theme',
         globalCarbonTheme ?? storyCarbonTheme
       );
     });

packages/core/.storybook/index.scss

@@ -23,7 +23,7 @@
 
 @use './Annotation/annotation';
 
-// Setting attribute storybook-carbon-theme="XXX" on the html element
+// Setting attribute data-carbon-theme="XXX" on the html element
 // will set the carbon theme used for the storybook pane.
 // Adding class sb--use-carbon-theme-XXX on any element
 // will set the carbon theme used within that element.

packages/core/.storybook/preview.js

@@ -43,13 +43,14 @@ const decorators = [
       globals,
       parameters: { styles },
     } = context;
-    const { theme } = globals;
+    const { theme, dir } = globals;
     const story = storyFn();
     JSON.stringify(args.featureFlags);
 
     useEffect(() => {
       document.documentElement.setAttribute('data-carbon-theme', theme);
-    }, [theme]);
+      document.documentElement.dir = dir;
+    }, [theme, dir]);
 
     return (
       <div className="preview-position-fix story-wrapper">
@@ -154,6 +155,32 @@ const argTypes = {
 };
 
 const globalTypes = {
+  dir: {
+    name: 'Text direction',
+    description: 'Set the text direction for the story',
+    defaultValue: 'ltr',
+    toolbar: {
+      icon: 'transfer',
+      title: 'Text direction',
+      items: [
+        {
+          right: '🔄',
+          title: 'auto',
+          value: 'auto',
+        },
+        {
+          right: '➡️',
+          title: 'left-to-right (ltr)',
+          value: 'ltr',
+        },
+        {
+          right: '⬅️',
+          title: 'right-to-left (rtl)',
+          value: 'rtl',
+        },
+      ],
+    },
+  },
   theme: {
     name: 'Theme',
     description: 'Set the global theme for displaying components',