@kaizen/components 1.63.1 → 1.64.0

package/dist/styles.css

@@ -27,36 +27,6 @@
 .OverlayArrow-module_overlayArrow__hoDyK.OverlayArrow-module_reversed__-WGcR path {
   fill: var(--color-white, #ffffff);
 }
-.Menu-module_menu__iHYqh {
-  background-color: var(--color-white);
-  color: var(--color-purple-800);
-  width: 248px;
-  max-height: 22rem;
-  overflow: auto;
-  padding-block: var(--spacing-6);
-  outline: none;
-  border-radius: var(--border-solid-border-radius);
-  box-shadow: var(--shadow-large-box-shadow);
-}
-
-.Menu-module_menu__iHYqh .react-aria-Header {
-  font-family: var(--typography-heading-6-font-family);
-  font-size: var(--typography-heading-6-font-size);
-  letter-spacing: var(--typography-heading-6-letter-spacing);
-  font-weight: var(--typography-heading-6-font-weight);
-  line-height: var(--typography-heading-6-line-height);
-  padding: var(--spacing-6) 10px;
-  margin-inline: var(--spacing-6);
-}
-
-.Menu-module_menu__iHYqh section:not(:last-of-type)::after {
-  width: 100%;
-  height: 1px;
-  background-color: var(--border-solid-border-color);
-  content: "";
-  display: block;
-  margin-block: var(--spacing-6);
-}
 .MenuItem-module_item__DPerF {
   font-family: var(--typography-paragraph-body-font-family);
   font-size: var(--typography-paragraph-body-font-size);
@@ -91,6 +61,36 @@
 .MenuItem-module_item__DPerF[data-disabled] {
   opacity: 0.3;
 }
+.Menu-module_menu__iHYqh {
+  background-color: var(--color-white);
+  color: var(--color-purple-800);
+  width: 248px;
+  max-height: 22rem;
+  overflow: auto;
+  padding-block: var(--spacing-6);
+  outline: none;
+  border-radius: var(--border-solid-border-radius);
+  box-shadow: var(--shadow-large-box-shadow);
+}
+
+.Menu-module_menu__iHYqh .react-aria-Header {
+  font-family: var(--typography-heading-6-font-family);
+  font-size: var(--typography-heading-6-font-size);
+  letter-spacing: var(--typography-heading-6-letter-spacing);
+  font-weight: var(--typography-heading-6-font-weight);
+  line-height: var(--typography-heading-6-line-height);
+  padding: var(--spacing-6) 10px;
+  margin-inline: var(--spacing-6);
+}
+
+.Menu-module_menu__iHYqh section:not(:last-of-type)::after {
+  width: 100%;
+  height: 1px;
+  background-color: var(--border-solid-border-color);
+  content: "";
+  display: block;
+  margin-block: var(--spacing-6);
+}
 .Button-module_button__QOSYH {
   --button-min-height-width: var(--spacing-48);
   --button-padding-x: calc(

package/dist/types/GuidanceBlock/GuidanceBlock.d.ts

@@ -6,6 +6,9 @@ import { TooltipProps } from "../__overlays__/Tooltip/v1";
 import { VariantType } from "./types";
 export type ActionProps = ButtonProps & {
     tooltip?: TooltipProps;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
 };
 type LayoutType = "default" | "inline" | "stacked";
 type IllustrationType = "spot" | "scene";

package/dist/types/Notification/InlineNotification/InlineNotification.d.ts

@@ -1,8 +1,8 @@
-import React from "react";
+import React, { HTMLAttributes } from "react";
 import { HeadingProps } from "../../Heading";
 import { OverrideClassName } from "../../types/OverrideClassName";
 import { GenericNotificationType, GenericNotificationVariant } from "../subcomponents/GenericNotification";
-export type InlineNotificationBase = OverrideClassName<{
+export type InlineNotificationBase = {
     children?: React.ReactNode;
     /** @default false */
     persistent?: boolean;
@@ -13,7 +13,7 @@ export type InlineNotificationBase = OverrideClassName<{
     forceMultiline?: boolean;
     headingProps?: HeadingProps;
     isSubtle?: boolean;
-}>;
+} & Omit<OverrideClassName<HTMLAttributes<HTMLDivElement>>, "style">;
 export type InlineNotificationProps = InlineNotificationBase & (GenericNotificationType | GenericNotificationVariant);
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093392/Inline+Notification Guidance} |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.63.1",
+  "version": "1.64.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -120,8 +120,8 @@
     "svgo": "^3.3.2",
     "tslib": "^2.6.3",
     "tsx": "^4.17.0",
-    "@kaizen/design-tokens": "10.6.1",
-    "@kaizen/package-bundler": "1.1.5"
+    "@kaizen/package-bundler": "1.1.5",
+    "@kaizen/design-tokens": "10.6.1"
   },
   "peerDependencies": {
     "@cultureamp/i18n-react-intl": "^2.5.9",

package/src/GuidanceBlock/GuidanceBlock.tsx

@@ -12,6 +12,9 @@ import styles from "./GuidanceBlock.module.scss"
 
 export type ActionProps = ButtonProps & {
   tooltip?: TooltipProps
+  "aria-label"?: string
+  "aria-labelledby"?: string
+  "aria-describedby"?: string
 }
 
 type LayoutType = "default" | "inline" | "stacked"

package/src/Notification/InlineNotification/InlineNotification.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
 import { HeadingProps } from "~components/Heading"
 import { OverrideClassName } from "~components/types/OverrideClassName"
@@ -9,7 +9,7 @@ import {
 } from "../subcomponents/GenericNotification"
 import styles from "../subcomponents/GenericNotification/GenericNotification.module.scss"
 
-export type InlineNotificationBase = OverrideClassName<{
+export type InlineNotificationBase = {
   children?: React.ReactNode
   /** @default false */
   persistent?: boolean
@@ -20,7 +20,8 @@ export type InlineNotificationBase = OverrideClassName<{
   forceMultiline?: boolean
   headingProps?: HeadingProps
   isSubtle?: boolean
-}>
+} & Omit<OverrideClassName<HTMLAttributes<HTMLDivElement>>, "style">
+// Omitted `style` above because GenericNotification has its own `style` prop
 
 export type InlineNotificationProps = InlineNotificationBase &
   (GenericNotificationType | GenericNotificationVariant)