playbook_ui 13.12.0 → 13.13.0.pre.alpha.PLAY1090csstokens1675

data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import  useCollapsible from './useCollapsible'
 
 import { globalProps } from '../utilities/globalProps'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 import CollapsibleContent from './child_kits/CollapsibleContent'
 import CollapsibleMain from './child_kits/CollapsibleMain'
@@ -22,6 +22,7 @@ type CollapsibleProps = {
   iconSize?: IconSizes,
   onIconClick?: ()=> void,
   onClick?: ()=> void,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
 }
 
@@ -33,6 +34,7 @@ const Collapsible = ({
   children = [],
   collapsed = true,
   data = {},
+  htmlOptions = {},
   icon,
   iconColor = 'default',
   iconSize,
@@ -60,6 +62,7 @@ const Collapsible = ({
   const { children: contentChildren, ...contentProps } = Content.props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_collapsible_kit'),
     globalProps(props),
@@ -70,6 +73,7 @@ const Collapsible = ({
       <div
           {...ariaProps}
           {...dataProps}
+          {...htmlProps}
           className={classes}
           id={id}
       >

data/app/pb_kits/playbook/pb_contact/_contact.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
@@ -51,6 +51,7 @@ type ContactProps = {
   contactType?: string,
   contactValue: string,
   data?: object,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
 }
 
@@ -62,9 +63,11 @@ const Contact = (props: ContactProps) => {
     contactType,
     contactValue,
     data = {},
+    htmlOptions = {},
     id } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_contact_kit'),
     globalProps(props),
@@ -74,6 +77,7 @@ const Contact = (props: ContactProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_currency/_currency.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { globalProps } from '../utilities/globalProps'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
@@ -18,6 +18,7 @@ type CurrencyProps = {
   data?: {[key:string]:string},
   decimals?: 'default' | 'matching',
   emphasized?: boolean,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   label?: string,
   size?: 'sm' | 'md' | 'lg',
@@ -42,6 +43,7 @@ const Currency = (props: CurrencyProps) => {
     data = {},
     decimals = 'default',
     emphasized = true,
+    htmlOptions = {},
     id,
     unit,
     className,
@@ -65,6 +67,7 @@ const Currency = (props: CurrencyProps) => {
   const [whole, decimal = '00'] = amount.split('.')
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_currency_kit', align, size),
     globalProps(props),
@@ -96,6 +99,7 @@ const Currency = (props: CurrencyProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
@@ -12,6 +12,7 @@ type DashboardValueProps = {
   aria?: { [key: string]: string },
   className?: string,
   data?: { [key: string]: string },
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   statChange?: {
     change? : 'increase' | 'decrease' | 'neutral',
@@ -30,6 +31,7 @@ const DashboardValue = (props: DashboardValueProps): React.ReactElement => {
     aria = {},
     className,
     data = {},
+    htmlOptions = {},
     id,
     statChange = {},
     statLabel,
@@ -38,6 +40,7 @@ const DashboardValue = (props: DashboardValueProps): React.ReactElement => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_dashboard_value_kit', align),
     globalProps(props),
@@ -48,6 +51,7 @@ const DashboardValue = (props: DashboardValueProps): React.ReactElement => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_date/_date.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import classnames from "classnames";
 
-import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
 import DateTime from '../pb_kit/dateTime';
 
@@ -15,6 +15,7 @@ type PbDateProps = {
   aria?: { [key: string]: string };
   className?: string;
   data?: { [key: string]: string };
+  htmlOptions?: { [key: string]: string | number | boolean | Function };
   id?: string;
   showDayOfWeek?: boolean;
   showIcon?: boolean;
@@ -29,6 +30,7 @@ const PbDate = (props: PbDateProps) => {
     alignment = "left",
     className,
     data = {},
+    htmlOptions = {},
     id,
     showDayOfWeek = false,
     showIcon = false,
@@ -43,8 +45,9 @@ const PbDate = (props: PbDateProps) => {
   const year = DateTime.toYear(value);
   const currentYear = new Date().getFullYear();
 
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
 
   const classes = classnames(
     buildCss("pb_date_kit", alignment),
@@ -53,10 +56,12 @@ const PbDate = (props: PbDateProps) => {
   );
 
   return (
-    <div {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
+    <div 
+      {...ariaProps}
+      {...dataProps}
+      {...htmlProps}
+      className={classes}
+      id={id}
     >
       {unstyled
         ? <>

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import classnames from 'classnames'
 
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
 
 import datePickerHelper from './date_picker_helper'
@@ -25,6 +25,7 @@ type DatePickerProps = {
   format?: string,
   hideIcon?: boolean,
   hideLabel?: boolean,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   inLine?: boolean,
   inputAria?: { [key: string]: string },
@@ -67,6 +68,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     format = 'm/d/Y',
     hideIcon = false,
     hideLabel = false,
+    htmlOptions = {},
     id,
     inLine = false,
     inputAria = {},
@@ -95,6 +97,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const inputAriaProps = buildAriaProps(inputAria)
   const inputDataProps = buildDataProps(inputData)
 
@@ -158,6 +161,7 @@ useEffect(() => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import classnames from "classnames";
 
 import { globalProps } from "../utilities/globalProps";
-import { buildCss, buildDataProps } from "../utilities/props";
+import { buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import DateTime from '../pb_kit/dateTime';
 
 import Body from "../pb_body/_body";
@@ -16,6 +16,7 @@ type DateRangeInlineProps = {
   align?: "left" | "center" | "vertical";
   size?: "sm" | "xs";
   dark?: boolean;
+  htmlOptions?: {[key: string]: string | number | boolean | Function};
   icon?: boolean;
   startDate?: Date;
   endDate?: Date;
@@ -40,6 +41,7 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
     size = "sm",
     align = "left",
     data = {},
+    htmlOptions = {},
     startDate,
     endDate,
     className,
@@ -79,6 +81,7 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
 
   const dateRangeClasses = buildCss("pb_date_range_inline_kit", align);
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const renderTime = (date: Date) => {
     return (
       <time dateTime={dateTimeIso(date)}>
@@ -94,6 +97,7 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
   return (
     <div
         {...dataProps}
+        {...htmlProps}
         className={classnames(dateRangeClasses, globalProps(props), className)}
     >
       <div className="pb_date_range_inline_wrapper">

data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildCss, buildDataProps } from '../utilities/props'
+import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
@@ -15,21 +15,32 @@ type DateRangeStackedProps = {
   data?: string,
   dark?: boolean,
   endDate: Date,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   startDate: Date,
 }
 
 const DateRangeStacked = (props: DateRangeStackedProps) => {
-  const { className, dark = false, endDate, startDate, data={} } = props
+  const { 
+    className, 
+    dark = false, 
+    endDate, 
+    htmlOptions={},
+    startDate, 
+    data={},
+  } = props
   const css = classnames(
     buildCss('pb_date_range_stacked'),
     globalProps(props),
     className
   )
-  const dataProps = buildDataProps(data)
+   const dataProps = buildDataProps(data)
+   const htmlProps = buildHtmlProps(htmlOptions)
 
   return (
-    <div {...dataProps}
+    <div 
+        {...dataProps}
+        {...htmlProps}
         className={css}
     >
       <Flex vertical="center">

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import classnames from "classnames";
-import { buildCss, buildDataProps } from "../utilities/props";
+import { buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
 import DateTime from '../pb_kit/dateTime';
 
@@ -15,6 +15,7 @@ type DateStackedProps = {
   dark?: boolean;
   data?: string;
   date: Date;
+  htmlOptions?: { [key: string]: string | number | boolean | Function };
   size?: "sm" | "md";
   id?: string;
   reverse?: boolean;
@@ -34,6 +35,7 @@ const DateStacked = (props: DateStackedProps) => {
     dark = false,
     date,
     data={},
+    htmlOptions={},
     size = "sm",
   } = props;
   const classes = classnames(
@@ -48,12 +50,15 @@ const DateStacked = (props: DateStackedProps) => {
   const currentYear = new Date().getFullYear()
   const inputYear = DateTime.toYear(date);
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
 
   return (
     <>
       {bold == false ? (
-        <div {...dataProps}
-            className={classes}
+        <div 
+          {...dataProps}
+          {...htmlProps}
+          className={classes}
         >
           <div className="pb_date_stacked_day_month">
             <Caption text={DateTime.toMonth(date).toUpperCase()} />
@@ -66,8 +71,10 @@ const DateStacked = (props: DateStackedProps) => {
           {currentYear != inputYear && <Caption size="xs">{inputYear}</Caption>}
         </div>
       ) : (
-          <div {...dataProps}
-              className={classes}
+          <div 
+            {...dataProps}
+            {...htmlProps}
+            className={classes}
           >
             <div className="pb_date_stacked_day_month">
               <Title

data/app/pb_kits/playbook/pb_date_time/_date_time.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Flex from '../pb_flex/_flex'
@@ -14,6 +14,7 @@ type DateTimeProps = {
   className?: string,
   data?: { [key: string]: string; },
   datetime: Date,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   size?: "sm" | "md",
   showDayOfWeek: boolean,
@@ -27,6 +28,7 @@ const DateTime = (props: DateTimeProps) => {
     aria = {},
     className,
     data = {},
+    htmlOptions = {},
     showDayOfWeek = false,
     datetime,
     id,
@@ -37,6 +39,7 @@ const DateTime = (props: DateTimeProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_date_time', size),
     globalProps(props),
@@ -47,6 +50,7 @@ const DateTime = (props: DateTimeProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx

@@ -1,7 +1,7 @@
 
 import React from 'react'
 
-import { buildCss } from '../utilities/props'
+import { buildCss, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, globalProps } from '../utilities/globalProps'
 
 import Flex from '../pb_flex/_flex'
@@ -11,6 +11,7 @@ import TimeStacked from '../pb_time_stacked/_time_stacked'
 import DateStacked from '../pb_date_stacked/_date_stacked'
 
 type DateTimeStackedProps = {
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   date: Date,
   datetime: Date,
@@ -25,15 +26,18 @@ const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
     date,
     datetime,
     dark,
+    htmlOptions = {},
     timeZone = 'America/New_York',
   } = props
 
   const classes = buildCss('pb_date_time_stacked_kit', globalProps(props))
+  const htmlProps = buildHtmlProps(htmlOptions)
 
   return (
     <Flex
         inline={false}
         vertical="stretch"
+        {...htmlProps}
         {...props}
     >
       <FlexItem>

data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildCss, buildDataProps } from '../utilities/props'
+import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 import DateTime from '../pb_kit/dateTime';
 
@@ -14,20 +14,31 @@ type DateYearStackedProps = {
   dark?: boolean,
   data?: string,
   date: Date,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
 }
 
 const DateYearStacked = (props: DateYearStackedProps) => {
-  const { align = 'left', className, dark = false, date, data={} } = props
+  const { 
+    align = 'left', 
+    className, 
+    dark = false, 
+    date, 
+    data={},
+    htmlOptions = {}, 
+  } = props
   const css = classnames(
     buildCss('pb_date_year_stacked', align),
     globalProps(props),
     className
   )
-  const dataProps = buildDataProps(data)
+   const dataProps = buildDataProps(data)
+   const htmlProps = buildHtmlProps(htmlOptions)
 
   return (
-    <div {...dataProps}
+    <div 
+        {...dataProps}
+        {...htmlProps}
         className={css}
     >
       <Title

data/app/pb_kits/playbook/pb_detail/_detail.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 type DetailProps = {
@@ -11,6 +11,7 @@ type DetailProps = {
   color?: 'light' | 'default' | 'lighter' | 'link' | 'error' | 'success',
   dark?: boolean,
   data?: { [key: string]: string },
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
   text?: string,
@@ -24,6 +25,7 @@ const Detail = (props: DetailProps) => {
     className,
     color = 'light',
     data = {},
+    htmlOptions = {},
     id = '',
     tag = 'div',
     text= ''
@@ -31,6 +33,7 @@ const Detail = (props: DetailProps) => {
 
   const ariaProps: {[key: string]: any} = buildAriaProps(aria)
   const dataProps: {[key: string]: any} = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions);
   const isBold = bold ? "bold" : null
   const classes = classnames(
     buildCss('pb_detail_kit', color),
@@ -44,6 +47,7 @@ const Detail = (props: DetailProps) => {
     <Tag
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_dialog/_dialog.tsx

@@ -5,7 +5,7 @@ import React, { useState } from "react";
 import classnames from "classnames";
 import Modal from "react-modal";
 
-import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
 
 import Body from "../pb_body/_body";
@@ -26,6 +26,7 @@ type DialogProps = {
   closeable: boolean;
   confirmButton?: string;
   data?: object;
+  htmlOptions?: { [key: string]: string | number | boolean | Function };
   id?: string;
   fullHeight?: boolean;
   loading?: boolean;
@@ -51,6 +52,7 @@ const Dialog = (props: DialogProps) => {
     confirmButton,
     className,
     data = {},
+    htmlOptions = {},
     id,
     size = "md",
     children,
@@ -69,7 +71,8 @@ const Dialog = (props: DialogProps) => {
     trigger,
   } = props;
   const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
+   const dataProps = buildDataProps(data)
+   const htmlProps = buildHtmlProps(htmlOptions);
   const dialogClassNames = {
     base: classnames("pb_dialog", buildCss("pb_dialog", size, placement)),
     afterOpen: "pb_dialog_after_open",
@@ -164,7 +167,12 @@ const Dialog = (props: DialogProps) => {
 
   return (
     <DialogContext.Provider value={api}>
-      <div {...ariaProps} {...dataProps} className={classes}>
+      <div 
+        {...ariaProps} 
+        {...dataProps}
+        {...htmlProps} 
+        className={classes}
+      >
         <Modal
           ariaHideApp={false}
           className={dialogClassNames}

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildCss } from '../../utilities/props'
+import { buildCss, buildHtmlProps } from '../../utilities/props'
 import { GlobalProps, globalProps } from '../../utilities/globalProps'
 
 import Flex from '../../pb_flex/_flex'
@@ -13,6 +13,7 @@ type DialogFooterProps = {
   children: React.ReactChild[] | React.ReactChild | string,
   className?: string,
   data?: {[key: string]: string},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   padding?: string,
   paddingBottom?: string,
@@ -26,15 +27,19 @@ const DialogFooter = (props: DialogFooterProps) => {
   const {
     children,
     className,
+    htmlOptions = {},
     spacing = "between",
     separator = false,
   } = props
 
   const footerCSS = buildCss("dialog_footer")
   const footerSpacing = globalProps(props)
+  const htmlProps = buildHtmlProps(htmlOptions)
 
   return (
-    <>
+    <div 
+      {...htmlProps}
+    >
       {separator &&
         <SectionSeparator />
       }
@@ -46,7 +51,7 @@ const DialogFooter = (props: DialogFooterProps) => {
       >
         {children}
       </Flex>
-    </>
+    </div>
   )
 }
 

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../../utilities/props'
 import { globalProps, GlobalProps } from '../../utilities/globalProps'
 
 import { CloseIcon } from '../_close_icon'
@@ -14,6 +14,7 @@ type DialogHeaderProps = {
   className?: string,
   closeable?: boolean,
   data?: object,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   padding?: string,
   separator?: boolean,
@@ -28,6 +29,7 @@ const DialogHeader = (props: DialogHeaderProps) => {
     children,
     className,
     data = {},
+    htmlOptions = {},
     spacing = "between",
     closeable = true,
     separator = true,
@@ -35,6 +37,7 @@ const DialogHeader = (props: DialogHeaderProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const api = useContext(DialogContext)
   const headerCSS = buildCss("dialog_header")
   const headerSpacing = globalProps(props)
@@ -46,6 +49,7 @@ const DialogHeader = (props: DialogHeaderProps) => {
       <Flex
           {...ariaProps}
           {...dataProps}
+          {...htmlProps}
           className={classnames(headerCSS, headerSpacing, className)}
           spacing={spacing}
       >