playbook_ui 13.20.0.pre.alpha.play1247htmloptions2404 → 13.20.0

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx

@@ -27,7 +27,7 @@ type TextInputProps = {
   required?: boolean,
   type: string,
   value: string | number,
-  children: React.ReactElement,
+  children: Node,
   addOn?: {
     icon?: string,
     alignment?: "right" | "left",
@@ -85,12 +85,8 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         icon={icon}
     />
   )
-
-  const childInput = children ? children.type === "input" : undefined
-
   const textInput = (
-    childInput ? React.cloneElement(children, { className: "text_input" }) :
-    (<input
+    <input
         {...domSafeProps(props)}
         className="text_input"
         disabled={disabled}
@@ -103,7 +99,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         required={required}
         type={type}
         value={value}
-    />)
+    />
   )
 
   const addOnInput = (
@@ -135,7 +131,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
   )
 
   const render = (() => {
-    if (children && !childInput) return children
+    if(children) return children
     if (shouldShowAddOn) return addOnInput
 
     return textInput
@@ -148,7 +144,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         {...htmlProps}
         className={css}
     >
-      {label &&
+      {label && 
         <Caption
             className="pb_text_input_kit_label"
             text={label}

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx

@@ -58,16 +58,6 @@ const TextInputAddOn = (props) => {
             {...props}
         />
       </div>
-      <div>
-        <TextInput
-            addOn={{ icon: 'frog', alignment: 'right', border: true }}
-            label="Right-Aligned Add On With Child Input"
-            onChange={handleUpdateFourthInput}
-            {...props}
-        >
-          <input />
-        </TextInput>
-      </div>
       <div>
         <TextInput
             addOn={{ icon: 'percent', alignment: 'left', border: false }}
@@ -86,16 +76,6 @@ const TextInputAddOn = (props) => {
             {...props}
         />
       </div>
-      <div>
-        <TextInput
-            addOn={{ icon: 'frog', alignment: 'left', border: true }}
-            label="Left-Aligned Add On With Child Input"
-            onChange={handleUpdateFourthInput}
-            {...props}
-        >
-          <input />
-        </TextInput>
-      </div>
     </>
   )
 }

data/app/pb_kits/playbook/pb_text_input/text_input.html.erb

@@ -1,8 +1,7 @@
 <%= content_tag(:div,
     aria: object.aria,
     class: object.classname,
-    data: object.data,
-    **combined_html_options) do %>
+    data: object.data) do %>
   <% if object.label.present? %>
     <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
   <% end %>

data/app/pb_kits/playbook/pb_textarea/textarea.html.erb

@@ -1,8 +1,7 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+    class: object.classname) do %>
   <% if object.label.present? %>
     <%= pb_rails("caption", props: {text: object.label, dark: object.dark}) %>
   <% end %>

data/app/pb_kits/playbook/pb_time/time.html.erb

@@ -1,8 +1,7 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+    class: object.classname) do %>
   <%
     # convert deprecated prop values
     size = object.size

data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.html.erb

@@ -1,8 +1,7 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+    class: object.classname) do %>
       <div class="pb_time_range_inline_wrapper">
         <% if object.icon == true %>
           <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, text: pb_rails("icon", props: { icon: "clock", dark: object.dark, classname:"pb_time_range_inline_icon", fixed_width: true, size: object.size }) }) %>
@@ -14,4 +13,4 @@
           <%= pb_rails(object.text_kit, props: { tag: "span", color: object.text_timezone_color, classname:"pb_time_range_inline_timezone", text: object.pb_date_end_time.to_timezone.upcase }) %>
         <% end %>
       </div>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb

@@ -1,8 +1,7 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+    class: object.classname) do %>
 
     <%= pb_rails("body", props: { color: "light", dark: object.dark, classname: "pb_time_stacked time-spacing" }) do %>
       <time>

data/app/pb_kits/playbook/pb_timeline/item.html.erb

@@ -1,8 +1,7 @@
 <%= content_tag(:div,
   id: object.id,
   data: object.data,
-  class: object.classname,
-  **combined_html_options) do %>
+  class: object.classname) do %>
 
   <div class="pb_timeline_item_left_block">
     <% if object.date.present? %>

