playbook_ui 15.1.0 → 15.2.0.pre.alpha.PLAY2428advancedtablerailscellpadding11387

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8a9b97f8b1cfbe21c7f5950db6fb2a233b94de20e5f2dc2d5d41222f71bce0f3
-  data.tar.gz: 825330d08fa7304d115fc3b6916855f9b04ff43e6cc6fc6839ea3dea2269e871
+  metadata.gz: 37409d35c89e4ef6225f10adb8eaca07531e78bfb205e5219d1f193162bf7422
+  data.tar.gz: 396f3d13c672cad83733a9c0100e8954aaae51d6f298b3507e173a919e1cac5d
 SHA512:
-  metadata.gz: 83f8b4447c6cf013383fcfe5932a52d5a50865c4c27db488cd082d76f124a3c34ef542289de2f2fc0b5f36827c968cb1f693c99cefbdb3c543de35caed2ed5f6
-  data.tar.gz: 03f0a987a4da2bbe382ea13c1fe18525d2a23f4ff637794218686aa57beed6b48c86c94565519df870b48165566c4c9635c319c263a568a6f8bae7ff92a77435
+  metadata.gz: dc694540cb052b950104c77578df15934f008005a08c2fd036795d0b5eb7ed21396537ddec6550750f70ac815da9c08e1d94007d724f5bb2e527bf6736139da8
+  data.tar.gz: b2c6e18dbb4e448b0d066dd2e7a0b3229eb8e1069ebfe45dcf809b02e6242f1f4c5133fe5458682985385b4bce222f3a2b303207f36cd86ff676e1decaac1dec

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -203,6 +203,13 @@ export function useTableState({
     onRowPinningChange({ top: allPinned });
   }, [table, pinnedRows?.value?.top?.join(',')]);
 
+  // Set pagination state when pagination is enabled
+  useEffect(() => {
+    if (pagination && paginationProps?.pageSize) {
+      table.setPageSize(paginationProps.pageSize);
+    }
+  }, [pagination, paginationProps?.pageSize, table]);
+
   // Check if table has any sub-rows
   const hasAnySubRows = table.getRowModel().rows.some(row => row.subRows && row.subRows.length > 0);
   const selectedRowsLength = Object.keys(table.getState().rowSelection).length;

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.html.erb

@@ -0,0 +1,113 @@
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      column_styling: { 
+        cell_background_color: ->(row) { row[:newEnrollments].to_i > 20 ? "success_secondary" : "warning_secondary" }
+      }
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "padding-control", table_data: @table_data, column_definitions: column_definitions }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions }) %>
+<% end %>
+
+<% multi_header_column_definitions = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    label: "Enrollment Data",
+    columns: [
+      {
+        label: "Enrollment Stats",
+        columns: [
+          {
+            accessor: "newEnrollments",
+            label: "New Enrollments",
+            column_styling: { 
+              cell_background_color: ->(row) { row[:newEnrollments].to_i > 20 ? "success_secondary" : "warning_secondary" }
+            }
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: "Performance Data",
+    columns: [
+      {
+        label: "Completion Metrics",
+        columns: [
+          {
+            accessor: "completedClasses",
+            label: "Completed Classes",
+            column_styling: { 
+              cell_background_color: ->(row) { row[:completedClasses].to_i > 15 ? "info_secondary" : "neutral_secondary" }
+            }
+          },
+          {
+            accessor: "classCompletionRate",
+            label: "Class Completion Rate",
+            column_styling: { 
+              cell_background_color: ->(row) { row[:completedClasses].to_i > 15 ? "neutral_secondary" : "info_secondary" }
+            }
+          },
+        ],
+      },
+      {
+        label: "Attendance",
+        columns: [
+          {
+            accessor: "attendanceRate",
+            label: "Attendance Rate",
+          },
+          {
+            accessor: "graduatedStudents",
+            label: "Graduated Students",
+            column_styling: { 
+              cell_background_color: ->(row) { row[:graduatedStudents].to_i > 10 ? "primary_secondary" : "error_secondary" }
+            }
+          },
+        ],
+      },
+    ],
+  },
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "padding-control-multi-header", table_data: @table_data, column_definitions: multi_header_column_definitions, padding_top: "lg" }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: multi_header_column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: multi_header_column_definitions }) %>
+<% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.md

