playbook_ui 13.25.0.pre.alpha.PBNTR291Dropdownrailsv22812 → 13.25.0.pre.alpha.PLAY761globalpaddingpropsbuttons2713

data/app/pb_kits/playbook/pb_nav/nav.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag(:nav) do %>
+<%= content_tag(:nav,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <% if object.title %>
     <%= content_tag(:div, class: "pb_nav_list_title") do %>
       <%= content_tag(:a, class: "pb_nav_list_item_link_text", href: object.link) do %>

data/app/pb_kits/playbook/pb_online_status/online_status.html.erb

@@ -1,3 +1,7 @@
-<%= pb_content_tag(:div,
-    aria: object.aria.merge!(label: object.status)) do %>
+<%= content_tag(:div,
+    aria: object.aria.merge!(label: object.status),
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
 <% end %>

data/app/pb_kits/playbook/pb_pagination/pagination.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
      <%= will_paginate object.model, renderer: Playbook::Pagination::Rails %>
 <% end %>

data/app/pb_kits/playbook/pb_passphrase/passphrase.html.erb

@@ -1 +1 @@
-  <%= react_component('Passphrase', object.passphrase_options, class: object.classname) %>
+  <%= react_component('Passphrase', object.passphrase_options, class: object.classname, **combined_html_options) %>

data/app/pb_kits/playbook/pb_person/person.html.erb

@@ -1,8 +1,13 @@
-<%= pb_content_tag do %>
-  <%= pb_rails("body", props: {
-    tag: "span",
-    classname: "pb_person_first" }) { object.first_name } %>
-  <%= pb_rails("title", props: {
-    text: object.last_name,
-    size: 4 }) if object.last_name %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
+      <%= pb_rails("body", props: {
+        tag: "span",
+        classname: "pb_person_first" }) { object.first_name } %>
+      <%= pb_rails("title", props: {
+        text: object.last_name,
+        size: 4 }) if object.last_name %>
 <% end %>

data/app/pb_kits/playbook/pb_person_contact/person_contact.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+  aria: object.aria,
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  **combined_html_options) do %>
   <%= pb_rails("person", props: {
       first_name: object.first_name,
       last_name: object.last_name,

data/app/pb_kits/playbook/pb_pill/pill.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <%= pb_rails("title", props: { text: object.display_text, tag: "div", size: 4, classname: "pb_pill_text" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_popover/popover.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+  aria: object.aria,
+  class: object.classname,
+  data: object.data,
+  id: object.id,
+  **combined_html_options) do %>
   <div class="pb_popover_tooltip hide" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
     <div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
       <%= content.presence %>

data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb

@@ -1,5 +1,9 @@
-<%= pb_content_tag(:div,
-    aria: object.aria_attributes) do %>
+<%= content_tag(:div,
+    aria: object.aria_attributes,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
 
     <div class="progress_pills_status">
       <% object.with_status do |status| %>

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

@@ -3,7 +3,6 @@ examples:
   rails:
   - progress_simple_default: Default
   - progress_simple_value: Setting Values
-  - progress_simple_flex: Within a Flex  
   - progress_simple_width: Progress Bar Width
   - progress_simple_variants: Variants
   - progress_simple_muted: Muted
@@ -13,7 +12,6 @@ examples:
   react:
   - progress_simple_default: Default
   - progress_simple_value: Setting Values
-  - progress_simple_flex: Within a Flex  
   - progress_simple_width: Progress Bar Width
   - progress_simple_variants: Variants
   - progress_simple_muted: Muted

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

@@ -2,7 +2,6 @@ export { default as ProgressSimpleAlign } from './_progress_simple_align.jsx'
 export { default as ProgressSimpleDefault } from './_progress_simple_default.jsx'
 export { default as ProgressSimpleMuted } from './_progress_simple_muted.jsx'
 export { default as ProgressSimpleValue } from './_progress_simple_value.jsx'
-export { default as ProgressSimpleFlex } from './_progress_simple_flex.jsx'
 export { default as ProgressSimpleWidth } from './_progress_simple_width.jsx'
 export { default as ProgressSimpleVariants } from './_progress_simple_variants.jsx'
 

data/app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb

@@ -1,7 +1,10 @@
 <%= content_tag(:div, class: object.wrapper_classname) do %>
-  <%= pb_content_tag(:div,
-    data: object.data_values,
-    style: object.style) do %>
+  <%= content_tag(:div,
+  id: object.id,
+  data: object.data_values,
+  class: object.classname,
+  style: object.style,
+  **combined_html_options) do %>
     <%= content_tag(:div, "",
       class: "progress_simple_value",
       style: object.value_style) %>

data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb

@@ -48,7 +48,7 @@ module Playbook
       end
 
       def wrapper_classname
-        generate_classname("pb_progress_simple_wrapper_#{align}")
+        "pb_progress_simple_wrapper_#{align}"
       end
 
       def classname

data/app/pb_kits/playbook/pb_progress_step/progress_step.html.erb

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

data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag(:li) do %>
+<%= content_tag(:li,
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  **combined_html_options) do %>
   <div class="box" style="max-width: min-content;" id="<%= object.tooltip_trigger_class %>">
     <div class="circle">
       <%= pb_rails("icon", props: { icon: object.icon, size: "xs" }) if object.icon.present? %>

data/app/pb_kits/playbook/pb_radio/_radio.scss

@@ -40,23 +40,6 @@
         border: 6px solid $primary;
       }
     }
-
-    &:disabled + .pb_radio_button {
-      cursor: not-allowed;
-      background-color: mix($charcoal, $white, 5%);
-      border-color: $border_light;
-
-      & ~ .pb_body_kit {
-        cursor: not-allowed;
-        color: $text_lt_light;
-      }
-    }
-
-    &:disabled:checked + .pb_radio_button{
-      cursor: not-allowed;
-      background-color: $white;
-      border: 6px solid $neutral;
-    }
   }
 
   &[class*=vertical] {
@@ -83,24 +66,6 @@
           border: 6px solid $primary;
         }
       }
-
-      &:disabled + .pb_radio_button {
-        cursor: not-allowed;
-        background-color: mix($charcoal, $white, 80%);
-        border: 2px solid $border_dark;
-
-        & ~ .pb_body_kit {
-          cursor: not-allowed;
-          color: $text_dk_light;
-        }
-      }
-
-      &:disabled:checked {
-        & ~ .pb_radio_button {
-          background-color: mix($charcoal, $white, 80%);
-          border: 6px solid $border_dark;
-        }
-      }
     }
 
     @media (hover:hover) {

data/app/pb_kits/playbook/pb_radio/_radio.tsx

@@ -14,7 +14,6 @@ type RadioProps = {
   className?: string,
   dark?: boolean,
   data?: {[key: string]: string},
-  disabled?: boolean,
   error?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
@@ -32,7 +31,6 @@ const Radio = ({
   className,
   dark = false,
   data = {},
-  disabled = false,
   error = false,
   htmlOptions = {},
   id,
@@ -58,7 +56,6 @@ const Radio = ({
     else
     return (
     <input
-        disabled={disabled}
         id={id}
         name={name}
         onChange={onChange}

data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Flex, Radio } from '../../'
 
-const RadioAlignment = (props) => {
+const RadioAlignment = () => {
   return (
     <Flex>
       <Radio
@@ -11,7 +11,6 @@ const RadioAlignment = (props) => {
           name="Group2"
           tabIndex={0}
           value="Power"
-          {...props}
       />
       <br />
       <Radio
@@ -21,7 +20,6 @@ const RadioAlignment = (props) => {
           marginRight="sm"
           name="Group2"
           value="Nitro"
-          {...props}
       />
       <br />
       <Radio
@@ -30,7 +28,6 @@ const RadioAlignment = (props) => {
           label="Google"
           name="Group2"
           value="Google"
-          {...props}
       />
     </Flex>
   )

data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import Radio from '../_radio'
 
-const RadioDefault = (props) => {
+const RadioDefault = () => {
   const ref = React.createRef()
 
   return (
@@ -13,7 +13,6 @@ const RadioDefault = (props) => {
           ref={ref}
           tabIndex={0}
           value="Power"
-          {...props}
       />
       <br />
       <Radio
@@ -21,7 +20,6 @@ const RadioDefault = (props) => {
           label="Nitro"
           name="Group2"
           value="Nitro"
-          {...props}
       />
       <br />
       <Radio
@@ -29,7 +27,6 @@ const RadioDefault = (props) => {
           label="Google"
           name="Group2"
           value="Google"
-          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_radio/docs/_radio_error.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Radio } from '../..'
 
-const RadioError = (props) => {
+const RadioError = () => {
   return (
     <div>
       <Radio
@@ -9,7 +9,6 @@ const RadioError = (props) => {
           label="Power"
           name="Group2"
           value="Power"
-          {...props}
       />
     </div>
   )

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

@@ -6,14 +6,12 @@ examples:
   - radio_error: With Error
   - radio_options: With Options
   - radio_alignment: Alignment
-  - radio_disabled: Disabled
 
   react:
   - radio_default: Default
   - radio_custom: Custom
   - radio_error: With Error
   - radio_alignment: Alignment
-  - radio_disabled: Disabled
 
   swift:
   - radio_default_swift: Default

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

@@ -2,4 +2,3 @@ export { default as RadioDefault } from './_radio_default.jsx'
 export { default as RadioCustom } from './_radio_custom.jsx'
 export { default as RadioError } from './_radio_error.jsx'
 export { default as RadioAlignment } from './_radio_alignment.jsx'
-export { default as RadioDisabled } from './_radio_disabled.jsx'

data/app/pb_kits/playbook/pb_radio/radio.html.erb

@@ -1,5 +1,11 @@
-<%= pb_content_tag(:label,
-    checked: object.checked) do %>
+<%= content_tag(:label,
+    aria: object.aria,
+    checked: object.checked,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    value: object.value,
+    **combined_html_options) do %>
 
     <% if content.present? %>
       <%= content %>

data/app/pb_kits/playbook/pb_radio/radio.rb

@@ -11,7 +11,6 @@ module Playbook
                      default: false
       prop :error, type: Playbook::Props::Boolean,
                    default: false
-      prop :disabled, type: Playbook::Props::Boolean, default: false
       prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
       prop :name, type: Playbook::Props::String,
@@ -33,10 +32,6 @@ module Playbook
         error ? "negative" : nil
       end
 
-      def input
-        radio_button_tag(name, value, checked, input_options.merge(disabled: disabled))
-      end
-
     private
 
       def error_class

data/app/pb_kits/playbook/pb_radio/radio.test.js

@@ -69,20 +69,3 @@ test('returns dark + error class name', () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass(`${kitClass} dark error`)
 })
-
-test('has disabled attribute', () => {
-  render(
-    <Radio
-        data={{ testid: testId }}
-        disabled
-        label="Power"
-        name="Group2"
-        value="Power"
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const input = kit.querySelector('input')
-  expect(input).toHaveAttribute('disabled')
-})
-

data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss

@@ -47,7 +47,8 @@ $section_colors_dark: (
 
   &[class*=_dashed] {
     &::before, &::after {
-      @include section_separator_dashed(false);
+      border: 1px dashed $border_light;
+      background: none;
     }
   }
 
@@ -65,10 +66,5 @@ $section_colors_dark: (
         @include section_separator_vertical(true);
       }
     }
-    &[class*=_dashed] {
-      &::before, &::after {
-        @include section_separator_dashed(true);
-      }
-    }
   }
 }

data/app/pb_kits/playbook/pb_section_separator/_section_separator_mixin.scss

@@ -9,7 +9,7 @@
     }
     content: "";
     height: 100%;
-    width: 1.9px;
+    width: 1px;
     position: initial;
     z-index: 0;
 }
@@ -21,13 +21,3 @@
         background: $border_dark;
     }
 }
-
-@mixin section_separator_dashed($dark: false) {
-    @if $dark == false {
-        border: 1px dashed $border_light;
-        background: none;
-    } @else {
-        border: 1px dashed $border_dark;
-        background: none;
-    }
-}

data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
     <% if object.orientation === 'horizontal' %>
         <% if content %>
             <%= content %>

data/app/pb_kits/playbook/pb_select/select.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+  aria: object.aria,
+  data: object.data,
+  class: object.classnames,
+  **combined_html_options) do %>
   <% if object.label %>
     <label class="pb_select_kit_label" for="<%= object.name %>">
       <%= pb_rails("caption", props: { text: object.label }) %>

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  **combined_html_options) do %>
 
   <% if object.multi %>
     <%= check_box_tag(object.name, object.value, object.checked, object.additional_input_options) %>

data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.html.erb

@@ -1,4 +1,7 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
 
   <%= pb_rails("selectable_card", props: {
     input_id: object.input_id,

data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
 
     <% if object.inputs == "disabled" %>
 

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <%= pb_rails("list") do %>
     <% object.items.each do |item| %>
       <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant, id: object.get_id(item)) )%>

data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag(:li) do %>
+<%= content_tag(:li,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <% if object.variant == "radio"%>
     <%= pb_rails("radio", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
     <% if content.present? %>

data/app/pb_kits/playbook/pb_source/source.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <div class="pb__source_layout">
     <% if !object.hide_icon %>
       <% if object.show_icon? %>

data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  **combined_html_options) do %>
   <% if layout_option == "number" %>
     <% case object.size %>
       <% when "xs", "sm" %>

data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
       <%= pb_rails("body", props: { status: object.status }) do %>
         <%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon }) if object.returned_icon %>
         <%= "#{object.value}%" if object.value %>

data/app/pb_kits/playbook/pb_stat_value/stat_value.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <div class="pb_stat_value_wrapper">
     <%= pb_rails "title", props: {
       classname: "pb_stat_value_kit",

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

@@ -1,10 +1,20 @@
 <%= content_tag(:div) do %>
   <% if object.tag == "table" %>
-    <%= pb_content_tag(:table) do %>
+    <%= content_tag(:table,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence %>
     <% end %>
   <% else %>
-    <%= pb_content_tag do %>
+    <%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence %>
     <% end %>
   <% end %>

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

@@ -1,9 +1,19 @@
 <% if object.tag == "table" %>
-  <%= pb_content_tag(:tbody) 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 %>
-  <%= pb_content_tag do %>
-    <%= content.presence %>
-  <% end %>
+    <%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
+      **combined_html_options) do %>
+      <%= content.presence %>
+    <% end %>
 <% end %>

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

@@ -1,9 +1,19 @@
 <% if object.tag == "table" %>
-  <%= pb_content_tag(:td) do %>
-    <%= content.presence || object.text %>
-  <% end %>
+    <%= content_tag(:td,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
+      **combined_html_options) do %>
+      <%= content.presence || object.text %>
+    <% end %>
 <% else %>
-  <%= pb_content_tag do %>
-    <%= content.presence || object.text %>
-  <% end %>
+    <%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
+      **combined_html_options) do %>
+      <%= content.presence || object.text %>
+    <% end %>
 <% end %>