playbook_ui 14.16.0.pre.alpha.PLAY1938completetooltipfloatinguitransition6830 → 14.16.0.pre.alpha.play1960buttonkitdisablenotworkingdanger6850

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 794a2d3bca7088071c4fbd83fff2a367725c1919abc36cc77cd4b46aebd7d752
-  data.tar.gz: 78a0d55d2565ea0f8181c350c797dbd8cf68ab5be5de79fb8956b48183ce7fca
+  metadata.gz: ec0875c5557cec086ec99ae1cbaf9f47361e3a4584e4b677136fd3ce394db55d
+  data.tar.gz: 456a8945cc951c32c481c638e66ee8a685902e1a1b02b75bcd8fb6e5709a5c2e
 SHA512:
-  metadata.gz: c8c882af3d81f788032d5b534917b5494d149610824acc75cca8337fb13826f526ceec4c851784985b5e0e2a9af5f895980a9c4d8b904435353afe2ff851683a
-  data.tar.gz: 13ccd9cf6c192109eee944d6bd83fe8b8ba03d40d48e3481f04e96d63c49a7d455c9a812478920c575fdf5a89db751c29823ae99fa52bfe696be2a966a080f24
+  metadata.gz: 7d30f5a21e8502edb67813757f015e1c7b95a1f19cbc435e5e5e553fd0c3477c82fba61713834accd60a58286f500c03623d062183485b6f9a5c98b84b2ceb6a
+  data.tar.gz: 67b9bac93175b4881f236ea5f2ceef4023a6eeefea241dc5503ec8e7c27a5d3a128fdc90aa73bde6a8dabc02648ed7450e0fc62e3f75a9a666c65a3b17024215

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -101,6 +101,15 @@
       border-top-left-radius: 0px !important;
       border-top-right-radius: 0px !important;
     }
+    // Right align header content of first data column in selectable row no subrow setup
+    &.selectable-rows-enabled {
+      tr { 
+        th:nth-child(2),
+        .pb_flex_kit_orientation_row_justify_content_start_align_items_center_spacing_none.gap_none {
+          justify-content: flex-end;
+        }
+      }
+    }
 
     // Set fixed width for header cells to match table body
     th {
@@ -112,7 +121,8 @@
       }
 
       // Set fixed width for checkbox column
-      &.table-header-cells-custom {
+      &.table-header-cells-custom, 
+      &.checkbox-cell.checkbox-cell-header {
         width: 40px !important;
         min-width: 40px !important;
         box-sizing: border-box !important;
@@ -168,6 +178,15 @@
         text-align: right;
       }
     }
+    // Right align row content of first data column in selectable row no subrow setup
+    &.selectable-rows-enabled {
+      tr {
+        td:nth-child(2),
+        .pb_flex_kit_orientation_row_justify_content_start_align_items_center_spacing_none {
+          justify-content: end;
+        }
+      }
+    }
   }
 
   .table-header-cells-active:first-child {
@@ -262,7 +281,8 @@
   .table-header-cells:first-child,
   .table-header-cells-custom:first-child,
   td:first-child,
-  .pb_table_td:first-child {
+  .pb_table_td:first-child,
+  .checkbox-cell.checkbox-cell-header:first-child {
     box-shadow: 1px 0px 0px 0px $border_light !important;
   }
 
@@ -318,6 +338,7 @@
       .table-header-cells:first-child,
       td:first-child,
       .pb_table_td:first-child,
+      .checkbox-cell.checkbox-cell-header:first-child,
       [class*="pinned-left"] {
           background-color: $white;
           box-shadow: $shadow_deep !important;
@@ -435,6 +456,16 @@
         ) !important;
       }
     }