@@ -0,0 +1 @@
+`column_styling` can also be used to control the background color on all cells in a given column via the use of the `cell_background_color` key/value pair. Use `cell_background_color` to achieve custom background colors for individual cells as seen here.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md

@@ -1,4 +1,4 @@
-The `columnStyling` prop is an optional item that can be used within `columnDefinitions` as shown in the code snippet below. It is an object that has 2 optional key/value pairs:
+The `columnStyling` prop is an optional item that can be used within `columnDefinitions` as shown in the code snippet below. It is an object that has several optional key/value pairs, this doc example highlights the following:
 
 1) `headerAlignment`: This will allow you to control alignment of header content which is set to right aligned by default. you can set this to `left`, `right` or `center`.
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.md

@@ -1,4 +1,4 @@
-The `column_styling` prop is an optional item that can be used within `column_definitions` as shown in the code snippet below. It is an object that has 2 optional key/value pairs:
+The `column_styling` prop is an optional item that can be used within `column_definitions` as shown in the code snippet below.  It is an object that has several optional key/value pairs, this doc example highlights the following:
 
 1) `header_alignment`: This will allow you to control alignment of header content which is set to right aligned by default. you can set this to `left`, `right` or `center`.
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row_rails.html.erb

@@ -0,0 +1,51 @@
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+] %>
+
+<% row_styling = [
+  {
+    row_id: "1",
+    cell_padding: "md"
+  },
+  {
+    row_id: "3",
+    cell_padding: "lg"
+  },
+  {
+    row_id: "5",
+    cell_padding: "none"
+  },
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "padding-control-per-row", table_data: @table_data_with_id, column_definitions: column_definitions, row_styling: row_styling }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data_with_id, column_definitions: column_definitions, row_styling: row_styling }) %>
+<% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row_rails.md

@@ -0,0 +1 @@
+`row_styling` can also be used to control padding on all cells in a given row via the use of the `cell_padding` key/value pair as shown here. `cell_padding` lets you use 'xxs', 'xs', 'sm', 'md', 'lg', 'xl' and 'none'.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_rails.html.erb

@@ -0,0 +1,40 @@
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      column_styling: { 
+        cell_padding: "none",
+      }
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+      column_styling: { cell_padding: "md" },
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "padding-control", table_data: @table_data, column_definitions: column_definitions }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions }) %>
+<% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_rails.md

@@ -0,0 +1 @@
+`column_styling` can also be used to control padding on all cells in a given column via the use of the `cell_padding` key/value pair. `cell_padding` lets you use 'xxs', 'xs', 'sm', 'md', 'lg', 'xl' and 'none'.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_rails.md

@@ -1,4 +1,4 @@
-The `row_styling` prop can be used in conjunction with row ids to control certain styling options on individual rows. Currently, `row_styling` gives you 3 optional controls:
+The `row_styling` prop can be used in conjunction with row ids to control certain styling options on individual rows. It is an object that has several optional key/value pairs, this doc example highlights the following:
 
 - `background_color` : use this to control the background color of the row
 - `font_color`: use this to control font color for each row if needed, for example if using a darker background color.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_react.md

@@ -1,4 +1,4 @@
-The `rowStyling` prop can be used in conjunction with row ids to control certain styling options on individual rows. Currently, `rowStyling` gives you 3 optional controls:
+The `rowStyling` prop can be used in conjunction with row ids to control certain styling options on individual rows. It is an object that has several optional key/value pairs, this doc example highlights the following:
 
 - `backgroundColor` : use this to control the background color of the row
 - `fontColor`: use this to control font color for each row if needed, for example if using a darker background color.

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

@@ -21,8 +21,11 @@ examples:
   - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
   - advanced_table_row_styling: Row Styling
+  - advanced_table_padding_control_per_row_rails: Padding Control using Row Styling
   - advanced_table_column_styling_rails: Column Styling
   - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
+  - advanced_table_padding_control_rails: Padding Control using Column Styling
+  - advanced_table_background_control_rails: Background Control using Column Styling
   - advanced_table_column_border_color_rails: Column Group Border Color
 
 

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -12,7 +12,8 @@
     <% end %>
     <% object.column_definitions.each_with_index do |column, index| %>
         <% next unless column[:accessor].present? %>
