playbook_ui 13.12.0.pre.alpha.play10281596 → 13.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 16d95847674aec1bca3c0668bca775cd9c7e7770129463157e2fb7e73cf0b2fe
-  data.tar.gz: c6c048ad9a32b425d9ce1071693e1ed631a2ca480c938d4e93d79e31322d0f8e
+  metadata.gz: 5274804bb3a050a4c0649d20d667e714fed94f191bb3dbb8bf2476198a83e0a7
+  data.tar.gz: e6ea6a7dbfff42131377ee9ee4a6ecbac3bee1a69f34923dbb0e11c44ff25911
 SHA512:
-  metadata.gz: f59559d7266ab700fc78b8f0378e1fba50cae3ceef0212f8f45d9ecd798c099eb85d13e3e41ce5392c2370e71ebba8a444e0d9228bdbad3c6280aafcaae0e4d1
-  data.tar.gz: 4397d3e17246775de0d4188e9b31f8ad23ca7e6782e6de44f76d2a384b00a46d71fa124e82d90fa48f4f997bf29d471eb4dcab2ed4ceee7d124149ee5e4f3271
+  metadata.gz: a69c18f1d029ac13eaff14aceda3b01e96004eab1621cdccfc9c46e47a6041f83bfa797cb422221c4604c306da163dc8248e775ac1606377ee3e586a3989879d
+  data.tar.gz: 975179da601fbf2a3a3abf924c59e4bc307938dfa9fabbd45ddee638d1bd2729f8dd62d256eba2a4e0d2a0884c29d8d8d5b8ca6d106c6ef51301a0a0dfb9fd45

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, buildHtmlProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 import Image from '../pb_image/_image'
@@ -12,7 +12,6 @@ export type AvatarProps = {
   className?: string,
   data?: {[key: string]: string},
   dark?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   imageAlt?: string,
   imageUrl?: string,
@@ -31,7 +30,6 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
     aria = {},
     className,
     data = {},
-    htmlOptions = {},
     name = null,
     id = '',
     imageAlt = '',
@@ -42,7 +40,6 @@ 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),
@@ -61,7 +58,6 @@ 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, 
-  buildHtmlProps } from '../utilities/props'
+  buildDataProps,
+} from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Avatar from '../pb_avatar/_avatar'
@@ -20,7 +20,6 @@ type AvatarActionButtonProps = {
   className?: string,
   dark?: boolean,
   data?: Object,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   imageAlt?: string,
   imageUrl?: string,
@@ -39,7 +38,6 @@ const AvatarActionButton = (props: AvatarActionButtonProps) => {
     className,
     dark = false,
     data = {},
-    htmlOptions = {},
     id,
     imageAlt = '',
     imageUrl,
@@ -52,7 +50,6 @@ 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',
@@ -71,7 +68,6 @@ 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, buildHtmlProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 
 type BackgroundProps = {
@@ -23,7 +23,6 @@ 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',
@@ -75,7 +74,6 @@ const Background = (props: BackgroundProps) => {
     className,
     customColor,
     data = {},
-    htmlOptions = {},
     id,
     imageUrl = '',
     tag = 'div',
@@ -115,7 +113,6 @@ const Background = (props: BackgroundProps) => {
     imageUrl: resImageUrl,
   } = responsiveProps;
 
-
   // Build CSS classes and styles using responsive values.
   const classes = classnames(
     buildCss('pb_background_kit'),
@@ -140,17 +137,16 @@ 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,
-  buildHtmlProps } from '../utilities/props'
+} from '../utilities/props'
 
 import Icon from '../pb_icon/_icon'
 
@@ -19,7 +19,6 @@ 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>,
@@ -33,7 +32,6 @@ const Badge = (props: BadgeProps) => {
     className,
     closeProps = {},
     data = {},
-    htmlOptions = {},
     id,
     removeIcon = false,
     removeOnClick,
@@ -43,7 +41,6 @@ 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),
@@ -54,7 +51,6 @@ 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, buildHtmlProps } from "../utilities/props";
+import { buildAriaProps, buildDataProps } from "../utilities/props";
 
 import HighchartsReact from "highcharts-react-official";
 import Highcharts from "highcharts";
@@ -19,7 +19,6 @@ 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;
@@ -47,7 +46,6 @@ const BarGraph = ({
   chartData,
   className = "pb_bar_graph",
   colors,
-  htmlOptions = {},
   id,
   pointStart,
   subTitle,
@@ -66,8 +64,7 @@ const BarGraph = ({
   ...props
 }: BarGraphProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions);
+  const dataProps = buildDataProps(data);
   const setupTheme = () => {
     dark
       ? Highcharts.setOptions(highchartsDarkTheme)
@@ -138,7 +135,6 @@ 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, buildHtmlProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
 
 import Highlight from '../pb_highlight/_highlight'
@@ -15,7 +15,6 @@ 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',
@@ -34,7 +33,6 @@ const Body = (props: BodyProps): React.ReactElement => {
     data = {},
     highlightedText = [],
     highlighting = false,
-    htmlOptions = {},
     id = '',
     status = null,
     tag = 'div',
@@ -45,7 +43,6 @@ 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),
@@ -59,7 +56,6 @@ 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,13 +8,12 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
-  buildHtmlProps } from '../utilities/props'
+} 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;
@@ -26,14 +25,12 @@ 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'),
@@ -45,7 +42,6 @@ const BreadCrumbItem = (props: BreadCrumbItemProps) => {
     <div
         {...ariaProps}
         {...dataProps}
-        {...htmlProps}
         className={css}
         id={id}
     >

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

@@ -1,3 +1,5 @@
+/* @flow */
+
 import React from 'react'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps'
@@ -6,14 +8,12 @@ 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,13 +23,11 @@ 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),
@@ -40,7 +38,6 @@ 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, buildHtmlProps } from '../utilities/props'
+import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { isValidEmoji } from '../utilities/validEmojiChecker'
 
@@ -21,7 +21,6 @@ type ButtonPropTypes = {
   form?: string,
   fullWidth?: boolean,
   highlight?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   icon?: string,
   iconRight?: boolean,
   id?: string,
@@ -74,7 +73,6 @@ const Button = (props: ButtonPropTypes) => {
     count,
     data = {},
     disabled,
-    htmlOptions = {},
     icon = null,
     iconRight = false,
     id,
@@ -93,8 +91,6 @@ const Button = (props: ButtonPropTypes) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
-
   const css = classnames(
     buttonClassName(props),
     globalProps(props),
@@ -152,7 +148,6 @@ const Button = (props: ButtonPropTypes) => {
         <a
           {...ariaProps}
           {...dataProps}
-          {...htmlProps}
           className={css}
           href={link}
           id={id}
@@ -169,7 +164,6 @@ const Button = (props: ButtonPropTypes) => {
         <button
           {...ariaProps}
           {...dataProps}
-          {...htmlProps}
           className={css}
           disabled={disabled}
           form={form}
@@ -205,7 +199,6 @@ 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, buildHtmlProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
 import { globalProps } from '../utilities/globalProps'
 
@@ -13,7 +13,6 @@ type ButtonToolbarProps = {
   className?: string,
   connected?: boolean,
   data?: object,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   onClick?: React.MouseEventHandler<HTMLSpanElement>,
   orientation?: "horizontal" | "vertical",
@@ -27,7 +26,6 @@ const ButtonToolbar  = (props: ButtonToolbarProps) => {
     children,
     className,
     data = {},
-    htmlOptions = {},
     id,
     orientation = 'horizontal',
     text,
@@ -36,7 +34,6 @@ 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),
@@ -48,7 +45,6 @@ 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, buildHtmlProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
 
 type CaptionProps = {
@@ -9,7 +9,6 @@ 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",
@@ -25,7 +24,6 @@ const Caption = (props: CaptionProps): React.ReactElement => {
     className,
     color,
     data = {},
-    htmlOptions = {},
     id,
     size = 'md',
     tag = 'div',
@@ -49,8 +47,6 @@ 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),
@@ -61,7 +57,6 @@ 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, buildHtmlProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 import type { ProductColors, CategoryColors, BackgroundColors } from '../types/colors'
 
@@ -16,7 +16,6 @@ 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,
@@ -79,7 +78,6 @@ const Card = (props: CardPropTypes) => {
     className,
     data = {},
     highlight = {},
-    htmlOptions = {},
     selected = false,
     tag = 'div',
   } = props
@@ -92,7 +90,6 @@ 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)
@@ -116,7 +113,6 @@ 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, buildHtmlProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import classnames from 'classnames'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 
@@ -13,7 +13,6 @@ type CheckboxProps = {
   dark?: boolean,
   data?: {[key: string]: string},
   error?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   indeterminate?: boolean,
   name?: string,
@@ -32,7 +31,6 @@ const Checkbox = (props: CheckboxProps): JSX.Element => {
     dark = false,
     data = {},
     error = false,
-    htmlOptions = {},
     id,
     indeterminate = false,
     name = '',
@@ -43,10 +41,8 @@ const Checkbox = (props: CheckboxProps): JSX.Element => {
   } = props
 
   const checkRef = useRef(null)
-  const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
-
+  const ariaProps = buildAriaProps(aria)
   const classes = classnames(
     buildCss('pb_checkbox_kit', checked ? 'checked' : null, error ? 'error' : null, indeterminate? 'indeterminate' : null),
     globalProps(props),
@@ -80,7 +76,6 @@ 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, buildHtmlProps } from "../utilities/props";
+import { buildAriaProps, buildDataProps } from "../utilities/props";
 
 type CircleChartProps = {
   align?: "left" | "right" | "center";
@@ -23,7 +23,6 @@ type CircleChartProps = {
   dataLabelHtml?: string;
   dataLabels?: boolean;
   height?: string;
-  htmlOptions?: { [key: string]: string | number | boolean | Function };
   id?: string;
   innerSize?: "sm" | "md" | "lg" | "none";
   legend?: boolean;
@@ -72,7 +71,6 @@ const CircleChart = ({
   dataLabelHtml = "<div>{point.name}</div>",
   dataLabels = false,
   height,
-  htmlOptions = {},
   id,
   innerSize = "md",
   legend = false,
@@ -91,8 +89,7 @@ const CircleChart = ({
   ...props
 }: CircleChartProps) => {
   const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions);
+  const dataProps = buildDataProps(data);
   highchartsMore(Highcharts);
 
   const setupTheme = () => {
@@ -185,7 +182,6 @@ const CircleChart = ({
               id: id,
               ...ariaProps,
               ...dataProps,
-              ...htmlProps,
             }}
             highcharts={Highcharts}
             options={options}
@@ -199,7 +195,6 @@ 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,6 +1,8 @@
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps, noop } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+
+import { noop } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Button from '../pb_button/_button'
@@ -13,7 +15,6 @@ 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>,
@@ -29,7 +30,6 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
     dark,
     data = {},
     disabled,
-    htmlOptions = {},
     icon,
     id,
     onClick = noop,
@@ -41,7 +41,6 @@ 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),
@@ -52,7 +51,6 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
     <div
         {...ariaProps}
         {...dataProps}
-        {...htmlProps}
         className={classes}
         id={id}
     >