+
+    // Vertical separator
+    .table-header-cells:first-child,
+    .table-header-cells-custom:first-child,
+    td:first-child,
+    .pb_table_td:first-child,
+    .checkbox-cell.checkbox-cell-header:first-child {
+      box-shadow: 1px 0px 0px 0px $border_dark !important;
+    }
+
     // Dark Mode Responsive Styles
     @media only screen and (max-width: $screen-xl-min) {
       &[class*="advanced-table-responsive-scroll"] {
@@ -459,6 +490,7 @@
         .table-header-cells:first-child,
         td:first-child,
         .pb_table_td:first-child,
+        .checkbox-cell.checkbox-cell-header:first-child,
         [class*="pinned-left"] {
           background: $bg_dark_card;
           border-right: $border_dark;

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

@@ -3,8 +3,8 @@
           <% if content.present? %>
             <% content.presence %>
           <% else %>
-            <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading }) %>
-            <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading }) %>
+            <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows }) %>
+            <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion }) %>
           <% end %>
         <% end %>
 <% end %>

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

@@ -20,6 +20,8 @@ module Playbook
       prop :max_height, type: Playbook::Props::Enum,
                         values: %w[auto xs sm md lg xl xxl xxxl],
                         default: "auto"
+      prop :selectable_rows, type: Playbook::Props::Boolean,
+                             default: false
 
       def classname
         generate_classname("pb_advanced_table", responsive_classname, max_height_classname, separator: " ")
@@ -32,6 +34,14 @@ module Playbook
       def max_height_classname
         max_height.present? ? "advanced-table-max-height-#{max_height}" : ""
       end
+
+      def selected_rows
+        @selected_rows ||= []
+      end
+
+      def selected_rows_length
+        selected_rows.length
+      end
     end
   end
 end

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

@@ -0,0 +1,39 @@
+<% 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",
+    }
+  ] 
+
+  subrow_headers = ["Quarter", "Month", "Day"]
+%>
+
+<%= pb_rails("advanced_table", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, selectable_rows: true }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions, selectable_rows: true }) %>
+  <%= pb_rails("advanced_table/table_body", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all", selectable_rows: true }) %>
+<% end %>

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

@@ -0,0 +1,33 @@
+<% 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",
+    }
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "selectable_rows_no_subrows", table_data: @table_data_no_subrows, column_definitions: column_definitions, selectable_rows: true, enable_toggle_expansion: "none", }) %>

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

@@ -0,0 +1 @@
+`selectable_rows` can also be used with tables without nested row data. Set `enable_toggle_expansion: none` to adjust the Advanced Table styling to fit a table without subrows.

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

@@ -0,0 +1,6 @@
+`selectable_rows` is a boolean prop that if present will add checkboxes to all rows that will allow for selecting rows. 
+
+When a parent row is clicked, it will check all nested children rows, Children rows can be manually checked or unchecked as well. 
+
+__ALERT TO DEVS__: UPDATE THIS PARAGRAPH IN THE FOLLOW UP STORY WHEN CHECKBOX FUNCTIONALITY IS SET PLEASE
+The `onRowSelectionChange` prop returns an array of ids of all Rows that have been selected. Open the console on this example and check and uncheck checkboxes to see this is action! __NOTE__: Each object within the `tableData`Array must contain a unique id in order to attach an id to all Rows for this to function. 

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

@@ -11,6 +11,8 @@ examples:
   - advanced_table_custom_cell_rails: Custom Components for Cells
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
+  # - advanced_table_selectable_rows: Selectable Rows
+  # - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
 
 
   react:

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

@@ -231,4 +231,4 @@ window.expandAllRows = (element) => {
 
 window.expandAllSubRows = (element, rowDepth) => {
   PbAdvancedTable.handleToggleAllSubRows(element, rowDepth);
-};
+};

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

@@ -21,6 +21,8 @@ module Playbook
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[none scroll],
                         default: "scroll"
+      prop :selectable_rows, type: Playbook::Props::Boolean,
+                             default: false
 
       def flatten_columns(columns)
         columns.flat_map do |col|
