@kaizen/components 0.0.0-canary-button-codemod-canary-20250212054517 → 0.0.0-canary-stacking-context-fix-20250225001220

package/dist/types/Filter/FilterBar/subcomponents/FilterBarButton/FilterBarButton.d.ts

@@ -9,7 +9,7 @@ export declare const FilterBarButton: React.ForwardRefExoticComponent<{
     label: string;
     selectedValue?: string | JSX.Element;
     isOpen?: boolean;
-} & Omit<import("../../../FilterButton/subcomponents/FilterButtonBase").FilterButtonBaseProps, "children"> & {
+} & Omit<import("../../../FilterButton").FilterButtonBaseProps, "children"> & {
     filterId: string;
     isRemovable: boolean | undefined;
 } & React.RefAttributes<FilterTriggerRef>>;

package/dist/types/Filter/FilterButton/index.d.ts

@@ -1,2 +1,3 @@
+export * from './subcomponents/FilterButtonBase';
 export * from './FilterButton';
 export * from './FilterButtonRemovable';

package/dist/types/Filter/FilterMultiSelect/types.d.ts

@@ -1,4 +1,4 @@
-import { type Key, type Node } from '@react-types/shared';
+import { type Key, type Node, type Selection as ReactAriaSelection } from '@react-types/shared';
 export type ItemType = {
     label: string;
     value: Key;
@@ -6,3 +6,4 @@ export type ItemType = {
     isDisabled?: boolean;
 };
 export type MultiSelectItem = Node<ItemType>;
+export type Selection = ReactAriaSelection;

package/dist/types/RichTextEditor/utils/commands/fixtures/helpers.d.ts

@@ -1,6 +1,5 @@
 import { type EditorState, type Transaction } from 'prosemirror-state';
 import { type ProseMirrorModel } from '../../prosemirror';
-export declare const mockRangeForBoundingRect: () => void;
 export declare const simulateRangeSelection: (anchorPositionStart?: number, anchorPositionEnd?: number) => (state: EditorState, dispatch?: (tx: Transaction) => void) => boolean;
 export declare const getStartNode: (state: EditorState) => ReturnType<ProseMirrorModel.Node["childAfter"]>;
 export declare const simulateSelectionOfCurrentElement: (selectEntireElement?: boolean) => (state: EditorState, dispatch: (tx: Transaction) => void) => boolean;

package/dist/types/RichTextEditor/utils/commands/fixtures/index.d.ts

@@ -0,0 +1,2 @@
+export * from './mockRangeForBoundingRect';
+export * from './helpers';

package/dist/types/RichTextEditor/utils/commands/fixtures/mockRangeForBoundingRect.d.ts

@@ -0,0 +1 @@
+export declare const mockRangeForBoundingRect: () => void;

package/dist/types/__rc__/Icon/constants.d.ts

@@ -2,4 +2,4 @@ export declare const handledRtlIcons: {
     checklist: "checklist_rtl";
     format_list_numbered: "format_list_numbered_rtl";
 };
-export declare const iconDefaultSet: ("add" | "add_a_photo" | "add_comment" | "add_link" | "arrow_back" | "arrow_downward" | "arrow_drop_down" | "arrow_drop_up" | "arrow_forward" | "arrow_upward" | "assignment" | "assignment_add" | "assignment_ind" | "assignment_returned" | "assignment_turned_in" | "backup" | "bar_chart" | "bookmark" | "brush" | "build" | "cached" | "cancel" | "chat_apps_script" | "chat_error" | "chat_paste_go" | "check" | "check_circle" | "chevron_left" | "chevron_right" | "close" | "close_fullscreen" | "cloud_download" | "comment_bank" | "content_copy" | "dashboard" | "date_range" | "delete" | "domain" | "draft" | "drag_indicator" | "edit" | "error" | "event" | "favorite" | "find_in_page" | "flag" | "flash_on" | "format_bold" | "format_indent_decrease" | "format_indent_increase" | "format_italic" | "format_list_bulleted" | "format_list_numbered" | "format_underlined" | "forum" | "forward" | "front_hand" | "grade" | "group" | "groups" | "help" | "history" | "home" | "horizontal_rule" | "info" | "key" | "keyboard_arrow_down" | "keyboard_arrow_up" | "keyboard_tab" | "keyboard_tab_rtl" | "label" | "lan" | "lightbulb" | "link_off" | "list" | "local_fire_department" | "lock" | "logout" | "mail" | "manage_accounts" | "menu" | "mms" | "more_horiz" | "more_vert" | "north_east" | "note_alt" | "notifications_active" | "open_in_full" | "open_in_new" | "pause" | "percent" | "person" | "person_add" | "person_cancel" | "person_check" | "play_circle" | "playlist_add_check" | "potted_plant" | "power" | "power_settings_new" | "print" | "privacy_tip" | "psychology_alt" | "radio_button_checked" | "radio_button_unchecked" | "rate_review" | "redo" | "reduce_capacity" | "refresh" | "remove" | "reviews" | "schedule" | "school" | "search" | "send" | "sensors" | "sentiment_dissatisfied" | "sentiment_neutral" | "sentiment_satisfied" | "sentiment_very_satisfied" | "settings" | "sms" | "south_east" | "star" | "support" | "thumb_down" | "thumb_up" | "today" | "translate" | "tune" | "undo" | "user_attributes" | "visibility" | "visibility_off" | "warning" | "zoom_in" | "zoom_out" | "auto_awesome")[];
+export declare const iconDefaultSet: ("add" | "add_a_photo" | "add_comment" | "add_link" | "arrow_back" | "arrow_downward" | "arrow_drop_down" | "arrow_drop_up" | "arrow_forward" | "arrow_upward" | "assignment" | "assignment_add" | "assignment_ind" | "assignment_returned" | "assignment_turned_in" | "backup" | "bar_chart" | "bookmark" | "brush" | "build" | "cached" | "cancel" | "chat_apps_script" | "chat_error" | "chat_paste_go" | "check" | "check_circle" | "chevron_left" | "chevron_right" | "close" | "close_fullscreen" | "cloud_download" | "comment_bank" | "content_copy" | "dashboard" | "date_range" | "delete" | "domain" | "draft" | "drag_indicator" | "edit" | "error" | "event" | "favorite" | "find_in_page" | "flag" | "flash_on" | "format_bold" | "format_indent_decrease" | "format_indent_increase" | "format_italic" | "format_list_bulleted" | "format_list_numbered" | "format_underlined" | "forum" | "forward" | "front_hand" | "grade" | "group" | "groups" | "help" | "history" | "home" | "horizontal_rule" | "info" | "key" | "keyboard_arrow_down" | "keyboard_arrow_up" | "keyboard_tab" | "keyboard_tab_rtl" | "label" | "lan" | "lightbulb" | "link_off" | "list" | "local_fire_department" | "lock" | "logout" | "mail" | "manage_accounts" | "menu" | "mms" | "more_horiz" | "more_vert" | "north_east" | "note_alt" | "notifications_active" | "open_in_full" | "open_in_new" | "pause" | "percent" | "person" | "person_add" | "person_cancel" | "person_check" | "play_circle" | "playlist_add_check" | "potted_plant" | "power" | "power_settings_new" | "print" | "privacy_tip" | "psychology_alt" | "radio_button_checked" | "radio_button_unchecked" | "rate_review" | "redo" | "reduce_capacity" | "refresh" | "remove" | "reviews" | "schedule" | "school" | "search" | "send" | "sensors" | "sentiment_dissatisfied" | "sentiment_neutral" | "sentiment_satisfied" | "sentiment_very_satisfied" | "settings" | "share" | "sms" | "south_east" | "star" | "support" | "thumb_down" | "thumb_up" | "today" | "translate" | "tune" | "undo" | "user_attributes" | "visibility" | "visibility_off" | "warning" | "zoom_in" | "zoom_out" | "auto_awesome")[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-button-codemod-canary-20250212054517",
+  "version": "0.0.0-canary-stacking-context-fix-20250225001220",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -81,6 +81,11 @@
       "require": "./dist/cjs/reactAriaComponentsV3.cjs",
       "types": "./dist/types/__react-aria-components__/index.d.ts"
     },
+    "./v3/utilities": {
+      "import": "./dist/esm/utilitiesV3.mjs",
+      "require": "./dist/cjs/utilitiesV3.cjs",
+      "types": "./dist/types/__utilities__/v3.d.ts"
+    },
     "./dist/styles.css": {
       "import": "./dist/styles.css",
       "require": "./dist/styles.css",

package/src/Filter/FilterButton/index.ts

@@ -1,2 +1,3 @@
+export * from './subcomponents/FilterButtonBase'
 export * from './FilterButton'
 export * from './FilterButtonRemovable'

package/src/Filter/FilterMultiSelect/types.ts

@@ -1,4 +1,4 @@
-import { type Key, type Node } from '@react-types/shared'
+import { type Key, type Node, type Selection as ReactAriaSelection } from '@react-types/shared'
 
 export type ItemType = {
   label: string
@@ -8,3 +8,5 @@ export type ItemType = {
 }
 
 export type MultiSelectItem = Node<ItemType>
+
+export type Selection = ReactAriaSelection

package/src/RichTextEditor/utils/commands/addMark.spec.ts

@@ -2,11 +2,7 @@ import { findByText, waitFor } from '@testing-library/dom'
 import { vi } from 'vitest'
 import { createRichTextEditor } from '../core'
 import { addMark } from './addMark'
-import {
-  mockRangeForBoundingRect,
-  simulateSelectionByText,
-  simulateTextInsert,
-} from './fixtures/helpers'
+import { mockRangeForBoundingRect, simulateSelectionByText, simulateTextInsert } from './fixtures/'
 import { testEditorState, testSchema } from './fixtures/test-state'
 describe('addMark()', () => {
   const onChange = vi.fn()

package/src/RichTextEditor/utils/commands/fixtures/helpers.ts

@@ -5,38 +5,7 @@ import {
   type Transaction,
 } from 'prosemirror-state'
 import { findChildrenByType } from 'prosemirror-utils'
-//  eslint-disable-next-line import/no-extraneous-dependencies
-import { vi } from 'vitest'
 import { type ProseMirrorModel } from '../../prosemirror'
-/*
- ** This is used handle the JSDom type error issue you may encounter in testing
- ** See https://github.com/jsdom/jsdom/issues/3002
- */
-export const mockRangeForBoundingRect = (): void => {
-  vi.spyOn(document, 'createRange').mockImplementation(() => {
-    const range = new Range()
-
-    range.getBoundingClientRect = () => ({
-      x: 0,
-      y: 0,
-      bottom: 0,
-      height: 0,
-      left: 0,
-      right: 0,
-      top: 0,
-      width: 0,
-      toJSON: () => undefined,
-    })
-
-    range.getClientRects = () => ({
-      item: () => null,
-      length: 0,
-      [Symbol.iterator]: vi.fn(),
-    })
-
-    return range
-  })
-}
 
 /*
  ** Prosemirror cannot intuit a real `Selection` of content injected into the base test.

package/src/RichTextEditor/utils/commands/fixtures/index.ts

@@ -0,0 +1,2 @@
+export * from './mockRangeForBoundingRect'
+export * from './helpers'

package/src/RichTextEditor/utils/commands/fixtures/mockRangeForBoundingRect.ts

@@ -0,0 +1,32 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { vi } from 'vitest'
+
+/*
+ ** This is used handle the JSDom type error issue you may encounter in testing
+ ** See https://github.com/jsdom/jsdom/issues/3002
+ */
+export const mockRangeForBoundingRect = (): void => {
+  vi.spyOn(document, 'createRange').mockImplementation(() => {
+    const range = new Range()
+
+    range.getBoundingClientRect = () => ({
+      x: 0,
+      y: 0,
+      bottom: 0,
+      height: 0,
+      left: 0,
+      right: 0,
+      top: 0,
+      width: 0,
+      toJSON: () => undefined,
+    })
+
+    range.getClientRects = () => ({
+      item: () => null,
+      length: 0,
+      [Symbol.iterator]: vi.fn(),
+    })
+
+    return range
+  })
+}

package/src/TitleBlockZen/TitleBlockZen.module.scss

@@ -114,7 +114,6 @@ $tab-container-height-medium-and-small-collapsed: 0;
   display: flex;
   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 & {
@@ -434,7 +433,7 @@ $tab-container-height-medium-and-small-collapsed: 0;
     width: $tab-container-height-small;
     height: $tab-container-height-small;
     background: linear-gradient(0deg, $color-purple-600, rgba($color-purple-600-rgb, 0));
-    z-index: $ca-z-index-sticky;
+    z-index: 1;
   }
 
   .adminVariant & {
@@ -503,7 +502,6 @@ $tab-container-height-medium-and-small-collapsed: 0;
   cursor: pointer;
   display: flex;
   position: absolute;
-  z-index: $ca-z-index-sticky;
   align-items: center;
   top: 50%;
   transform: translateY(-50%);
@@ -573,9 +571,6 @@ $tab-container-height-medium-and-small-collapsed: 0;
   // We are using visually hidden here instead of display:none so that a screen reader
   // navigating via 'read mode' (which doesn't trigger hover/focus) will still hear this link name
   @include visually-hidden;
-
-  z-index: $ca-z-index-sticky - 1;
-
   @include ca-position($start: -2 * $ca-grid);
 
   position: absolute;

package/src/__rc__/Button/_docs/Button--usage-guidelines.mdx

@@ -1,6 +1,10 @@
 import { Canvas, Meta, Controls } from '@storybook/blocks'
-import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import { ResourceLinks, KAIOInstallation, DosAndDonts, DoOrDont } from '~storybook/components'
 import * as Button from './Button.docs.stories'
+import ButtonIconOnlySpec from './assets/button_icon_only_spec.png'
+import ButtonIconSpec from './assets/button_icon_spec.png'
+import ButtonSpec from './assets/button_spec.png'
+import ButtonAnatomy from './assets/button_anatomy.png'
 
 <Meta title="Components/Button/Button (v3)/Usage Guidelines" />
 
@@ -27,3 +31,168 @@ Buttons allow users to perform an action. They have multiple styles for various
   include={['children', 'variant', 'size', 'isDisabled', 'icon', 'iconPosition']}
   className="mb-64"
 />
+
+## Anatomy
+
+<img
+  src={ButtonAnatomy}
+  alt="Indicates the anatomy of an Button component with text"
+  className="my-auto"
+/>
+
+### When to use
+
+Use buttons to communicate actions users can take. Each page should have only one primary button, and any remaining calls to action should use lower emphasis buttons.
+
+### When not to use
+
+Do not use buttons as navigational elements. Instead, use links when the desired action is to take the user to a new page.
+
+## Specs
+
+<img
+  src={ButtonSpec}
+  alt="Indicates the spacing specifications of a Button component with text"
+  className="my-auto"
+/>
+
+<img
+  src={ButtonIconSpec}
+  alt="Indicates the spacing specifications of a Button component with text and an icon"
+  className="my-auto"
+/>
+
+<img
+  src={ButtonIconOnlySpec}
+  alt="Indicates the spacing specifications of an icon-only Button"
+  className="my-auto"
+/>
+
+### Dos and don'ts
+
+#### Use primary buttons to highlight a single, important action
+
+Reserve the primary button for actions that are essential to an experience. Usually, use only one primary button on a page or section. These buttons give extra prominence and help establish a clear hierarchy.
+
+<DosAndDonts>
+  <DoOrDont story={Button.DoExamplePrimaryAndSecondary} />
+  <DoOrDont story={Button.DontExamplePrimaryAndSecondary} isDont />
+</DosAndDonts>
+
+#### Use secondary buttons for medium emphasis actions
+
+Use secondary buttons when the action requires less prominence, or if there are multiple actions with the same importance on a page or section.
+
+#### Use tertiary buttons to communicate action hierarchy
+
+Use tertiary buttons for less important actions within a group or section to help establish a clear hierarchy. Don't use tertiary buttons in isolation.
+
+#### Use large buttons for high emphasis
+
+Use large buttons sparingly within pages or sections where you need a high emphasis and prominent button to provide balance with other large elements. This might be on a landing page or a CTA in proximity to large headings.
+
+<DosAndDonts>
+  <DoOrDont story={Button.DoExampleCta} />
+</DosAndDonts>
+
+#### Use medium buttons most of the time
+
+Medium buttons are appropriate in most common contexts such as pairing with input fields.
+
+<DosAndDonts>
+  <DoOrDont story={Button.DoExampleDefaultToMediumSize} />
+  <DoOrDont story={Button.DontExampleDefaultToMediumSize} isDont />
+</DosAndDonts>
+
+#### Use small buttons in information rich contexts
+
+Use small buttons when space is limited, such as inside or adjacent to lists, tables, or data visualizations.
+
+Ensure clarity by prioritizing the most important actions. Think about how many buttons you use and where you put them. Don't overload your interface with too many buttons, as clustering buttons can confuse people.
+
+#### Use icons in Primary and Secondary buttons sparingly and consistently
+
+Overusing icons can create visual clutter and overwhelm users. Use them sparingly to highlight common and recognizable actions.
+
+<DosAndDonts>
+  <DoOrDont story={Button.DoExampleUseIconsSparingly} />
+  <DoOrDont story={Button.DontExampleUseIconsSparingly} isDont />
+</DosAndDonts>
+
+#### Always use icons in Tertiary buttons
+
+Without icons, tertiary buttons can look like plain text. Tertiary buttons must always use icons to support a button affordance and meet accessibility standards.
+
+<DosAndDonts>
+  <DoOrDont story={Button.DoExampleTertiaryButtonWithIcons} />
+  <DoOrDont story={Button.DontExampleTertiaryButtonWithIcons} isDont />
+</DosAndDonts>
+
+#### Use tooltips when the label is hidden
+
+When a button label is hidden and only an icon is used, show a tooltip on hover that displays the label text.
+
+<DosAndDonts>
+  <DoOrDont story={Button.DoExampleUseTooltips} />
+  <DoOrDont story={Button.DontExampleUseTooltips} isDont />
+</DosAndDonts>
+
+#### Use a menu button when all actions are equally important
+
+Group related actions in a menu. The action options should be closely related and make sense as a group. You can use any type or size of button based on the context.
+
+<DosAndDonts>
+  <DoOrDont story={Button.DoExampleMenuButton} />
+</DosAndDonts>
+
+#### Use a button and an overflow button when there is a most common or distinct action
+
+Highlight the most important, common, or a distinct action by using a button with text. Group related, less important actions in an overflow button. The action options should be closely related and make sense as a group. You can use any type or size of button based on the context. This pattern replaces Split Buttons.
+
+<DosAndDonts>
+  <DoOrDont story={Button.DoExampleKebabMenuButton} />
+</DosAndDonts>
+
+#### Write clear, action-oriented button labels
+
+Write button labels as concise verbs that clearly state the action and its outcome. Always align the button label with the language used elsewhere in the Platform to maintain consistency and clarity.
+Make sure that all your buttons begin with a strong verb (something that elicits an action from the user). Verbs indicate to a user what they’re about to see or do next.
+
+<DosAndDonts>
+  <DoOrDont story={Button.DoExampleClearAndConciseLabels} />
+  <DoOrDont story={Button.DontExampleClearAndConciseLabels} isDont />
+</DosAndDonts>
+
+A verb and noun combination gives users more context and can help guide them when the action they’re about to perform isn’t commonplace.
+
+<DosAndDonts>
+  <DoOrDont story={Button.DoExampleDeclareContext} />
+  <DoOrDont story={Button.DontExampleDeclareContext} isDont />
+</DosAndDonts>
+
+#### Write in sentence case with minimal punctuation
+
+All buttons should be in sentence case i.e. the first letter of the first word is capitalized and everything else is in lower case unless it’s a proper noun or feature name. Always err on the side of minimal punctuation, so leave out full stops and commas where possible.
+
+<DosAndDonts>
+  <DoOrDont story={Button.DoExampleMinimalPunctuation} />
+  <DoOrDont story={Button.DontExampleMinimalPunctuation} isDont />
+</DosAndDonts>
+
+#### Use second person
+
+Any buttons that include a personal pronoun should be written in the second person. Keep in mind that you shouldn’t use personal pronouns unless you’re asking the user to filter something. For example, “View your reports” vs “View all reports.”
+
+<DosAndDonts>
+  <DoOrDont story={Button.DoExampleSecondPerson} />
+  <DoOrDont story={Button.DontExampleSecondPerson} isDont />
+</DosAndDonts>
+
+#### Button labels should make sense in isolation
+
+If buttons on a page have the same label repeated multiple times, they should have distinct, accessible names that add context for users. This ensures better accessibility for screen reader users, who rely on descriptive labels to distinguish between actions.
+
+<DosAndDonts>
+  <DoOrDont story={Button.DoExampleFunctionalLabels} />
+  <DoOrDont story={Button.DontExampleFunctionalLabels} isDont />
+</DosAndDonts>