playbook_ui 13.28.0.pre.alpha.pbntr312tableheaderflexremoval3019 → 13.28.0.pre.alpha.play829selectablecardalignment2978

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx

@@ -7,39 +7,39 @@ const TableAlignmentRow = (props) => {
     <Table
         {...props}
     >
-    <Table.Head>
-      <Table.Row>
-        <Table.Header>{'Column 1'}</Table.Header>
-        <Table.Header>{'Column 2'}</Table.Header>
-        <Table.Header>{'Column 3'}</Table.Header>
-        <Table.Header>{'Column 4'}</Table.Header>
-        <Table.Header>{'Column 5'}</Table.Header>
-      </Table.Row>
-    </Table.Head>
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>{'Value 1'}</Table.Cell>
-        <Table.Cell>{'Value 2'}</Table.Cell>
-        <Table.Cell>{'Value 3'}</Table.Cell>
-        <Table.Cell>{'Value 4'}</Table.Cell>
-        <Table.Cell>{'Value 5'}</Table.Cell>
-      </Table.Row>
-      <Table.Row textAlign="center">
-        <Table.Cell>{'Value 1'}</Table.Cell>
-        <Table.Cell>{'Value 2'}</Table.Cell>
-        <Table.Cell>{'Value 3'}</Table.Cell>
-        <Table.Cell>{'Value 4'}</Table.Cell>
-        <Table.Cell>{'Value 5'}</Table.Cell>
-      </Table.Row>
-      <Table.Row textAlign="right">
-        <Table.Cell>{'Value 1'}</Table.Cell>
-        <Table.Cell>{'Value 2'}</Table.Cell>
-        <Table.Cell>{'Value 3'}</Table.Cell>
-        <Table.Cell>{'Value 4'}</Table.Cell>
-        <Table.Cell>{'Value 5'}</Table.Cell>
-      </Table.Row>
-    </Table.Body>
-  </Table>
+      <thead>
+        <tr>
+          <th>{'Column 1'}</th>
+          <th>{'Column 2'}</th>
+          <th>{'Column 3'}</th>
+          <th>{'Column 4'}</th>
+          <th>{'Column 5'}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+        <tr align="center">
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+        <tr align="right">
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+      </tbody>
+    </Table>
   )
 }
 

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.md

@@ -1,2 +1,2 @@
-Pass our `textAlign` global prop to any `table.row` subcomponent to change the text alignment of all cells within that row.
+This is to be used to shift the whole row.
 The header/ first row is the default, followed by the second row being centered, and then the last row shifted to the right.

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.html.erb

@@ -0,0 +1,63 @@
+<%= pb_rails("table") do %>
+  <thead>
+    <tr>
+      <th>&nbsp;</th>
+      <th>Price</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td shift="down">Total</td>
+      <td>
+        $12
+        <br/>
+        $46
+        <br/>
+        $25
+        <br/>
+        -------
+        <br/>
+        $83
+      </td>
+    </tr>
+  </tbody>
+<% end %>
+<br/>
+<%= pb_rails("table") do %>
+  <thead>
+    <tr>
+      <th>Espresso Drinks</th>
+      <th>Ingredients</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td shift="up">Cappuccino</td>
+      <td>
+        Espresso
+        <br/>
+        Steamed Milk
+        <br/>
+        Milk Foam
+      </td>
+    </tr>
+    <tr>
+      <td shift="up">Macchiato</td>
+      <td>
+        Espresso
+        <br/>
+        Steamed Milk
+      </td>
+    </tr>
+    <tr>
+      <td shift="up">Mocha</td>
+      <td>
+        Espresso
+        <br/>
+        Hot Chocolate
+        <br/>
+        Steamed Milk
+      </td>
+    </tr>
+  </tbody>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.jsx

