playbook_ui 14.16.0.pre.rc.6 → 14.17.0.pre.alpha.PBNTR920emojipickerpoc7130

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

@@ -0,0 +1,50 @@
+import React from 'react'
+
+import Table from '../../pb_table/_table'
+
+const TableWithHeaderStyleBorderless = (props) => {
+  return (
+    <>
+        <Table
+            headerStyle="borderless"
+            size="sm"
+            {...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 TableWithHeaderStyleBorderless

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

@@ -0,0 +1 @@
+Customize your header by removing the header borders with the `headerStyle="borderless"` prop.

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

@@ -0,0 +1,59 @@
+import React from 'react'
+
+import Background from '../../pb_background/_background'
+import Card from '../../pb_card/_card'
+import Table from '../../pb_table/_table'
+
+const TableWithHeaderStyleFloating = (props) => {
+  return (
+    <>
+        <Card background="light" 
+            {...props}
+        >
+            <Table
+                headerStyle="floating"
+                size="sm"
+                {...props}
+            >
+              <Table.Head>
+                  <Background backgroundColor="light" 
+                      tag="tr"
+                      {...props}
+                  >
+                      <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>
+                  </Background>
+              </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>
+                  <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>
+                  <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>
+        </Card>
+    </>
+  )
+}
+
+export default TableWithHeaderStyleFloating

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

@@ -0,0 +1 @@
+Further customize your header by using the [table with background kit](https://playbook.powerapp.cloud/kits/table/react#table-with-background-kit) logic to give your table header a custom background color. Use the `headerStyle="floating"` prop to visually nest the borderless table within a card or collapsible with a matching background color (the `backgroundColor` passed to Background kit should match the `backgroundColor` for the element in which it is nested).

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

@@ -75,3 +75,5 @@ examples:
     - table_with_collapsible_with_nested_table: Table with Collapsible with Nested Table
     - table_with_clickable_rows: Table with Clickable Rows
     - table_with_selectable_rows: Table with Selectable Rows
+    - table_with_header_style_borderless: Header Style Borderless
+    - table_with_header_style_floating: Header Style Floating

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

@@ -35,3 +35,5 @@ export { default as TableWithCollapsibleWithNestedRows } from './_table_with_col
 export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'
 export { default as TableWithSelectableRows } from './_table_with_selectable_rows.jsx'
 export { default as TableWithClickableRows } from './_table_with_clickable_rows.jsx'
+export { default as TableWithHeaderStyleBorderless } from './_table_with_header_style_borderless.jsx'
+export { default as TableWithHeaderStyleFloating } from './_table_with_header_style_floating.jsx'

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

@@ -14,3 +14,79 @@
     }
   }
 }
+// remove all outward facing borders from header
+.header-borderless > thead,
+.header-borderless > thead > tr,
+.header-borderless > thead > tr > th,
+.header-borderless > .pb_table_thead,
+.header-borderless > .pb_table_thead > .pb_table_tr,
+.header-borderless > .pb_table_thead .pb_table_th {
+  border-top: none !important;
+  border-left: none !important;
+  border-right: none !important;
+}
+
+// remove bottom border (internal to table) on header cells - only light mode needs this redundancy handled likely due to a difference in the base scss and table-dark.scss
+.header-borderless:not(.table-dark) > thead > tr:last-child > th,
+.header-borderless:not(.table-dark) > .pb_table_thead > .pb_table_tr:last-child > .pb_table_th {
+  border-bottom: none !important;
+}
+
+// preserves top rounded corners to header at top of table-card for unnested card
+.header-borderless > thead > tr:first-child > th:first-child,
+.header-borderless > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:first-child {
+  border-top-left-radius: $border_radius_md !important;
+}
+
+.header-borderless > thead > tr:first-child > th:last-child,
+.header-borderless > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:last-child {
+  border-top-right-radius: $border_radius_md !important;
+}
+
+// ensures top border is from first row of body to prevent double borders
+.header-borderless > tbody > tr:first-child > td,
+.header-borderless > .pb_table_tbody > .pb_table_tr:first-child > .pb_table_td {
+  border-top: 1px solid $border_light !important;
+}
+
+// floating code - this carries over everything for header-borderless
+.header-floating > thead,
+.header-floating > thead > tr,
+.header-floating > thead > tr > th,
+.header-floating > .pb_table_thead,
+.header-floating > .pb_table_thead > .pb_table_tr,
+.header-floating > .pb_table_thead .pb_table_th {
+  border-top: none !important;
+  border-left: none !important;
+  border-right: none !important;
+}
+
+.header-floating:not(.table-dark) > thead > tr:last-child > th,
+.header-floating:not(.table-dark) > .pb_table_thead > .pb_table_tr:last-child > .pb_table_th {
+  border-bottom: none !important;
+}
+
+.header-floating > thead > tr:first-child > th:first-child,
+.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:first-child {
+  border-top-left-radius: $border_radius_md !important;
+}
+
+.header-floating > thead > tr:first-child > th:last-child,
+.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:last-child {
+  border-top-right-radius: $border_radius_md !important;
+}
+
+.header-floating > tbody > tr:first-child > td,
+.header-floating > .pb_table_tbody > .pb_table_tr:first-child > .pb_table_td {
+  border-top: 1px solid $border_light !important;
+}
+
+// flatten out corners for floating headerstyle variant to avoid small triangle of white/empty space
+.header-floating > thead > tr:first-child > th:first-child,
+.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:first-child { 
+  border-top-left-radius: 0 !important; 
+} 
+.header-floating > thead > tr:first-child > th:last-child, 
+.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:last-child { 
+  border-top-right-radius: 0 !important; 
+}

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

@@ -1,7 +1,7 @@
-[class^=pb_table] {
+[class^=pb_table]:not(:has(colgroup)) {
   &.striped {
     tbody, .pb_table_tbody {
-      tr:nth-child(odd), .pb_table_tr:nth-child(odd) {
+      tr:nth-child(odd):not(.pb_background_kit), .pb_table_tr:nth-child(odd):not(.pb_background_kit) {
         background-color: $bg_light;
       }
     }
@@ -10,7 +10,7 @@
   &.dark {
     &.striped {
       tbody, .pb_table_tbody {
-        tr:nth-child(odd), .pb_table_tr:nth-child(odd) {
+        tr:nth-child(odd):not(.pb_background_kit), .pb_table_tr:nth-child(odd):not(.pb_background_kit) {
           background-color: $bg_dark;
         }
       }

data/app/pb_kits/playbook/pb_table/subcomponents/_table_head.tsx

@@ -12,6 +12,7 @@ type TableHeadPropTypes = {
   children: React.ReactNode[] | React.ReactNode;
   className: string;
   data?: { [key: string]: string };
+  headerStyle?: "default" | "borderless" | "floating";
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   tag?: "table" | "div";
@@ -23,6 +24,7 @@ const TableHead = (props: TableHeadPropTypes): React.ReactElement => {
     children,
     className,
     data = {},
+    headerStyle = "default",
     htmlOptions = {},
     id,
     tag = "table",
@@ -31,7 +33,15 @@ const TableHead = (props: TableHeadPropTypes): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
-  const classes = classnames("pb_table_thead", globalProps(props), className);
+  const classes = classnames(
+    "pb_table_thead", 
+    {
+      "pb_table_thead_borderless": headerStyle === "borderless" || headerStyle === "floating",
+      "pb_table_thead_floating": headerStyle === "floating",
+    },
+    globalProps(props), 
+    className
+  );
   const isTableTag = tag === "table";
 
   return (

data/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx

@@ -12,6 +12,7 @@ type TableHeaderPropTypes = {
   children: React.ReactNode[] | React.ReactNode;
   className: string;
   data?: { [key: string]: string };
+  headerStyle?: "default" | "borderless" | "floating";
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   tag?: "table" | "div";
@@ -24,6 +25,7 @@ const TableHeader = (props: TableHeaderPropTypes): React.ReactElement => {
     children,
     className,
     data = {},
+    headerStyle = "default",
     htmlOptions = {},
     id,
     tag = "table",
@@ -33,7 +35,15 @@ const TableHeader = (props: TableHeaderPropTypes): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
-  const classes = classnames("pb_table_th", globalProps(props), className);
+  const classes = classnames(
+    "pb_table_th", 
+    {
+      "pb_table_thead_borderless": headerStyle === "borderless" || headerStyle === "floating",
+      "pb_table_thead_floating": headerStyle === "floating",
+    },
+    globalProps(props), 
+    className
+  );
   const isTableTag = tag === "table";
 
   return (

data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx

@@ -22,6 +22,7 @@ type TableRowPropTypes = {
   dark?: boolean;
   dragId?: string;
   draggableItem?: boolean;
+  headerStyle?: "default" | "borderless" | "floating";
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   toggleCellId?: string;
@@ -41,6 +42,7 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
     dark = false,
     dragId,
     draggableItem = false,
+    headerStyle = "default",
     htmlOptions = {},
     id,
     toggleCellId,
@@ -60,6 +62,9 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
   const classes = classnames(
     buildCss("pb_table_row_kit", sideHighlightClass),
     "pb_table_tr",
+    {
+      "pb_table_tr_borderless_header": headerStyle === "borderless",
+    },
     collapsibleRow,
     globalProps(props),
     className

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

@@ -167,3 +167,20 @@ 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")
 })
+
+test("when headerStyle is default", () => {
+  const kit = renderKit(Table, props)
+  expect(kit).toHaveClass("pb_table table-sm table-responsive-collapse table-card table-collapse-sm")
+  expect(kit).not.toHaveClass("header-borderless")
+  expect(kit).not.toHaveClass("header-floating")
+})
+
+test("when headerStyle is borderless", () => {
+  const kit = renderKit(Table, props, { headerStyle: "borderless" })
+  expect(kit).toHaveClass("pb_table table-sm table-responsive-collapse table-card header-borderless table-collapse-sm")
+})
+
+test("when headerStyle is floating", () => {
+  const kit = renderKit(Table, props, { headerStyle: "floating" })
+  expect(kit).toHaveClass("pb_table table-sm table-responsive-collapse table-card header-floating table-collapse-sm")
+})