playbook_ui 13.31.0.pre.alpha.PLAY882formpillprimaryandneutral3201 → 13.31.0.pre.alpha.PLAY10863204

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 58be8143dc1d3b0b8f64fddf26414a5486df02decbd590b04e78a2fd96b5a1a3
-  data.tar.gz: e109a14b818fc8ea6dc9e1c1c0fd7fd27325481d730c3c3f0a249e5b2334a1c5
+  metadata.gz: eb0b0eeaa6db40584611bedb1796a2f95dbf7693f4cce865be1ed5c87d1d8819
+  data.tar.gz: 3617a015115e540c14349aa3c5b0e741edb566e8ce5bcd72803f255e7e4f6beb
 SHA512:
-  metadata.gz: 517fb2d246a141e0490421f1d64a1b719650908e26a16320d9d647e73edde4a286df47c5fbeafc080d48063e744c4d7c1d45fd18e8ab25850d6ac5ec88eb1081
-  data.tar.gz: aa0c86a28ba3c93000bf2be8c4857332c19fe9137d00c5cfbe8c796068dc3e99f8f34feae53e989143fbb01e6d5286aafbc2abceeef7ce2b825f80150eb32703
+  metadata.gz: 895e69139eb0eb62e0037cbc89ff412c748d2f2154a0433a86318df38f526b3036e6643b390ba58772d9d06447297b80d52b64753706db6156e7a28454e3d782
+  data.tar.gz: '0093caf11bc2960351ae3045e2db58cacbf46352d5062d0abdc0112e29b5520ebfdef2d534f6d3158a91a4ed42852885549eb71b53014d4fcf8cf6f169b8e2bd'

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -8,7 +8,6 @@ $selector: ".pb_form_pill";
 $pb_form_pill_height: 37px;
 $form_pill_colors: (
   primary: map-get($status_color_text, "primary"),
-  neutral: map-get($status_color_text, "neutral"),
 );
 
 
@@ -24,71 +23,34 @@ $form_pill_colors: (
   cursor: pointer;
   @each $color_name, $color_value in $form_pill_colors {
     &[class*=_#{$color_name}]  {
-      background-color: mix($color_value, $card_light, 10%);
-      @if ($color_name == "neutral") {
-        background-color: $white;
-        border: 1px solid $border_light;
-      }
+      background-color: rgba($color_value, $opacity-1);
       transition: background-color 0.2s ease;
       box-shadow: none;
       @media (hover:hover) {
         &:hover {
-          background-color: mix($color_value, $card_light, 20%);
-          @if ($color_name == "neutral") {
-            background-color: mix($neutral, $card_light, 20%);
-            border: 1px solid $border_light;
-          }
-        }
-        &:active {
-          background-color: mix($color_value, $card_light, 30%);
-          @if ($color_name == "neutral") {
-            background-color: mix($neutral, $card_light, 30%);
-          }
+          background-color: rgba($color_value, $opacity-2);
         }
       }
       #{$selector}_text {
         color: $color_value;
-        @if ($color_name == "neutral") {
-          color: $text_lt_default;
-        }
         padding-left: $space-sm;
-        padding-right: $space-sm/2;
+        padding-right: $space-sm/4;
       }
       #{$selector}_close {
         color: $color_value;
-        padding-left: $space-sm/4;
+        padding-left: $space-sm/2;
         padding-right: $space-sm/4;
         display: flex;
         align-items: center;
-        // I had to temporarily change height to 27px so new hover state darker background forms a circle not an oval
-        // before size change (ticket 2 of 4) - change back to 100% when $pb_form_pill_height changed to 27px from 37px
-        height: 27px;
-        border-radius: 70px;
+        height: 100%;
         cursor: pointer;
-        &:hover {
-          background-color: mix($color_value, $card_light, 40%);
-          @if ($color_name == "neutral") {
-            background-color: mix($neutral, $card_light, 60%);
-          }
-        }
       }
       #{$selector}_tag {
         color: $color_value;
         padding-left: $space-sm;
-        @if ($color_name == "neutral") {
-          color: $text_lt_default;
-        }
       }
     }
   }