@@ -56,7 +58,7 @@ module Playbook
         current_data_attributes = current_depth.zero? ? { row_depth: 0 } : table_data_attributes
 
         # Additional class and data attributes needed for toggle logic
-        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading })
+        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion })
 
         if row[:children].present?
           row[:children].each do |child_row|
@@ -81,7 +83,7 @@ module Playbook
       def classname
         additional_classes = []
         additional_classes << "advanced-table-responsive-#{responsive} pinned-left" if responsive == "scroll"
-
+        additional_classes << "selectable-rows-enabled" if selectable_rows && enable_toggle_expansion == "none"
         generate_classname("pb_advanced_table_body", *additional_classes, separator: " ")
       end
 

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

@@ -1,19 +1,29 @@
 <%= pb_content_tag(:thead) do %>
   <% object.header_rows.each_with_index do |header_row, row_index| %>
     <%= pb_rails("table/table_row") do %>
+      <% if row_index == 0 && object.selectable_rows && object.enable_toggle_expansion == "none" %>
+        <%= object.render_select_all_header %>
+      <% end %>
       <% header_row.each_with_index do |cell, cell_index| %>
         <% header_id = cell[:accessor].present? ? cell[:accessor] : "header_#{row_index}_#{cell_index}" %>
         <%= pb_rails("table/table_header", props: { id: header_id, colspan: cell[:colspan], classname: [object.th_classname(is_first_column: cell_index.zero?), ('last-header-cell' if cell[:is_last_in_group] && cell_index != 0)].compact.join(' '), sort_menu: cell[:accessor] ? cell[:sort_menu] : nil }) do %>
           <%= pb_rails("flex", props: { align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: "end" }) do %>
-            <% if cell_index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") && row_index === header_rows.size - 1 %>
-              <% if loading %>
-                <div class="<%= object.loading ? 'loading-toggle-icon' : '' %>"></div>
-              <% else %>
-                <button
-                  class="gray-icon toggle-all-icon"
-                  onclick="expandAllRows(this); event.preventDefault();">
-                  <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
-                </button>
+            <% if cell_index.zero? && row_index === header_rows.size - 1 %>
+              <% if object.selectable_rows && object.enable_toggle_expansion != "none" %>
+                <%= pb_rails("flex/flex_item", props: { padding_right: "xs" }) do %>
+                  <%= object.render_select_all_checkbox %>
+                <% end %>
+              <% end %>
+              <% if object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all" %>
+                <% if loading %>
+                  <div class="<%= object.loading ? 'loading-toggle-icon' : '' %>"></div>
+                <% else %>
+                  <button
+                    class="gray-icon toggle-all-icon"
+                    onclick="expandAllRows(this); event.preventDefault();">
+                    <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
+                  </button>
+                <% end %>
               <% end %>
             <% end %>
             <%= cell[:label] %>

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

@@ -13,17 +13,20 @@ module Playbook
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[none scroll],
                         default: "scroll"
+      prop :selectable_rows, type: Playbook::Props::Boolean,
+                             default: false
 
       def classname
         additional_classes = []
         additional_classes << "advanced-table-responsive-#{responsive} pinned-left" if responsive == "scroll"
+        additional_classes << "selectable-rows-enabled" if selectable_rows && enable_toggle_expansion == "none"
 
         generate_classname("pb_advanced_table_header", "pb_table_thead", *additional_classes, separator: " ")
       end
 
       def th_classname(is_first_column: false)
         additional_classes = []
-        additional_classes << "pinned-left" if is_first_column && responsive == "scroll"
+        additional_classes << "pinned-left" if is_first_column && responsive == "scroll" && !selectable_rows
 
         generate_classname("table-header-cells", *additional_classes, separator: " ")
       end
@@ -38,6 +41,40 @@ module Playbook
         rows
       end
 
