playbook_ui 14.11.0 → 14.11.1.pre.alpha.PLAY1750pbcontenttagkitbutton5339

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

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "./intlTelInput";
 @import "../tokens/colors";
 
@@ -41,7 +39,7 @@ $flag-min-resolution: 192dpi;
     color: $charcoal;
   }
 
-  // iti-spacer-horizontal's default is 8px, or $space_xs
+  // iti-spacer-horizontal's default is 8px, or $space_xs 
   .iti__country-list .iti__flag, .iti__country-name {
     margin-right: $space_xs;
   }
@@ -75,7 +73,7 @@ $flag-min-resolution: 192dpi;
   }
 
   .iti__divider {
-    border-bottom: 1px solid $border_light !important;
+    border-bottom: 1px solid $border_light !important;  
   }
 
   .iti__selected-country-primary {
@@ -95,7 +93,7 @@ $flag-min-resolution: 192dpi;
     justify-content: center;
     align-items: center;
     border-width: 0;
-    border-radius: $space_xxs;
+    border-radius: $space_xxs; 
 
     &[aria-expanded="true"] {
       color: $primary_action;
@@ -165,7 +163,7 @@ $flag-min-resolution: 192dpi;
   }
 
   .iti__arrow.iti__arrow--up::before {
-    transform: rotate(-(math.div($transform-rotate-deg, 3)));
+    transform: rotate(-($transform-rotate-deg/3));
     top: $space_xs + 4px;
     color: $primary_action;
   }
@@ -198,7 +196,7 @@ $flag-min-resolution: 192dpi;
   }
 
   .iti__dropdown-content {
-    border-radius: $space_xs;
+    border-radius: $space_xs; 
     border: 1px solid $border_light !important;
     position: absolute;
     top: 100%;
@@ -227,12 +225,12 @@ $flag-min-resolution: 192dpi;
     }
 
     .iti__dropdown-content {
-      border-radius: $space_xs;
+      border-radius: $space_xs; 
       border: 1px solid $border_dark !important;
     }
 
     .iti__divider {
-      border-bottom: 1px solid $border_dark !important;
+      border-bottom: 1px solid $border_dark !important;  
     }
 
     .iti__country-list {
@@ -267,7 +265,7 @@ $flag-min-resolution: 192dpi;
       color: $white;
     }
   }