@@ -9,16 +9,16 @@ const TableAlignmentShiftData = (props) => {
           marginBottom="md"
           {...props}
       >
-        <Table.Head>
-          <Table.Row>
-            <Table.Header>&nbsp;</Table.Header>
-            <Table.Header>{'Price'}</Table.Header>
-          </Table.Row>
-        </Table.Head>
-        <Table.Body>
-          <Table.Row>
-            <Table.Cell verticalAlign="bottom">{'Total'}</Table.Cell>
-            <Table.Cell>
+        <thead>
+          <tr>
+            <th>&nbsp;</th>
+            <th>{'Price'}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td shift="down">{'Total'}</td>
+            <td>
               {'$12'}
               <br />
               {'$46'}
@@ -28,51 +28,50 @@ const TableAlignmentShiftData = (props) => {
               {'-------'}
               <br />
               {'$83'}
-            </Table.Cell>
-          </Table.Row>
-        </Table.Body>
+            </td>
+          </tr>
+        </tbody>
       </Table>
-
       <Table
           {...props}
       >
-      <Table.Head>
-        <Table.Row>
-          <Table.Header>{'Espresso Drinks'}</Table.Header>
-          <Table.Header>{'Ingredients'}</Table.Header>
-        </Table.Row>
-      </Table.Head>
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell verticalAlign="top">{'Cappuccino'} </Table.Cell>
-          <Table.Cell>
-          {'Steamed Milk'}
-          <br />
-          {'Milk Foam'}
-          </Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell verticalAlign="top">
-            {'Macchiato'}
-            </Table.Cell>
-            <Table.Cell verticalAlign="top">
-            {'Espresso'}
-            <br />
-            {'Steamed Milk'}
-          </Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>
-            {'Mocha'}
-            </Table.Cell>
-          <Table.Cell>
-            {'Hot Chocolate'}
-            <br />
-            {'Steamed Milk'}
-          </Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
+        <thead>
+          <tr>
+            <th>{'Espresso Drinks'}</th>
+            <th>{'Ingredients'}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td shift="up">{'Cappuccino'}</td>
+            <td>
+              {'Espresso'}
+              <br />
+              {'Steamed Milk'}
+              <br />
+              {'Milk Foam'}
+            </td>
+          </tr>
+          <tr>
+            <td shift="up">{'Macchiato'}</td>
+            <td>
+              {'Espresso'}
+              <br />
+              {'Steamed Milk'}
+            </td>
+          </tr>
+          <tr>
+            <td shift="up">{'Mocha'}</td>
+            <td>
+              {'Espresso'}
+              <br />
+              {'Hot Chocolate'}
+              <br />
+              {'Steamed Milk'}
+            </td>
+          </tr>
+        </tbody>
+      </Table>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.md

@@ -1,2 +1,2 @@
-Pass our `verticalAlign` global prop to any `table.cell` subcomponent to change the text alignment of individual cells, or apply this prop persistently to align entire columns.
+You can individually shift a piece of table data, or shift an entire column.
 The first table shifts "Total" down, whereas the second table shifts the "Espresso Drinks" column contents up.

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.html.erb

@@ -0,0 +1,52 @@
+<%= pb_rails("table") do %>
+  <thead>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th>Column 5</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        Value 1a
+        <br/>
+        Value 1a
+        <br/>
+        Value 1a
+      </td>
+      <td>Value 2a</td>
+      <td>Value 3a</td>
+      <td>Value 4a</td>
+      <td>Value 5a</td>
+    </tr>
+    <tr shift="middle">
+      <td>
+        Value 1b
+        <br/>
+        Value 1b
+        <br/>
+        Value 1b
+      </td>
+      <td>Value 2b</td>
+      <td>Value 3b</td>
+      <td>Value 4b</td>
+      <td>Value 5b</td>
+    </tr>
+    <tr shift="down">
+      <td>
+        Value 1c
+        <br/>
+        Value 1c
+        <br/>
+        Value 1c
+      </td>
+      <td>Value 2c</td>
+      <td>Value 3c</td>
+      <td>Value 4c</td>
+      <td>Value 5c</td>
+    </tr>
+  </tbody>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx

@@ -4,59 +4,60 @@ import Table from '../_table'
 
 const TableAlignmentShiftRow = (props) => {
   return (
-    <Table {...props}>
-      <Table.Head>
-        <Table.Row>
-          <Table.Header>{'Column 1'}</Table.Header>
-          <Table.Header>{'Column 2'}</Table.Header>
-          <Table.Header>{'Column 3'}</Table.Header>
-          <Table.Header>{'Column 4'}</Table.Header>
-          <Table.Header>{'Column 5'}</Table.Header>
-        </Table.Row>
-      </Table.Head>
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>
+    <Table
+        {...props}
+    >
+      <thead>
+        <tr>
+          <th>{'Column 1'}</th>
+          <th>{'Column 2'}</th>
+          <th>{'Column 3'}</th>
+          <th>{'Column 4'}</th>
+          <th>{'Column 5'}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>
             {'Value 1a'}
             <br />
             {'Value 1a'}
             <br />
             {'Value 1a'}
-          </Table.Cell>
-          <Table.Cell>{'Value 2a'}</Table.Cell>
-          <Table.Cell>{'Value 3a'}</Table.Cell>
-          <Table.Cell>{'Value 4a'}</Table.Cell>
-          <Table.Cell>{'Value 5a'}</Table.Cell>
-        </Table.Row>
-        <Table.Row verticalAlign="middle">
-          <Table.Cell>
+          </td>
+          <td>{'Value 2a'}</td>
+          <td>{'Value 3a'}</td>
+          <td>{'Value 4a'}</td>
+          <td>{'Value 5a'}</td>
+        </tr>
+        <tr shift="middle">
+          <td>
             {'Value 1b'}
             <br />
             {'Value 1b'}
             <br />
             {'Value 1b'}
-          </Table.Cell>
-          <Table.Cell>{'Value 2b'}</Table.Cell>
-          <Table.Cell>{'Value 3b'}</Table.Cell>
-          <Table.Cell>{'Value 4b'}</Table.Cell>
-          <Table.Cell>{'Value 5b'}</Table.Cell>
-        </Table.Row>
-        <Table.Row verticalAlign="bottom">
-          <Table.Cell>
+          </td>
+          <td>{'Value 2b'}</td>
+          <td>{'Value 3b'}</td>
+          <td>{'Value 4b'}</td>
+          <td>{'Value 5b'}</td>
+        </tr>
+        <tr shift="down">
+          <td>
             {'Value 1c'}
             <br />
             {'Value 1c'}
             <br />
             {'Value 1c'}
-          </Table.Cell>
-          <Table.Cell>{'Value 2c'}</Table.Cell>
-          <Table.Cell>{'Value 3c'}</Table.Cell>
-          <Table.Cell>{'Value 4c'}</Table.Cell>
-          <Table.Cell>{'Value 5c'}</Table.Cell>
-        </Table.Row>
-      </Table.Body>
+          </td>
+          <td>{'Value 2c'}</td>
+          <td>{'Value 3c'}</td>
+          <td>{'Value 4c'}</td>
+          <td>{'Value 5c'}</td>
+        </tr>
+      </tbody>
     </Table>
-
   )
 }
 

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

@@ -5,10 +5,10 @@ examples:
     - table_lg: Large
     - table_sticky: Sticky Header
     - table_header: Table Header
-    - table_alignment_row_rails: Row Alignment
-    - table_alignment_column_rails: Cell Alignment
-    - table_alignment_shift_row_rails: Row Shift
-    - table_alignment_shift_data_rails: Cell Shift
+    - table_alignment_row: Row Alignment
+    - table_alignment_column: Column Alignment
+    - table_alignment_shift_row: Shift Row
+    - table_alignment_shift_data: Shift Column Data
     - table_side_highlight: Side Highlight
     - table_container: Table Container Off
     - table_disable_hover: Disable Hover
@@ -26,7 +26,7 @@ examples:
     - table_striped: Striped Table
     - table_with_subcomponents_rails: Table with Sub Components (Table Elements)
     - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
-    - table_outer_padding: Outer Padding
+
 
   react:
     - table_sm: Small
@@ -34,9 +34,9 @@ examples:
     - table_lg: Large
     - table_sticky: Sticky Header
     - table_alignment_row: Row Alignment
-    - table_alignment_column: Cell Alignment
-    - table_alignment_shift_row: Row Shift
-    - table_alignment_shift_data: Cell Shift
+    - table_alignment_column: Column Alignment
+    - table_alignment_shift_row: Shift Row
+    - table_alignment_shift_data: Shift Column Data
     - table_side_highlight: Side Highlight
     - table_container: Table Container Off
     - table_disable_hover: Disable Hover
@@ -54,4 +54,4 @@ examples:
     - table_striped: Striped Table
     - table_with_subcomponents: Table with Sub Components (Table Elements)
     - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
-    - table_outer_padding: Outer Padding
+

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

@@ -24,4 +24,3 @@ export { default as TableStriped } from './_table_striped.jsx'
 export { default as TableDiv } from './_table_div.jsx'
 export { default as TableWithSubcomponents } from './_table_with_subcomponents.jsx'
 export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'
-export { default as TableOuterPadding } from './_table_outer_padding.jsx'

data/app/pb_kits/playbook/pb_table/styles/_all.scss

@@ -19,4 +19,3 @@
 @import "vertical_border";
 @import "table_header";
 @import "striped";
-@import "outer_padding";

data/app/pb_kits/playbook/pb_table/table.rb

@@ -30,16 +30,12 @@ module Playbook
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[table div],
                  default: "table"
-      prop :outer_padding, type: Playbook::Props::Enum,
-                           values: ["none", "xxs", "xs", "sm", "md", "lg", "xl", nil],
-                           default: nil
 
       def classname
         generate_classname(
           "pb_table", "table-#{size}", single_line_class, dark_class,
           disable_hover_class, container_class, data_table_class, sticky_class, collapse_class,
-          vertical_border_class, striped_class, outer_padding_class,
-          "table-responsive-#{responsive}", separator: " "
+          vertical_border_class, striped_class, "table-responsive-#{responsive}", separator: " "
         )
       end
 
@@ -80,15 +76,6 @@ module Playbook
       def vertical_border_class
         vertical_border ? "vertical-border" : nil
       end
-
-      def outer_padding_class
-        if outer_padding.nil?
-          outer_padding
-        else
-          space_css_name = outer_padding != "none" ? "space_" : ""
-          outer_padding.present? ? "outer_padding_#{space_css_name}#{outer_padding}" : nil
-        end
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_table/table.test.js

@@ -52,6 +52,7 @@ const TableTagTable = () => {
   );
 };
 
+
 const props = {
   data: { testid: "table" },
   sticky: false
@@ -160,8 +161,3 @@ test("Renders Table.Cell subkit for HTML Table elements Table", () => {
   expect(head).toBeInTheDocument()
   expect(head.tagName).toBe("TD")
 })
-
-test("Should have outerPadding class", () => {
-  const kit = renderKit(Table, props, { outerPadding: "sm" })
-  expect(kit).toHaveClass("pb_table table-sm table-responsive-collapse table-card outer_padding_space_sm table-collapse-sm")
-})

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

@@ -7,7 +7,9 @@
       id: "pb-th#{object.id}",
       **combined_html_options) do %>
     <% unless sorting_style? %>
+      <%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_nolink" }) do %>
         <%= content.presence || object.text %>
+      <% end %>
     <% else %>
       <%= link_to next_link, style: link_style do %>
         <%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_link" }) do %>

data/app/pb_kits/playbook/playbook-doc.js

@@ -34,7 +34,6 @@ import * as DateYearStacked from 'pb_date_year_stacked/docs'
 import * as Detail from 'pb_detail/docs'
 import * as Dialog from 'pb_dialog/docs'
 import * as DistributionBarDocs from 'pb_distribution_bar/docs'
-import * as Draggable from 'pb_draggable/docs'
 import * as Dropdown from 'pb_dropdown/docs'
 import * as FileUpload from 'pb_file_upload/docs'
 import * as Filter from 'pb_filter/docs'
@@ -138,7 +137,6 @@ WebpackerReact.registerComponents({
   ...Detail,
   ...Dialog,
   ...DistributionBarDocs,
-  ...Draggable,
   ...Dropdown,
   ...FileUpload,
   ...Filter,

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

@@ -156,10 +156,6 @@ type Truncate = {
   truncate?: TruncateType
 }
 
-type VerticalAlign =  {
-  verticalAlign?: "baseline" | "super" | "top" | "middle" | "bottom" | "sub" | "text-top" | "text-bottom"
-}
-
 type ZIndexType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
 type ZIndexResponsiveType = {[key: string]: ZIndexType}
 type ZIndex = {
@@ -171,7 +167,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 & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left;
+  Position & Shadow & TextAlign & Truncate & ZIndex & { hover?: string } & Top & Right & Bottom & Left;
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
   const keys: string[] = Object.keys(prop)
@@ -474,13 +470,6 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     } else {
       return textAlign ? `text_align_${textAlign} ` : ''
     }
-  },
-  verticalAlignProps: ({ verticalAlign }: VerticalAlign) => {
-    if (typeof verticalAlign === 'object') {
-      return getResponsivePropClasses(verticalAlign, 'vertical_align')
-    } else {
-      return verticalAlign ? `vertical_align_${verticalAlign} ` : ''
-    }
   }
 }
 

data/dist/menu.yml

@@ -352,10 +352,6 @@ kits:
         platforms: *web
         description: 
         status: "stable"
-      - name: "draggable"
-        platforms: *react_only
-        description:
-        status: "beta"
   - name: message_text_patterns
     description: 
     components:
@@ -467,4 +463,5 @@ kits:
         status: "stable"
       - name: "user"
         platforms: *web
-        description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.
+        description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.
+        status: "stable"