playbook_ui 13.5.0 → 13.6.0.pre.alpha.play845allkitsbytypes1219

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

@@ -1,4 +1,3 @@
-
 $text_align_values: (
   start: start,
   end: end,
@@ -22,6 +21,15 @@ $text_align_values: (
   }
 }
 
+.pb_th_link:hover {
+  background-color: rgba($primary, 0.03);
+  color: $primary !important;
+}
+
+.pb_th_link, .pb_th_nolink{
+  padding: $space_xxs;
+}
+
 [class^=pb_table] {
   thead {
     [class^=pb_th_active] {
@@ -29,3 +37,14 @@ $text_align_values: (
     }
   }
 }
+
+[class*="pb_table_header_dropdown"][class*="_vertical"] {
+  &[class*="_normal"] {
+    [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
+      &[class*="_link"] {
+        border-left-width: 0px;
+        background-color: #fff !important;
+      }
+    }
+  }
+}

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

@@ -4,61 +4,35 @@
     class: object.classname,
     data: object.data,
     id: "pb-th#{object.id}") do %>
-  <% object.sort_menu.each do |item| %>
-    <% if item[:active] == true %>
-      <%= pb_rails("flex", props:{ align: object.align_content }) do %>
-        <%= content.presence || content_tag(:span, item[:item], class: "pb_th_active") %>
-        <span class="pb_th_active">
-          <%= pb_rails("icon", props: { icon: object.sort_icon(item[:direction]),
-                                        fixed_width: true,
-                                        classname: "pb_th_active",
-                                        padding_left: "xs" }) %>
-        </span>
-      <% end %>
-    <% end %>
-  <% end %>
-  <% if object.sort_menu.all? { |item| item[:active] == false } %>
-    <%= pb_rails("flex", props:{ align: object.align_content }) do %>
+  <% unless sorting_style? %>
+    <%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_nolink" }) do %>
       <%= content.presence || object.text %>
-      <%= pb_rails("icon", props: { icon: "arrow-up-arrow-down",
-                                    fixed_width: true,
-                                    padding_left: "xs" }) %>
     <% end %>
   <% else %>
-    <%= content.presence || object.text %>
-  <% end %>
-  <% if object.sort_menu != [{}] && object.colspan > 1 %>
-    <%= pb_rails("popover", props: { classname: "pb_filter_sort_menu",
-                                    close_on_click: "outside",
-                                    trigger_element_id: "pb-th#{object.id}",
-                                    tooltip_id: "sort-filter-btn-tooltip#{object.id}",
-                                    position: object.placement ,
-                                    padding: 'none'}) do %>
-      <%= pb_rails("list") do %>
-        <% object.sort_menu.each do |item| %>
-          <%= pb_rails("list/item") do %>
-            <%= pb_rails("button", props: { variant: "link" ,
-                                            classname: "p-0",
-                                            text: item[:item],
-                                            link: item[:link],
-                                            icon: sort_icon(item[:direction]),
-                                            icon_right: true }) %>
+    <%= link_to next_link, style: link_style do %>
+      <%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_link" }) do %>
+        <%= content.presence || object.text %>
+          <% if sorting_style? %>
+            <%= pb_rails("icon", props: { icon: object.sort_icon(active_item[:direction], active_item[:active]),
+                                          fixed_width: true,
+                                          classname: active_item.any? ? "pb_th_active" : "",
+                                          padding_left: "xs" }) %>
+        <% end %>
+      <% end %>
+    <% end %>
+    <% if use_dropdown_select %>
+      <%= pb_rails("popover", props: { classname: "pb_filter_sort_menu",
+                                      close_on_click: "outside",
+                                      trigger_element_id: "pb-th#{object.id}",
+                                      tooltip_id: "sort-filter-btn-tooltip#{object.id}",
+                                      position: object.placement ,
+                                      padding: 'none'}) do %>
+        <%= pb_rails("nav", props: {classname: "pb_table_header_dropdown"}) do %>
+          <% object.sort_menu.each do |item| %>
+            <%= pb_rails("nav/item", props: { text: item[:item], link: item[:link], icon_right: sort_icon(item[:direction], item[:active]), active: item[:active] }) %>
           <% end %>
         <% end %>
       <% end %>
     <% end %>
   <% end %>
 <% end %>