data/app/pb_kits/playbook/pb_timeline/timeline.html.erb

@@ -1,7 +1,6 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+    class: object.classname) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_timestamp/timestamp.html.erb

@@ -2,8 +2,7 @@
   aria: object.aria,
   id: object.id,
   data: object.data,
-  class: object.classname,
-  **combined_html_options) do %>
+  class: object.classname) do %>
 
   <% if object.unstyled %>
     <div><%= object.timestamp_text %></div>

data/app/pb_kits/playbook/pb_title/title.html.erb

@@ -2,6 +2,5 @@
     aria: object.aria,
     id: object.id,
     data: object.data,
-    class: object.classname,
-    **combined_html_options) do %><%= content.presence || object.text %><% end %>
-    
+    class: object.classname) do %><%= content.presence || object.text %><% end %>
+    

data/app/pb_kits/playbook/pb_title_count/title_count.html.erb

@@ -2,8 +2,7 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+    id: object.id) do %>
   <%= pb_rails("title", props: {
     dark: object.dark,
     size: object.title_size,

data/app/pb_kits/playbook/pb_title_detail/title_detail.html.erb

@@ -1,8 +1,7 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+    class: object.classname) do %>
   <%= pb_rails("title", props: { text: object.title, size: 4 }) %>
   <%= pb_rails("body", props: { text: object.detail, color: "light" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_toggle/toggle.html.erb

@@ -2,8 +2,7 @@
     id: object.id,
     data: object.data,
     aria: object.aria,
-    class: object.classname,
-    **combined_html_options) do %>
+    class: object.classname) do %>
   <label class="pb_toggle_wrapper">
     <%= content.presence || object.input %>
     <div class="pb_toggle_control"></div>

data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb

@@ -1,8 +1,7 @@
 <%= content_tag(:div,
   id: object.id,
   data: object.data,
-  class: object.classname,
-  **combined_html_options) do %>
+  class: object.classname) do %>
   <div class="tooltip_tooltip" id="<%= object.tooltip_id %>" role="tooltip">
     <%= content.presence %>
     <div class="arrow" id="<%= object.tooltip_id %>-arrow"></div>

data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb

