playbook_ui 14.25.0.pre.alpha.PLAY2426textfieldaccessibility9859 → 14.25.0.pre.alpha.PLAY2431fixextragap10276

data/app/pb_kits/playbook/pb_flex/_flex_item.scss

@@ -1,52 +1,147 @@
-[class^=pb_flex_item_kit] {
-  &[class*=_fixed_size] {
-    flex-grow: 0;
-    flex-shrink: 0;
-  }
-
-  &[class*=_grow] {
-    flex-grow: 1;
-  }
-
-  &[class*=_shrink] {
-    flex-shrink: 1;
-  }
-
-  // Display Flex - Rails & React
-  &[class*=display_flex] {
-    display: flex;
-  }
-
-  // Alignment: Align Self - Rails & React
-  &[class*=align_self_start] {
-    align-self: flex-start;
-  }
-  
-  &[class*=align_self_end] {
-    align-self: flex-end;
-  }
-  
-  &[class*=align_self_center] {
-    align-self: center;
-  }
-  
-  &[class*=align_self_stretch] {
-    align-self: stretch;
-  }
-
-  //Order Items
-  @for $i from 0 through 12 {
-    &[class*=order_#{$i}]{
-      order: $i;
-    }
-  }
-  &[class*=order_first]{
-    order: -1;
-  }
-
-  @for $i from 0 through 12 {
-    &[class*=_flex_#{$i}]{
-      flex: $i;
-    }
-  }
+// Fixed size
+.pb_flex_item_kit_fixed_size {
+  flex-grow: 0;
+  flex-shrink: 0;
 }
+
+// Grow
+.pb_flex_item_kit_grow {
+  flex-grow: 1;
+}
+
+// Shrink
+.pb_flex_item_kit_shrink {
+  flex-shrink: 1;
+}
+
+// Display Flex
+.pb_flex_item_kit_display_flex {
+  display: flex;
+}
+
+// Align Self
+.pb_flex_item_kit_align_self_start {
+  align-self: flex-start;
+}
+
+.pb_flex_item_kit_align_self_end {
+  align-self: flex-end;
+}
+
+.pb_flex_item_kit_align_self_center {
+  align-self: center;
+}
+
+.pb_flex_item_kit_align_self_stretch {
+  align-self: stretch;
+}
+
+// Order classes
+.pb_flex_item_kit_order_0 {
+  order: 0;
+}
+
+.pb_flex_item_kit_order_1 {
+  order: 1;
+}
+
+.pb_flex_item_kit_order_2 {
+  order: 2;
+}
+
+.pb_flex_item_kit_order_3 {
+  order: 3;
+}
+
+.pb_flex_item_kit_order_4 {
+  order: 4;
+}
+
+.pb_flex_item_kit_order_5 {
+  order: 5;
+}
+
+.pb_flex_item_kit_order_6 {
+  order: 6;
+}
+
+.pb_flex_item_kit_order_7 {
+  order: 7;
+}
+
+.pb_flex_item_kit_order_8 {
+  order: 8;
+}
+
+.pb_flex_item_kit_order_9 {
+  order: 9;
+}
+
+.pb_flex_item_kit_order_10 {
+  order: 10;
+}
+
+.pb_flex_item_kit_order_11 {
+  order: 11;
+}
+
+.pb_flex_item_kit_order_12 {
+  order: 12;
+}
+
+.pb_flex_item_kit_order_first {
+  order: -1;
+}
+
+// Flex values
+.pb_flex_item_kit_flex_0 {
+  flex: 0;
+}
+
+.pb_flex_item_kit_flex_1 {
+  flex: 1;
+}
+
+.pb_flex_item_kit_flex_2 {
+  flex: 2;
+}
+
+.pb_flex_item_kit_flex_3 {
+  flex: 3;
+}
+
+.pb_flex_item_kit_flex_4 {
+  flex: 4;
+}
+
+.pb_flex_item_kit_flex_5 {
+  flex: 5;
+}
+
+.pb_flex_item_kit_flex_6 {
+  flex: 6;
+}
+
+.pb_flex_item_kit_flex_7 {
+  flex: 7;
+}
+
+.pb_flex_item_kit_flex_8 {
+  flex: 8;
+}
+
+.pb_flex_item_kit_flex_9 {
+  flex: 9;
+}
+
+.pb_flex_item_kit_flex_10 {
+  flex: 10;
+}
+
+.pb_flex_item_kit_flex_11 {
+  flex: 11;
+}
+
+.pb_flex_item_kit_flex_12 {
+  flex: 12;
+}

data/app/pb_kits/playbook/pb_flex/_flex_item.tsx

@@ -9,7 +9,8 @@ type FlexItemPropTypes = {
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
   shrink?: boolean,
   className?: string,
-  order?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'first' | 'none',
+  flex?: string | number,
+  order?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'first' | 'none',
   alignSelf?: "start" | "end" | "center" | "stretch" | null,
   displayFlex?: boolean
 } & GlobalProps
@@ -27,14 +28,14 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
     alignSelf,
     displayFlex
   } = props
-  const growClass = grow === true ? 'grow' : ''
-  const displayFlexClass = displayFlex === true ? `display_flex_${displayFlex}` : ''
-  const flexClass = flex !== 'none' ? `flex_${flex}` : ''
-  const shrinkClass = shrink === true ? 'shrink' : ''
-  const alignSelfClass = alignSelf ? `align_self_${alignSelf}` : ''
+  const growClass = grow === true ? 'pb_flex_item_kit_grow' : ''
+  const displayFlexClass = displayFlex === true ? 'pb_flex_item_kit_display_flex' : ''
+  const flexClass = flex !== 'none' ? `pb_flex_item_kit_flex_${flex}` : ''
+  const shrinkClass = shrink === true ? 'pb_flex_item_kit_shrink' : ''
+  const alignSelfClass = alignSelf ? `pb_flex_item_kit_align_self_${alignSelf}` : ''
   const fixedStyle =
     fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
