playbook_ui 13.5.0 → 13.6.0.pre.alpha.tiptapreacthookformbug1210

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

@@ -22,7 +22,7 @@ type TitleProps = {
 } & 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,

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} => {