@kaizen/components 1.49.3 → 1.51.0

package/locales/zh.json

@@ -21,6 +21,18 @@
     "description" : "Label for the 'date to' field",
     "message" : "结束日期"
   },
+  "filterMultiSelectSearchInput.label" : {
+    "description" : "Label for the search input",
+    "message" : "按搜索查询筛选选项"
+  },
+  "filterMultiSelectSearchInput.placeholder" : {
+    "description" : "Placeholder for the search input",
+    "message" : "搜索…"
+  },
+  "inputSearch.clear" : {
+    "description" : "Label for the clear search button",
+    "message" : "清除搜索"
+  },
   "kzErrorPage" : {
     "description" : "Label for contact button",
     "message" : "联系支持人员"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.49.3",
+  "version": "1.51.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -96,7 +96,7 @@
     "tslib": "^2.6.3",
     "tsx": "^4.15.1",
     "@kaizen/design-tokens": "10.4.1",
-    "@kaizen/package-bundler": "1.1.1"
+    "@kaizen/package-bundler": "1.1.2"
   },
   "devDependenciesComments": {
     "postcss": "Installed in root",

package/src/Filter/FilterMultiSelect/subcomponents/SearchInput/SearchInput.tsx

@@ -1,4 +1,5 @@
 import React, { useId } from "react"
+import { useIntl } from "@cultureamp/i18n-react-intl"
 import { InputSearch } from "~components/Input/InputSearch"
 import { useSelectionContext } from "../../context"
 import styles from "./SearchInput.module.scss"
@@ -14,6 +15,7 @@ export const SearchInput = ({
   id,
   isLoading,
 }: SearchInputProps): JSX.Element => {
+  const { formatMessage } = useIntl()
   const { setSearchQuery, searchQuery } = useSelectionContext()
 
   const handleChange: React.ChangeEventHandler<HTMLInputElement> = e => {
@@ -25,13 +27,24 @@ export const SearchInput = ({
   const reactId = useId()
   const inputId = id ?? reactId
 
+  const defaultAriaLabel = formatMessage({
+    id: "filterMultiSelectSearchInput.label",
+    defaultMessage: "Filter options by search query",
+    description: "Label for the search input",
+  })
+  const placeholder = formatMessage({
+    id: "filterMultiSelectSearchInput.placeholder",
+    defaultMessage: "Search…",
+    description: "Placeholder for the search input",
+  })
+
   return (
     <div className={styles.inputSearchContainer}>
       <InputSearch
         id={inputId}
-        aria-label={label ?? "Filter options by search query"}
+        aria-label={label ?? defaultAriaLabel}
         secondary
-        placeholder="Search…"
+        placeholder={placeholder}
         value={searchQuery}
         onChange={handleChange}
         onClear={handleClear}

package/src/Input/InputSearch/InputSearch.tsx

@@ -1,4 +1,5 @@
 import React, { InputHTMLAttributes, useRef } from "react"
+import { useIntl } from "@cultureamp/i18n-react-intl"
 import classnames from "classnames"
 import { ClearButton } from "~components/ClearButton"
 import { SearchIcon } from "~components/Icon/SearchIcon"
@@ -29,12 +30,20 @@ export const InputSearch = (props: InputSearchProps): JSX.Element => {
     secondary = false,
     ...restProps
   } = props
+  const { formatMessage } = useIntl()
   const inputRef = useRef<HTMLInputElement>(null)
 
   const handleOnClear = (): void => {
     inputRef.current?.focus()
     onClear && onClear()
   }
+
+  const clearButtonLabel = formatMessage({
+    id: "inputSearch.clear",
+    defaultMessage: "Clear search",
+    description: "Label for the clear search button",
+  })
+
   return (
     <div
       className={classnames(
@@ -78,7 +87,7 @@ export const InputSearch = (props: InputSearchProps): JSX.Element => {
           onClick={handleOnClear}
           disabled={disabled}
           classNameOverride={styles.endIconAdornment}
-          aria-label="clear search"
+          aria-label={clearButtonLabel}
         />
       )}
     </div>

package/src/TitleBlockZen/TitleBlockZen.module.scss

@@ -171,17 +171,7 @@ $tab-container-height-medium-and-small-collapsed: 0;
 .titleTextOverride.titleTextOverride {
   padding: 4px 0;
 
-  @media (max-width: $breadcrumb-breakpoint-width) {
-    font-family: $typography-heading-2-font-family;
-    font-weight: $typography-heading-2-font-weight;
-    font-size: $typography-heading-2-font-size;
-    line-height: $typography-heading-2-line-height;
-    letter-spacing: $typography-heading-2-letter-spacing;
-  }
-
   @include title-block-under-1366 {
-    font-family: $typography-heading-2-font-family;
-    font-weight: $typography-heading-2-font-weight;
     font-size: $typography-heading-2-font-size;
     line-height: $typography-heading-2-line-height;
     letter-spacing: $typography-heading-2-letter-spacing;
@@ -190,8 +180,6 @@ $tab-container-height-medium-and-small-collapsed: 0;
 
   .hasLongTitle & {
     @include title-block-under-1366 {
-      font-family: $typography-heading-3-font-family;
-      font-weight: $typography-heading-3-font-weight;
       font-size: $typography-heading-3-font-size;
       line-height: $typography-heading-3-line-height;
       letter-spacing: $typography-heading-3-letter-spacing;
@@ -200,8 +188,6 @@ $tab-container-height-medium-and-small-collapsed: 0;
   }
 
   @include title-block-medium-and-small {
-    font-family: $typography-heading-4-font-family;
-    font-weight: $typography-heading-4-font-weight;
     font-size: $typography-heading-4-font-size;
     line-height: $typography-heading-4-line-height;
     letter-spacing: $typography-heading-4-letter-spacing;

package/src/TitleBlockZen/TitleBlockZen.tsx

@@ -329,7 +329,7 @@ export const TitleBlockZen = ({
                       <div className={styles.titleAndSubtitleInner}>
                         <div className={styles.title}>
                           <Heading
-                            variant="heading-1"
+                            variant="composable-header-title"
                             color={isReversed(variant) ? "white" : "dark"}
                             classNameOverride={styles.titleTextOverride}
                             data-automation-id={titleAutomationId}

package/src/TitleBlockZen/_docs/TitleBlockZen.stories.tsx

@@ -98,6 +98,60 @@ export const Playground: Story = {
   },
 }
 
+export const Viewports: Story = {
+  parameters: {
+    viewport: {
+      viewports: {
+        default: {
+          name: "Above or equal to 1366",
+          styles: { width: "1366px", height: "800px" },
+          type: "desktop",
+        },
+        under1366: {
+          name: "Under 1366",
+          styles: { width: "1365px", height: "800px" },
+          type: "desktop",
+        },
+        mediumSmall: {
+          name: "Medium and small",
+          styles: { width: "1079px", height: "800px" },
+          type: "desktop",
+        },
+      },
+      defaultViewport: "default",
+    },
+    chromatic: {
+      disable: false,
+      viewports: [1079, 1365, 1366],
+    },
+  },
+}
+
+export const HasLongTitle: Story = {
+  parameters: {
+    viewport: {
+      viewports: {
+        default: {
+          name: "Above or equal to 1366",
+          styles: { width: "1366px", height: "800px" },
+          type: "desktop",
+        },
+        under1366: {
+          name: "Under 1366",
+          styles: { width: "1365px", height: "800px" },
+          type: "desktop",
+        },
+      },
+      defaultViewport: "default",
+    },
+    chromatic: {
+      disable: false,
+      viewports: [1365, 1366],
+    },
+  },
+  args: { title: "A long title with over thirty characters" },
+}
+
 export const StickerSheetDefault: Story = {
   parameters: {
     docs: {