-        <%= pb_rails("table/table_cell", props: {  html_options: { style: { "background-color": bg_color, color: font_color } }, classname:object.td_classname(column, index)}) do %>
+        <% component_info = object.cell_component_info(column, index, bg_color, font_color) %>
+        <%= pb_rails(component_info[:name], props: component_info[:props]) do %>
             <%= pb_rails("flex", props:{ align: "center", justify: object.justify_for(column, index), classname: object.loading ? "loading-cell" : "" }) do %>
                 <% if collapsible_trail && index.zero? %>
                     <% (1..depth).each do |i| %>

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -46,9 +46,53 @@ module Playbook
         classes = %w[id-cell]
         classes << "last-cell" if column[:is_last_in_group]
         classes << "pinned-left" if index.zero? && is_pinned_left && responsive == "scroll"
+
+        row_style = row_styling.find { |style| style[:row_id].to_s == row_id.to_s }
+        row_padding = row_style&.[](:cell_padding)
+
+        if column[:accessor].present?
+          orig_def = find_column_def_by_accessor(column_definitions, column[:accessor])
+          column_padding = orig_def[:column_styling][:cell_padding] if orig_def && orig_def[:column_styling].is_a?(Hash) && orig_def[:column_styling][:cell_padding].present?
+        end
+
+        classes << "p_#{row_padding}" if row_padding.present?
+        classes << "p_#{column_padding}" if column_padding.present?
+
         classes.join(" ")
       end
 
