From 1328c0b3df5b2a8cf0b1d6d26c6bcbcf2f694ba7 Mon Sep 17 00:00:00 2001 From: ZakaryH Date: Thu, 11 Dec 2025 10:56:28 -0800 Subject: [PATCH] add data attr implementations for demonstration purposes --- docs/components/Page/Web.stories.tsx | 9 +++++++++ packages/components/src/Button/Button.tsx | 4 ++++ packages/components/src/Heading/Heading.tsx | 4 ++++ packages/components/src/Page/Page.tsx | 17 ++++++++++++++--- packages/components/src/Text/Text.tsx | 4 ++++ .../components/src/Typography/Typography.tsx | 4 ++++ 6 files changed, 39 insertions(+), 3 deletions(-) diff --git a/docs/components/Page/Web.stories.tsx b/docs/components/Page/Web.stories.tsx index 6d4dd482d8..bbe59c6ac7 100644 --- a/docs/components/Page/Web.stories.tsx +++ b/docs/components/Page/Web.stories.tsx @@ -52,10 +52,19 @@ const PopoverTemplate: ComponentStory = args => { return ( <> setShowPrimaryPopover(true), ref: primaryDivRef, + "data-test-id": "primary-action", }} secondaryAction={{ label: "Trigger Drink Popover", diff --git a/packages/components/src/Button/Button.tsx b/packages/components/src/Button/Button.tsx index ed64fa31be..f8e3efe061 100644 --- a/packages/components/src/Button/Button.tsx +++ b/packages/components/src/Button/Button.tsx @@ -6,6 +6,7 @@ import { useButtonStyles } from "./useButtonStyles"; // eslint-disable-next-line import/no-deprecated import { ButtonContent, ButtonIcon, ButtonLabel } from "./ButtonInternals"; import { ButtonProvider } from "./ButtonProvider"; +import { filterDataAttributes } from "../sharedHelpers/filterDataAttributes"; function Button(props: ButtonProps) { const { size } = props; @@ -38,6 +39,7 @@ function ButtonWrapper(props: ButtonProps) { UNSAFE_className = {}, UNSAFE_style = {}, children, + ...rest } = props; const { combined } = useButtonStyles(props); @@ -45,6 +47,7 @@ function ButtonWrapper(props: ButtonProps) { const buttonType: HTMLButtonType = submit ? "submit" : "button"; const buttonClassNames = classnames(combined, UNSAFE_className.container); + const dataAttributes = filterDataAttributes(rest); const tagProps = { className: buttonClassNames, @@ -66,6 +69,7 @@ function ButtonWrapper(props: ButtonProps) { "aria-expanded": ariaExpanded, "aria-label": ariaLabel, role: role, + ...dataAttributes, }; const buttonInternals = children || ; diff --git a/packages/components/src/Heading/Heading.tsx b/packages/components/src/Heading/Heading.tsx index 269fd55403..95bb5c387f 100644 --- a/packages/components/src/Heading/Heading.tsx +++ b/packages/components/src/Heading/Heading.tsx @@ -2,6 +2,7 @@ import type { ReactNode } from "react"; import React from "react"; import type { TypographyOptions, TypographyProps } from "../Typography"; import { Typography } from "../Typography"; +import { filterDataAttributes } from "../sharedHelpers/filterDataAttributes"; type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6; @@ -59,7 +60,9 @@ export function Heading({ maxLines = "unlimited", UNSAFE_className, UNSAFE_style, + ...rest }: HeadingProps) { + const dataAttributes = filterDataAttributes(rest); const levelMap: LevelMap = { 1: { element: "h1", @@ -117,6 +120,7 @@ export function Heading({ numberOfLines={maxLineToNumber[maxLines]} UNSAFE_className={UNSAFE_className} UNSAFE_style={UNSAFE_style} + {...dataAttributes} > {children} diff --git a/packages/components/src/Page/Page.tsx b/packages/components/src/Page/Page.tsx index cb1ad849ad..ddbef80276 100644 --- a/packages/components/src/Page/Page.tsx +++ b/packages/components/src/Page/Page.tsx @@ -11,6 +11,7 @@ import { Markdown } from "../Markdown"; import { Button, type ButtonProps } from "../Button"; import { Menu, type SectionProps } from "../Menu"; import { Emphasis } from "../Emphasis"; +import type { CommonAtlantisProps } from "../sharedHelpers/types"; export type ButtonActionProps = ButtonProps & { ref?: React.RefObject; @@ -68,6 +69,11 @@ interface PageFoundationProps { * Page title Action menu. */ readonly moreActionsMenu?: SectionProps[]; + + readonly dataAttributes?: { + title: CommonAtlantisProps["dataAttributes"]; + intro: CommonAtlantisProps["dataAttributes"]; + }; } interface PageWithIntroProps extends PageFoundationProps { @@ -101,6 +107,7 @@ export function Page({ primaryAction, secondaryAction, moreActionsMenu = [], + dataAttributes, }: PageProps) { const pageStyles = classnames(styles.page, styles[width]); const [titleBarRef, { width: titleBarWidth = Breakpoints.large }] = @@ -141,11 +148,15 @@ export function Page({
{typeof title === "string" && titleMetaData ? (
- {title} + + {title} + {titleMetaData}
) : typeof title === "string" ? ( - {title} + + {title} + ) : ( title )} @@ -183,7 +194,7 @@ export function Page({ )}
{intro && ( - + ) { + const dataAttributes = filterDataAttributes(rest); const textColors = { default: "text", subdued: "textSecondary", @@ -91,6 +94,7 @@ export function Text({ align={align} UNSAFE_className={UNSAFE_className} UNSAFE_style={UNSAFE_style} + {...dataAttributes} > {children} diff --git a/packages/components/src/Typography/Typography.tsx b/packages/components/src/Typography/Typography.tsx index 158a3034d0..539392c456 100644 --- a/packages/components/src/Typography/Typography.tsx +++ b/packages/components/src/Typography/Typography.tsx @@ -12,6 +12,7 @@ import alignment from "./css/TextAlignment.module.css"; import fontFamilies from "./css/FontFamilies.module.css"; import underlineStyles from "./css/Underline.module.css"; import type { UnderlineStyle, UnderlineStyleWithColor } from "./types"; +import { filterDataAttributes } from "../sharedHelpers/filterDataAttributes"; export interface TypographyProps { readonly id?: string; @@ -94,7 +95,9 @@ export function Typography({ underline, UNSAFE_className, UNSAFE_style, + ...rest }: TypographyProps) { + const dataAttributes = filterDataAttributes(rest); const shouldTruncateText = numberOfLines && numberOfLines > 0; const className = classnames( styles.base, @@ -130,6 +133,7 @@ export function Typography({ ...underlineInlineStyles, ...UNSAFE_style?.textStyle, }} + {...dataAttributes} > {children}