+      # Selectable Rows No Subrows - checkboxes in their own first cell
+      def render_select_all_header
+        if selectable_rows
+          additional_classes = []
+          additional_classes << "table-header-cells-custom"
+          additional_classes << "checkbox-cell-header"
+          additional_classes << "pinned-left" if responsive == "scroll"
+          pb_rails("table/table_header", props: {
+                     classname: additional_classes.join(" "),
+                   }) do
+            pb_rails("checkbox", props: {
+                       id: "select-all-rows",
+                       name: "select-all-rows",
+                       data: {
+                         action: "click->pb-advanced-table#toggleAllRowSelection",
+                       },
+                     })
+          end
+        end
+      end
+
+      # Selectable Rows w/ Subrows - checkboxes part of toggleable first cell
+      def render_select_all_checkbox
+        if selectable_rows
+          pb_rails("checkbox", props: {
+                     id: "select-all-rows",
+                     name: "select-all-rows",
+                     data: {
+                       action: "click->pb-advanced-table#toggleAllRowSelection",
+                     },
+                   })
+        end
+      end
+
     private
 
       def compute_max_depth(columns)

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

@@ -1,48 +1,60 @@
 <%= pb_content_tag(:tr) do %>
-        <% object.column_definitions.each_with_index do |column, index| %>
-            <% next unless column[:accessor].present? %>
-            <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column, index)}) do %>
-                <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", classname: object.loading ? "loading-cell" : "" }) do %>
-                    <% if collapsible_trail && index.zero? %>
-                        <% (1..depth).each do |i| %>
-                            <% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %>
-                            <% left_offset = i * 1.0 + additional_offset %>
-                            <div class="collapsible-trail" style="left: <%= left_offset %>em"></div>
-                        <% end %>
+    <% has_separate_checkbox = object.selectable_rows && object.enable_toggle_expansion == "none" %>
+    <% if has_separate_checkbox %>
+        <%= object.render_checkbox_cell %>
+    <% end %>
+    <% object.column_definitions.each_with_index do |column, index| %>
+        <% next unless column[:accessor].present? %>
+        <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column, index)}) do %>
+            <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", classname: object.loading ? "loading-cell" : "" }) do %>
+                <% if collapsible_trail && index.zero? %>
+                    <% (1..depth).each do |i| %>
+                        <% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %>
+                        <% left_offset = i * 1.0 + additional_offset %>
+                        <div class="collapsible-trail" style="left: <%= left_offset %>em"></div>
                     <% end %>
+                <% end %>
 
-                    <div style="padding-left: <%= depth * 1.25 %>em">
-                        <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
-                            <% if index.zero? && object.row[:children].present? %>
-                              <button
-                                id="<%= "#{object.id}_#{object.row.object_id}" %>"
-                                class="gray-icon expand-toggle-icon"
-                                data-advanced-table="true">
-                                <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
-                                <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
-                              </button>
+                <div style="padding-left: <%= depth * 1.25 %>em">
+                    <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
+                        <% if index.zero? %>
+                            <% has_integrated_checkbox = object.selectable_rows && object.enable_toggle_expansion != "none" %>
+                            <% if has_integrated_checkbox %>
+                                <%= pb_rails("flex/flex_item", props: { padding_right: "xs" }) do %>
+                                    <%= object.render_row_checkbox %>
+                                <% end %>
                             <% end %>
