playbook_ui 14.11.0 → 14.11.1.pre.alpha.PBNTR440enableglobalpropspbformwith5624

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen } from "../utilities/test-utils";
+import { render, screen, act } from "../utilities/test-utils";
 import PhoneNumberInput from "./_phone_number_input";
 
 const testId = "phoneNumberInput";
@@ -120,3 +120,22 @@ test("should trigger callback", () => {
 
   expect(handleOnValidate).toBeCalledWith(true)
 });
+
+test("should format phone number as '555-555-5555' with formatAsYouType and 'us' country", () => {
+    const props = {
+        initialCountry: 'us',
+        formatAsYouType: true,
+        id: testId,
+    };
+
+    render(<PhoneNumberInput {...props} />);
+    
+    const input = screen.getByRole("textbox");
+    
+    act(() => {
+        input.value = "5555555555";
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+
+    expect(input.value).toBe("555-555-5555");
+});

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_radio/_radio.scss

@@ -4,7 +4,7 @@
 @import "../pb_body/body";
 @import "../tokens/transition";
 
-[class^=pb_radio_kit] {
+[class^="pb_radio_kit"] {
   display: inline-flex;
   cursor: pointer;
 
@@ -16,10 +16,11 @@
     border-radius: 1000px;
     border: 2px solid $border_light;
     margin-right: $space_xs;
-    transition: background $transition_default ease, box-shadow $transition_default ease, border-color $transition_default ease;
+    transition: background $transition_default ease,
+      box-shadow $transition_default ease, border-color $transition_default ease;
   }
 
-  @media (hover:hover) {
+  @media (hover: hover) {
     &:hover .pb_radio_button {
       background-color: $bg_light;
       border-color: $border_light;
@@ -52,14 +53,14 @@
       }
     }
 
-    &:disabled:checked + .pb_radio_button{
+    &:disabled:checked + .pb_radio_button {
       cursor: not-allowed;
       background-color: $white;
       border: 6px solid $neutral;
     }
   }
 
-  &[class*=vertical] {
+  &[class*="vertical"] {
     flex-direction: column;
     align-items: center;
     .pb_radio_button {
@@ -80,7 +81,7 @@
       }
       &:checked {
         & ~ .pb_radio_button {
-          border: 6px solid $primary;
+          border: 6px solid $active_dark;
         }
       }
 
@@ -103,10 +104,10 @@
       }
     }
 
-    @media (hover:hover) {
+    @media (hover: hover) {
       &:hover {
         .pb_radio_button {
-          background-color: rgba($white,.10);
+          background-color: rgba($white, 0.1);
           border-color: $border_dark;
         }
       }
@@ -115,6 +116,9 @@
       > .pb_radio_button {
         border-color: $error_dark;
       }
+      > .pb_body_kit_negative {
+        color: $error_dark;
+      }
     }
   }
   &.error {

data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx

@@ -29,6 +29,7 @@ const RadioChildren = (props) => {
             marginBottom="none"
             minWidth="xs"
             options={options}
+            {...props}
         />
       </Radio>
       <Radio
@@ -40,10 +41,11 @@ const RadioChildren = (props) => {
           value="Typeahead"
           {...props}
       >
-        <Typeahead 
+        <Typeahead
             marginBottom="none"
             minWidth="xs"
             options={options}
+            {...props}
         />
       </Radio>
       <Radio
@@ -54,9 +56,12 @@ const RadioChildren = (props) => {
           value="Typography"
           {...props}
       >
-        <Title text="Custom Typography" />
+        <Title
+            text="Custom Typography"
+            {...props}
+        />
       </Radio>
     </div>
   )
 }
-export default RadioChildren
+export default RadioChildren

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;
@@ -211,10 +209,8 @@
   }
   .pb_select_kit_wrapper {
     &.error {
-      .pb_select_kit_wrapper {
-        > select:first-child {
-          border-color: $error_dark;
-        }
+      > select {
+        border-color: $error_dark;
       }
     }
   }
@@ -230,7 +226,7 @@
     &:hover {
       select {
         color: $white !important;
-        background: rgba(0,130,255,0.1);
+        background: $focus_input_dark;
       }
       svg {
         color: $primary !important;
@@ -242,7 +238,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_select/_select.tsx

@@ -127,7 +127,10 @@ const Select = ({
             className="pb_select_kit_label"
             htmlFor={name}
         >
-          <Caption text={label} />
+          <Caption 
+              dark={props.dark}
+              text={label} 
+          />
         </label>
       }
       <label
@@ -146,6 +149,7 @@ const Select = ({
         }
         {error &&
           <Body
+              dark={props.dark}
               status="negative"
               text={error}
           />

data/app/pb_kits/playbook/pb_select/select.html.erb

@@ -5,7 +5,7 @@
   **combined_html_options) do %>
   <% if object.label %>
     <label class="pb_select_kit_label" for="<%= object.name %>">
-      <%= pb_rails("caption", props: { text: object.label }) %>
+      <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) %>
     </label>
   <% end %>
   <label class="<%= object.select_wrapper_class %>" for="<%= object.name %>">
@@ -23,7 +23,7 @@
         object.all_attributes
       )
       %>
-      <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
+      <%= pb_rails("body", props: { status: "negative", text: object.error, dark: object.dark }) %>
     <% end %>
     <% if object.multiple != true %>
       <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(angle_down_path), fixed_width: true, classname: "pb_select_kit_caret"}) %>

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_selectable_icon/_selectable_icon.tsx

@@ -16,6 +16,7 @@ type SelectableIconProps = {
   checked?: boolean,
   className?: string,
   customIcon?: {[key: string] :SVGElement},
+  dark?: boolean,
   disabled?: boolean,
   data?: GenericObject,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -33,6 +34,7 @@ const SelectableIcon = ({
   className,
   checked = false,
   customIcon,
+  dark = false,
   data = {},
   disabled = false,
   htmlOptions = {},
@@ -52,10 +54,12 @@ const SelectableIcon = ({
   const classes = classnames(
     buildCss('pb_selectable_icon_kit', {
       checked: checked,
+      dark: dark,
       disabled: disabled,
       enabled: !disabled,
     }),
     globalProps(props),
+    dark ? 'dark' : '',
     className
   )
 
@@ -73,17 +77,19 @@ const SelectableIcon = ({
         <>
           <Icon
               customIcon={customIcon}
+              dark={dark}
               icon={icon}
               size="2x"
           />
           <Title
+              dark={dark}
               size={4}
               tag="h4"
               text={text}
           />
         </>
       )}
-          
+
       {inputs === 'enabled' && (
         <>
           <input
@@ -98,10 +104,12 @@ const SelectableIcon = ({
           <label htmlFor={inputIdPresent}>
             <Icon
                 customIcon={customIcon}
+                dark={dark}
                 icon={icon}
                 size="2x"
             />
             <Title
+                dark={dark}
                 size={4}
                 tag="h4"
                 text={text}

data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_default.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import SelectableIcon from '../_selectable_icon'
 
-const SelectableIconDefault = () => {
+const SelectableIconDefault = (props) => {
   const [ checkSelected, toggleSelected ] = useState(true)
   const [ checkUnselected, toggleUnselected ] = useState(false)
   const [ checkDisabled, toggleDisabled ] = useState(false)
@@ -15,6 +15,7 @@ const SelectableIconDefault = () => {
           inputId={10}
           onChange={() => toggleSelected(!checkSelected)}
           text="US Dollar"
+          {...props}
       />
 
       <SelectableIcon
@@ -23,6 +24,7 @@ const SelectableIconDefault = () => {
           inputId={11}
           onChange={() => toggleUnselected(!checkUnselected)}
           text="Euro"
+          {...props}
       />
 
       <SelectableIcon
@@ -32,6 +34,7 @@ const SelectableIconDefault = () => {
           inputId={12}
           onChange={() => toggleDisabled(!checkDisabled)}
           text="Yen"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_single_select.jsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 
 import SelectableIcon from '../_selectable_icon'
 
-const SelectableIconSingleSelect = () => {
+const SelectableIconSingleSelect = (props) => {
   const [ selectedFormat, toggleFormat ] = useState(null)
 
   return (
@@ -17,6 +17,7 @@ const SelectableIconSingleSelect = () => {
           onChange={() => toggleFormat('Cassette')}
           text="Cassette"
           value="Cassette"
+          {...props}
       />
 
       <SelectableIcon
@@ -28,6 +29,7 @@ const SelectableIconSingleSelect = () => {
           onChange={() => toggleFormat('CD')}
           text="CD"
           value="CD"
+          {...props}
       />
 
       <SelectableIcon
@@ -39,6 +41,7 @@ const SelectableIconSingleSelect = () => {
           onChange={() => toggleFormat('Vinyl')}
           text="Vinyl"
           value="Vinyl"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb

@@ -4,9 +4,23 @@
     data: object.data,
     id: object.id,
     **combined_html_options) do %>
-  <%= pb_rails("list") do %>
-    <% object.items.each do |item| %>
-      <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant, id: object.get_id(item)) )%>
+  <% if enable_drag %>
+    <%= pb_rails("draggable", props: {initial_items: object.items}) do %>
+      <%= pb_rails("draggable/draggable_container") do %>
+        <%= pb_rails("list", props: {ordered: false}) do %>
+          <% object.items.each do |item| %>
+            <%= pb_rails("draggable/draggable_item", props: {drag_id: item[:drag_id]}) do %>
+              <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant, id: object.get_id(item), drag_id: item[:drag_id]) )%>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% else %>
+    <%= pb_rails("list") do %>
+      <% object.items.each do |item| %>
+        <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant, id: object.get_id(item)) )%>
+      <% end %>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.rb

@@ -14,6 +14,9 @@ module Playbook
       prop :items, type: Playbook::Props::Array,
                    default: []
 
+      prop :enable_drag, type: Playbook::Props::Boolean,
+                         default: false
+
       def classname
         generate_classname("pb_selectable_list_kit")
       end

data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb

@@ -4,6 +4,13 @@
     data: object.data,
     id: object.id,
     **combined_html_options) do %>
+  <% if object.drag_id && object.drag_handle %>
+    <span style="vertical-align: middle;">
+      <%= pb_rails("body") do %>
+        <svg width="auto" height="auto" viewBox="0 0 31 25" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="pb_custom_icon svg-inline--fa vertical_align_middle  svg_fw"><path d="M12.904 6.355a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm0 7.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm4.5-13.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm-1.5 9a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5z" fill="#242B42"></path></svg>
+      <% end %>
+    </span>
+  <% end %>
   <% if object.variant == "radio"%>
     <%= pb_rails("radio", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
     <% if content.present? %>
@@ -19,10 +26,10 @@
   <% if object.variant == "checkbox"%>
     <script>
       var checkboxElement = document.querySelector("#<%=object.id%> input[type=checkbox]")
-      
+
       checkboxElement.addEventListener("change", (evt) => {
         var listItemElement = document.querySelector("#<%=object.id%>")
-        
+
         if (evt.target.checked) {
           listItemElement.classList.add("checked_item");
         } else {
@@ -34,9 +41,9 @@
     <script>
       var radioElement = document.querySelector("#<%=object.id%> input[type=radio]")
 
-      radioElement.addEventListener("change", () => {        
+      radioElement.addEventListener("change", () => {
         var radios = radioElement.closest("ul").querySelectorAll("input[type=radio]")
-        
+
         radios.forEach((radio) => {
           if (radio.checked) {
             radio.closest("li").classList.add("checked_item");

data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb

@@ -6,6 +6,9 @@ module Playbook
       prop :tabindex
       prop :checked, type: Playbook::Props::Boolean,
                      default: false
+      prop :drag_handle, type: Playbook::Props::Boolean,
+                         default: true
+      prop :drag_id, type: Playbook::Props::String
       prop :name, type: Playbook::Props::String
       prop :text, type: Playbook::Props::String
       prop :value, type: Playbook::Props::String

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

@@ -2,7 +2,6 @@ import React, { useEffect } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps, globalInlineProps } from '../utilities/globalProps'
-import PbTable from '.'
 import {
     TableHead,
     TableHeader,
@@ -10,6 +9,7 @@ import {
     TableRow,
     TableCell,
 } from "./subcomponents";
+import { addDataTitle } from './utilities/addDataTitle'
 
 type TableProps = {
     aria?: { [key: string]: string },
@@ -196,8 +196,7 @@ const Table = (props: TableProps): React.ReactElement => {
     }, [stickyRightColumn]);
 
     useEffect(() => {
-        const instance = new PbTable()
-        instance.connect()
+        addDataTitle()
     }, [])
 
     return (

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.html.erb

@@ -0,0 +1,74 @@
+<%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_left_column: ["a"], sticky_right_column: ["b"] }) do %>
+  <thead>
+    <tr>
+      <th id="a">Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th>Column 5</th>
+      <th>Column 6</th>
+      <th>Column 7</th>
+      <th>Column 8</th>
+      <th>Column 9</th>
+      <th>Column 10</th>
+      <th>Column 11</th>
+      <th>Column 12</th>
+      <th>Column 13</th>
+      <th>Column 14</th>
+      <th id="b">Column 15</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td id="a">Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Value 6</td>
+      <td>Value 7</td>
+      <td>Value 8</td>
+      <td>Value 9</td>
+      <td>Value 10</td>
+      <td>Value 11</td>
+      <td>Value 12</td>
+      <td>Value 13</td>
+      <td>Value 14</td>
+      <td id="b">Value 15</td>
+    </tr>
+    <tr>
+      <td id="a">Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Value 6</td>
+      <td>Value 7</td>
+      <td>Value 8</td>
+      <td>Value 9</td>
+      <td>Value 10</td>
+      <td>Value 11</td>
+      <td>Value 12</td>
+      <td>Value 13</td>
+      <td>Value 14</td>
+      <td id="b">Value 15</td>
+    </tr>
+    <tr>
+      <td id="a">Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Value 6</td>
+      <td>Value 7</td>
+      <td>Value 8</td>
+      <td>Value 9</td>
+      <td>Value 10</td>
+      <td>Value 11</td>
+      <td>Value 12</td>
+      <td>Value 13</td>
+      <td>Value 14</td>
+      <td id="b">Value 15</td>
+    </tr>
+  </tbody>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_rails.md

@@ -0,0 +1,3 @@
+The `sticky_left_column` and `sticky_right_column` props can be used together on the same table as needed.
+
+Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using props.

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md

@@ -1,3 +1,3 @@
-The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
+The `sticky_left_column` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
 
-Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `stickyLeftColumn`.
+Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `sticky_left_column`.