playbook_ui 14.14.0.pre.alpha.revert4339revert4242play1633displaytitle6456 → 14.14.0.pre.rc.0

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

@@ -2,7 +2,6 @@ import PbEnhancedElement from '../pb_enhanced_element'
 
 const TABLE_WRAPPER_SELECTOR = "[data-pb-table-wrapper]";
 const TABLE_COLLAPSIBLE_WRAPPER_SELECTOR = "[data-pb-table-collapsible-wrapper]";
-const TABLE_COLLAPSIBLE_CELL_SELECTOR = "[data-pb-table-collapsible-cell-id]";
 
 export default class PbTable extends PbEnhancedElement {
   stickyLeftColumns: string[] = [];
@@ -159,49 +158,18 @@ export default class PbTable extends PbEnhancedElement {
   }
 
   handleCollapsibleClick() {
-    const cells = this.element.querySelectorAll(TABLE_COLLAPSIBLE_CELL_SELECTOR);
     const collapsibleElements = this.element.querySelectorAll(TABLE_COLLAPSIBLE_WRAPPER_SELECTOR);
-
-    if (cells.length > 0) {
-      cells.forEach((cell) => {
-        const cellId = (cell as HTMLElement).dataset.pbTableCollapsibleCellId;
-
-        Array.from(cell.children).forEach((child) => {
-          if (child.id === cellId) {
-            Array.from(child.children).forEach((svgChild) => {
-              svgChild.id = cellId; // Assign cellId to SVG child
-              Array.from(svgChild.children).forEach((pathChild) => {
-                pathChild.id = cellId; // Assign cellId to path child
-              });
-            });
-          }
-        });
-        cell.addEventListener('click', (event) => {
-          if ((event.target as HTMLElement).id) {
-            document.dispatchEvent(new CustomEvent(`collapsed-toggle${(event.currentTarget as HTMLElement).id}`));
-
-            const toggleElements = this.element.querySelectorAll(`.collapsible_border_toggle${(event.currentTarget as HTMLElement).id}`);
-            toggleElements.forEach((element) => {
-              element.classList.toggle('no-border');
-              element.classList.toggle('border-active');
-            });
-          }
+    collapsibleElements.forEach((collapsibleElement) => {
+      collapsibleElement.addEventListener('click', (event) => {
+        document.dispatchEvent(new CustomEvent(`collapsed-toggle${(event.currentTarget as HTMLElement).id}`))
+
+        const toggleElements = this.element.querySelectorAll(`.collapsible_border_toggle${(event.currentTarget as HTMLElement).id}`);
+        toggleElements.forEach(element => {
+          element.classList.toggle('no-border');
+          element.classList.toggle('border-active');
         });
-      });
-
-    } else {
-      collapsibleElements.forEach((collapsibleElement) => {
-        collapsibleElement.addEventListener('click', (event) => {
-          document.dispatchEvent(new CustomEvent(`collapsed-toggle${(event.currentTarget as HTMLElement).id}`))
-
-          const toggleElements = this.element.querySelectorAll(`.collapsible_border_toggle${(event.currentTarget as HTMLElement).id}`);
-          toggleElements.forEach(element => {
-            element.classList.toggle('no-border');
-            element.classList.toggle('border-active');
-          });
-        })
       })
-    }
+    })
   }
 
   handleCollapsibleRow() {

data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss

@@ -37,10 +37,6 @@
     cursor: pointer;
   }
 
-  .collapsible_cell {
-    cursor: default;
-  }
-
   .no-border {
     border-bottom: none !important;
   }

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

@@ -7,14 +7,11 @@ import {
 } from "../../utilities/props";
 import { globalProps } from "../../utilities/globalProps";
 
-import Draggable from "../../pb_draggable/_draggable"
-
 type TableBodyPropTypes = {
   aria?: { [key: string]: string };
   children: React.ReactNode[] | React.ReactNode;
   className: string;
   data?: { [key: string]: string };
-  draggableContainer?: boolean;
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   tag?: "table" | "div";
@@ -26,7 +23,6 @@ const TableBody = (props: TableBodyPropTypes): React.ReactElement => {
     children,
     className,
     data = {},
-    draggableContainer = false,
     htmlOptions = {},
     id,
     tag = "table",
@@ -41,30 +37,7 @@ const TableBody = (props: TableBodyPropTypes): React.ReactElement => {
   return (
     <>
       {isTableTag ? (
-        draggableContainer ? (
-          <Draggable.Container
-              {...ariaProps}
-              {...dataProps}
-              {...htmlProps}
-              className={classes}
-              id={id}
-              tag="tbody"
-          >
-            {children}
-          </Draggable.Container>
-        ) : (
-          <tbody
-              {...ariaProps}
-              {...dataProps}
-              {...htmlProps}
-              className={classes}
-              id={id}
-          >
-            {children}
-          </tbody>
-        )
-      ) : draggableContainer ? (
-        <Draggable.Container
+        <tbody
             {...ariaProps}
             {...dataProps}
             {...htmlProps}
@@ -72,7 +45,7 @@ const TableBody = (props: TableBodyPropTypes): React.ReactElement => {
             id={id}
         >
           {children}
-        </Draggable.Container>
+        </tbody>
       ) : (
         <div
             {...ariaProps}

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

@@ -9,7 +9,6 @@ import {
 import { globalProps } from "../../utilities/globalProps";
 import Collapsible from "../../pb_collapsible/_collapsible";
 import useCollapsible from "../../pb_collapsible/useCollapsible";
-import Draggable from "../../pb_draggable/_draggable";
 
 type TableRowPropTypes = {
   aria?: { [key: string]: string };
@@ -20,8 +19,6 @@ type TableRowPropTypes = {
   collapsibleSideHighlight?: boolean;
   data?: { [key: string]: string };
   dark?: boolean;
-  dragId?: string;
-  draggableItem?: boolean;
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   toggleCellId?: string;
@@ -39,8 +36,6 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
     className,
     data = {},
     dark = false,
-    dragId,
-    draggableItem = false,
     htmlOptions = {},
     id,
     toggleCellId,
@@ -157,38 +152,15 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
           </>
         )
       ) : isTableTag ? (
-        draggableItem ? (
-          <Draggable.Item
-              {...ariaProps}
-              {...dataProps}
-              {...htmlProps}
-              className={classes}
-              dragId={dragId}
-              tag="tr"
-          >
-            {children}
-          </Draggable.Item>
-        ) : (
-          <tr
-              {...ariaProps}
-              {...dataProps}
-              {...htmlProps}
-              className={classes}
-              id={id}
-          >
-            {children}
-          </tr>
-        )
-      ) : draggableItem ? (
-        <Draggable.Item
+        <tr
             {...ariaProps}
             {...dataProps}
             {...htmlProps}
             className={classes}
-            dragId={dragId}
+            id={id}
         >
           {children}
-        </Draggable.Item>
+        </tr>
       ) : (
         <div
             {...ariaProps}

data/app/pb_kits/playbook/pb_table/table_body.html.erb

@@ -1,17 +1,11 @@
 <% if object.tag == "table" %>
-    <% if object.draggable_container %>
-      <%= pb_rails("draggable/draggable_container", props: { tag: "tbody", classname: object.classname, data: object.data }) do %>
-        <%= content.presence %>
-      <% end %>
-    <% else %>
-      <%= content_tag(:tbody,
-        aria: object.aria,
-        class: object.classname,
-        data: object.data,
-        id: object.id,
-        **combined_html_options) do %>
-        <%= content.presence %>
-      <% end %>
+    <%= content_tag(:tbody,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
+      **combined_html_options) do %>
+      <%= content.presence %>
     <% end %>
 <% else %>
     <%= content_tag(:div,

data/app/pb_kits/playbook/pb_table/table_body.rb

@@ -6,8 +6,6 @@ module Playbook
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[table div],
                  default: "table"
-      prop :draggable_container, type: Playbook::Props::Boolean,
-                                 default: false
 
       def classname
         generate_classname("pb_table_tbody")

data/app/pb_kits/playbook/pb_table/table_row.html.erb

@@ -5,7 +5,6 @@
     data: object.data.merge(id: object.id),  
     id: object.id,
     'data-pb-table-collapsible-wrapper' => true,
-    'data-pb-table-collapsible-cell-id' => object.toggle_cell_id,
     **combined_html_options) do %>
     <%= content.presence %>
   <% end %>
@@ -19,19 +18,13 @@
     <% end %>  
   </tr>
 <% elsif object.tag == "table" %>
-    <% if object.draggable_item %>
-      <%= pb_rails("draggable/draggable_item", props:{ drag_id: object.drag_id, tag: "tr", classname: object.classname, data: object.data }) do %>
-        <%= content.presence %>
-      <% end %>
-    <% else %>
-      <%= content_tag(:tr,
-        aria: object.aria,
-        class: object.classname,
-        data: object.data,
-        id: object.id,
-        **combined_html_options) do %>
-        <%= content.presence %>
-      <% end %>
+    <%= content_tag(:tr,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
+      **combined_html_options) do %>
+      <%= content.presence %>
     <% end %>
 <% else %>
     <%= content_tag(:div,

data/app/pb_kits/playbook/pb_table/table_row.rb

@@ -13,14 +13,9 @@ module Playbook
       prop :collapsible_content
       prop :collapsible_side_highlight, type: Playbook::Props::Boolean,
                                         default: true
-      prop :toggle_cell_id, type: Playbook::Props::String
-      prop :draggable_item, type: Playbook::Props::Boolean,
-                            default: false
-      prop :drag_id, type: Playbook::Props::String,
-                     default: nil
 
       def classname
-        generate_classname("pb_table_row_kit", side_highlight_class) + tag_class + collapsible_cell_class
+        generate_classname("pb_table_row_kit", side_highlight_class) + tag_class
       end
 
       def side_highlight_class
@@ -30,14 +25,6 @@ module Playbook
       def tag_class
         " pb_table_tr"
       end
-
-      def collapsible_cell_class
-        if toggle_cell_id
-          " collapsible_cell"
-        else
-          ""
-        end
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb

@@ -27,20 +27,6 @@
     placeholder: "123-45-6789"
   }) %>
 
-  <%= pb_rails("text_input", props: {
-    label: "Credit Card",
-    mask: "credit_card",
-    margin_bottom: "md",
-    placeholder: "1234 5678 9012 3456"
-  }) %>
-
-  <%= pb_rails("text_input", props: {
-    label: "CVV",
-    mask: "cvv",
-    margin_bottom: "md",
-    placeholder: "123"
-  }) %>
-
   <%= pb_rails("title" , props: {
     text: "Hidden Input Under The Hood",
     padding_bottom: "sm"

data/app/pb_kits/playbook/pb_text_input/index.js

@@ -27,8 +27,6 @@ export default class PbTextInput extends PbEnhancedElement {
       ssn: 'ssn',
       postal_code: 'postalCode',
       zip_code: 'zipCode',
-      credit_card: 'creditCard',
-      cvv: 'cvv',
     }[maskType];
 
     if (maskKey && INPUTMASKS[maskKey]) {
@@ -47,9 +45,6 @@ export default class PbTextInput extends PbEnhancedElement {
         case "currency":
           sanitizedInput.value = sanitizeCurrency(formattedValue);
           break;
-        case "credit_card":
-          sanitizedInput.value = sanitizeCreditCard(formattedValue);
-          break;
         default:
           sanitizedInput.value = formattedValue;
       }
@@ -68,10 +63,6 @@ function sanitizeCurrency(input) {
   return input.replace(/[$,]/g, "");
 }
 
-function sanitizeCreditCard(input) {
-  return input.replace(/\D/g, ""); 
-}
-
 function setCursorPosition(inputElement, cursorPosition, rawValue, formattedValue) {
   const difference = formattedValue.length - rawValue.length;
   const newPosition = Math.max(0, cursorPosition + difference);

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -4,15 +4,13 @@
 module Playbook
   module PbTextInput
     class TextInput < Playbook::KitBase
-      VALID_MASKS = %w[currency zip_code postal_code ssn credit_card cvv].freeze
+      VALID_MASKS = %w[currency zipCode postalCode ssn].freeze
 
       MASK_PATTERNS = {
         "currency" => '^\$\d{1,3}(?:,\d{3})*(?:\.\d{2})?$',
         "zip_code" => '\d{5}',
         "postal_code" => '\d{5}-\d{4}',
         "ssn" => '\d{3}-\d{2}-\d{4}',
-        "credit_card" => '\d{4} \d{4} \d{4} \d{4}',
-        "cvv" => '\d{3,4}',
       }.freeze
 
       prop :autocomplete, type: Playbook::Props::Boolean,
@@ -36,8 +34,7 @@ module Playbook
       prop :add_on, type: Playbook::Props::NestedProps,
                     nested_kit: Playbook::PbTextInput::AddOn
 
-      prop :mask, type: Playbook::Props::Enum,
-                  values: ["currency", "zip_code", "postal_code", "ssn", "credit_card", "cvv", nil],
+      prop :mask, type: Playbook::Props::String,
                   default: nil
 
       def classname

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -31,38 +31,6 @@
     @include pb_title_thin;
   }
 
-  &[class*=_display] {
-    font-size: clamp(24px, calc(1.25vw + 5.3vw), 128px);
-  }
-
-  &[class*=_dynamic] {
-    &[class*=_xs] {
-      font-size: min(2vw, 80vw / 16); 
-    }
-  
-    &[class*=_sm] {
-      font-size: min(2.5vw, 96vw / 16); 
-    }
-  
-    &[class*=_md] {
-      font-size: min(4vw, 160vw / 16);
-    }
-  
-    &[class*=_lg] {
-      font-size: min(5vw, 192vw / 16);
-    }
-  
-    &[class*=_xl] {
-      font-size: min(6vw, 224vw / 16);
-    }
-  
-    &[class*=_xxl] {
-      font-size: min(8vw, 256vw / 16);
-    }
-  }
-  
-
-
   @each $size, $size_value in $breakpoints_grid {
     @for $title_size_value from 1 through 4 {
       $min_size: map-get($size_value, "min");

data/app/pb_kits/playbook/pb_title/_title.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, GlobalProps, globalProps } from '../utilities/globalProps'
 
-type SizeType = 1 | 2 | 3 | 4 | "1" | "2" | "3" | "4" | "display"
+type SizeType = 1 | 2 | 3 | 4 | "1" | "2" | "3" | "4"
 type SizeResponsiveType = {[key: string]: SizeType}
 
 type TitleProps = {
@@ -16,7 +16,6 @@ type TitleProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   size?: SizeType | SizeResponsiveType,
-  displaySize?: null | "xs" | "sm" | "md" | "lg" | "xl" | "xxl",
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
   text?: string,
   variant?: null | "link",
@@ -33,7 +32,6 @@ const Title = (props: TitleProps): React.ReactElement => {
     htmlOptions = {},
     id,
     size = 3,
-    displaySize = null,
     bold = true,
     tag = 'h3',
     text,
@@ -58,16 +56,9 @@ const Title = (props: TitleProps): React.ReactElement => {
     return css.trim()
   }
 
-  const buildDisplaySize = () => {
-    if (displaySize) {
-      return `pb_title_kit_dynamic_${displaySize}`
-    }
-  }
-
   const classes = classnames(
     buildCss('pb_title_kit', isSizeNumberOrString ? `size_${size}` : "", variant, color, getBold),
     globalProps(props),
-    buildDisplaySize(),
     buildResponsiveSizeCss(),
     className
   )

data/app/pb_kits/playbook/pb_title/docs/_title_default.html.erb

@@ -1,9 +1,10 @@
 <%= pb_rails("title", props: {
-    margin_bottom: "md"
 })  do %>
     Default Title
 <% end %>
 
+<br/>
+
 <%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %>
 <%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %>
 <%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_default.jsx

@@ -6,10 +6,10 @@ const TitleDefault = (props) => {
   return (
     <div>
       <Title
-          marginBottom='md'
           text="Default Title"
           {...props}
       />
+      <br />
       <Title
           size={1}
           tag="h1"

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

@@ -5,7 +5,6 @@ examples:
   - title_colors: Colors
   - title_responsive: Responsive
   - title_truncate: Truncate
-  - title_display_size: Display Size
 
   react:
   - title_default: Default UI
@@ -13,4 +12,3 @@ examples:
   - title_colors: Colors
   - title_responsive: Responsive
   - title_truncate: Truncate
-  - title_display_size: Display Size

data/app/pb_kits/playbook/pb_title/docs/index.js

@@ -3,4 +3,3 @@ export { default as TitleLightWeight } from './_title_light_weight.jsx'
 export { default as TitleColors } from './_title_colors.jsx'
 export { default as TitleResponsive } from './_title_responsive.jsx'
 export { default as TitleTruncate } from './_title_truncate.jsx'
-export { default as TitleDisplaySize } from './_title_display_size.jsx'

data/app/pb_kits/playbook/pb_title/title.rb

@@ -16,15 +16,12 @@ module Playbook
                      default: nil,
                      deprecated: true
       prop :bold, type: Playbook::Props::Boolean, default: true
-      prop :display_size, type: Playbook::Props::Enum,
-                          values: [nil, "xs", "sm", "md", "lg", "xl", "xxl"],
-                          default: nil
 
       def classname
         if is_size_responsive
           generate_classname("pb_title_kit", variant, color, is_bold) + generate_responsive_size_classname
         else
-          generate_classname("pb_title_kit", size, variant, color, is_bold) + generate_display_size
+          generate_classname("pb_title_kit", size, variant, color, is_bold)
         end
       end
 
@@ -32,12 +29,6 @@ module Playbook
         bold ? nil : "thin"
       end
 
-      def generate_display_size
-        return "" if display_size.nil?
-
-        " pb_title_kit_dynamic_#{display_size}"
-      end
-
       def is_size_responsive
         try(:size).is_a?(::Hash)
       end

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

@@ -141,6 +141,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
 
   &[data-popper-placement="right"] {
     box-shadow: -8px 0 28px 0 $tooltip_shadow;
+    margin: 0 0 0 $space_sm;
     .arrow {
       left: -18px;
       right: auto;
@@ -155,6 +156,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
 
   &[data-popper-placement="bottom"] {
     box-shadow: 0 -12px 28px 0 $tooltip_shadow;
+    margin: $space_sm 0 0 0;
     .arrow {
       top: -18px;
       margin-bottom: 0;
@@ -167,6 +169,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
 
   &[data-popper-placement="left"] {
     box-shadow: 8px 0 28px 0 $tooltip_shadow;
+    margin: 0 $space_sm 0 0;
     .arrow {
       margin-bottom: 0;
       right: -18px;

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

@@ -2,10 +2,8 @@ examples:
 
   rails:
   - tooltip_default: Default
-  - tooltip_interaction: Content Interaction
   - tooltip_selectors: Using Common Selectors
   - tooltip_with_icon_circle: Icon Circle Tooltip
-  - tooltip_delay_rails: Delay
   - tooltip_show_tooltip: Show Tooltip
 
   react:

data/app/pb_kits/playbook/pb_tooltip/index.js

@@ -11,7 +11,7 @@ const TOOLTIP_TIMEOUT = 250
 
 export default class PbTooltip extends PbEnhancedElement {
   static get selector() {
-    return '[data-pb-tooltip-kit="true"][data-pb-tooltip-interaction="false"]:not([data-pb-tooltip-delay-open]):not([data-pb-tooltip-delay-close])'
+    return '[data-pb-tooltip-kit]'
   }
 
   connect() {
@@ -152,4 +152,4 @@ export default class PbTooltip extends PbEnhancedElement {
   get triggerMethod() {
     return this.element.dataset.pbTooltipTriggerMethod || 'hover'
   }
-}
+}

data/app/pb_kits/playbook/pb_tooltip/tooltip.rb

@@ -7,10 +7,6 @@ module Playbook
       prop :trigger_element_selector
       prop :trigger_element_id, deprecated: true
       prop :tooltip_id
-      prop :interaction, type: Playbook::Props::Boolean,
-                         default: false
-      prop :delay_open
-      prop :delay_close
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
       prop :trigger_method, type: Playbook::Props::Enum,
@@ -22,19 +18,15 @@ module Playbook
       end
 
       def data
-        data = Hash(values[:data]).merge(
+        Hash(values[:data]).merge(
           pb_tooltip_kit: true,
           pb_tooltip_position: position,
           pb_tooltip_trigger_element_selector: trigger_element_selector,
           pb_tooltip_trigger_element_id: trigger_element_id,
           pb_tooltip_tooltip_id: tooltip_id,
           pb_tooltip_show_tooltip: true,
-          pb_tooltip_trigger_method: trigger_method,
-          pb_tooltip_interaction: interaction
+          pb_tooltip_trigger_method: trigger_method
         )
-        data = data.merge(pb_tooltip_delay_open: delay_open) if delay_open
-        data = data.merge(pb_tooltip_delay_close: delay_close) if delay_close
-        data
       end
 
     private