@kaizen/components 1.67.0 → 1.67.2

package/src/TextField/_docs/TextField.stickersheet.stories.tsx

@@ -34,7 +34,7 @@ const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <StickerSheet isReversed={isReversed}>
       <StickerSheet.Header
-        headings={["Default", "Hover", "Active", "Focus"]}
+        headings={["Default", "Hover", "Active", "Focus", "Disabled"]}
         hasVerticalHeadings
       />
       <StickerSheet.Body>
@@ -71,6 +71,14 @@ const StickerSheetTemplate: StickerSheetStory = {
               validationMessage="A valid question"
               data-sb-pseudo-styles="focus"
             />
+            <TextFieldExampleGroup
+              reversed={isReversed}
+              labelText="TextField"
+              description="A short description"
+              status={status}
+              validationMessage="A valid question"
+              disabled
+            />
           </StickerSheet.Row>
         ))}
       </StickerSheet.Body>

package/src/Tile/subcomponents/GenericTile/GenericTile.module.scss

@@ -13,19 +13,18 @@ $tilePaddingTop: $spacing-xl;
 }
 
 .tile {
+  position: relative;
   width: $tileWidth;
-
-  [data-tile-grid] & {
-    width: auto;
-  }
-
   height: $tileHeight;
-  position: relative;
-  box-shadow: $shadow-small-box-shadow;
-  background-color: $color-white;
   transition: transform $ca-duration-slow $ca-default;
   transform-style: preserve-3d;
+  box-shadow: $shadow-small-box-shadow;
   border-radius: 7px;
+  background-color: $color-white;
+
+  [data-tile-grid] & {
+    width: auto;
+  }
 
   @include ca-media-mobile {
     width: 100%;

package/src/TitleBlockZen/TitleBlockZen.module.scss

@@ -115,14 +115,13 @@ $tab-container-height-medium-and-small-collapsed: 0;
   align-items: center;
   min-width: 0; // this is an important trick to prevent flexbox items from overflowing
   z-index: $ca-z-index-dropdown; // this ensures the page switcher dropdown sits over nav tabs
+  transform: translateY(-0.0833em);
 
   .hasSubtitle & {
     @include title-block-under-1366 {
       transform: translateY(-0.3833em);
     }
   }
-
-  transform: translateY(-0.0833em);
 }
 
 .titleAndSubtitleInner {
@@ -243,13 +242,12 @@ $tab-container-height-medium-and-small-collapsed: 0;
   line-height: $typography-paragraph-small-line-height;
   letter-spacing: $typography-paragraph-small-letter-spacing;
   max-width: 230px;
+  margin-inline: var(--spacing-12) 0;
 
   .adminVariant & {
     color: $color-purple-800;
   }
 
-  @include ca-margin($start: calc(#{$ca-grid} / 2));
-
   @include title-block-under-1366 {
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -285,9 +283,7 @@ $tab-container-height-medium-and-small-collapsed: 0;
 
 .sectionTitleOverride.sectionTitleOverride {
   white-space: nowrap;
-
-  @include ca-margin($end: $ca-grid);
-
+  margin-inline: 0 var(--spacing-24);
   font-family: $typography-heading-2-font-family;
   font-weight: $typography-heading-2-font-weight;
   font-size: $typography-heading-2-font-size;
@@ -316,10 +312,6 @@ $tab-container-height-medium-and-small-collapsed: 0;
 }
 
 .sectionTitleDescription {
-  .sectionTitle + & {
-    margin-top: calc(#{$ca-grid} / 4);
-  }
-
   color: $color-white;
   max-width: 780px;
   font-family: $typography-paragraph-small-font-family;
@@ -328,6 +320,10 @@ $tab-container-height-medium-and-small-collapsed: 0;
   line-height: $typography-paragraph-small-line-height;
   letter-spacing: $typography-paragraph-small-letter-spacing;
 
+  .sectionTitle + & {
+    margin-top: var(--spacing-6);
+  }
+
   &.dark {
     color: rgba($color-purple-800-rgb, 0.7);
   }
@@ -360,30 +356,28 @@ $tab-container-height-medium-and-small-collapsed: 0;
 }
 
 .tag {
-  @include ca-margin($start: calc(#{$ca-grid} / 2));
-
   display: flex;
   align-items: center;
+  margin-inline: var(--spacing-12) 0;
 
   @include title-block-medium-and-small {
     display: none;
   }
 
   + .pageSwitcherSelectNextToTitle {
-    @include ca-margin($start: 0);
+    margin-inline-start: 0;
   }
 }
 
 .pageSwitcherSelectNextToTitle {
-  @include ca-margin($start: calc(#{$ca-grid} / 2));
-
   flex-shrink: 0;
-  width: 10 * $ca-grid;
+  width: var(--spacing-240);
+  margin-inline: var(--spacing-12) 0;
 }
 
 .pageSwitcherSelectUnderneathTitle {
   flex-shrink: 0;
-  max-width: 10 * $ca-grid;
+  max-width: var(--spacing-240);
 }
 
 .navigationTabsContainer {
@@ -558,11 +552,10 @@ $tab-container-height-medium-and-small-collapsed: 0;
 
   @media only screen and (max-width: $breadcrumb-breakpoint-width) {
     position: relative;
+    transform: translateY(0);
+    margin-inline: 0 var(--spacing-12);
 
-    @include ca-margin($end: calc(#{$ca-grid} / 2));
     @include ca-position($start: 0);
-
-    transform: translateY(0);
   }
 
   @include title-block-medium-and-small {

package/src/TitleBlockZen/subcomponents/MobileActions.module.scss

@@ -77,8 +77,6 @@ $slide-up-duration: 0.4s;
 }
 
 .mobileActionsPrimaryLabel {
-  @include ca-padding($start: $ca-grid * 0.75);
-
   text-align: left;
   text-decoration: none;
   color: $color-white;
@@ -87,6 +85,8 @@ $slide-up-duration: 0.4s;
   font-size: $typography-button-primary-font-size;
   line-height: $typography-button-primary-line-height;
   letter-spacing: $typography-button-primary-letter-spacing;
+
+  @include ca-padding($start: $ca-grid * 0.75);
 }
 
 .mobileActionsPrimaryButton,

package/src/__actions__/Button/v1/Button/_docs/Button.mdx

@@ -47,7 +47,7 @@ A disabled Button prevents user interaction. It doesn't appear in the tab order,
 
 Use any <LinkTo pageId="components-icons">Icon</LinkTo> component in the `icon` prop.
 
-<Canvas of={ButtonStories.Icon} />
+<Canvas of={ButtonStories.IconStory} />
 
 #### Icon position
 

package/src/__actions__/Button/v1/Button/_docs/Button.stickersheet.stories.tsx

@@ -8,7 +8,7 @@ import {
 import { Button, ButtonProps } from "../index"
 
 export default {
-  title: "Actions/Button/v1",
+  title: "Actions/Button/Button (v1)",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/__actions__/Button/v1/Button/_docs/Button.stories.tsx

@@ -6,7 +6,7 @@ import { Icon } from "~components/__future__/Icon"
 import { Button } from "../index"
 
 const meta = {
-  title: "Actions/Button/v1",
+  title: "Actions/Button/Button (v1)",
   component: Button,
   args: {
     label: "Label",

package/src/__actions__/Button/v1/IconButton/_docs/IconButton.stickersheet.stories.tsx

@@ -9,7 +9,7 @@ import {
 import { IconButton, IconButtonProps } from "../index"
 
 export default {
-  title: "Actions/IconButton/v1",
+  title: "Actions/IconButton/IconButton (v1)",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/__actions__/Button/v1/IconButton/_docs/IconButton.stories.tsx

@@ -4,7 +4,7 @@ import { Icon } from "~components/__future__/Icon"
 import { IconButton } from "../index"
 
 const meta = {
-  title: "Actions/IconButton/v1",
+  title: "Actions/IconButton/IconButton (v1)",
   component: IconButton,
   argTypes: {
     icon: {

package/src/__actions__/Button/v2/Button/_docs/Button.mdx

@@ -47,7 +47,7 @@ A disabled Button prevents user interaction. It doesn't appear in the tab order,
 
 Use any <LinkTo pageId="components-icons">Icon</LinkTo> component in the `icon` prop.
 
-<Canvas of={ButtonStories.Icon} />
+<Canvas of={ButtonStories.IconStory} />
 
 #### Icon position
 

package/src/__actions__/Button/v2/Button/_docs/Button.stories.tsx

@@ -6,7 +6,7 @@ import { Icon } from "~components/__future__/Icon"
 import { Button } from "../index"
 
 const meta = {
-  title: "Actions/Button/v2",
+  title: "Actions/Button/Button (v2)",
   component: Button,
   args: {
     label: "Label",

package/src/__actions__/Button/v2/IconButton/_docs/IconButton.stories.tsx

@@ -4,7 +4,7 @@ import { Icon } from "~components/__future__/Icon"
 import { IconButton } from "../index"
 
 const meta = {
-  title: "Actions/IconButton/v2",
+  title: "Actions/IconButton/IconButton (v2)",
   component: IconButton,
   argTypes: {
     icon: {

package/src/__actions__/Button/v3/_docs/ApiSpecification.mdx

@@ -3,7 +3,7 @@ import { ResourceLinks, SbContent, KAIOInstallation } from "~storybook/component
 import * as docsStories from "./Button.docs.stories"
 import * as exampleStories from "./Button.stories"
 
-<Meta title="Actions/Button/v3/API Specification" />
+<Meta title="Actions/Button/Button (v3)/API Specification" />
 
 <SbContent>
   # Button API Specification (v3)

package/src/__actions__/Button/v3/_docs/Button.docs.stories.tsx

@@ -5,7 +5,7 @@ import { ChevronDownIcon, ChevronUpIcon } from "~components/Icon"
 import { Button } from "../index"
 
 const meta = {
-  title: "Actions/Button/v3/Doc Assets",
+  title: "Actions/Button/Button (v3)/Doc Assets",
   component: Button,
   args: {
     children: "Label",

package/src/__actions__/Button/v3/_docs/Button.mdx

@@ -2,7 +2,7 @@ import { Canvas, Meta, Controls } from "@storybook/blocks"
 import { ResourceLinks, SbContent, Installation } from "~storybook/components"
 import * as Button from "./Button.stories"
 
-<Meta title="Actions/Button/v3/Usage Guidelines" />
+<Meta title="Actions/Button/Button (v3)/Usage Guidelines" />
 
 <SbContent>
   # Button (v3)

package/src/__actions__/Button/v3/_docs/Button.spec.stories.tsx

@@ -14,7 +14,7 @@ import { Button } from "../index"
 const onPressEvent = fn()
 
 const meta = {
-  title: "Actions/Button/v3/Tests",
+  title: "Actions/Button/Button (v3)/Tests",
   component: Button,
   args: {
     children: "Label",

package/src/__actions__/Button/v3/_docs/Button.stickersheet.stories.tsx

@@ -9,7 +9,7 @@ import {
 import { Button } from "../index"
 
 export default {
-  title: "Actions/Button/v3/Tests",
+  title: "Actions/Button/Button (v3)/Tests",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/__actions__/Button/v3/_docs/Button.stories.tsx

@@ -6,7 +6,7 @@ import { VisuallyHidden } from "~components/VisuallyHidden"
 import { Button } from "../index"
 
 const meta = {
-  title: "Actions/Button/v3",
+  title: "Actions/Button/Button (v3)",
   component: Button,
   args: {
     children: "Label",

package/src/__future__/Tag/RemovableTag/subcomponents/RemoveButton.module.scss

@@ -8,6 +8,7 @@
   position: relative;
   display: inline-flex;
   border-radius: 50%;
+  color: rgba($color-purple-800-rgb, 0.7);
 
   &:focus,
   &:focus-visible {
@@ -34,8 +35,6 @@
     border-radius: 50%;
   }
 
-  color: rgba($color-purple-800-rgb, 0.7);
-
   &:hover,
   &:focus,
   &:focus-visible {