style(React): fix linting issues with storybook styles

carbon-design-system · Sep 5, 2023 · 8285514 · 8285514
1 parent 9d78e2f
commit 8285514
Show file tree

Hide file tree

Showing 16 changed files with 63 additions and 56 deletions.
diff --git a/packages/react/src/components/AspectRatio/AspectRatio-story.scss b/packages/react/src/components/AspectRatio/AspectRatio-story.scss
@@ -4,9 +4,8 @@
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
-
 .aspect-ratio-story .bx--aspect-ratio,
 .aspect-ratio-story .cds--aspect-ratio {
-  background: #f7f1ff;
   padding: 1rem;
+  background: #f7f1ff;
 }
diff --git a/packages/react/src/components/DataTable/stories/dynamic-content/story.scss b/packages/react/src/components/DataTable/stories/dynamic-content/story.scss
@@ -1,3 +1,3 @@
 .demo-expanded-td td {
-  padding-left: 4rem;
+  padding-inline-start: 4rem;
 }
diff --git a/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion-story.scss b/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion-story.scss
@@ -3,10 +3,12 @@
 
 .demo-inner-container-header {
   @include type.type-style('heading-compact-01');
+
   color: theme.$text-primary;
 }
 
 .demo-inner-container-content {
   @include type.type-style('body-01');
+
   color: theme.$text-secondary;
 }
diff --git a/packages/react/src/components/FileUploader/FileUploader-story.scss b/packages/react/src/components/FileUploader/FileUploader-story.scss
@@ -1,3 +1,3 @@
 .bx--file__selected-file {
-  width: 288px;
+  inline-size: 288px;
 }
diff --git a/packages/react/src/components/FluidTextInput/test.scss b/packages/react/src/components/FluidTextInput/test.scss
@@ -1,11 +1,11 @@
 .fluid-input-wrapper {
   display: flex;
-  width: 100%;
   justify-content: space-between;
-  margin-bottom: 2rem;
+  inline-size: 100%;
+  margin-block-end: 2rem;
 }
 
 .fluid-input-wrapper > * {
-  width: 33%;
   margin: 0 1rem;
+  inline-size: 33%;
 }
diff --git a/packages/react/src/components/FormLabel/form-label-stories.scss b/packages/react/src/components/FormLabel/form-label-stories.scss
@@ -1,11 +1,11 @@
 .form-wrapper {
-  padding-left: 10rem;
-  padding-top: 3rem;
+  padding-block-start: 3rem;
+  padding-inline-start: 10rem;
 }
 
 .notification {
-  margin-top: 7rem;
-  margin-left: 10rem;
+  margin-block-start: 7rem;
+  margin-inline-start: 10rem;
 }
 
 .notification .cds--actionable-notification__action-button {

diff --git a/packages/react/src/components/Grid/FlexGrid.stories.scss b/packages/react/src/components/Grid/FlexGrid.stories.scss
@@ -2,23 +2,23 @@
 
 // base of project work area
 #root > #templates > div:first-child {
-  width: 100%;
+  inline-size: 100%;
 }
 
 // grid styles
 .cds--grid .outside {
-  min-height: 80px;
-  height: 100%;
+  block-size: 100%;
+  min-block-size: 80px;
 }
 
 .cds--grid .inside {
-  min-height: 80px;
-  height: 100%;
+  block-size: 100%;
+  min-block-size: 80px;
 }
 
 // hack to enable zoom feature to trigger
 .cds--grid--full-width {
-  max-width: 100%;
+  max-inline-size: 100%;
 }
 
 .default .cds--col code {
@@ -82,6 +82,6 @@
 
 #templates .cds--css-grid [class*='col'] {
   background-color: #edf4ff;
+  min-block-size: 80px;
   outline: 1px solid #a6c8ff;
-  min-height: 80px;
 }
diff --git a/packages/react/src/components/Grid/Grid.stories.scss b/packages/react/src/components/Grid/Grid.stories.scss
@@ -20,7 +20,7 @@
   }
 
   .cds--css-grid p:first-of-type {
-    margin-top: 0;
+    margin-block-start: 0;
   }
 
   // Narrow
@@ -36,11 +36,10 @@
   }
 
   .cds--subgrid {
-    outline: 1px solid black;
-    padding-top: 2rem;
-    padding-bottom: 2rem;
     position: relative;
     background: #eef4ff;
+    outline: 1px solid black;
+    padding-block: 2rem;
   }
 
   .cds--css-grid,
@@ -51,12 +50,14 @@
   .cds--css-grid--narrow,
   .cds--subgrid--narrow {
     --grid-mode-color: #20d5d2;
+
     background: $green-10;
   }
 
   .cds--css-grid--condensed,
   .cds--subgrid--condensed {
     --grid-mode-color: #bb8eff;
+
     background: $purple-10;
   }
 
@@ -70,14 +71,15 @@
 
   .cds--subgrid::before {
     @include type-style('code-01');
+
     position: absolute;
-    inset-block-start: 0;
-    inset-inline-start: 0;
     display: block;
-    content: 'subgrid';
+    padding: 0.125rem 0.25rem;
     background: var(--grid-mode-color, #97c1ff);
     color: $black;
-    padding: 0.125rem 0.25rem;
+    content: 'subgrid';
+    inset-block-start: 0;
+    inset-inline-start: 0;
   }
 
   // Column
@@ -86,7 +88,8 @@
 
     background: $white;
     box-shadow: 0 0 0 1px var(--border-color);
-    min-height: 80px;
+
+    min-block-size: 80px;
   }
 
   .cds--css-grid--narrow .cds--css-grid-column,

diff --git a/packages/react/src/components/Grid/__tests__/Grid-test.e2e.scss b/packages/react/src/components/Grid/__tests__/Grid-test.e2e.scss
@@ -9,7 +9,7 @@
 p {
   @include type-style('body-short-02');
 
-  margin-top: $spacing-05;
+  margin-block-start: $spacing-05;
 }
 
 // Grid modes
