playbook_ui 13.12.0 → 13.13.0.pre.alpha.PLAY1090csstokens1675

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5274804bb3a050a4c0649d20d667e714fed94f191bb3dbb8bf2476198a83e0a7
-  data.tar.gz: e6ea6a7dbfff42131377ee9ee4a6ecbac3bee1a69f34923dbb0e11c44ff25911
+  metadata.gz: d4f5112d15fbd1aea3bd5aeed163b6daa26b0862336eceb9ec28a88aae96ae08
+  data.tar.gz: fdb0fa976c88bc864f92f0be7b5fb40989b66fb9207e763ebc3870397fe50c69
 SHA512:
-  metadata.gz: a69c18f1d029ac13eaff14aceda3b01e96004eab1621cdccfc9c46e47a6041f83bfa797cb422221c4604c306da163dc8248e775ac1606377ee3e586a3989879d
-  data.tar.gz: 975179da601fbf2a3a3abf924c59e4bc307938dfa9fabbd45ddee638d1bd2729f8dd62d256eba2a4e0d2a0884c29d8d8d5b8ca6d106c6ef51301a0a0dfb9fd45
+  metadata.gz: 5c8898ab19ba131fb88110e5fc2b238496ed3c7c7a3d62a5da7c39d8db69d78ffe9aa8e70034c7f8ec9b94ae87a79293abdbe159fa358536d61724d307b34e1f
+  data.tar.gz: ba5c98b0229c3f43470c57016c3fee4313bf2320f9c39351a7c302b178425fb87a6db3b7874f59abeb3a8c067edfd35205d8ef95aa0014b0a50e23da3f7ab38e

data/app/pb_kits/playbook/index.js

@@ -130,4 +130,16 @@ export { default as dialogHelper } from './pb_dialog/dialogHelper'
 
 //Theming
 export {default as mapTheme} from './pb_map/pbMapTheme'
-export {default as useCollapsible} from './pb_collapsible/useCollapsible'
+export {default as useCollapsible} from './pb_collapsible/useCollapsible'
+
+// CSS Tokens
+export { default as borderRadius } from './tokens/exports/_border_radius.scss'
+export { default as colors } from './tokens/exports/_colors.scss'
+export { default as lineHeight } from './tokens/exports/_line_height.scss'
+export { default as opacity } from './tokens/exports/_opacity.scss'
+export { default as positioning } from './tokens/exports/_positioning.scss'
+export { default as scale } from './tokens/exports/_scale.scss'
+export { default as screenSizes } from './tokens/exports/_screen_sizes.scss'
+export { default as shadows } from './tokens/exports/_shadows.scss'
+export { default as spacing } from './tokens/exports/_spacing.scss'
+export { default as typography } from './tokens/exports/_typography.scss'

data/app/pb_kits/playbook/pb_avatar/_avatar.tsx

@@ -1,7 +1,7 @@
 import React, { useState } 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 Image from '../pb_image/_image'
@@ -12,6 +12,7 @@ export type AvatarProps = {
   className?: string,
   data?: {[key: string]: string},
   dark?: boolean,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   imageAlt?: string,
   imageUrl?: string,
@@ -30,6 +31,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
     aria = {},
     className,
     data = {},
+    htmlOptions = {},
     name = null,
     id = '',
     imageAlt = '',
@@ -40,6 +42,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
   } = props
   const dataProps: {[key: string]: any} = buildDataProps(data)
   const ariaProps: {[key: string]: any} = buildAriaProps(aria)
+  const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss('pb_avatar_kit', `size_${size}`),
     globalProps(props),
@@ -58,6 +61,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.tsx

