playbook_ui 12.19.0.pre.alpha.movemarkdown639 → 12.20.0.pre.alpha.title2665

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

@@ -0,0 +1,94 @@
+import React from "react"
+
+import Table from "../_table"
+
+const TableSticky = (props) => (
+  <Table
+      sticky
+      {...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 1'}</td>
+        <td>{'Value 2'}</td>
+        <td>{'Value 3'}</td>
+        <td>{'Value 4'}</td>
+        <td>{'Value 5'}</td>
+      </tr>
+      <tr>
+        <td>{'Value 1'}</td>
+        <td>{'Value 2'}</td>
+        <td>{'Value 3'}</td>
+        <td>{'Value 4'}</td>
+        <td>{'Value 5'}</td>
+      </tr>
+      <tr>
+        <td>{'Value 1'}</td>
+        <td>{'Value 2'}</td>
+        <td>{'Value 3'}</td>
+        <td>{'Value 4'}</td>
+        <td>{'Value 5'}</td>
+      </tr>
+      <tr>
+        <td>{'Value 1'}</td>
+        <td>{'Value 2'}</td>
+        <td>{'Value 3'}</td>
+        <td>{'Value 4'}</td>
+        <td>{'Value 5'}</td>
+      </tr>
+      <tr>
+        <td>{'Value 1'}</td>
+        <td>{'Value 2'}</td>
+        <td>{'Value 3'}</td>
+        <td>{'Value 4'}</td>
+        <td>{'Value 5'}</td>
+      </tr>
+      <tr>
+        <td>{'Value 1'}</td>
+        <td>{'Value 2'}</td>
+        <td>{'Value 3'}</td>
+        <td>{'Value 4'}</td>
+        <td>{'Value 5'}</td>
+      </tr>
+      <tr>
+        <td>{'Value 1'}</td>
+        <td>{'Value 2'}</td>
+        <td>{'Value 3'}</td>
+        <td>{'Value 4'}</td>
+        <td>{'Value 5'}</td>
+      </tr>
+      <tr>
+        <td>{'Value 1'}</td>
+        <td>{'Value 2'}</td>
+        <td>{'Value 3'}</td>
+        <td>{'Value 4'}</td>
+        <td>{'Value 5'}</td>
+      </tr>
+      <tr>
+        <td>{'Value 1'}</td>
+        <td>{'Value 2'}</td>
+        <td>{'Value 3'}</td>
+        <td>{'Value 4'}</td>
+        <td>{'Value 5'}</td>
+      </tr>
+      <tr>
+        <td>{'Value 1'}</td>
+        <td>{'Value 2'}</td>
+        <td>{'Value 3'}</td>
+        <td>{'Value 4'}</td>
+        <td>{'Value 5'}</td>
+      </tr>
+    </tbody>
+  </Table>
+)
+
+export default TableSticky

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

@@ -0,0 +1,10 @@
+React: Use `sticky` on a table to allow the table header to be fixed in place when the user scrolls up and down on the page.
+
+Rails: Pass `sticky: true` to props.
+
+If the table header is not sticking in the right place you will need to pass a inline `top` style to the `thead`.
+React Example: `<thead style={{ top: "-16px" }}>`
+Rails Example: `<thead style="top: -16px">`
+
+### Troubleshooting CSS Problems
+Sticky may not work if any parent/ancestor of the sticky element has any of the `overflow` properties set. Additionally, specifying a height on the overflowing container provides measurement for this feature to work properly. In some cases, it may be necessary to set the same parent/ancestor container to `position: static` as well.

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

@@ -0,0 +1,43 @@
+<%= pb_rails("table", props: { size: "sm" }) do %>
+  <thead>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td align="right">
+      <%= pb_rails("button", props: { text: "Tertiary Action", variant: "link", padding_left: "none" }) %>
+      <%= pb_rails("button", props: { text: "Secondary Action", variant: "secondary" }) %>
+      </td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td align="right">
+      <%= pb_rails("button", props: { text: "Tertiary Action", variant: "link", padding_left: "none" }) %>
+      <%= pb_rails("button", props: { text: "Secondary Action", variant: "secondary" }) %>
+      </td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td align="right">
+      <%= pb_rails("button", props: { text: "Tertiary Action", variant: "link", padding_left: "none" }) %>
+      <%= pb_rails("button", props: { text: "Secondary Action", variant: "secondary" }) %>
+      </td>    
+      </tr>
+  </tbody>
+<% end %>

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

@@ -0,0 +1,90 @@
+import React from 'react'
+
+import Table from '../_table'
+import Button from '../../pb_button/_button'
+
+const TableOneAction = (props) => {
+  return (
+    <Table
+        size="sm"
+        {...props}
+    >
+      <thead>
+        <tr>
+          <th>{'Column 1'}</th>
+          <th>{'Column 2'}</th>
+          <th>{'Column 3'}</th>
+          <th>{'Column 4'}</th>
+          <th>{''}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td align="right">
+            <Button
+                onClick={() => alert('button clicked!')}
+                paddingLeft="none"
+                text="Tetriary Action"
+                variant="link"
+                {...props}
+            />
+            <Button
+                onClick={() => alert('button clicked!')}
+                text="Secondary Action"
+                variant="secondary"
+                {...props}
+            />
+          </td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td align="right">
+            <Button
+                onClick={() => alert('button clicked!')}
+                paddingLeft="none"
+                text="Tetriary Action"
+                variant="link"
+                {...props}
+            />
+            <Button
+                onClick={() => alert('button clicked!')}
+                text="Secondary Action"
+                variant="secondary"
+                {...props}
+            />
+          </td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td align="right">
+            <Button
+                onClick={() => alert('button clicked!')}
+                paddingLeft="none"
+                text="Tetriary Action"
+                variant="link"
+                {...props}
+            />
+            <Button
+                onClick={() => alert('button clicked!')}
+                text="Secondary Action"
+                variant="secondary"
+                {...props}
+            />
+          </td>
+        </tr>
+      </tbody>
+    </Table>
+  )
+}
+
+export default TableOneAction

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

@@ -0,0 +1 @@
+If there are two actions on each of the row, one should ideally one should use the `secondary` variant and the other use the `link` variant. The button using the `secondary` variant should be placed at the end.

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

@@ -0,0 +1,34 @@
+<%= pb_rails("table", props: { size: "sm" }) do %>
+  <thead>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td align="right"> <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %> </td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td align="right"> <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %> </td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td align="right"> <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %> </td>
+      </tr>
+  </tbody>
+<% end %>

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

@@ -0,0 +1,70 @@
+import React from 'react'
+
+import Table from '../_table'
+import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
+
+const TableTwoPlusActions = (props) => {
+  return (
+    <Table
+        size="sm"
+        {...props}
+    >
+      <thead>
+        <tr>
+          <th>{'Column 1'}</th>
+          <th>{'Column 2'}</th>
+          <th>{'Column 3'}</th>
+          <th>{'Column 4'}</th>
+          <th>{''}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td align="right">
+            {' '}
+            <CircleIconButton
+                icon="ellipsis-h"
+                variant="secondary"
+                {...props}
+            />
+          </td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td align="right">
+            {' '}
+            <CircleIconButton
+                icon="ellipsis-h"
+                variant="secondary"
+                {...props}
+            />
+          </td>
+
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td align="right">
+            {' '}
+            <CircleIconButton
+                icon="ellipsis-h"
+                variant="secondary"
+                {...props}
+            />
+          </td>
+        </tr>
+      </tbody>
+    </Table>
+  )
+}
+
+export default TableTwoPlusActions

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

@@ -0,0 +1 @@
+If there are more than two actions on each row, then they should be contained in secondary circle icon button with the `ellipsis-h` icon (horizontal ellipsis) at the end of the row

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

@@ -0,0 +1,34 @@
+<%= pb_rails("table", props: { size: "sm", vertical_border: true }) 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 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+  </tbody>
+<% end %>

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

@@ -0,0 +1,48 @@
+import React from 'react'
+
+import Table from '../_table'
+
+const TableVerticalBorder = (props) => {
+  return (
+    <Table
+        size="sm"
+        verticalBorder
+        {...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 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+      </tbody>
+    </Table>
+  )
+}
+
+export default TableVerticalBorder

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

@@ -0,0 +1,41 @@
+<%= pb_rails("table", props: { size: "sm", margin_bottom: "lg" }) do %>
+  <thead>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+    </tr>
+    <%= pb_rails("background", props: { background_color: "error_subtle", tag: "tr" }) do %>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+    <% end %>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+    </tr>
+    <%= pb_rails("background", props: { background_color: "warning_subtle", tag: "tr" }) do %>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+    <% end %>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+    </tr>
+  </tbody>
+<% end %>

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

@@ -0,0 +1,62 @@
+import React from 'react'
+
+import Table from '../_table'
+import Background from "../../pb_background/_background"
+
+const TableWithBackgroundKit = (props) => {
+  return (
+    <div>
+      <Table
+          {...props}
+      >
+        <thead>
+          <tr>
+              <th>{'Column 1'}</th>
+              <th>{'Column 2'}</th>
+              <th>{'Column 3'}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>{'Value 1'}</td>
+            <td>{'Value 2'}</td>
+            <td>{'Value 3'}</td>
+          </tr>
+          <Background
+              backgroundColor="error_subtle"
+              tag='tr'
+          >
+            <td>{'Value 1'}</td>
+            <td>{'Value 2'}</td>
+            <td>{'Value 3'}</td>
+          </Background>
+          <tr>
+            <td>{'Value 1'}</td>
+            <td>{'Value 2'}</td>
+            <td>{'Value 3'}</td>
+          </tr>
+          <tr>
+            <td>{'Value 1'}</td>
+            <td>{'Value 2'}</td>
+            <td>{'Value 3'}</td>
+          </tr>
+          <Background
+              backgroundColor="warning_subtle"
+              tag='tr'
+          >
+            <td>{'Value 1'}</td>
+            <td>{'Value 2'}</td>
+            <td>{'Value 3'}</td>
+          </Background>
+          <tr>
+            <td>{'Value 1'}</td>
+            <td>{'Value 2'}</td>
+            <td>{'Value 3'}</td>
+          </tr>
+        </tbody>
+      </Table>
+    </div>
+  )
+}
+
+export default TableWithBackgroundKit

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

@@ -0,0 +1,48 @@
+examples:
+  rails:
+    - table_sm: Small
+    - table_md: Medium
+    - table_lg: Large
+    - table_sticky: Sticky Header
+    - 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
+    - table_multiline: Multi-line
+    - table_single_line: Force Single Line
+    - table_data_table: Data Table
+    - table_responsive_table: Responsive Tables
+    - table_one_action: Table with 1 Action
+    - table_two_actions: Table with 2 Actions
+    - table_two_plus_actions: Table with 2+ Actions
+    - table_action_middle: Table with Actions in the Middle
+    - table_icon_buttons: Table with Icon Buttons
+    - table_with_background_kit: Table With Background Kit
+    - table_vertical_border: Vertical Borders
+
+  react:
+    - table_sm: Small
+    - table_md: Medium
+    - table_lg: Large
+    - table_sticky: Sticky Header
+    - 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
+    - table_multiline: Multi-line
+    - table_single_line: Force Single Line
+    - table_data_table: Data Table
+    - table_responsive_table: Responsive Tables
+    - table_one_action: Table with 1 Action
+    - table_two_actions: Table with 2 Actions
+    - table_two_plus_actions: Table with 2+ Actions
+    - table_action_middle: Table with Actions in the Middle
+    - table_icon_buttons: Table with Icon Buttons
+    - table_with_background_kit: Table With Background Kit
+    - table_vertical_border: Vertical Borders

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

@@ -0,0 +1,22 @@
+export { default as TableSm } from './_table_sm.jsx'
+export { default as TableMd } from './_table_md.jsx'
+export { default as TableLg } from './_table_lg.jsx'
+export { default as TableSticky } from './_table_sticky.jsx'
+export { default as TableSideHighlight } from './_table_side_highlight.jsx'
+export { default as TableContainer } from './_table_container.jsx'
+export { default as TableDataTable } from './_table_data_table.jsx'
+export { default as TableResponsiveTable } from './_table_responsive_table.jsx'
+export { default as TableDisableHover } from './_table_disable_hover.jsx'
+export { default as TableSingleLine } from './_table_single_line.jsx'
+export { default as TableMultiline } from './_table_multiline.jsx'
+export { default as TableOneAction } from './_table_one_action.jsx'
+export { default as TableTwoActions } from './_table_two_actions.jsx'
+export { default as TableTwoPlusActions } from './_table_two_plus_actions.jsx'
+export { default as TableActionMiddle } from './_table_action_middle.jsx'
+export { default as TableIconButtons } from './_table_icon_buttons.jsx'
+export { default as TableAlignmentColumn } from './_table_alignment_column.jsx'
+export { default as TableAlignmentRow } from './_table_alignment_row.jsx'
+export { default as TableAlignmentShiftRow } from './_table_alignment_shift_row.jsx'
+export { default as TableAlignmentShiftData } from './_table_alignment_shift_data.jsx'
+export { default as TableWithBackgroundKit } from './_table_with_background_kit.jsx'
+export { default as TableVerticalBorder } from './_table_vertical_border.jsx'

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

@@ -0,0 +1,32 @@
+[class^=pb_table] {
+    tr {
+        vertical-align: top;
+    }
+
+    // Text Align
+    tr[align=center] th,
+    tr th[align=center] {
+      text-align: center !important;
+    }
+    tr[align=right] th,
+    tr th[align=right] {
+      text-align: right !important;
+    }
+
+    // Column Align
+    tr[shift=up],
+    td[shift=up],
+    th[shift=up] {
+        vertical-align: top;
+      }
+    tr[shift=middle],
+    td[shift=middle],
+    th[shift=middle] {
+      vertical-align: middle;
+    }
+    tr[shift=down],
+    td[shift=down],
+    th[shift=down] {
+      vertical-align: bottom;
+    }
+}

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

@@ -0,0 +1,19 @@
+@import "../../tokens/colors";
+
+@import "variables";
+@import "reset";
+@import "structure";
+@import "table-card";
+@import "content";
+@import "headers";
+@import "side_highlight";
+@import "alignment";
+@import "hover";
+@import "single-line";
+@import "table-dark";
+@import "mobile";
+@import "mobile_collapse";
+@import "tablet_collapse";
+@import "desktop_collapse";
+@import "sticky_header";
+@import "vertical_border";

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

@@ -0,0 +1,13 @@
+[class^=pb_table] {
+  &.table-sm,
+  &.table-md,
+  &.table-lg {
+    tbody {
+      tr {
+        td {
+          font-size: $default-font-size;
+        }
+      }
+    }
+  }
+}