-<% if object.sort_menu != [{}] && object.colspan == 1 %>
-  <script>
-    document.addEventListener("DOMContentLoaded", function() {
-      var thId = `<%= "#pb-th#{object.id}" %>`
-      var firstLink = `<%= next_link %>`
-      var thElement = document.querySelector(thId);
-
-      thElement.addEventListener("click", function() {
-        window.location.href = firstLink;
-      });
-    });
-  </script>
-<% end %>

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

@@ -9,15 +9,20 @@ module Playbook
       prop :align_content, type: Playbook::Props::Enum,
                            values: %w[start center end stretch baseline none],
                            default: "center"
+      prop :justify_sort_icon, type: Playbook::Props::Enum,
+                               values: %w[start center end stretch around between evenly none],
+                               default: "between"
       prop :colspan, type: Playbook::Props::Number,
                      default: 1
       prop :placement, type: Playbook::Props::Enum,
                        values: %w[top bottom left right top-start top-end bottom-start bottom-end right-start right-end left-start left-end],
-                       default: "bottom-start"
+                       default: "bottom-end"
       prop :sort_menu, type: Playbook::Props::HashArray,
                        default: [{}]
       prop :text, type: Playbook::Props::String,
                   default: ""
+      prop :sort_dropdown, type: Playbook::Props::Boolean,
+                           default: false
 
       def classname
         generate_classname("pb_table_header_kit", align_class)
@@ -30,23 +35,46 @@ module Playbook
       def next_link
         return sort_menu[0][:link] if sort_menu.all? { |item| item[:active] == false }
 
+        link = ""
+
         sort_menu.each_with_index do |item, index|
           if item[:active] == true
             next_index = (index + 1) % sort_menu.length
-            sort_menu[next_index][:link]
+            link = sort_menu[next_index][:link]
           end
         end
+        link
+      end
+
+      def sorting_style?
+        sort_menu != [{}]
+      end
+
+      def use_dropdown_select
+        sort_menu != [{}] && (object.colspan > 1 || sort_dropdown)
       end
 
-      def sort_icon(direction)
+      def sort_icon(direction, active)
         case direction
         when "asc"
-          "sort-amount-up"
+          active ? "sort-amount-up" : ""
         when "desc"
-          "sort-amount-down"
+          active ? "sort-amount-down" : ""
         else
-          ""
+          "arrow-up-arrow-down"
+        end
+      end
+
+      def link_style
+        active_item.any? ? "" : "color: #687887;"
+      end
+
+      def active_item
+        active_item = {}
+        sort_menu.each do |item|
+          active_item = item if item[:active] == true
         end
+        active_item
       end
     end
   end

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

@@ -11,7 +11,7 @@ module Playbook
       prop :error
       prop :inline, type: Playbook::Props::Boolean,
                     default: false
-      prop :input_options, type: Playbook::Props::Hash,
+      prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
       prop :label
       prop :name
@@ -19,7 +19,7 @@ module Playbook
       prop :required, type: Playbook::Props::Boolean,
                       default: false
       prop :type, default: "text"
-      prop :validation, type: Playbook::Props::Hash,
+      prop :validation, type: Playbook::Props::HashProp,
                         default: {}
       prop :value
       prop :add_on, type: Playbook::Props::NestedProps,

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx

@@ -20,7 +20,7 @@ type TimeStackedProps = {
 }
 
 const TimeStackedDefault = (props: TimeStackedProps): React.ReactElement => {
-  if (props.date) deprecatedProps('Time Stacked', ['date']) //date prop is deprecated, use time instead
+  if (props.date) deprecatedProps() //date prop is deprecated, use time instead
 
   const {
     align = 'left',

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

@@ -3,7 +3,7 @@
 @import "../tokens/screen_sizes";
 @import './title_mixin';
 
-[class^=pb_title_kit]{
+[class^=pb_title_kit] {
   &[class*=_1] {
     @include pb_title_1;
     @include title_colors;
@@ -36,22 +36,23 @@
   }
 
   @each $size, $size_value in $breakpoints_grid {
-    @each $title_size_value in [1, 2, 3, 4] {
-        $min_size: map-get($size_value, "min");
-        $max_size: map-get($size_value, "max");
-        &[class*=_#{$size}_#{$title_size_value}] {
-          @include break_on($min_size, $max_size) {
-            @if $title_size_value == 1 { @include pb_title_1; }
-            @else if $title_size_value == 2 { @include pb_title_2; }
-            @else if $title_size_value == 3 { @include pb_title_3; }
-            @else if $title_size_value == 4 { @include pb_title_4; }
-            @include title_colors;
-            @include title_truncate;
-            @if $title_size_value != 4 { @include pb_title_bold; }
-          }
+    @for $title_size_value from 1 through 4 {
+      $min_size: map-get($size_value, "min");
+      $max_size: map-get($size_value, "max");
+      &[class*=_#{$size}_#{$title_size_value}] {
+        @include break_on($min_size, $max_size) {
+          @if $title_size_value == 1 { @include pb_title_1; }
+          @else if $title_size_value == 2 { @include pb_title_2; }
+          @else if $title_size_value == 3 { @include pb_title_3; }
+          @else if $title_size_value == 4 { @include pb_title_4; }
+          @include title_colors;
+          @include title_truncate;
+          @if $title_size_value != 4 { @include pb_title_bold; }
         }
+      }
     }
   }
+
   &.dark {
     @include pb_title_dark;
   }

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

@@ -17,12 +17,12 @@ type TitleProps = {
   size?: SizeType | SizeResponsiveType,
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
   text?: string,
-  truncate?: null | '1' | '2' | '3' | '4' | '5',
+  truncate?: null | "1" | "2" | "3" | "4" | "5",
   variant?: null | "link",
 } & GlobalProps
 
 const Title = (props: TitleProps): React.ReactElement => {
-  if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
+  if (props.variant) deprecatedProps() //variant prop is deprecated, use color instead
   const {
     aria = {},
     children,
@@ -41,12 +41,12 @@ const Title = (props: TitleProps): React.ReactElement => {
   const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
   const dataProps: {[key: string]: string | number} = buildDataProps(data)
   const getBold = bold ? '' : 'thin'
-  const isTruncated = truncate ? `truncate_${truncate}` : null
+  const isTruncated = truncate ? `truncate-${truncate}` : null
   const isSizeNumberOrString = typeof size === "number" || typeof size === "string"
 
   const buildResponsiveSizeCss = () => {
     let css = ''
-    
+
     if (!isSizeNumberOrString) {
       Object.entries(size).forEach((sizeObj) => {
         css += `pb_title_kit_${sizeObj[0]}_${sizeObj[1]} `

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

@@ -18,11 +18,11 @@ $pb_title_colors: (
 }
 
 $pb_title_truncate: (
-  truncate_1: 1,
-  truncate_2: 2,
-  truncate_3: 3,
-  truncate_4: 4,
-  truncate_5: 5
+  truncate-1: 1,
+  truncate-2: 2,
+  truncate-3: 3,
+  truncate-4: 4,
+  truncate-5: 5
 );
 
 @mixin title_truncate {
@@ -31,7 +31,7 @@ $pb_title_truncate: (
       overflow: hidden;
       display: -webkit-box;
       -webkit-line-clamp: $number;
-      -webkit-box-orient: vertical; 
+      -webkit-box-orient: vertical;
     }
   }
 }

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

@@ -0,0 +1,12 @@
+<% lorem = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, minus. Nisi beatae voluptatum labore sequi. Nemo accusantium corrupti, reiciendis magnam tenetur perferendis esse pariatur voluptas eaque hic vel rem nihil quidem dolorum ex dolor, libero ullam placeat, sapiente eos. Cumque obcaecati dignissimos molestiae, minima quibusdam sint maxime libero accusantium animi quis quia maiores enim ipsum, esse, modi laudantium illum error!" %>
+
+<%= pb_rails("flex", props: { orientation: "column", max_width: "md" }) do %>
+  <%= pb_rails("caption", props: { text: "After first row" }) %>
+  <%= pb_rails("title", props: { text: lorem, truncate: "1", size: 4, margin_bottom: "md" }) %>
+
+  <%= pb_rails("caption", props: { text: "After second row" }) %>
+  <%= pb_rails("title", props: { text: lorem, truncate: "2", size: 4, margin_bottom: "md" }) %>
+
+  <%= pb_rails("caption", props: { text: "After third row" }) %>
+  <%= pb_rails("title", props: { text: lorem, truncate: "3", size: 4 }) %>
+<% end %>

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

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import Title from '../_title';
+import Caption from '../../pb_caption/_caption'
+import Flex from '../../pb_flex/_flex'
+
+const TitleTruncate = (props) => {
+  const lorem = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, minus. Nisi beatae voluptatum labore sequi. Nemo accusantium corrupti, reiciendis magnam tenetur perferendis esse pariatur voluptas eaque hic vel rem nihil quidem dolorum ex dolor, libero ullam placeat, sapiente eos. Cumque obcaecati dignissimos molestiae, minima quibusdam sint maxime libero accusantium animi quis quia maiores enim ipsum, esse, modi laudantium illum error!"
+
+  return (
+    <Flex
+        maxWidth="md"
+        orientation="column"
+    >
+      <Caption
+          text="After first row"
+          {...props}
+      />
+      <Title
+          marginBottom="md"
+          size={4}
+          text={lorem}
+          truncate="1"
+          {...props}
+      />
+
+      <Caption
+          text="After second row"
+          {...props}
+      />
+      <Title
+          marginBottom="md"
+          size={4}
+          text={lorem}
+          truncate="2"
+          {...props}
+      />
+
+      <Caption
+          text="After third row"
+          {...props}
+      />
+      <Title
+          size={4}
+          text={lorem}
+          truncate="3"
+          {...props}
+      />
+    </Flex>
+  )
+}
+
+export default TitleTruncate

data/app/pb_kits/playbook/pb_title/docs/_title_truncate.md

@@ -0,0 +1,4 @@
+##### Prop
+`truncate` | **Type**: String | **Values**: "1" | "2" | "3" | "4" | "5"
+
+The `truncate` prop truncates overflowing text up to a maximum of five rows and adds an ellipsis at the end.

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

@@ -4,9 +4,11 @@ examples:
   - title_light_weight: Light Weight UI
   - title_colors: Colors
   - title_responsive: Responsive
+  - title_truncate: Truncate
 
   react:
   - title_default: Default UI
   - title_light_weight: Light Weight UI
   - title_colors: Colors
   - title_responsive: Responsive
+  - title_truncate: Truncate

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

@@ -2,3 +2,4 @@ export { default as TitleDefault } from './_title_default.jsx'
 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'

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

@@ -33,7 +33,7 @@ module Playbook
       end
 
       def is_truncated
-        truncate ? "truncate_#{truncate}" : nil
+        truncate ? "truncate-#{truncate}" : nil
       end
 
       def is_size_responsive

data/app/pb_kits/playbook/pb_toggle/toggle.rb

@@ -5,7 +5,7 @@ require "action_view"
 module Playbook
   module PbToggle
     class Toggle < Playbook::KitBase
-      prop :input_options, type: Playbook::Props::Hash,
+      prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
 
       prop :checked, type: Playbook::Props::Boolean,

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -19,7 +19,7 @@ module Playbook
       prop :name
       prop :options, type: Playbook::Props::HashArray,
                      default: []
-      prop :input_options, type: Playbook::Props::Hash,
+      prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
 
       prop :is_multi, type: Playbook::Props::Boolean,

data/app/pb_kits/playbook/tokens/_overflow.scss

@@ -0,0 +1,10 @@
+$visible: visible !default;
+$hidden: hidden !default;
+$scroll: scroll !default;
+$auto: auto !default;
+$overflow: (
+  visible: $visible,
+  hidden: $hidden,
+  scroll: $scroll,
+  auto: $auto,
+);

data/app/pb_kits/playbook/utilities/_overflow.scss

@@ -0,0 +1,22 @@
+@import "../tokens/overflow";
+
+$overflow_classes: (
+  visible: $visible,
+  hidden: $hidden,
+  scroll: $scroll,
+  auto: $auto,
+);
+
+$variants: (
+  overflow_x: "overflow-x",
+  overflow_y: "overflow-y",
+  overflow: "overflow",
+);
+
+@each $variant_name, $variant_property in $variants {
+  @each $class_name, $overflow_value in $overflow_classes {
+    .#{$variant_name}_#{$class_name} {
+      #{$variant_property}: #{$overflow_value} !important;
+    }
+  }
+}

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -128,6 +128,13 @@ type TextAlign = {
   textAlign?: "start" | "end" | "left" | "right" | "center" | "justify" | "justifyAll" | "matchParent",
 }
 
+type OverflowTypes = "scroll" | "visible" | "hidden" | "auto"
+type Overflow = {
+overflowX?: OverflowTypes,
+overflowY?: OverflowTypes,
+overflow?: OverflowTypes
+}
+
 type ZIndexType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
 type ZIndexResponsiveType = {[key: string]: ZIndexType}
 type ZIndex = {
@@ -138,7 +145,7 @@ type ZIndex = {
 export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
-  LineHeight & Margin & MaxWidth & NumberSpacing & Order & Padding &
+  LineHeight & Margin & MaxWidth & NumberSpacing & Order & Overflow & Padding &
   Position & Shadow & TextAlign & ZIndex & { hover?: string };
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
@@ -255,6 +262,14 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += borderRadius ? `border_radius_${borderRadius} ` : ''
     return css
   },
+  overflowProps: ({ overflow, overflowX, overflowY }: Overflow) => {
+    let css = ''
+    css += overflow ? `overflow_${overflow}` : ''
+    css += overflowX ? `overflow_x_${overflowX}` : ''
+    css += overflowY ? `overflow_y_${overflowY}` : ''
+    return css
+  },
+
   darkProps: ({ dark }: Dark) => dark ? 'dark' : '',
   numberSpacingProps: ({ numberSpacing }: NumberSpacing) => {
     let css = ''
@@ -417,13 +432,13 @@ export const globalProps = (props: GlobalProps, defaultProps: DefaultProps = {})
 }
 
 
-export const deprecatedProps = (kit: string, props: string[] = []): void => {
-  if (process.env.NODE_ENV === 'development') {
-    /* eslint no-console: ["error", { allow: ["warn", "error"] }] */
-    props.forEach((prop) => {
-      console.warn(`${kit} Kit: The prop '${prop}' is deprecated and will be removed in a future release!`)
-    })
-  }
+export const deprecatedProps = (): void => {
+  // if (process.env.NODE_ENV === 'development') {
+  //   /* eslint no-console: ["error", { allow: ["warn", "error"] }] */
+  //   props.forEach((prop) => {
+  //     console.warn(`${kit} Kit: The prop '${prop}' is deprecated and will be removed in a future release!`)
+  //   })
+  // }
 }
 
 export const domSafeProps = (props: {[key: string]: string}): {[key: string]: string} => {