@@ -6,8 +6,8 @@ import classnames from 'classnames'
 import {
   buildAriaProps,
   buildCss,
-  buildDataProps,
-} from '../utilities/props'
+  buildDataProps, 
+  buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Avatar from '../pb_avatar/_avatar'
@@ -20,6 +20,7 @@ type AvatarActionButtonProps = {
   className?: string,
   dark?: boolean,
   data?: Object,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   imageAlt?: string,
   imageUrl?: string,
@@ -38,6 +39,7 @@ const AvatarActionButton = (props: AvatarActionButtonProps) => {
     className,
     dark = false,
     data = {},
+    htmlOptions = {},
     id,
     imageAlt = '',
     imageUrl,
@@ -50,6 +52,7 @@ const AvatarActionButton = (props: AvatarActionButtonProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
 
   const classes = classnames(buildCss(
     'pb_avatar_action_button_kit',
@@ -68,6 +71,7 @@ const AvatarActionButton = (props: AvatarActionButtonProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } 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 BackgroundProps = {
@@ -23,6 +23,7 @@ type BackgroundProps = {
   className?: string,
   customColor?: string,
   data?: {[key: string]: string},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col',
@@ -74,6 +75,7 @@ const Background = (props: BackgroundProps) => {
     className,
     customColor,
     data = {},
+    htmlOptions = {},
     id,
     imageUrl = '',
     tag = 'div',
@@ -113,6 +115,7 @@ const Background = (props: BackgroundProps) => {
     imageUrl: resImageUrl,
   } = responsiveProps;
 
+
   // Build CSS classes and styles using responsive values.
   const classes = classnames(
     buildCss('pb_background_kit'),
@@ -137,16 +140,17 @@ const Background = (props: BackgroundProps) => {
   const Tag: React.ReactElement | any = `${tag}`;
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
-
- 
+  const htmlProps = buildHtmlProps(htmlOptions);
+  
   return (
     <Tag
-      alt={alt}
-      style={backgroundStyle}
       {...ariaProps}
       {...dataProps}
+      {...htmlProps}
+      alt={alt}
       className={classes}
       id={id}
+      style={backgroundStyle}
     >
       {children}
     </Tag>

data/app/pb_kits/playbook/pb_badge/_badge.tsx

@@ -6,7 +6,7 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
-} from '../utilities/props'
+  buildHtmlProps } from '../utilities/props'
 
 import Icon from '../pb_icon/_icon'
 
@@ -19,6 +19,7 @@ type BadgeProps = {
     onTouchEnd?: React.TouchEventHandler<HTMLSpanElement>,
   },
   data?: {[key: string]: string},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   removeIcon?: boolean,
   removeOnClick?: React.MouseEventHandler<HTMLSpanElement>,
@@ -32,6 +33,7 @@ const Badge = (props: BadgeProps) => {
     className,
     closeProps = {},
     data = {},
+    htmlOptions = {},
     id,
     removeIcon = false,
     removeOnClick,
@@ -41,6 +43,7 @@ const Badge = (props: BadgeProps) => {
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const css = classnames(
     buildCss('pb_badge_kit', variant === "success" ? "success_sm" : variant, rounded ? 'rounded' : null),
     globalProps(props),
@@ -51,6 +54,7 @@ const Badge = (props: BadgeProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={css}
         id={id}
     >

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { globalProps } from "../utilities/globalProps";
-import { buildAriaProps, buildDataProps } from "../utilities/props";
+import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
 
 import HighchartsReact from "highcharts-react-official";
 import Highcharts from "highcharts";
@@ -19,6 +19,7 @@ type BarGraphProps = {
   yAxisMax: number;
   chartData: { name: string; data: number[] }[];
   className?: string;
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id: any;
   pointStart: number | any;
   subTitle?: string;
@@ -46,6 +47,7 @@ const BarGraph = ({
   chartData,
   className = "pb_bar_graph",
   colors,
+  htmlOptions = {},
   id,
   pointStart,
   subTitle,
@@ -64,7 +66,8 @@ const BarGraph = ({
   ...props
 }: BarGraphProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions);
   const setupTheme = () => {
     dark
       ? Highcharts.setOptions(highchartsDarkTheme)
@@ -135,6 +138,7 @@ const BarGraph = ({
           id: id,
           ...ariaProps,
           ...dataProps,
+          ...htmlProps
         }}
         highcharts={Highcharts}
         options={options}

data/app/pb_kits/playbook/pb_body/_body.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 { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
 
 import Highlight from '../pb_highlight/_highlight'
@@ -15,6 +15,7 @@ type BodyProps = {
   data?: {[key: string]: string},
   highlightedText?: string[],
   highlighting?: boolean,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   status?: 'neutral' | 'negative' | 'positive',
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
@@ -33,6 +34,7 @@ const Body = (props: BodyProps): React.ReactElement => {
     data = {},
     highlightedText = [],
     highlighting = false,
+    htmlOptions = {},
     id = '',
     status = null,
     tag = 'div',
@@ -43,6 +45,7 @@ const Body = (props: BodyProps): React.ReactElement => {
 
   const ariaProps: {[key: string]: any} = buildAriaProps(aria)
   const dataProps: {[key: string]: any} = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions);
   const isTruncated = truncate ? `truncate_${truncate}` : ''
   const classes = classnames(
     buildCss('pb_body_kit', color, variant, status, isTruncated),
@@ -56,6 +59,7 @@ const Body = (props: BodyProps): React.ReactElement => {
     <Tag
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumb_item.tsx

@@ -8,12 +8,13 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
-} from '../utilities/props'
+  buildHtmlProps } from '../utilities/props'
 
 type BreadCrumbItemProps = {
   aria?: {[key: string]: string},
   className?: string,
   data?: object,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   component?: "a" | "span",
   [x:string]: any;
@@ -25,12 +26,14 @@ const BreadCrumbItem = (props: BreadCrumbItemProps) => {
     aria = {},
     className,
     data = {},
+    htmlOptions = {},
     id,
     component = 'a',
     ...rest
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const Component = component || 'span';
   const css = classnames(
     buildCss('pb_bread_crumb_item_kit'),
@@ -42,6 +45,7 @@ const BreadCrumbItem = (props: BreadCrumbItemProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={css}
         id={id}
     >

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.tsx

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps'
@@ -8,12 +6,14 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
+  buildHtmlProps
 } from '../utilities/props'
 
 type BreadCrumbsProps = {
   aria?: {[key: string]: string},
   className?: string,
   data?: object,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   text?: string,
   children?: React.ReactChild[] | React.ReactNode,
@@ -23,11 +23,13 @@ const BreadCrumbs = (props: BreadCrumbsProps) => {
     aria = { label: 'Breadcrumb Navigation' },
     className,
     data = {},
+    htmlOptions = {},
     id,
     children,
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const css = classnames(
     buildCss('pb_bread_crumbs_kit'),
     globalProps(props),
@@ -38,6 +40,7 @@ const BreadCrumbs = (props: BreadCrumbsProps) => {
     <nav
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={css}
         id={id}
     >

data/app/pb_kits/playbook/pb_button/_button.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { isValidEmoji } from '../utilities/validEmojiChecker'
 
@@ -21,6 +21,7 @@ type ButtonPropTypes = {
   form?: string,
   fullWidth?: boolean,
   highlight?: boolean,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   icon?: string,
   iconRight?: boolean,
   id?: string,
@@ -73,6 +74,7 @@ const Button = (props: ButtonPropTypes) => {
     count,
     data = {},
     disabled,
+    htmlOptions = {},
     icon = null,
     iconRight = false,
     id,
@@ -91,6 +93,8 @@ const Button = (props: ButtonPropTypes) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+
   const css = classnames(
     buttonClassName(props),
     globalProps(props),
@@ -148,6 +152,7 @@ const Button = (props: ButtonPropTypes) => {
         <a
           {...ariaProps}
           {...dataProps}
+          {...htmlProps}
           className={css}
           href={link}
           id={id}
@@ -164,6 +169,7 @@ const Button = (props: ButtonPropTypes) => {
         <button
           {...ariaProps}
           {...dataProps}
+          {...htmlProps}
           className={css}
           disabled={disabled}
           form={form}
@@ -199,6 +205,7 @@ const Button = (props: ButtonPropTypes) => {
         <button
           {...ariaProps}
           {...dataProps}
+          {...htmlProps}
           className={css}
           disabled={disabled}
           form={form}

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.tsx

@@ -3,7 +3,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'
 
@@ -13,6 +13,7 @@ type ButtonToolbarProps = {
   className?: string,
   connected?: boolean,
   data?: object,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   onClick?: React.MouseEventHandler<HTMLSpanElement>,
   orientation?: "horizontal" | "vertical",
@@ -26,6 +27,7 @@ const ButtonToolbar  = (props: ButtonToolbarProps) => {
     children,
     className,
     data = {},
+    htmlOptions = {},
     id,
     orientation = 'horizontal',
     text,
@@ -34,6 +36,7 @@ const ButtonToolbar  = (props: ButtonToolbarProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
 
   const classes = classnames(
     buildCss('pb_button_toolbar_kit', orientation, variant),
@@ -45,6 +48,7 @@ const ButtonToolbar  = (props: ButtonToolbarProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_caption/_caption.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 { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
 
 type CaptionProps = {
@@ -9,6 +9,7 @@ type CaptionProps = {
   className?: string,
   color?: "default" | "light" | "lighter" | "success" | "error" | "link",
   data?: {[key: string]: string},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   size?: "xs" | "sm" | "md" | "lg" | "xl",
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "caption",
@@ -24,6 +25,7 @@ const Caption = (props: CaptionProps): React.ReactElement => {
     className,
     color,
     data = {},
+    htmlOptions = {},
     id,
     size = 'md',
     tag = 'div',
@@ -47,6 +49,8 @@ const Caption = (props: CaptionProps): React.ReactElement => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+
   const css = classnames(
     buildCss('pb_caption_kit', size, variant, color),
     globalProps(props),
@@ -57,6 +61,7 @@ const Caption = (props: CaptionProps): React.ReactElement => {
     <Tag
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={css}
         id={id}
     >

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { get } from 'lodash'
 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 type { ProductColors, CategoryColors, BackgroundColors } from '../types/colors'
 
@@ -16,6 +16,7 @@ type CardPropTypes = {
   children: React.ReactChild[] | React.ReactChild | number,
   className?: string,
   data?: {[key: string]: string},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   highlight?: {
     position?: "side" | "top",
     color?: string,
@@ -78,6 +79,7 @@ const Card = (props: CardPropTypes) => {
     className,
     data = {},
     highlight = {},
+    htmlOptions = {},
     selected = false,
     tag = 'div',
   } = props
@@ -90,6 +92,7 @@ const Card = (props: CardPropTypes) => {
   })
   const ariaProps: {[key: string]: string} = buildAriaProps(aria)
   const dataProps: {[key: string]: string} = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions);
 
   // coerce to array
   const cardChildren = React.Children.toArray(children)
@@ -113,6 +116,7 @@ const Card = (props: CardPropTypes) => {
     <Tag
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classnames(cardCss, globalProps(props), className)}
     >
       {subComponentTags('Header')}

data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react'
 import Body from '../pb_body/_body'
 import Icon from '../pb_icon/_icon'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import classnames from 'classnames'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 
@@ -13,6 +13,7 @@ type CheckboxProps = {
   dark?: boolean,
   data?: {[key: string]: string},
   error?: boolean,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   indeterminate?: boolean,
   name?: string,
@@ -31,6 +32,7 @@ const Checkbox = (props: CheckboxProps): JSX.Element => {
     dark = false,
     data = {},
     error = false,
+    htmlOptions = {},
     id,
     indeterminate = false,
     name = '',
@@ -41,8 +43,10 @@ const Checkbox = (props: CheckboxProps): JSX.Element => {
   } = props
 
   const checkRef = useRef(null)
-  const dataProps = buildDataProps(data)
   const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+
   const classes = classnames(
     buildCss('pb_checkbox_kit', checked ? 'checked' : null, error ? 'error' : null, indeterminate? 'indeterminate' : null),
     globalProps(props),
@@ -76,6 +80,7 @@ const Checkbox = (props: CheckboxProps): JSX.Element => {
     <label
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx

@@ -9,7 +9,7 @@ import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import { globalProps } from "../utilities/globalProps";
-import { buildAriaProps, buildDataProps } from "../utilities/props";
+import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
 
 type CircleChartProps = {
   align?: "left" | "right" | "center";
@@ -23,6 +23,7 @@ type CircleChartProps = {
   dataLabelHtml?: string;
   dataLabels?: boolean;
   height?: string;
+  htmlOptions?: { [key: string]: string | number | boolean | Function };
   id?: string;
   innerSize?: "sm" | "md" | "lg" | "none";
   legend?: boolean;
@@ -71,6 +72,7 @@ const CircleChart = ({
   dataLabelHtml = "<div>{point.name}</div>",
   dataLabels = false,
   height,
+  htmlOptions = {},
   id,
   innerSize = "md",
   legend = false,
@@ -89,7 +91,8 @@ const CircleChart = ({
   ...props
 }: CircleChartProps) => {
   const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions);
   highchartsMore(Highcharts);
 
   const setupTheme = () => {
@@ -182,6 +185,7 @@ const CircleChart = ({
               id: id,
               ...ariaProps,
               ...dataProps,
+              ...htmlProps,
             }}
             highcharts={Highcharts}
             options={options}
@@ -195,6 +199,7 @@ const CircleChart = ({
             id: id,
             ...ariaProps,
             ...dataProps,
+            ...htmlProps,
           }}
           highcharts={Highcharts}
           options={options}

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx

@@ -1,8 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-
-import { noop } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps, noop } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Button from '../pb_button/_button'
@@ -15,6 +13,7 @@ type CircleIconButtonProps = {
   data?: { [key: string]: string },
   disabled?: boolean,
   icon: string,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   link?: string,
   onClick?: React.MouseEventHandler<HTMLElement>,
@@ -30,6 +29,7 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
     dark,
     data = {},
     disabled,
+    htmlOptions = {},
     icon,
     id,
     onClick = noop,
@@ -41,6 +41,7 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_circle_icon_button_kit'),
     globalProps(props),
@@ -51,6 +52,7 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >