Skip to content

Commit

Permalink
feat: add ids to title block zen (#4469)
Browse files Browse the repository at this point in the history
* feat: add ids to component in TitleBlockZen

* chore: correct constants location and import

* chore: include changeset

* feat: add id to TitleBlockZen root div

* chore: clean up release note

* chore: prettier

---------

Co-authored-by: louiseliang <louise.liang@cultureamp.com>
  • Loading branch information
louiseliang and louiseliang authored Jan 10, 2024
1 parent 152b1b0 commit aebd4d3
Show file tree
Hide file tree
Showing 9 changed files with 28 additions and 0 deletions.
8 changes: 8 additions & 0 deletions .changeset/spotty-lemons-trade.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
"@kaizen/components": patch
---

`<MenuItem>`: accept id in props and pass it to child button/link
`<TitleBlockZen>`
- Add constant ids for TitleBlockZen's secondary menu and other actions menu in mobile view
- accept id in props to be assigned to the root div
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export type MenuItemProps = {
*/
isActive?: boolean
"data-testid"?: string
id?: string
}

export const MenuItem = ({
Expand All @@ -34,6 +35,7 @@ export const MenuItem = ({
target,
isActive,
"data-testid": dataTestId,
id,
}: MenuItemProps): JSX.Element => {
const wrappedLabel = <span className={styles.menuItem__Label}>{label}</span>
const iconNode = icon && <span className={styles.menuItem__Icon}>{icon}</span>
Expand All @@ -49,6 +51,7 @@ export const MenuItem = ({
return (
<li className={styles.menuListItem}>
<button
id={id}
type="button"
disabled={true}
className={className}
Expand All @@ -65,6 +68,7 @@ export const MenuItem = ({
return (
<li className={styles.menuListItem}>
<a
id={id}
href={href}
className={className}
target={target}
Expand All @@ -83,6 +87,7 @@ export const MenuItem = ({
return (
<li className={styles.menuListItem}>
<button
id={id}
type="button"
onClick={onClick}
className={className}
Expand Down
2 changes: 2 additions & 0 deletions packages/components/src/TitleBlockZen/TitleBlockZen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,7 @@ export const TitleBlockZen = ({
collapseNavigationAreaWhenPossible = false,
textDirection,
surveyStatus,
id,
titleAutomationId = "TitleBlock__Title",
avatarAutomationId = "TitleBlock__Avatar",
subtitleAutomationId = "TitleBlock__Subtitle",
Expand All @@ -281,6 +282,7 @@ export const TitleBlockZen = ({
return (
<>
<div
id={id}
className={classnames(
styles.titleBlock,
styles[`${variant}Variant`],
Expand Down
3 changes: 3 additions & 0 deletions packages/components/src/TitleBlockZen/constants.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export const TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID =
"title-block-secondary-menu"
export const TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID = "title-block-other-actions"
1 change: 1 addition & 0 deletions packages/components/src/TitleBlockZen/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export * from "./TitleBlockZen"
export * from "./subcomponents/NavigationTabs"
export * from "./types"
export * from "./constants"
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from "react"
import { Button, IconButton } from "~components/Button"
import { ChevronDownIcon, MeatballsIcon } from "~components/Icon"
import { Menu, MenuList } from "~components/Menu"
import { TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID } from "../constants"
import {
DefaultActionProps,
PrimaryActionProps,
Expand Down Expand Up @@ -159,6 +160,7 @@ export const MainActions = ({
align="right"
button={
<IconButton
id={TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID}
label="Open secondary menu"
reversed={reversed}
icon={<MeatballsIcon role="presentation" />}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { FocusOn } from "react-focus-on"
import { ButtonProps } from "~components/Button"
import { ChevronDownIcon, ChevronUpIcon } from "~components/Icon"
import { MenuItem, MenuList, MenuHeading } from "~components/Menu"
import { TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID } from "../constants"
import {
DefaultActionProps,
PrimaryActionProps,
Expand Down Expand Up @@ -88,6 +89,7 @@ const renderDefaultLink = (
key="title-block-mobile-actions-default-link"
data-automation-id="title-block-mobile-actions-default-link"
data-testid="title-block-mobile-actions-default-link"
id={defaultAction.id}
/>
)
}
Expand Down Expand Up @@ -398,6 +400,7 @@ const DrawerHandle = ({
className={styles.mobileActionsExpandButton}
onClick={toggleDisplay}
aria-expanded={isOpen}
id={TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID}
aria-label="Other actions"
>
{isOpen ? (
Expand Down Expand Up @@ -429,6 +432,7 @@ const DrawerHandle = ({
)}
onClick={toggleDisplay}
aria-expanded={isOpen}
id={TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID}
>
{renderDrawerHandleLabel("Other actions")}
<span className={styles.mobileActionsChevronSquare}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Button, IconButton } from "~components/Button"
import { ChevronDownIcon, MeatballsIcon } from "~components/Icon"
import { Menu, MenuList } from "~components/Menu"
import styles from "../TitleBlockZen.module.scss"
import { TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID } from "../constants"
import { SecondaryActionsProps, TitleBlockMenuItemProps } from "../types"
import { TitleBlockMenuItem } from "./TitleBlockMenuItem"
import { Toolbar } from "./Toolbar"
Expand All @@ -26,6 +27,7 @@ const renderSecondaryOverflowMenu = (
label="Open secondary menu"
reversed={reversed}
icon={<MeatballsIcon role="presentation" />}
id={TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID}
/>
}
>
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/TitleBlockZen/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export type TitleBlockProps = {
collapseNavigationAreaWhenPossible?: boolean
textDirection?: TextDirection
surveyStatus?: SurveyStatus
id?: string
titleAutomationId?: string
breadcrumbAutomationId?: string
breadcrumbTextAutomationId?: string
Expand Down

0 comments on commit aebd4d3

Please sign in to comment.