playbook_ui 13.12.0 → 13.13.0.pre.alpha.PLAY1097linterenhancedelement1728

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -5,7 +5,7 @@ import intlTelInput from 'intl-tel-input'
 import 'intl-tel-input/build/css/intlTelInput.css'
 import 'intl-tel-input/build/js/utils.js'
 
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import TextInput from '../pb_text_input/_text_input'
@@ -25,6 +25,7 @@ type PhoneNumberInputProps = {
   data?: { [key: string]: string },
   disabled?: boolean,
   error?: string,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   initialCountry?: string,
   isValid?: (valid: boolean) => void,
@@ -71,6 +72,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     dark = false,
     data = {},
     disabled = false,
+    htmlOptions = {},
     id = "",
     initialCountry = "",
     isValid = () => {
@@ -90,6 +92,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss("pb_phone_number_input"),
     globalProps(props),
@@ -256,7 +259,10 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
   if (required) textInputProps.required = true
 
   return (
-    <div {...wrapperProps}>
+    <div 
+      {...wrapperProps} 
+      {...htmlProps}
+    >
       <TextInput
           ref={
             inputNode => {

data/app/pb_kits/playbook/pb_pill/_pill.tsx

@@ -2,13 +2,14 @@ import React from 'react'
 
 import classnames from 'classnames'
 import Title from '../pb_title/_title'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 
 type PillProps = {
   aria?: {[key: string]: string},
   className?: string,
   data?: {[key: string]: string},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   text: string,
   variant?: "success" | "warning" | "error" | "info" | "neutral" | "primary",
@@ -20,6 +21,7 @@ const Pill = (props: PillProps) => {
     aria = {},
     className,
     data = {},
+    htmlOptions = {},
     id,
     text,
     variant = 'neutral',
@@ -28,12 +30,14 @@ const Pill = (props: PillProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(buildCss('pb_pill_kit', variant, textTransform), globalProps(props), className)
 
   return (
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -12,6 +12,7 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
+  buildHtmlProps,
   noop,
 } from "../utilities/props";
 
@@ -24,6 +25,7 @@ type PbPopoverProps = {
   className?: string;
   closeOnClick?: "outside" | "inside" | "any";
   data?: { [key: string]: string },
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string;
   offset?: boolean;
   reference: PopperReference & any;
@@ -63,6 +65,7 @@ const Popover = (props: PbPopoverProps) => {
     className,
     children,
     data = {},
+    htmlOptions = {},
     id,
     modifiers,
     offset,
@@ -92,7 +95,8 @@ const Popover = (props: PbPopoverProps) => {
     );
   };
   const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss("pb_popover_kit"),
     globalProps(props),
@@ -110,6 +114,7 @@ const Popover = (props: PbPopoverProps) => {
           <div
               {...ariaProps}
               {...dataProps}
+              {...htmlProps}
               className={classes}
               data-placement={placement}
               id={id}

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.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'
@@ -13,6 +13,7 @@ type ProgressPillsProps = {
   className?: string,
   data?: { [key: string]: string },
   dark?: boolean,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   steps?: number,
   title?: string,
@@ -43,6 +44,7 @@ const ProgressPills = (props: ProgressPillsProps) => {
     aria = { hidden: 'true' },
     className,
     data = {},
+    htmlOptions = {},
     id,
     steps = 3,
     title,
@@ -52,12 +54,14 @@ const ProgressPills = (props: ProgressPillsProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(buildCss('pb_progress_pills_kit'), globalProps(props), className)
 
   return (
     <div
       {...ariaProps}
       {...dataProps}
+      {...htmlProps}
       className={classes}
       id={id}
     >

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.tsx

@@ -1,6 +1,6 @@
 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'
 
 type ProgressSimpleProps = {
@@ -8,6 +8,7 @@ type ProgressSimpleProps = {
   className?: string | string[],
   dark?: boolean,
   data?: string,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   max?: number,
   muted: boolean,
@@ -23,6 +24,7 @@ const ProgressSimple = (props: ProgressSimpleProps) => {
     className,
     dark = false,
     data ={},
+    htmlOptions = {},
     max,
     muted = false,
     percent = '',
@@ -35,6 +37,7 @@ const ProgressSimple = (props: ProgressSimpleProps) => {
   }
 
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const variantStyle = variant == 'default' ? '' : variant
 
   const valueStyles = {
@@ -53,8 +56,11 @@ const ProgressSimple = (props: ProgressSimpleProps) => {
   )
 
   return (
-    <div {...dataProps}
-      className={wrapperClass}>
+    <div 
+      {...dataProps}
+      {...htmlProps}
+      className={wrapperClass}
+    >
       <div
           className={kitClass}
           data-value={value}

data/app/pb_kits/playbook/pb_progress_step/_progress_step.tsx

@@ -1,12 +1,13 @@
 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'
 
 type ProgressStepProps = {
   aria?: { [key: string]: string },
   className?: string,
   data?: { [key: string]: string },
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   children?: React.ReactChild[] | React.ReactChild,
   orientation?: "horizontal" | "vertical",
@@ -24,6 +25,7 @@ const ProgressStep = (props: ProgressStepProps): React.ReactElement => {
     color,
     data = {},
     orientation = 'horizontal',
+    htmlOptions = {},
     icon = false,
     showIcon = false,
     variant,
@@ -31,6 +33,7 @@ const ProgressStep = (props: ProgressStepProps): React.ReactElement => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const iconStyle = icon === true || showIcon === true ? 'icon' : ''
   const progressStepCss = buildCss(
     'pb_progress_step_kit',
@@ -44,6 +47,7 @@ const ProgressStep = (props: ProgressStepProps): React.ReactElement => {
     <ul
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classnames(progressStepCss, globalProps(props), className)}
     >
       {children}

data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.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 Icon from '../pb_icon/_icon'
 
@@ -10,6 +10,7 @@ type ProgressStepItemProps = {
   data?: { [key: string]: string },
   status?: "complete" | "active" | "inactive" | "hidden",
   children?: React.ReactNode | React.ReactNode[],
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   icon?: string,
 }
 
@@ -19,15 +20,18 @@ const ProgressStepItem = (props: ProgressStepItemProps): React.ReactElement => {
     data = {},
     status = 'inactive',
     children,
+    htmlOptions = {},
     icon = 'check',
   } = props
 
   const progressStepItem = buildCss('pb_progress_step_item', status)
-  const dataProps = buildDataProps(data)
+   const dataProps = buildDataProps(data)
+   const htmlProps = buildHtmlProps(htmlOptions)
 
   return (
     <li 
         {...dataProps}
+        {...htmlProps}
         className={classnames(progressStepItem, className)}
     >
       <div className="box">

data/app/pb_kits/playbook/pb_radio/_radio.tsx

@@ -3,7 +3,7 @@
 import React, { forwardRef } from 'react'
 import Body from '../pb_body/_body'
 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 RadioProps = {
@@ -15,6 +15,7 @@ type RadioProps = {
   dark?: boolean,
   data?: {[key: string]: string},
   error?: boolean,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   label: string,
   name?: string,
@@ -31,6 +32,7 @@ const Radio = ({
   dark = false,
   data = {},
   error = false,
+  htmlOptions = {},
   id,
   label,
   name = 'radio_name',
@@ -41,6 +43,7 @@ const Radio = ({
 }: RadioProps, ref: any) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_radio_kit', alignment ),
     dark ? 'dark': null, error ? 'error': null,
@@ -68,6 +71,7 @@ const Radio = ({
     <label
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         htmlFor={id}
     >

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import inlineFocus from './inlineFocus'
 import useFocus from './useFocus'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
-import { buildAriaProps, buildDataProps, noop } from '../utilities/props'
+import { buildAriaProps, buildDataProps, noop, buildHtmlProps } from '../utilities/props'
 
 try {
   const Trix = require('trix')
@@ -35,6 +35,7 @@ type RichTextEditorProps = {
   className?: string,
   data?: { [key: string]: string },
   focus?: boolean,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   inline?: boolean, 
   extensions?: { [key: string]: string }[],
@@ -58,6 +59,7 @@ const RichTextEditor = (props: RichTextEditorProps) => {
     className,
     data = {},
     focus = false,
+    htmlOptions = {},
     inline = false,
     extensions,
     name,
@@ -74,9 +76,12 @@ const RichTextEditor = (props: RichTextEditorProps) => {
     dataProps = buildDataProps(data),
     [editor, setEditor] = useState<Editor>()
 
+  const htmlProps = buildHtmlProps(htmlOptions)
+  
   const handleOnEditorReady = (editorInstance: Editor) => setEditor(editorInstance),
     element = editor?.element
 
+
   // DOM manipulation must wait for editor to be ready
   if (editor) {
     const toolbarElement = element.parentElement.querySelector('trix-toolbar') as HTMLElement,
@@ -161,6 +166,7 @@ const RichTextEditor = (props: RichTextEditorProps) => {
     <div
       {...ariaProps}
       {...dataProps}
+      {...htmlProps}
       className={css}
     >
       {

data/app/pb_kits/playbook/pb_section_separator/_section_separator.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 Caption from '../pb_caption/_caption'
@@ -12,6 +12,7 @@ type SectionSeparatorProps = {
   className?: string,
   dark?: boolean,
   data?: { [key: string]: string; },
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   lineStyle?: "solid" | "dashed",
   orientation?: "horizontal" | "vertical",
@@ -25,6 +26,7 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
     children,
     className,
     data = {},
+    htmlOptions = {},
     id,
     lineStyle = 'solid',
     orientation = 'horizontal',
@@ -34,6 +36,7 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, lineStyle === "dashed" ? lineStyle : ""), globalProps(props), className)
 
   return (
@@ -41,6 +44,7 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
     <div
       {...ariaProps}
       {...dataProps}
+      {...htmlProps}
       className={classes}
       id={id}
     >

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children_swift.md

@@ -0,0 +1,14 @@
+
+![section-separator-children](https://github.com/powerhome/playbook/assets/92755007/acd6a8eb-d034-4efd-b2e6-afabe739e678)
+
+```swift
+
+PBSectionSeparator(variant: .dashed) {
+  PBCard(alignment: .center, borderRadius: BorderRadius.rounded, padding: Spacing.xxSmall, width: 70) {
+    Text("Today")
+      .pbFont(.caption)
+      .frame(maxWidth: .infinity, alignment: .center)
+  }
+}
+
+```

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dashed_swift.md

@@ -0,0 +1,7 @@
+![section-separator-dashed](https://github.com/powerhome/playbook/assets/92755007/e4f01870-3d90-4655-9136-5c7565711e1f)
+
+```swift
+
+PBSectionSeparator(variant: .dashed)
+
+```

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line_swift.md

@@ -0,0 +1,8 @@
+
+![section-separator-default](https://github.com/powerhome/playbook/assets/92755007/2560d5e2-f345-42d2-bad9-2a2e031b3e08)
+
+```swift
+
+PBSectionSeparator()
+
+```

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_props_swift.md

@@ -0,0 +1,8 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **text** | `String` | Adds text to the Section Separator | `nil` |  |
+| **orientation** | `Orientation` | Changes the orientation | `.horizontal` | `.horizontal` `.vertical` |
+| **variant** | `Variant` | Changes the style of the Section Separator | `.card` | `.dashed` `.card` |
+| **dividerOpacity** | `CGFloat` | Adjusts the opacity of the divider | `1` |  |
+| **margin** | `CGFloat` | Adds margin between text and the divider | `Spacing.xSmall` | `Spacing.none` `Spacing.xxSmall` `Spacing.xSmall` `Spacing.small` `Spacing.medium` `Spacing.large` `Spacing.xLarge` |

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_swift.md

@@ -0,0 +1,7 @@
+![section-separator-text](https://github.com/powerhome/playbook/assets/92755007/4b481a7d-d001-43b6-b779-cfdc6fffc15f)
+
+```swift
+
+PBSectionSeparator("Text separator")
+
+```

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical_swift.md

@@ -0,0 +1,18 @@
+![section-separator-verticle](https://github.com/powerhome/playbook/assets/92755007/21ca54a5-6b8a-459f-91ad-4e9b68258f68)
+
+```swift
+
+let loremIpsum: some View = Text(
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididt labore et dolore"
+)
+
+HStack(spacing: Spacing.none) {
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididt labore et dolore"
+  PBSectionSeparator(orientation: .vertical)
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididt labore et dolore"
+}
+.frame(maxWidth: .infinity)
+.frame(height: 120, alignment: .center)
+.listRowSeparator(.hidden)
+
+```

data/app/pb_kits/playbook/pb_section_separator/docs/example.yml

@@ -13,3 +13,11 @@ examples:
   - section_separator_text: Text Separator
   - section_separator_vertical: Vertical
   - section_separator_children: Children
+
+  swift:
+  - section_separator_line_swift: Line Separator
+  - section_separator_dashed_swift: Dashed Separator
+  - section_separator_text_swift: Text Separator
+  - section_separator_vertical_swift: Vertical
+  - section_separator_children_swift: Children
+  - section_separator_props_swift: ""

data/app/pb_kits/playbook/pb_select/_select.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react'
 import classnames from 'classnames'
 
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps, domSafeProps } from '../utilities/globalProps'
 import type { InputCallback } from '../types'
 
@@ -24,6 +24,7 @@ type SelectProps = {
   data?: { [key: string]: string },
   disabled?: boolean,
   error?: string,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   includeBlank?: string,
   inline?: boolean,
@@ -58,6 +59,7 @@ const Select = ({
   disabled = false,
   error,
   label,
+  htmlOptions = {},
   inline = false,
   multiple = false,
   name,
@@ -69,6 +71,7 @@ const Select = ({
 }: SelectProps, ref: React.LegacyRef<HTMLSelectElement>) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const optionsList = createOptions(options)
 
   const inlineClass = inline ? 'inline' : null
@@ -89,6 +92,7 @@ const Select = ({
     if (children) return children
     return (
       <select
+          {...htmlOptions}
           {...domSafeProps(props)}
           disabled={disabled}
           id={name}
@@ -109,6 +113,7 @@ const Select = ({
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
     >
       {label &&

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx

@@ -9,7 +9,7 @@ import {
   buildCss,
   buildDataProps,
   noop,
-} from '../utilities/props'
+  buildHtmlProps } from '../utilities/props'
 
 import Icon from '../pb_icon/_icon'
 import Checkbox from '../pb_checkbox/_checkbox'
@@ -28,8 +28,9 @@ type SelectableCardProps = {
   disabled?: boolean,
   error?: boolean,
   icon?: boolean,
-  id?: string,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   inputId?: string,
+  id?: string,
   multi?: boolean,
   name?: string,
   onChange: (event: React.FormEvent<HTMLInputElement>) => void,
@@ -48,6 +49,7 @@ const SelectableCard = (props: SelectableCardProps) => {
     data = {},
     disabled = false,
     error = false,
+    htmlOptions = {},
     icon = false,
     inputId = null,
     multi = true,
@@ -59,6 +61,7 @@ const SelectableCard = (props: SelectableCardProps) => {
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
 
   const classes = classnames(buildCss('pb_selectable_card_kit',
     {
@@ -109,6 +112,7 @@ const SelectableCard = (props: SelectableCardProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
     >
       <input

data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.tsx

@@ -6,6 +6,7 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
+  buildHtmlProps,
 } from '../utilities/props'
 
 import Body from '../pb_body/_body'
@@ -21,6 +22,7 @@ type SelectableCardIconProps = {
   dark?: boolean,
   data?: { [key: string]: string },
   disabled?: boolean,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   icon?: string,
   inputId?: string,
   multi?: boolean,
@@ -41,6 +43,7 @@ const SelectableCardIcon = (props: SelectableCardIconProps) => {
     dark = false,
     data = {},
     disabled = false,
+    htmlOptions = {},
     icon,
     inputId,
     multi = true,
@@ -53,6 +56,7 @@ const SelectableCardIcon = (props: SelectableCardIconProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
 
   const classes = classnames(
     buildCss('pb_selectable_card_icon_kit', {
@@ -68,6 +72,7 @@ const SelectableCardIcon = (props: SelectableCardIconProps) => {
     <div
       {...ariaProps}
       {...dataProps}
+      {...htmlProps}
       className={classes}
     >
       <SelectableCard

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx

@@ -6,6 +6,7 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
+  buildHtmlProps 
 } from '../utilities/props'
 import Icon from '../pb_icon/_icon'
 import Title from '../pb_title/_title'
@@ -17,6 +18,7 @@ type SelectableIconProps = {
   customIcon?: {[key: string] :SVGElement},
   disabled?: boolean,
   data?: Object,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   icon: string,
   inputId: string,
   inputs: string,
@@ -33,6 +35,7 @@ const SelectableIcon = ({
   customIcon,
   data = {},
   disabled = false,
+  htmlOptions = {},
   icon,
   inputId,
   inputs = 'enabled',
@@ -44,6 +47,7 @@ const SelectableIcon = ({
 }: SelectableIconProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
 
   const classes = classnames(
     buildCss('pb_selectable_icon_kit', {
@@ -62,6 +66,7 @@ const SelectableIcon = ({
     <div
       {...ariaProps}
       {...dataProps}
+      {...htmlProps}
       className={classes}
     >
       {inputs === 'disabled' && (