@@ -24,7 +24,7 @@ p {
 
 p:first-of-type:not(.cds--progress-label) {
   //messing up progress indicator stories
-  margin-top: 0;
+  margin-block-start: 0;
 }
 
 .cds--css-grid.cds--css-grid--condensed {
@@ -40,7 +40,7 @@ p:first-of-type:not(.cds--progress-label) {
 // Columns
 .cds--css-grid > [class*='col'],
 .cds--subgrid > [class*='col'] {
-  min-height: 80px;
+  min-block-size: 80px;
 }
 
 .cds--css-grid > [class*='col'] {

diff --git a/packages/react/src/components/Icons/Icons.stories.scss b/packages/react/src/components/Icons/Icons.stories.scss
@@ -6,19 +6,19 @@
 //
 .demo-icon-example {
   display: flex;
-  width: 15rem;
   justify-content: space-between;
   margin: 2rem;
+  inline-size: 15rem;
 }
 
 .demo-icon-example:nth-child(1) svg {
-  min-width: 1rem;
+  min-inline-size: 1rem;
 }
 
 .demo-icon-example:nth-child(2) svg {
-  min-width: 1.25rem;
+  min-inline-size: 1.25rem;
 }
 
 .demo-icon-example:nth-child(3) svg {
-  min-width: 2rem;
+  min-inline-size: 2rem;
 }
diff --git a/packages/react/src/components/Popover/Popover.stories.js b/packages/react/src/components/Popover/Popover.stories.js
@@ -81,9 +81,12 @@ const PlaygroundStory = (props) => {
 export const TabTip = () => {
   const [open, setOpen] = useState(true);
   const [openTwo, setOpenTwo] = useState(false);
+  const align = document?.dir === 'rtl' ? 'bottom-right' : 'bottom-left';
+  const alignTwo = document?.dir === 'rtl' ? 'bottom-left' : 'bottom-right';
   return (
     <div className="popover-tabtip-story" style={{ display: 'flex' }}>
       <Popover
+        align={align}
         open={open}
         onKeyDown={(evt) => {
           if (match(evt, keys.Escape)) {
@@ -126,7 +129,7 @@ export const TabTip = () => {
       <Popover
         open={openTwo}
         isTabTip
-        align="bottom-right"
+        align={alignTwo}
         onRequestClose={() => setOpenTwo(false)}>
         <button
           aria-label="Settings"

diff --git a/packages/react/src/components/Popover/story.scss b/packages/react/src/components/Popover/story.scss
@@ -56,15 +56,15 @@
 }
 
 .mb-3 {
-  margin-bottom: 1rem;
+  margin-block-end: 1rem;
 }
 
 .mt-9 {
-  padding-top: 3rem;
+  padding-block-start: 3rem;
 }
 
 .mt-10 {
-  padding-top: 4rem;
+  padding-block-start: 4rem;
 }
 
 .p-3 {
@@ -75,9 +75,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 2rem;
-  height: 2rem;
   border: 1px solid theme.$border-subtle;
+  block-size: 2rem;
+  inline-size: 2rem;
 }
 
 .playground-trigger svg {
@@ -87,7 +87,8 @@
 .popover-title {
   @include component-reset.reset;
   @include type.type-style('heading-compact-01');
-  margin-bottom: spacing.$spacing-01;
+
+  margin-block-end: spacing.$spacing-01;
 }
 
 .popover-details {
@@ -96,27 +97,27 @@
 }
 
 .popover-story {
-  width: 100%;
-  height: 100%;
   display: flex;
   flex-direction: column;
+  block-size: 100%;
+  inline-size: 100%;
 }
 
 .popover-tabtip-story .cds--popover-content.p-3 {
-  width: 16rem;
+  inline-size: 16rem;
 }
 
 .popover-tabtip-story .cds--radio-button-wrapper {
-  margin-bottom: 0.5rem;
+  margin-block-end: 0.5rem;
 }
 
 .popover-tabtip-story hr {
   border: none;
-  background: theme.$border-subtle;
-  height: 1px;
   margin: 8px 0 16px;
+  background: theme.$border-subtle;
+  block-size: 1px;
 }
 
 .popover-tabtip-story .cds--popover-container:last-of-type {
-  margin-left: 15rem;
+  margin-inline-start: 15rem;
 }
diff --git a/packages/react/src/components/Theme/Theme-story.scss b/packages/react/src/components/Theme/Theme-story.scss
@@ -21,7 +21,7 @@
 }
 
 .theme-layer-header {
-  margin-bottom: 1rem;
+  margin-block-end: 1rem;
 }
 
 .theme-with-layer {

diff --git a/packages/react/src/components/Tile/tile-story.scss b/packages/react/src/components/Tile/tile-story.scss
@@ -5,5 +5,5 @@
 }
 
 div .bx--tile--selectable:not(:last-child) {
-  margin-bottom: 1rem;
+  margin-block-end: 1rem;
 }
diff --git a/packages/react/src/components/Tooltip/story.scss b/packages/react/src/components/Tooltip/story.scss
@@ -16,8 +16,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 250px;
   margin: auto;
+  min-block-size: 250px;
 }
 
 .sb-tooltip-trigger {
@@ -26,9 +26,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 2rem;
-  height: 2rem;
   border: 1px solid theme.$border-subtle;
+  block-size: 2rem;
+  inline-size: 2rem;
 }
 
 .sb-tooltip-trigger svg {
@@ -37,7 +37,7 @@
 
 // DefinitionTooltip
 .sb-definition-tooltip {
-  max-width: 60ch;
+  max-inline-size: 60ch;
 }
 
 .sb-definition-tooltip p {

diff --git a/packages/react/src/components/TreeView/story.scss b/packages/react/src/components/TreeView/story.scss
@@ -4,7 +4,6 @@
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
-
 .cds--tree {
-  width: 20rem;
+  inline-size: 20rem;
 }