-  &:focus {
-    outline: $primary solid 2px;
-    outline-offset: -1px;
-  }
-  &:focus-visible {
-    outline: $primary solid 2px;
-    outline-offset: -1px;
-  }
   &.small {
     height: fit-content;
     height: -moz-fit-content;
@@ -108,71 +70,6 @@ $form_pill_colors: (
       &::before { line-height: 21px; }
     }
   }
-  &.dark {
-    @each $color_name, $color_value in $form_pill_colors {
-      // In dark mode, the base patterns below are needed for the next tickets for success, warning, error, info. 
-      // Primary and Neutral are exceptions to the general rule in the handoff 
-      &[class*=_#{$color_name}]  {
-      //   background-color: mix($color_value, $card_dark, 10%);
-        // .pb_form_pill_tag {
-        //   color: $color_name;
-        // }
-        // .pb_form_pill_close {
-        //   color: $color_name;
-        //   &:hover {
-        //     background-color: mix($color_value, $card_dark, 40%);
-        //   }
-        // }
-        // &:hover {
-        //   background-color: mix($color_value, $card_dark, 20%);
-        // }
-        // &:active {
-        //   background-color: mix($color_value, $card_dark, 30%);
-        // }
-        @if ($color_name == "neutral") {
-          background-color: transparent;
-          border: 1px solid $border_dark;
-          .pb_form_pill_text, .pb_form_pill_tag {
-            color: $text_dk_default;
-          }
-          .pb_form_pill_close {
-            color: $text_dk_default;
-            &:hover {
-              background-color: mix($neutral, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($white, $card_dark, 10%);
-          }
-          &:active {
-            background-color: mix($white, $card_dark, 20%);
-          }
-          &:focus {
-            border: 1px solid $primary;
-          }
-        }
-        @if ($color_name == "primary") {
-          background-color: mix($active_dark, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag {
-            color: $active_dark;
-          }
-          .pb_form_pill_close {
-            color: $active_dark;
-            &:hover {
-              background-color: mix($active_dark, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($active_dark, $card_dark, 20px);
-          }
-          &:active {
-            background-color: mix($active_dark, $card_dark, 30%);
-          }
-        }
-      }
-    }
-  }
-
   &[class*=lowercase] {
     text-transform: lowercase;
   }

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -5,7 +5,7 @@ import Title from '../pb_title/_title'
 import Icon from '../pb_icon/_icon'
 import Avatar from '../pb_avatar/_avatar'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
-import { buildDataProps, buildHtmlProps } from '../utilities/props'
+import { buildHtmlProps } from '../utilities/props'
 
 type FormPillProps = {
   className?: string,
@@ -18,9 +18,6 @@ type FormPillProps = {
   avatarUrl?: string,
   size?: string,
   textTransform?: 'none' | 'lowercase',
-  color?: "primary" | "neutral",
-  data?: {[key: string]: string},
-  tabIndex?: number,
   closeProps?: {
     onClick?: React.MouseEventHandler<HTMLSpanElement>,
     onMouseDown?: React.MouseEventHandler<HTMLSpanElement>,
@@ -39,26 +36,20 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
     closeProps = {},
     size = '',
     textTransform = 'none',
-    color = "primary",
-    data = {},
-    tabIndex,
   } = props
   const css = classnames(
-    `pb_form_pill_kit_${color}`,
+    `pb_form_pill_kit_${'primary'}`,
     globalProps(props),
     className,
     size === 'small' ? 'small' : null,
     textTransform,
   )
 
-  const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
 
   return (
     <div className={css}
         id={id}
-        tabIndex={tabIndex}
-        {...dataProps}
         {...htmlProps}
     >
         {name &&

data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb

@@ -1,4 +1,4 @@
-<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
+<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, **combined_html_options) do %>
   <% if object.name.present? %>
     <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xs" }) %>
       <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>

data/app/pb_kits/playbook/pb_form_pill/form_pill.rb

@@ -11,13 +11,9 @@ module Playbook
       prop :text_transform, type: Playbook::Props::Enum,
                             values: %w[none lowercase],
                             default: "none"
-      prop :color, type: Playbook::Props::Enum,
-                   values: %w[primary neutral],
-                   default: "primary"
-      prop :tabindex
 
       def classname
-        generate_classname("pb_form_pill_kit", color, name, text, text_transform)
+        generate_classname("pb_form_pill_kit", "primary", name, text, text_transform)
       end
 
       def display_text

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -33,7 +33,7 @@ type TableProps = {
     verticalBorder?: boolean,
 } & GlobalProps
 
-const Table = (props: TableProps) => {
+const Table = (props: TableProps): React.ReactElement => {
     const {
         aria = {},
         children,

data/app/pb_kits/playbook/pb_table/index.ts

@@ -1,19 +1,19 @@
 import PbEnhancedElement from '../pb_enhanced_element'
 
 export default class PbTable extends PbEnhancedElement {
-  static get selector() {
+  static get selector(): string {
     return '.table-responsive-collapse'
   }
 
-  connect() {
+  connect(): void {
     const tables = document.querySelectorAll('.table-responsive-collapse');
 
     // Each Table
     [].forEach.call(tables, (table: HTMLTableElement) => {
       // Header Titles
-      let headers: string[] = [];
+      const headers: string[] = [];
       [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
-        let colSpan = header.colSpan
+        const colSpan = header.colSpan
         for (let i = 0; i < colSpan; i++) {
           headers.push(header.textContent.replace(/\r?\n|\r/, ''));
         }

data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx

@@ -17,7 +17,7 @@ type TableBodyPropTypes = {
   tag?: "table" | "div";
 };
 
-const TableBody = (props: TableBodyPropTypes) => {
+const TableBody = (props: TableBodyPropTypes): React.ReactElement => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_table/subcomponents/_table_cell.tsx

@@ -18,7 +18,7 @@ type TableCellPropTypes = {
   text?: string
 };
 
-const TableCell = (props: TableCellPropTypes) => {
+const TableCell = (props: TableCellPropTypes): React.ReactElement => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_table/subcomponents/_table_head.tsx

@@ -17,7 +17,7 @@ type TableHeadPropTypes = {
   tag?: "table" | "div";
 };
 
-const TableHead = (props: TableHeadPropTypes) => {
+const TableHead = (props: TableHeadPropTypes): React.ReactElement => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx

@@ -18,7 +18,7 @@ type TableHeaderPropTypes = {
   text?: string;
 };
 
-const TableHeader = (props: TableHeaderPropTypes) => {
+const TableHeader = (props: TableHeaderPropTypes): React.ReactElement => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx

@@ -19,7 +19,7 @@ type TableRowPropTypes = {
   tag?: "table" | "div";
 };
 
-const TableRow = (props: TableRowPropTypes) => {
+const TableRow = (props: TableRowPropTypes): React.ReactElement => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_table/table.test.js

@@ -1,3 +1,5 @@
+/* eslint-disable react/no-multi-comp */
+
 import React from "react";
 import { ensureAccessible, renderKit, render, screen } from "../utilities/test-utils"
 

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

@@ -107,7 +107,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         required={required}
         type={type}
         value={value}
-    />)
+     />)
   )
 
   const addOnInput = (

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx

@@ -5,12 +5,12 @@ import TextInput from '../../pb_text_input/_text_input'
 import Title from '../../pb_title/_title'
 
 const TextInputDefault = (props) => {
+  const [firstName, setFirstName] = useState('')
   const handleOnChangeFirstName = ({ target }) => {
     setFirstName(target.value)
   }
   const ref = React.createRef()
 
-  const [firstName, setFirstName] = useState('')
   const [formFields, setFormFields] = useState({
     firstName: 'Jane',
     lastName: 'Doe',

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

@@ -52,14 +52,15 @@ const Textarea = ({
   label,
   maxCharacters,
   name,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   onChange = () => {},
   placeholder,
   required,
   rows = 4,
   value,
   ...props
-}: TextareaProps, ref: any) => {
-  ref = useRef<HTMLTextAreaElement>(null)
+}: TextareaProps) => {
+  const ref = useRef<HTMLTextAreaElement>(null)
   useEffect(() => {
     if (ref.current && resize === 'auto') {
       PbTextarea.addMatch(ref.current)
@@ -71,58 +72,75 @@ const Textarea = ({
   const resizeClass = `resize_${resize}`
   const classes = classnames('pb_textarea_kit', errorClass, inlineClass, resizeClass, globalProps(props), className)
   const noCount = typeof characterCount !== 'undefined'
-  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
-  const dataProps: {[key: string]: any} = buildDataProps(data)
+  const ariaProps: {[key: string]: string} = buildAriaProps(aria)
+  const dataProps: {[key: string]: string} = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
-  const characterCounter = () => {
-    return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : `${checkIfZero(characterCount)}`
-  }
-
   const checkIfZero = (characterCount: string | number) => {
     return characterCount == 0 ? characterCount.toString() : characterCount
   }
+  const characterCounter = () => {
+    return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : `${checkIfZero(characterCount)}`
+  }
 
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classes}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
     >
       <Caption text={label} />
       {children || (
         <textarea
-          className="pb_textarea_kit"
-          disabled={disabled}
-          name={name}
-          onChange={onChange}
-          placeholder={placeholder}
-          ref={ref}
-          required={required}
-          rows={rows}
-          value={value}
-          {...props}
+            className="pb_textarea_kit"
+            disabled={disabled}
+            name={name}
+            onChange={onChange}
+            placeholder={placeholder}
+            ref={ref}
+            required={required}
+            rows={rows}
+            value={value}
+            {...props}
         />
       )}
 
       {error ? (
         <>
           {characterCount ? (
-            <Flex spacing="between" vertical="center">
+            <Flex 
+                spacing="between" 
+                vertical="center"
+            >
               <FlexItem>
-                <Body margin="none" status="negative" text={error} />
+                <Body 
+                    margin="none"
+                    status="negative"
+                    text={error} 
+                />
               </FlexItem>
               <FlexItem>
-                <Caption margin="none" size="xs" text={characterCounter()} />
+                <Caption 
+                    margin="none"
+                    size="xs"
+                    text={characterCounter()}
+                />
               </FlexItem>
             </Flex>
           ) : (
-            <Body status="negative" text={error} />
+            <Body 
+                status="negative"
+                text={error}
+            />
           )}
         </>
       ) : (
          noCount && (
-          <Caption margin="none" size="xs" text={characterCounter()} />
+          <Caption 
+              margin="none"
+              size="xs"
+              text={characterCounter()}
+          />
         )
       )}
     </div>

data/app/pb_kits/playbook/pb_textarea/index.tsx

@@ -3,16 +3,16 @@ import PbEnhancedElement from '../pb_enhanced_element'
 export default class PbTextarea extends PbEnhancedElement {
   style: {[key: string]: string}
   scrollHeight: string
-  static get selector() {
+  static get selector(): string {
     return '.resize_auto textarea'
   }
 
-  onInput() {
+  onInput(): void {
     this.style.height = 'auto'
     this.style.height = (this.scrollHeight) + 'px'
   }
 
-  connect() {
+  connect(): void {
     this.element.setAttribute('style', 'height:' + (this.element.scrollHeight) + 'px;overflow-y:hidden;')
     this.element.addEventListener('input', this.onInput, false)
   }

data/app/pb_kits/playbook/pb_time/_time.tsx

@@ -24,7 +24,7 @@ type TimeProps = {
   unstyled?: boolean;
 } & GlobalProps
 
-const Time = (props: TimeProps) => {
+const Time = (props: TimeProps): React.ReactElement => {
   const {
     align,
     className,
@@ -47,8 +47,8 @@ const Time = (props: TimeProps) => {
 
   return (
     <div 
-      {...htmlProps}
-      className={classes} 
+        {...htmlProps}
+        className={classes} 
     >
       {showIcon && (
         unstyled

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

@@ -36,7 +36,7 @@ const dateTimeIso = (dateValue: Date) => {
   return DateTime.toIso(dateValue)
 }
 
-const TimeRangeInline = (props: TimeRangeInlineProps) => {
+const TimeRangeInline = (props: TimeRangeInlineProps): React.ReactElement => {
   const {
     aria = {},
     className,

data/app/pb_kits/playbook/pb_timeline/_item.tsx

@@ -26,7 +26,7 @@ const TimelineItem = ({
   iconColor = 'default',
   lineStyle = 'solid',
   ...props
-}: ItemProps) => {
+}: ItemProps): React.ReactElement => {
   const timelineItemCss = buildCss('pb_timeline_item_kit', lineStyle)
 
   const htmlProps = buildHtmlProps(htmlOptions)

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

@@ -27,7 +27,7 @@ const Timeline = ({
   orientation = 'horizontal',
   showDate = false,
   ...props
-}: TimelineProps) => {
+}: TimelineProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)

data/app/pb_kits/playbook/pb_title_detail/_title_detail.tsx

@@ -18,7 +18,7 @@ type TitleDetailProps = {
   title: string,
 } & GlobalProps
 
-const TitleDetail = (props: TitleDetailProps) => {
+const TitleDetail = (props: TitleDetailProps): React.ReactElement => {
   const {
     align = "left",
     aria = {},
@@ -37,19 +37,19 @@ const TitleDetail = (props: TitleDetailProps) => {
 
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classnames(pbCss, globalProps(props), className)}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classnames(pbCss, globalProps(props), className)}
+        id={id}
     >
       <Title
-        size={4}
-        text={title}
+          size={4}
+          text={title}
       />
       <Body
-        color="light"
-        text={detail}
+          color="light"
+          text={detail}
       />
     </div>
   )

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

@@ -42,7 +42,7 @@ const Toggle = ({
   size = 'sm',
   value,
   ...props
-}: Props) => {
+}: Props): React.ReactElement => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -50,8 +50,8 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     ...rest
   } = props
 
-  const dataProps: { [key: string]: any } = buildDataProps(data)
-  const ariaProps: { [key: string]: any } = buildAriaProps(aria)
+  const dataProps: { [key: string]: string } = buildDataProps(data)
+  const ariaProps: { [key: string]: string } = buildAriaProps(aria)
   const htmlProps = buildHtmlProps(htmlOptions)
   
   const css = classnames(

data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx

@@ -52,7 +52,7 @@ const TreemapChart = ({
   tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.value}</b>',
   type = "treemap",
   ...props
-}: TreemapChartProps) => {
+}: TreemapChartProps): React.ReactElement => {
   
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
@@ -98,7 +98,6 @@ const TreemapChart = ({
   const [options, setOptions] = useState({});
 
   useEffect(() => {
-    
     setOptions(merge(staticOptions, customOptions));
   }, [chartData]);
 

data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js

@@ -1,3 +1,5 @@
+/* eslint-disable no-console */
+
 import React from 'react';
 import { render, screen } from '../utilities/test-utils';
 import TreemapChart from './_treemap_chart';

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,
 }
 
@@ -77,7 +77,7 @@ const Typeahead = ({
   id,
   loadOptions = noop,
   ...props
-}: TypeaheadProps) => {
+}: TypeaheadProps): React.ReactElement => {
   const selectProps = {
     cacheOptions: true,
     components: {