+      def cell_background_color(column)
+        return nil unless column[:accessor].present?
+
+        orig_def = find_column_def_by_accessor(column_definitions, column[:accessor])
+        if orig_def && orig_def[:column_styling].is_a?(Hash) && orig_def[:column_styling][:cell_background_color].present?
+          bg_color = orig_def[:column_styling][:cell_background_color]
+          if bg_color.respond_to?(:call)
+            bg_color.call(row)
+          else
+            bg_color
+          end
+        end
+      end
+
+      def has_custom_background_color?(column)
+        cell_background_color(column).present?
+      end
+
+      # Uses a regular table/table_cell component if there is no custom background color; if there is a cell_background_color uses a background component with tag "td"
+      def cell_component_info(column, index, bg_color, font_color)
+        if has_custom_background_color?(column)
+          custom_bg_color = cell_background_color(column)
+          component_name = "background"
+          component_props = { background_color: custom_bg_color, tag: "td", classname: td_classname(column, index) }
+        else
+          component_name = "table/table_cell"
+          component_props = { html_options: { style: { "background-color": bg_color, color: font_color } }, classname: td_classname(column, index) }
+        end
+
+        { name: component_name, props: component_props }
+      end
+
       def depth_accessors
         column_definitions.flat_map do |column|
           column[:cellAccessors] if column.key?(:cellAccessors)

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -81,6 +81,12 @@ $pb_button_sizes: (
   // Loading state
   &.pb_button_loading {
     @include pb_button_loading(true);
+    &.pb_button_size_sm {
+        min-height: 30px;
+    }
+    &.pb_button_size_lg {
+        min-height: 45px;
+    }
   }
 
   // Disabled state

data/app/pb_kits/playbook/pb_button/docs/_button_loading.html.erb

@@ -1,3 +1,7 @@
-<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", loading: true, margin_right: "lg" }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "secondary", loading: true, margin_right: "lg" }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "link", loading: true, margin_right: "lg" }) %>
+<%= pb_rails("caption", props: { margin_y: "md", text: "Button variants with loading" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, margin_right: "lg" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, variant: "secondary", loading: true, margin_right: "lg" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, variant: "link", loading: true, margin_right: "lg" }) %>
+<%= pb_rails("caption", props: { margin_y: "md", text: "Button sizes with loading" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, size: "sm", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, size: "lg", margin_right: "lg" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx

@@ -1,8 +1,13 @@
 import React from 'react'
 import Button from "../../pb_button/_button"
+import Caption from "../../pb_caption/_caption"
 
 const ButtonLoading = (props) => (
   <div>
+    <Caption 
+        marginY="md" 
+        text="Button variants with loading" 
+    />
     <Button
         aria={{ label: 'Loading' }}
         loading
@@ -31,6 +36,30 @@ const ButtonLoading = (props) => (
         variant="link"
         {...props}
     />
+    <br/>
+    <Caption 
+        marginY="md" 
+        text="Button sizes with loading" 
+    />
+    <Button
+        aria={{ label: 'Loading' }}
+        loading
+        marginRight='lg'
+        size="sm"
+        tabIndex={0}
+        text="Small Button"
+        {...props}
+    />
+    {' '}
+    <Button
+        aria={{ label: 'Loading' }}
+        loading
+        marginRight='lg'
+        size="lg"
+        tabIndex={0}
+        text="Small Button"
+        {...props}
+    />
   </div>
 )
 

data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.html.erb

@@ -0,0 +1,31 @@
+  <%= pb_rails("body", props: { text: "Click to disable the Buttons below", id: "toggle-disabled-demo", cursor: "pointer", color:"link", margin_bottom:"sm" }) %>
+  <%= pb_rails("body", props: { text: "Click to enable the Buttons below", id: "toggle-enabled-demo", cursor: "pointer", color:"link", margin_bottom:"sm" }) %>
+
+<%= pb_rails("card", props:{display:"flex", flex_direction:"row", justify_content:"center"}) do %>
+<%= pb_rails("button", props: { text: "I am a Button", id: "normal_managed_button", data:{pb_button_managed: true}, margin_right: "lg" }) %>
+<%= pb_rails("button", props: { text: "I am an <a> Button", id: "a_tag_managed_button", tag:"a", data:{pb_button_managed: true}, link: "http://google.com"}) %>
+<% end %>
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const disableTrigger = document.querySelector('#toggle-disabled-demo')
+    const enableTrigger = document.querySelector('#toggle-enabled-demo')
+
+    // Find the Buttons you want to 'manage'
+    const btn = document.querySelector('#normal_managed_button');
+    const link = document.querySelector('#a_tag_managed_button');
+
+    disableTrigger.addEventListener('click', (e) => {
+        // Disable default button
+        btn.setAttribute('disabled', true)
+        // Disable a tag button
+        link.setAttribute('aria-disabled', 'true')
+    });
+
+    enableTrigger.addEventListener('click', (e) => {
+        // Enable default button
+        btn.removeAttribute('disabled')
+        // Enable a tag button
+        link.removeAttribute('aria-disabled')
+    });
+  });
+</script>

data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.md

@@ -0,0 +1,7 @@
+If needing to toggle the disabled state of the Button dynamically (for example, within a Turbo or Stimulus context), you can now do so in rails using the `pb-button-managed` data attribute. 
+
+1) Add the following data attribute to your button kit: `data:{ pb-button-managed: true }`
+
+2) To toggle enabled/disabled state via attributes: for buttons set/remove disabled, for links set/remove aria-disabled="true". This will handle disabling the button, preventing clicks as well as all style changes so you don't have to.  
+
+Click to enable or disable the buttons above and view the code snippet below for details!

data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.html.erb

@@ -0,0 +1,21 @@
+  <%= pb_rails("body", props: { text: "Click to disable the Button below", id: "toggle-disabled-demo-with-helper", cursor: "pointer", color:"link", margin_bottom:"sm" }) %>
+  <%= pb_rails("body", props: { text: "Click to enable the Button below", id: "toggle-enabled-demo-with-helper", cursor: "pointer", color:"link", margin_bottom:"sm" }) %>
+<br/>
+<%= pb_rails("card", props:{display:"flex", flex_direction:"row", justify_content:"center"}) do %>
+<%= pb_rails("button", props: { text: "Watch me Change!", id: "managed_button_with_helper", data:{pb_button_managed: true} }) %>
+<% end %>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const disable = document.querySelector('#toggle-disabled-demo-with-helper')
+    const enable = document.querySelector('#toggle-enabled-demo-with-helper')
+
+    // Find the Button you want to 'manage'
+    const demoBtn = document.querySelector('#managed_button_with_helper')
+
+    // Use the pbButton object created by the kit to call the enable/disable methods
+    disable.addEventListener('click', (e) => {demoBtn._pbButton.disable()});
+    enable.addEventListener('click', (e) => {demoBtn._pbButton.enable()});
+
+  });
+</script>