-  const orderClass = order !== 'none' ? `order_${order}` : null
+  const orderClass = order !== 'none' ? `pb_flex_item_kit_order_${order}` : ''
   const dynamicInlineProps = globalInlineProps(props)
   const combinedStyles = {
     ...fixedStyle,
@@ -47,7 +48,17 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
   return (
     <div
         {...htmlProps}
-        className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), orderClass, alignSelfClass, globalProps(props), className)}
+        className={classnames(
+          'pb_flex_item_kit',
+          growClass,
+          shrinkClass,
+          flexClass,
+          displayFlexClass,
+          orderClass,
+          alignSelfClass,
+          globalProps(props),
+          className
+        )}
         style={combinedStyles}
     >
       {children}

data/app/pb_kits/playbook/pb_flex/flex.rb

@@ -61,20 +61,20 @@ module Playbook
                            gap_class,
                            row_gap_class,
                            column_gap_class,
-                           align_self_class)
+                           align_self_class, separator: " ")
       end
 
     private
 
       def orientation_class
-        "orientation_#{orientation}"
+        "pb_flex_kit_orientation_#{orientation}"
       end
 
       def horizontal_class
         if orientation == "row"
-          "justify_content_#{horizontal}"
+          "pb_flex_kit_justify_content_#{horizontal}"
         elsif align == "none"
-          "align_items_#{horizontal}"
+          "pb_flex_kit_align_items_#{horizontal}"
         end
       end
 
@@ -82,27 +82,27 @@ module Playbook
         if justify == "none"
           horizontal_class
         else
-          "justify_content_#{justify}"
+          "pb_flex_kit_justify_content_#{justify}"
         end
       end
 
       def inline_class
-        inline ? "inline" : nil
+        inline ? "pb_flex_kit_inline" : nil
       end
 
       def spacing_class
-        "spacing_#{spacing}"
+        spacing != "none" ? "pb_flex_kit_spacing_#{spacing}" : nil
       end
 
       def reverse_class
-        reverse ? "reverse" : nil
+        reverse ? "pb_flex_kit_reverse" : nil
       end
 
       def vertical_class
         if orientation == "row"
-          "align_items_#{vertical}"
+          "pb_flex_kit_align_items_#{vertical}"
         elsif justify == "none"
-          "justify_content_#{vertical}"
+          "pb_flex_kit_justify_content_#{vertical}"
         end
       end
 
@@ -110,7 +110,7 @@ module Playbook
         if align == "none"
           vertical_class
         else
-          "align_items_#{align}"
+          "pb_flex_kit_align_items_#{align}"
         end
       end
 
@@ -118,19 +118,19 @@ module Playbook
         if align_self == "none"
           nil
         else
-          "align_self_#{align_self}"
+          "pb_flex_kit_align_self_#{align_self}"
         end
       end
 
       def wrap_class
-        wrap ? "wrap" : nil
+        wrap ? "pb_flex_kit_wrap" : nil
       end
 
       def gap_class
         if gap == "none" || gap.nil? || gap.is_a?(Hash)
           nil
         else
-          "gap_#{gap}"
+          "pb_flex_kit_gap_#{gap}"
         end
       end
 
@@ -138,7 +138,7 @@ module Playbook
         if row_gap == "none" || row_gap.nil? || row_gap.is_a?(Hash)
           nil
         else
-          "rowGap_#{row_gap}"
+          "pb_flex_kit_rowGap_#{row_gap}"
         end
       end
 
@@ -146,7 +146,7 @@ module Playbook
         if column_gap == "none" || column_gap.nil? || column_gap.is_a?(Hash)
           nil
         else
-          "columnGap_#{column_gap}"
+          "pb_flex_kit_columnGap_#{column_gap}"
         end
       end
     end

data/app/pb_kits/playbook/pb_flex/flex_item.rb

@@ -17,7 +17,7 @@ module Playbook
                           default: false
 
       def classname
-        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class) + align_self_class
+        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class, align_self_class, separator: " ")
       end
 
       def inline_styles
@@ -32,23 +32,23 @@ module Playbook
     private
 
       def align_self_class
-        align_self ? "align_self_#{align_self}" : ""
+        align_self ? "pb_flex_item_kit_align_self_#{align_self}" : nil
       end
 
       def display_flex_class
-        display_flex ? "display_flex" : nil
+        display_flex ? "pb_flex_item_kit_display_flex" : nil
       end
 
       def fixed_size_class
-        fixed_size.present? ? "fixed_size" : nil
+        fixed_size.present? ? "pb_flex_item_kit_fixed_size" : nil
       end
 
       def grow_class
-        grow ? "grow" : nil
+        grow ? "pb_flex_item_kit_grow" : nil
       end
 
       def shrink_class
-        shrink ? "shrink" : nil
+        shrink ? "pb_flex_item_kit_shrink" : nil
       end
     end
   end

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -91,7 +91,6 @@
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
   <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
-  <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label" } %>
   <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field", hidden_inputs: true } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
   <%= form.number_field :example_number_field, props: { label: true } %>

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -247,4 +247,4 @@
   &:has(> [class^="pb_select"]):has(> .pb_passphrase) [class^="pb_select"] {
       align-self: baseline;
   }
-}
+}