-                            <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && object.row[:children].present? ? "none" : "xs"}) do %>
-                                <% if column[:custom_renderer].present? %>
-                                    <%= raw(column[:custom_renderer].call(object.row, custom_renderer_value(column, index))) %>
-                                <% elsif index.zero? %>
-                                    <% if object.depth.zero? %>
-                                        <%= object.row[column[:accessor].to_sym] %>
-                                    <% else %>
-                                        <% object.depth_accessors.each_with_index do |item, accessor_index| %>
-                                            <% if object.depth - 1 == accessor_index %>
-                                                <% key = item.to_sym %>
-                                                <%= object.row[key] %>
-                                            <% end %>
+                            <% if object.row[:children].present? %>
+                                <button
+                                    id="<%= "#{object.id}_#{object.row.object_id}" %>"
+                                    class="gray-icon expand-toggle-icon"
+                                    data-advanced-table="true">
+                                    <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
+                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
+                                </button>
+                            <% end %>
+                        <% end %>
+                        <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && (object.row[:children].present? || has_integrated_checkbox) ? "none" : "xs"}) do %>       
+                            <% if column[:custom_renderer].present? %>
+                                <%= raw(column[:custom_renderer].call(object.row, custom_renderer_value(column, index))) %>
+                            <% elsif index.zero? %>
+                                <% if object.depth.zero? %>
+                                    <%= object.row[column[:accessor].to_sym] %>
+                                <% else %>
+                                    <% object.depth_accessors.each_with_index do |item, accessor_index| %>
+                                        <% if object.depth - 1 == accessor_index %>
+                                            <% key = item.to_sym %>
+                                            <%= object.row[key] %>
                                         <% end %>
                                     <% end %>
-                                <% else %>
-                                    <%= object.row[column[:accessor].to_sym] %>
                                 <% end %>
+                            <% else %>
+                                <%= object.row[column[:accessor].to_sym] %>
                             <% end %>
                         <% end %>
-                    </div>
-                <% end %>
+                    <% end %>
+                </div>
             <% end %>
         <% end %>
-<% end %>
+    <% end %>
+<% end %>

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

@@ -20,6 +20,13 @@ module Playbook
                         default: "scroll"
       prop :is_pinned_left, type: Playbook::Props::Boolean,
                             default: false
+      prop :selectable_rows, type: Playbook::Props::Boolean,
+                             default: false
+      prop :row_id, type: Playbook::Props::String,
+                    default: ""
+      prop :enable_toggle_expansion, type: Playbook::Props::Enum,
+                                     values: %w[all header none],
+                                     default: "header"
 
       def data
         Hash(prop(:data)).merge(table_data_attributes)
@@ -42,6 +49,38 @@ module Playbook
         end.compact
       end
 
+      # Selectable Rows No Subrows - checkboxes in their own first cell
+      def render_checkbox_cell
+        if selectable_rows
+          pb_rails("table/table_cell", props: {
+                     classname: "checkbox-cell",
+                   }) do
+            pb_rails("checkbox", props: {
+                       id: "select-row-#{row_id || row.object_id}",
+                       name: "select-row-#{row_id || row.object_id}",
+                       data: {
+                         row_id: row_id || row.object_id.to_s,
+                         action: "click->pb-advanced-table#toggleRowSelection",
+                       },
+                     })
+          end
+        end
+      end
+
+      # Selectable Rows w/ Subrows - checkboxes part of toggleable first cell
+      def render_row_checkbox
+        if selectable_rows
+          pb_rails("checkbox", props: {
+                     id: "select-row-#{row_id || row.object_id}",
+                     name: "select-row-#{row_id || row.object_id}",
+                     data: {
+                       row_id: row_id || row.object_id.to_s,
+                       action: "click->pb-advanced-table#toggleRowSelection",
+                     },
+                   })
+        end
+      end
+
     private
 
       def custom_renderer_value(column, index)

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

@@ -63,11 +63,6 @@ $pb_button_sizes: (
     color: $text_lt_lighter;
   }
 
-  // Disabled =================
-  &[class*=_disabled]  {
-    @include pb_button_disabled;
-  }
-
   // Block ====================
   &[class*=_block]  {
     @include pb_button_block;
@@ -83,6 +78,11 @@ $pb_button_sizes: (
     @include pb_button_danger;
   }
 
+  // Disabled =================
+  &[class*=_disabled]  {
+    @include pb_button_disabled;
+  }
+
   // Dark Variants =============
   &.dark  {
     &[class*=_primary]  {