@@ -4,8 +4,7 @@
   <%= content_tag(:div,
                 id: object.id,
                 data: object.data,
-                class: object.classname + object.inline_class,
-                **combined_html_options) do %>
+                class: object.classname + object.inline_class) do %>
     <div class="pb_typeahead_wrapper">
       <div class="pb_typeahead_loading_indicator" data-pb-typeahead-kit-loading-indicator>
         <%= pb_rails("icon", props: {

data/app/pb_kits/playbook/pb_user/docs/_user_props_table.md

@@ -7,5 +7,4 @@
 | **orientation** | `Orientation` | Changes the orientation of the User | `.horizontal` | `.horizontal` `.verticle` |
 | **size** | `UserAvatarSize` | Changes the size of the User | `.medium` | `.small` `.medium` `.large` |
 | **territory** | `String` | Adds the User's territory |  |  |
-| **title** | `String` | Adds a title |  |  |
-| **status** | `PBAvatar.PresenceStatus?` | An idicator for the current status of the user | `.none` | `.online` `.away` `.offline` |
+| **title** | `String` | Adds a title |  |  |

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

@@ -23,5 +23,4 @@ examples:
   - user_vertical_size_swift: Vertical
   - user_text_only_swift: Text Only
   - user_size_swift: Horizontal Size
-  - user_presence_indicator_swift: Presence Indicator
   - user_props_table: ""

data/app/pb_kits/playbook/pb_user/user.html.erb

@@ -2,8 +2,7 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+    id: object.id) do %>
   <% if object.avatar_url.present? || object.avatar %>
     <%= pb_rails("avatar", props: {
       name: object.name,

data/app/pb_kits/playbook/pb_user_badge/user_badge.html.erb

@@ -2,7 +2,6 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+    id: object.id) do %>
   <%= content_tag(:div, object.display_badge, class: "pb_user_badge_wrapper") %>
 <% end %>

data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.html.erb

@@ -2,8 +2,7 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+    id: object.id) do %>
     <%= pb_rails("caption", props: {dark: object.dark, text: object.day_of_week}) %>
     <%= pb_rails("title", props: {dark: object.dark, size: 4, tag: "span", text: object.formatted_month_and_day}) %>
 <% end %>

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

@@ -21,85 +21,44 @@
 .z_index_1 {
   z-index: 100;
 }
-
 .z_index_2 {
   z-index: 200;
 }
-
 .z_index_3 {
   z-index: 300;
 }
-
 .z_index_4 {
   z-index: 400;
 }
-
 .z_index_5 {
   z-index: 500;
 }
-
 .z_index_6 {
   z-index: 600;
 }
-
 .z_index_7 {
   z-index: 700;
 }
-
 .z_index_8 {
   z-index: 800;
 }
-
 .z_index_9 {
   z-index: 900;
 }
-
 .z_index_10 {
   z-index: 1000;
 }
 
 $zIndex_values: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
-
+    
 @each $size, $size_value in $breakpoints_grid {
   @each $zIndex_value in $zIndex_values {
-    $min_size: map-get($size_value, "min");
-    $max_size: map-get($size_value, "max");
-
-    .z_index_#{$size}_#{$zIndex_value} {
-      @include break_on($min_size, $max_size) {
-        z-index: #{$zIndex_value * 100} !important;
-      }
-    }
-  }
-}
-
-$space_classes: (
-  xxs: $space_xxs,
-  xs: $space_xs,
-  sm: $space_sm,
-  md: $space_md,
-  lg: $space_lg,
-  xl: $space_xl,
-  0: 0,
-  auto: auto,
-  initial: initial,
-  inherit: inherit
-);
-
-$positions: "top", "right", "bottom", "left";
-
-@each $position in $positions {
-  @each $space_name, $space in $space_classes {
-    .#{$position}_#{$space_name} {
-      @if $space_name == "0" {
-        #{$position}: 0 !important;
-      }
-      @else if $space_name == "auto" or $space_name == "initial" or $space_name == "inherit" {
-        #{$position}: #{$space} !important;
-      }
-      @else {
-        #{$position}: #{-$space} !important;
+      $min_size: map-get($size_value, "min");
+      $max_size: map-get($size_value, "max");
+      .z_index_#{$size}_#{$zIndex_value} {
+        @include break_on($min_size, $max_size) {
+          z-index: #{$zIndex_value * 100} !important;
+        }
       }
-    }
   }
 }

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

@@ -118,22 +118,6 @@ type Position = {
   position?: "relative" | "absolute" | "fixed" | "sticky" | "static",
 }
 
-type Top = {
-  top?: Sizes,
-}
-
-type Right = {
-  right?: Sizes,
-}
-
-type Bottom = {
-  bottom?: Sizes,
-}
-
-type Left = {
-  left?: Sizes,
-}
-
 type Shadow = {
   shadow?: "none" | "deep" | "deeper" | "deepest",
 }
@@ -167,7 +151,7 @@ export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
   LineHeight & Margin & MaxWidth & NumberSpacing & Order & Overflow & Padding &
-  Position & Shadow & TextAlign & Truncate & ZIndex & { hover?: string } & Top & Right & Bottom & Left;
+  Position & Shadow & TextAlign & Truncate & ZIndex & { hover?: string };
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
   const keys: string[] = Object.keys(prop)
@@ -440,12 +424,6 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += position && position !== 'static' ? `position_${position}` : ''
     return css
   },
-
-  topProps: ({ top }: Top) => top ? `top_${top}` : '',
-  rightProps: ({ right }: Right) => right ? `right_${right}` : '',
-  bottomProps: ({ bottom }: Bottom) => bottom ? `bottom_${bottom}` : '',
-  leftProps: ({ left }: Left) => left ? `left_${left}` : '',
-
   textAlignProps: ({ textAlign }: TextAlign) => {
     if (typeof textAlign === 'object') {
       return getResponsivePropClasses(textAlign, 'text_align')