data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.md

@@ -0,0 +1,7 @@
+The disabled state for the button can also be toggled via small helpers available through the `pb-button-managed` data attribute. 
+
+1) Add the following data attribute to your button kit: `data:{ pb-button-managed: true }`
+
+2) Toggle state via the provided `_pbButton.disable()` and `_pbButton.enable()` helpers as shown in the code snippet below.
+
+Click to enable or disable the buttons above to see this in action!

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

@@ -11,6 +11,8 @@ examples:
   - button_options: Button Additional Options
   - button_size: Button Size
   - button_form: Button Form Attribute
+  - button_managed_disabled: Button Toggle Disabled State
+  - button_managed_disabled_helper: Button Toggle Disabled State Helper
   
   react:
   - button_default: Button Variants

data/app/pb_kits/playbook/pb_button/index.js

@@ -0,0 +1,99 @@
+import PbEnhancedElement from "../pb_enhanced_element"
+
+const BUTTON_SELECTOR = "[data-pb-button-managed]"
+
+export default class PbButton extends PbEnhancedElement {
+  static get selector() {
+    return BUTTON_SELECTOR
+  }
+
+  connect() {
+    this._attrManaged = this._attributesPresent()
+    this.element._pbButton = this 
+
+    this._onClick = (e) => {
+      if (this.isDisabled()) {
+        e.preventDefault()
+        e.stopImmediatePropagation()
+      }
+    }
+    this.element.addEventListener("click", this._onClick, true)
+
+    if (this._attrManaged) this._syncClassesFromAttributes()
+
+    this._observer = new MutationObserver(() => {
+      this._attrManaged = true
+      this._syncClassesFromAttributes()
+    })
+    this._observer.observe(this.element, {
+      attributes: true,
+      attributeFilter: ["disabled", "aria-disabled"],
+    })
+  }
+
+  disconnect() {
+    this.element.removeEventListener("click", this._onClick, true)
+    this._observer?.disconnect()
+    delete this.element._pbButton
+  }
+
+  disable() { this.setDisabled(true) }
+  enable()  { this.setDisabled(false) }
+
+  setDisabled(state) {
+    if (this._isButton()) {
+      state
+        ? this.element.setAttribute("disabled", "disabled")
+        : this.element.removeAttribute("disabled")
+    } else {
+      state
+        ? this.element.setAttribute("aria-disabled", "true")
+        : this.element.removeAttribute("aria-disabled")
+    }
+    this._attrManaged = true
+    this._applyClassState(state)
+  }
+
+  isDisabled() {
+    if (this._isButton()) {
+      if (this.element.hasAttribute("disabled")) return true
+      if (this._attrManaged && !this.element.hasAttribute("disabled")) return false
+    } else {
+      const aria = this.element.getAttribute("aria-disabled")
+      if (aria === "true") return true
+      if (this._attrManaged && aria !== "true") return false
+    }
+    return this.element.classList.contains("pb_button_disabled")
+  }
+
+  _isButton() {
+    return this.element.tagName === "BUTTON"
+  }
+
+  _attributesPresent() {
+    return this.element.hasAttribute("disabled") || this.element.hasAttribute("aria-disabled")
+  }
+
+  _syncClassesFromAttributes() {
+    const state = this._attrDisabledState()
+    const disabled = (state === null) ? false : state
+    this._applyClassState(disabled)
+  }
+
+  _attrDisabledState() {
+    if (this._isButton()) {
+      return this.element.hasAttribute("disabled") ? true : null
+    } else {
+      const aria = this.element.getAttribute("aria-disabled")
+      if (aria === "true") return true
+      if (aria === "false") return false
+      return this.element.hasAttribute("aria-disabled") ? false : null
+    }
+  }
+
+  _applyClassState(disabled) {
+    this.element.classList.toggle("pb_button_disabled", !!disabled)
+    this.element.classList.toggle("pb_button_enabled", !disabled)
+  }
+}
+

data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss

@@ -19,6 +19,10 @@
     @import "./sass_partials/calendar_input_icon";
   }
 
+  label {
+    display: block !important;
+  }
+
   &:focus,
   :focus-within {
     div.cal_icon_wrapper,