-
+  
   @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
     .iti__flag {
       background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");

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

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/spacing";
 @import "../tokens/colors";
 @import "../tokens/opacity";
@@ -11,9 +9,9 @@ $pb_pill_height: 22px;
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  padding: 0 math.div($space-sm, 1.8);
+  padding: 0 $space-sm/1.8;
   height: $pb_pill_height;
-  border-radius: math.div($pb_pill_height, 2);
+  border-radius: $pb_pill_height/2;
   white-space: nowrap;
 
   &[class*=lowercase] {

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

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/colors";
 @import "../tokens/opacity";
 @import "../tokens/colors";
@@ -23,7 +21,7 @@ $pb_progress_simple_height: 4px;
 [class^=pb_progress_simple_kit] {
   width: 100%;
   height: $pb_progress_simple_height;
-  border-radius: math.div($pb_progress_simple_height, 2);
+  border-radius: $pb_progress_simple_height/2;
   background: rgba($primary, $opacity-1);
     &[class*=_positive] {
       .progress_simple_value {
@@ -44,7 +42,7 @@ $pb_progress_simple_height: 4px;
   [class^=progress_simple_value] {
     width: 0%;
     height: 100%;
-    border-radius: math.div($pb_progress_simple_height, 2);
+    border-radius: $pb_progress_simple_height/2;
     background: $primary;
   }
 

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

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../pb_textarea/textarea_mixin";
 @import "../pb_button/_button_mixins";
 @import "../tokens/border_radius";
@@ -96,7 +94,7 @@
     .trix-button--icon {
       height: $space_lg;
       width: $space_lg;
-      margin: math.div($space_xs, 2);
+      margin: $space_xs / 2;
       border-radius: $border_rad_heavier;
       &::before {
         background-size: auto;
@@ -106,7 +104,7 @@
       background: $white;
       border: 1px solid #E4E8F0;
       border-bottom: none;
-      padding: math.div($space_xs, 2);
+      padding: $space_xs / 2;
       border-top-left-radius: $border_rad_heavier;
       border-top-right-radius: $border_rad_heavier;
       .trix-button-group {

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

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../pb_body/body_mixins";
 @import "../pb_textarea/textarea_mixin";
 @import "../tokens/titles";
@@ -83,7 +81,7 @@
     display: block;
     &.error {
       [class*=pb_body_kit] {
-        margin-top: math.div($space_xs, 2);
+        margin-top: $space_xs / 2;
       }
       > select:first-child {
         border-color: $error;
@@ -135,7 +133,7 @@
       box-shadow: none;
       border-color: transparent;
       padding: 4px 8px;
-      padding-right: $space_lg;
+      padding-right: $space_lg; 
       border-radius: 4px;
       option {
         background-color: $white;
@@ -242,7 +240,7 @@
       border-color: transparent;
       background: transparent;
       padding: 4px 8px;
-      padding-right: $space_lg;
+      padding-right: $space_lg; 
       border-radius: 4px;
       option {
         background-color: $white;

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

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/animation-curves";
 @import "../tokens/colors";
 @import "../tokens/opacity";
@@ -62,7 +60,7 @@ $pb_selectable_paddings: (
       align-items: center;
       height: $pb_selectable_card_indicator_size;
       width: $pb_selectable_card_indicator_size;
-      border-radius: (math.div($pb_selectable_card_indicator_size, 2)) + (math.div($pb_selectable_card_border, 2));
+      border-radius: $pb_selectable_card_indicator_size/2 + $pb_selectable_card_border/2;
       border-width: $pb_selectable_card_border;
       border-style: solid;
       border-color: $white;
@@ -71,8 +69,8 @@ $pb_selectable_paddings: (
       font-size: $font_smaller;
       text-align: center;
       position: absolute;
-      top: -(math.div($pb_selectable_card_indicator_size, 2));
-      right: -(math.div($pb_selectable_card_indicator_size, 2));
+      top: -($pb_selectable_card_indicator_size/2);
+      right: -($pb_selectable_card_indicator_size/2);
       opacity: 0;
     }
   }

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../pb_textarea/textarea_mixin";
 @import "../tokens/titles";
 @import "../tokens/colors";
@@ -102,7 +100,7 @@
   &.error {
     .text_input_wrapper {
       [class*="pb_body_kit"] {
-        margin-top: math.div($space_xs, 2);
+        margin-top: $space_xs / 2;
       }
       input,
       .text_input {

data/app/pb_kits/playbook/pb_textarea/_textarea.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../pb_body/body_mixins";
 @import "./textarea_mixin";
 @import "../tokens/spacing";
@@ -62,7 +60,7 @@
 
   &.error {
     [class*=pb_body_kit] {
-      margin-top: math.div($space_xs, 2);
+      margin-top: $space_xs / 2;
     }
     textarea {
       border-color: $error;

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss

@@ -1,4 +1,3 @@
-@use "sass:math";
 
 [class^=pb_time_range_inline_kit] {
   &[class*=_center]  {
@@ -23,14 +22,14 @@
     display: flex;
     align-items: center;
     [class*=pb_time_range_inline_arrow] {
-      margin-left: math.div($space_xs, 2);
-      margin-right:math.div($space_xs, 2);
+      margin-left: $space_xs/2;
+      margin-right: $space_xs/2;
     }
     [class*=pb_time_range_inline_timezone] {
-      margin-left: math.div($space_xs, 2);
+      margin-left: $space_xs/2;
     }
     [class*=pb_time_range_inline_icon] {
-      margin-right: math.div($space_xs, 2);
+      margin-right: $space_xs/2;
     }
   }
 }

data/app/pb_kits/playbook/pb_timeline/_timeline.scss

@@ -1,14 +1,12 @@
-@use "sass:math";
-
 @import "../tokens/colors";
 @import "../tokens/spacing";
 @import "../tokens/opacity";
 @import "../tokens/typography";
 
 $connector_width: 2px;
-$icon_margin: math.div($space_xs, 2);
+$icon_margin: $space_xs/2;
 $icon_height: 28px;
-$height_from_top: (math.div($icon_height, 2)) - (math.div($connector_width, 2));
+$height_from_top: $icon_height/2 - $connector_width/2;
 
 // Add gap variables
 $gap_xs: $height_from_top + $space_xs;

data/app/pb_kits/playbook/pb_toggle/_toggle.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/colors";
 
 $color_checkbox_success: $data_1;
@@ -10,7 +8,7 @@ $transition: .2s ease-in-out;
 [class^=pb_toggle_kit] {
   position: relative;
   $width: 44px;
-  $height: math.div($width, 2);
+  $height: $width / 2;
   $border_success: 3px solid $color_checkbox_success;
   $border_default: 3px solid $color_checkbox_default;
 
@@ -29,7 +27,7 @@ $transition: .2s ease-in-out;
       &:after {
         transition: $transition;
         content: "";
-        width: math.div($width, 2) - 4px;
+        width: $width / 2 - 4px;
         height: $height - 4px;
         background-color: $color_checkbox_default;
         border-radius: 50%;
@@ -70,7 +68,7 @@ $transition: .2s ease-in-out;
         background-color: $color_checkbox_success;
 
         &:after {
-          left: math.div($width, 2) + 2px;
+          left: $width / 2 + 2px;
           background-color: $white;
         }
       }

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -42,8 +42,8 @@ type TypeaheadProps = {
   id?: string,
   label?: string,
   loadOptions?: string | Noop,
-  getOptionLabel?: string | (() => any),
-  getOptionValue?: string | (() => any),
+  getOptionLabel?: string | (() => string),
+  getOptionValue?: string | (() => string),
   name?: string,
   marginBottom?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
@@ -109,6 +109,7 @@ const Typeahead = ({
     multiKit: '',
     onCreateOption: null as null,
     plusIcon: false,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onMultiValueClick: (_option: SelectValueType): any => undefined,
     pillColor: pillColor,
     ...props,

data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.tsx

@@ -1,16 +1,24 @@
 import React, { useEffect } from 'react'
 import { components } from 'react-select'
 
-const ClearContainer = (props: any) => {
+type ClearContainerProps = {
+  children: React.ReactNode,
+  selectProps?: {
+    id: string,
+  },
+  clearValue: () => void,
+}
+
+const ClearContainer = (props: ClearContainerProps): React.ReactElement => {
   const { selectProps, clearValue } = props
   useEffect(() => {
     document.addEventListener(`pb-typeahead-kit-${selectProps.id}:clear`, clearValue)
-  }, [true])
+  }, [clearValue, selectProps.id])
 
   return (
     <components.ClearIndicator
-      className="clear_indicator"
-      {...props}
+        className="clear_indicator"
+        {...props}
     />
   )
 }

data/app/pb_kits/playbook/pb_typeahead/components/Control.tsx

@@ -5,7 +5,11 @@ import Flex from '../../pb_flex/_flex'
 import TextInput from '../../pb_text_input/_text_input'
 
 type Props = {
-  selectProps: any,
+    selectProps: {
+    dark?: boolean,
+    label: string,
+    error?: string,
+  },
 }
 
 const TypeaheadControl = (props: Props) => (

data/app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.tsx

@@ -1,10 +1,15 @@
 import React from 'react'
 import { components } from 'react-select'
 
-const IndicatorsContainer = (props: any) => (
+type IndicatorsContainerProps = {
+  children: React.ReactNode,
+}
+
+
+const IndicatorsContainer = (props: IndicatorsContainerProps): React.ReactElement => (
   <components.IndicatorsContainer
-    className="text_input_indicators"
-    {...props}
+      className="text_input_indicators"
+      {...props}
   />
 )
 

data/app/pb_kits/playbook/pb_typeahead/components/MenuList.tsx

@@ -1,7 +1,12 @@
 import React from 'react'
 import { components } from 'react-select'
 
-const MenuList = (props: any) => {
+type MenuListProps = {
+  children: React.ReactNode,
+  footer: React.ReactNode,
+}
+
+const MenuList = (props: MenuListProps): React.ReactElement => {
   return (
   <components.MenuList {...props}>
     {props.children}

data/app/pb_kits/playbook/pb_typeahead/components/Option.tsx

@@ -3,7 +3,22 @@ import { components } from 'react-select'
 
 import User from '../../pb_user/_user'
 
-const Option = (props: any) => {
+type OptionProps = {
+  children: React.ReactNode,
+  label?: string,
+  data: {
+    imageUrl?: string,
+  },
+  selectProps: {
+    dark?: boolean,
+    valueComponent?: (data: {
+      imageUrl?: string,
+    }) => React.ReactNode,
+  },
+}
+
+
+const Option = (props: OptionProps): React.ReactElement => {
   const {
     imageUrl,
   } = props.data
@@ -14,11 +29,11 @@ const Option = (props: any) => {
       <>
         {!valueComponent && imageUrl &&
           <User
-            align="left"
-            avatarUrl={imageUrl}
-            dark={props.selectProps.dark}
-            name={props.label}
-            orientation="horizontal"
+              align="left"
+              avatarUrl={imageUrl}
+              dark={props.selectProps.dark}
+              name={props.label}
+              orientation="horizontal"
           />
         }
 

data/app/pb_kits/playbook/pb_typeahead/components/Placeholder.tsx

@@ -4,19 +4,26 @@ import { components } from 'react-select'
 import Flex from '../../pb_flex/_flex'
 import Icon from '../../pb_icon/_icon'
 
-const Placeholder = (props: any) => (
+type PlaceholderProps = {
+  children: React.ReactNode,
+  selectProps: {
+    plusIcon?: boolean,
+  },
+}
+
+const Placeholder = (props: PlaceholderProps): React.ReactElement => (
   <>
     <Flex
-      align="center"
-      className="placeholder"
+        align="center"
+        className="placeholder"
     >
       <components.IndicatorsContainer
-        {...props}
+          {...props}
       />
       {props.selectProps.plusIcon &&
         <Icon
-          className="typeahead-plus-icon"
-          icon="plus"
+            className="typeahead-plus-icon"
+            icon="plus"
         />
       }
     </Flex>

data/app/pb_kits/playbook/pb_typeahead/components/ValueContainer.tsx

@@ -1,10 +1,14 @@
 import React from 'react'
 import { components } from 'react-select'
 
-const ValueContainer = (props: any) => (
+type ValueContainerProps = {
+  children: React.ReactNode,
+}
+
+const ValueContainer = (props: ValueContainerProps): React.ReactElement => (
   <components.ValueContainer
-    className="text_input_value_container"
-    {...props}
+      className="text_input_value_container"
+      {...props}
   />
 )
 

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx

@@ -1,3 +1,5 @@
+/* eslint-disable react/no-multi-comp */
+
 import React, { useState } from 'react'
 
 import {

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx

@@ -45,8 +45,7 @@ const promiseOptions = (inputValue) =>
 
 const TypeaheadWithPillsAsync = (props) => {
   const [users, setUsers] = useState([])
-  const handleOnChange = (value) => setUsers(formatUsers(value))
-  const formatValue = (users) => formatUsers(users)
+
   const formatUsers = (users) => {
     const results = () => (users.map((user) => {
       if (Object.keys(user)[0] === 'name' || Object.keys(user)[1] === 'id'){
@@ -58,6 +57,9 @@ const TypeaheadWithPillsAsync = (props) => {
     return results()
   }
 
+  const handleOnChange = (value) => setUsers(formatUsers(value))
+  const formatValue = (users) => formatUsers(users)
+
   return (
     <>
       {users && users.length > 0 && (

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx

@@ -83,13 +83,13 @@ const TypeaheadWithPillsAsyncCustomOptions = (props) => {
           onChange={handleOnChange}
           onMultiValueClick={handleOnMultiValueClick}
           placeholder="type the name of a Github user"
-          valueComponent={(props) => (
+          valueComponent={({imageUrl, label, territory, type}) => (
             <User
                 avatar
-                avatarUrl={props.imageUrl}
-                name={props.label}
-                territory={props.territory}
-                title={props.type}
+                avatarUrl={imageUrl}
+                name={label}
+                territory={territory}
+                title={type}
             />
           )}
           {...props}