playbook_ui 14.11.0.pre.rc.5 → 14.11.0.pre.rc.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1eb04067fdadd5f71f0992668732e3676dee7a6cc09d262582b38062ed66fa7f
-  data.tar.gz: b358c411ab18b799ce72c37ac425633df7104c2843304dfd36ef1e33b47c2d30
+  metadata.gz: 5a51bf0c8f5dfdb651880e4544548c9c67a106549d4c4d94a726cbdcbaa41b8a
+  data.tar.gz: 5f403c3864bb357c4e2f93c55fdbcdfe1c4fba6e6be6c7780559798c48d2bc7e
 SHA512:
-  metadata.gz: b1e08d3dc1697229ff7a91fea552a43abcf7287736681b0c36f2bf4fea6f3edc1688e243b6a6a952aeb0511caca87ae27f88334ea011fbfa7a74d2e32ec61aef
-  data.tar.gz: 3d747f6188b22c7fa973150b10b379d7b3663e889889c4773fda6cb05c12df25b14c58965ca87855a91fcbd95e3d76734def93902a752620ad48792c80474c4f
+  metadata.gz: d73014d82ad3ff494e9e482b9d01f6cecd0b8b87bb80d2af581e9b9ab336d9c18a9640aeba052aa2f6a8a011632457efc34fc54d1b7af5110f1b995d71d94594
+  data.tar.gz: 7820f011695d249d5ab5da5b6d29b57002434d10e3c49a2faeb2f2bdcef446244bc70cc392c9f6bbabf9f965c1c7162cdb55d1435ffc850a6c87da74d9ac709b

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss

@@ -14,16 +14,6 @@ $pb_icon_circle_sizes: (
   "xl":   100px,
 );
 
-@mixin svg_size($name, $match, $adjust) {
-  @if $name == $match {
-    $svg_xy: $adjust;
-    & > svg {
-      width: #{$svg_xy};
-      height: #{$svg_xy};
-    }
-  }
-}
-
 [class^=pb_icon_circle_kit] {
   display: flex;
   justify-content: center;
@@ -57,13 +47,11 @@ $pb_icon_circle_sizes: (
       border-radius: $size/2;
       background: $silver;
       color: $text_lt_light;
-      font-size: $size * 0.38;
+      font-size: if($name == "xxs", $size - 6px, $size * 0.38);
       line-height: $size;
       flex-shrink: 0;
       flex-grow: 0;
       flex-basis: $size;
-
-      @include svg_size($name, "xxs", $size - 6px);
     }
   }
 

data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss

@@ -3,6 +3,11 @@
 @import "../tokens/opacity";
 @import "./section_separator_mixin";
 
+$merge_kits1: map-merge($status_colors, $category_colors);
+$merge_kits2: map-merge($merge_kits1, $product_colors);
+$merge_kits3: map-merge($merge_kits2, $text_colors);
+$section_selector_colors: map-merge($merge_kits3, $data_colors);
+
 $section_colors_light: (
   background:   $bg_light,
   card:         $card_light,
@@ -37,12 +42,40 @@ $section_colors_dark: (
     flex: 1;
     @include section_separator_horizontal;
   }
+  @each $color_name, $color_value in $section_selector_colors {
+    &[class*="color_#{$color_name}"] {
+      &::before, &::after {
+        background: $color_value;
+      }
+
+      &[class*=_vertical] {
+        &::after {
+          background: $color_value;
+        }
+      }
+      &[class*=_dashed] {
+        &::before, &::after {
+          border: 1px dashed $color_value;
+        }
+        &[class*=_vertical] {
+          &::after {
+            border: 1px dashed $color_value;
+            background: none;
+          }
+        }
+      }
+    }
+  }
+
   &[class*=_horizontal] {
     justify-content: center;
   }
   &[class*=_vertical] {
     margin-left: $space_xs;
     margin-right: $space_xs;
+    &::before {
+      display: none;
+    }
     &::after {
       @include section_separator_vertical(false);
     }
@@ -57,6 +90,33 @@ $section_colors_dark: (
   // Dark =========================
 
   &.dark {
+    @each $color_name, $color_value in $section_selector_colors {
+      &[class*="color_#{$color_name}"] {
+        &::before, &::after {
+          background: $color_value;
+        }
+
+        &[class*=_vertical] {
+          &::after {
+            @include section_separator_vertical(false);
+            background: $color_value;
+          }
+        }
+
+        &[class*=_dashed] {
+          &::before, &::after {
+            border: 1px dashed $color_value;
+            background: none;
+          }
+          &[class*=_vertical] {
+            &::after {
+              border: 1px dashed $color_value;
+              background: none;
+            }
+          }
+        }
+      }
+    }
     &::before {
       @include section_separator_horizontal(true);
     }

data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx

@@ -10,6 +10,7 @@ type SectionSeparatorProps = {
   aria?: { [key: string]: string; },
   children?: React.ReactChild[] | React.ReactChild,
   className?: string,
+  color?: "default" | "primary",
   dark?: boolean,
   data?: { [key: string]: string; },
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -25,6 +26,7 @@ const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
     aria = {},
     children,
     className,
+    color ="default",
     data = {},
     htmlOptions = {},
     id,
@@ -37,7 +39,7 @@ const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
-  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, lineStyle === "dashed" ? lineStyle : ""), globalProps(props), className)
+  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, lineStyle === "dashed" ? lineStyle : "", color !== "default" ? `color_${color}` : ''), globalProps(props), className)
   const dynamicInlineProps = globalInlineProps(props)
 
   return (

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.html.erb

@@ -0,0 +1,10 @@
+<%= pb_rails("section_separator", props: { text: "Default Separator" }) %>
+<%= pb_rails("section_separator", props: { color: "primary", text: "Primary Separator" }) %>
+<%= pb_rails("section_separator", props: { color: "primary", line_style: "dashed", text: "Primary Dashed Separator" }) %>
+<%= pb_rails("section_separator", props: { color: "primary" }) do %>
+  <%= pb_rails("flex", props: { padding: "xs" }) do %>
+    <%= pb_rails("icon", props: { color: "primary", icon: "arrow-down" }) %>
+    <%= pb_rails("detail", props: { text: "Children", size: "sm", color: "link" }) %>
+  <% end %>
+<% end %>
+

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.jsx

@@ -0,0 +1,42 @@
+import React from "react"
+import { SectionSeparator, Flex, Detail, Icon } from "playbook-ui"
+
+const children = (
+  <Flex padding="xs">
+    <Icon color="primary"
+        icon="arrow-down"
+    />
+    <Detail
+        color="link"
+        size="sm"
+        text="Children"
+    />
+  </Flex>
+)
+
+const SectionSeparatorColor = (props) => {
+  return (
+    <div>
+      <SectionSeparator text="Default Separator"
+          {...props}
+      />
+      <SectionSeparator color="primary"
+          text="Primary Separator"
+          {...props}
+      />
+      <SectionSeparator
+          color="primary"
+          lineStyle="dashed"
+          text="Primary Dashed Separator"
+          {...props}
+      />
+       <SectionSeparator color="primary"
+           {...props}
+       >
+        {children}
+      </SectionSeparator>
+    </div>
+  )
+}
+
+export default SectionSeparatorColor

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.md

@@ -0,0 +1,3 @@
+Pass "primary" to the `color` prop to change any section separator color.
+
+**NOTE:** Passing `children` overrides any content provided via the `text` prop. The `color` prop does not affect the `text` prop's color, and the color of `children` is determined by the children's individual props. For greater control over text color customization, consider using a separator with `children`.

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

@@ -6,6 +6,7 @@ examples:
   - section_separator_text: Text Separator
   - section_separator_vertical: Vertical
   - section_separator_children: Children
+  - section_separator_color: Color
 
   react:
   - section_separator_line: Line Separator
@@ -13,6 +14,7 @@ examples:
   - section_separator_text: Text Separator
   - section_separator_vertical: Vertical
   - section_separator_children: Children
+  - section_separator_color: Color
 
   swift:
   - section_separator_line_swift: Line Separator

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

@@ -3,3 +3,4 @@ export { default as SectionSeparatorText } from './_section_separator_text.jsx'
 export { default as SectionSeparatorVertical } from './_section_separator_vertical.jsx'
 export { default as SectionSeparatorDashed } from './_section_separator_dashed.jsx'
 export { default as SectionSeparatorChildren } from './_section_separator_children.jsx'
+export { default as SectionSeparatorColor } from './_section_separator_color.jsx'

data/app/pb_kits/playbook/pb_section_separator/section_separator.rb

@@ -3,6 +3,9 @@
 module Playbook
   module PbSectionSeparator
     class SectionSeparator < Playbook::KitBase
+      prop :color, type: Playbook::Props::Enum,
+                   values: %w[default primary],
+                   default: "default"
       prop :text
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[card background],
@@ -17,7 +20,7 @@ module Playbook
                         default: "solid"
 
       def classname
-        generate_classname("pb_section_separator_kit", variant, orientation, line_style == "dashed" ? "dashed" : nil)
+        generate_classname("pb_section_separator_kit", variant, orientation, line_style == "dashed" ? "dashed" : nil, color != "default" ? "color_#{color}" : nil)
       end
 
     private

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -28,7 +28,8 @@ type TableProps = {
     singleLine?: boolean,
     size?: "sm" | "md" | "lg",
     sticky?: boolean,
-    stickyLeftcolumn?: string[],
+    stickyLeftColumn?: string[],
+    stickyRightColumn?: string[],
     striped?: boolean,
     tag?: "table" | "div",
     verticalBorder?: boolean,
@@ -52,7 +53,8 @@ const Table = (props: TableProps): React.ReactElement => {
         singleLine = false,
         size = 'sm',
         sticky = false,
-        stickyLeftcolumn = [],
+        stickyLeftColumn = [],
+        stickyRightColumn= [],
         striped = false,
         tag = 'table',
         verticalBorder = false,
@@ -79,7 +81,8 @@ const Table = (props: TableProps): React.ReactElement => {
             'single-line': singleLine,
             'no-hover': disableHover,
             'sticky-header': sticky,
-            'sticky-left-column': stickyLeftcolumn,
+            'sticky-left-column': stickyLeftColumn,
+            'sticky-right-column': stickyRightColumn,
             'striped': striped,
             [outerPaddingCss]: outerPadding !== '',
         },
@@ -90,11 +93,12 @@ const Table = (props: TableProps): React.ReactElement => {
     )
 
     useEffect(() => {
-        const handleStickyColumns = () => {
+        const handleStickyLeftColumns = () => {
+            if (!stickyLeftColumn.length) return;
             let accumulatedWidth = 0;
 
-            stickyLeftcolumn.forEach((colId, index) => {
-                const isLastColumn = index === stickyLeftcolumn.length - 1;
+            stickyLeftColumn.forEach((colId, index) => {
+                const isLastColumn = index === stickyLeftColumn.length - 1;
                 const header = document.querySelector(`th[id="${colId}"]`);
                 const cells = document.querySelectorAll(`td[id="${colId}"]`);
 
@@ -103,11 +107,11 @@ const Table = (props: TableProps): React.ReactElement => {
                     (header as HTMLElement).style.left = `${accumulatedWidth}px`;
 
                     if (!isLastColumn) {
-                        header.classList.add('with-border');
-                        header.classList.remove('sticky-shadow');
+                        header.classList.add('with-border-right');
+                        header.classList.remove('sticky-left-shadow');
                     } else {
-                        header.classList.remove('with-border');
-                        header.classList.add('sticky-shadow');
+                        header.classList.remove('with-border-right');
+                        header.classList.add('sticky-left-shadow');
                     }
 
                     accumulatedWidth += (header as HTMLElement).offsetWidth;
@@ -118,26 +122,71 @@ const Table = (props: TableProps): React.ReactElement => {
                     (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
 
                     if (!isLastColumn) {
-                        cell.classList.add('with-border');
-                        cell.classList.remove('sticky-shadow');
+                        cell.classList.add('with-border-right');
+                        cell.classList.remove('sticky-left-shadow');
                     } else {
-                        cell.classList.remove('with-border');
-                        cell.classList.add('sticky-shadow');
+                        cell.classList.remove('with-border-right');
+                        cell.classList.add('sticky-left-shadow');
                     }
                 });
             });
         };
 
         setTimeout(() => {
-            handleStickyColumns();
+            handleStickyLeftColumns();
         }, 10);
 
-        window.addEventListener('resize', handleStickyColumns);
+        window.addEventListener('resize', handleStickyLeftColumns);
 
         return () => {
-            window.removeEventListener('resize', handleStickyColumns);
+            window.removeEventListener('resize', handleStickyLeftColumns);
         };
-    }, [stickyLeftcolumn]);
+    }, [stickyLeftColumn]);
+
+    useEffect(() => {
+        const handleStickyRightColumns = () => {
+            if (!stickyRightColumn.length) return;
+            let accumulatedWidth = 0;
+
+            stickyRightColumn.reverse().forEach((colId, index) => {
+                const isLastColumn = index === stickyRightColumn.length - 1;
+                const header = document.querySelector(`th[id="${colId}"]`);
+                const cells = document.querySelectorAll(`td[id="${colId}"]`);
+
+                if (header) {
+                    header.classList.add('sticky');
+                    (header as HTMLElement).style.right = `${accumulatedWidth}px`;
+
+                    if (!isLastColumn) {
+                        header.classList.add('with-border-left');
+                        header.classList.remove('sticky-right-shadow');
+                    } else {
+                        header.classList.remove('with-border-left');
+                        header.classList.add('sticky-right-shadow');
+                    }
+
+                    accumulatedWidth += (header as HTMLElement).offsetWidth;
+                }
+
+                cells.forEach((cell) => {
+                    cell.classList.add('sticky');
+                    (cell as HTMLElement).style.right = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
+
+                    if (!isLastColumn) {
+                        cell.classList.add('with-border-left');
+                        cell.classList.remove('sticky-right-shadow');
+                    } else {
+                        cell.classList.remove('with-border-left');
+                        cell.classList.add('sticky-right-shadow');
+                    }
+                });
+            });
+        };
+
+        setTimeout(() => {
+            handleStickyRightColumns();
+        }, 10);
+    }, [stickyRightColumn]);
 
     useEffect(() => {
         const instance = new PbTable()

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

@@ -0,0 +1,88 @@
+import React from 'react'
+import Table from '../_table'
+
+const TableStickyColumns = () => {
+    return (
+        <Table
+            responsive="scroll"
+            size="md"
+            stickyLeftColumn={["a"]}
+            stickyRightColumn={["b"]}
+        >
+            <thead>
+                <tr>
+                    <th id="a">{'Column 1'}</th>
+                    <th>{'Column 2'}</th>
+                    <th>{'Column 3'}</th>
+                    <th>{'Column 4'}</th>
+                    <th>{'Column 5'}</th>
+                    <th>{'Column 6'}</th>
+                    <th>{'Column 7'}</th>
+                    <th>{'Column 8'}</th>
+                    <th>{'Column 9'}</th>
+                    <th>{'Column 10'}</th>
+                    <th>{'Column 11'}</th>
+                    <th>{'Column 12'}</th>
+                    <th>{'Column 13'}</th>
+                    <th>{'Column 14'}</th>
+                    <th id="b">{'Column 15'}</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td id="a">{'Value 1'}</td>
+                    <td>{'Value 2'}</td>
+                    <td>{'Value 3'}</td>
+                    <td>{'Value 4'}</td>
+                    <td>{'Value 5'}</td>
+                    <td>{'Value 6'}</td>
+                    <td>{'Value 7'}</td>
+                    <td>{'Value 8'}</td>
+                    <td>{'Value 9'}</td>
+                    <td>{'Value 10'}</td>
+                    <td>{'Value 11'}</td>
+                    <td>{'Value 12'}</td>
+                    <td>{'Value 13'}</td>
+                    <td>{'Value 14'}</td>
+                    <td id="b">{'Value 15'}</td>
+                </tr>
+                <tr>
+                    <td id="a">{'Value 1'}</td>
+                    <td>{'Value 2'}</td>
+                    <td>{'Value 3'}</td>
+                    <td>{'Value 4'}</td>
+                    <td>{'Value 5'}</td>
+                    <td>{'Value 6'}</td>
+                    <td>{'Value 7'}</td>
+                    <td>{'Value 8'}</td>
+                    <td>{'Value 9'}</td>
+                    <td>{'Value 10'}</td>
+                    <td>{'Value 11'}</td>
+                    <td>{'Value 12'}</td>
+                    <td>{'Value 13'}</td>
+                    <td>{'Value 14'}</td>
+                    <td id="b">{'Value 15'}</td>
+                </tr>
+                <tr>
+                    <td id="a">{'Value 1'}</td>
+                    <td>{'Value 2'}</td>
+                    <td>{'Value 3'}</td>
+                    <td>{'Value 4'}</td>
+                    <td>{'Value 5'}</td>
+                    <td>{'Value 6'}</td>
+                    <td>{'Value 7'}</td>
+                    <td>{'Value 8'}</td>
+                    <td>{'Value 9'}</td>
+                    <td>{'Value 10'}</td>
+                    <td>{'Value 11'}</td>
+                    <td>{'Value 12'}</td>
+                    <td>{'Value 13'}</td>
+                    <td>{'Value 14'}</td>
+                    <td id="b">{'Value 15'}</td>
+                </tr>
+            </tbody>
+        </Table>
+    )
+}
+
+export default TableStickyColumns

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

@@ -0,0 +1,3 @@
+The `stickyLeftColumn` and `stickyRightColumn` props can be used together on the same table as needed.
+
+Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using props.

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

@@ -6,7 +6,7 @@ const TableStickyLeftColumns = () => {
         <Table
             responsive="scroll"
             size="md"
-            stickyLeftcolumn={["1", "2", "3"]}
+            stickyLeftColumn={["1", "2", "3"]}
         >
             <thead>
                 <tr>

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

@@ -1 +1,3 @@
 The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
+
+Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `stickyLeftColumn`.

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

@@ -1,2 +1,5 @@
 The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
-If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
+
+If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
+
+Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using `stickyLeftColumn` prop.

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

@@ -0,0 +1,87 @@
+import React from 'react'
+import Table from '../_table'
+
+const TableStickyRightColumns = () => {
+    return (
+        <Table
+            responsive="scroll"
+            size="md"
+            stickyRightColumn={["13", "14", "15"]}
+        >
+            <thead>
+                <tr>
+                    <th>{'Column 1'}</th>
+                    <th>{'Column 2'}</th>
+                    <th>{'Column 3'}</th>
+                    <th>{'Column 4'}</th>
+                    <th>{'Column 5'}</th>
+                    <th>{'Column 6'}</th>
+                    <th>{'Column 7'}</th>
+                    <th>{'Column 8'}</th>
+                    <th>{'Column 9'}</th>
+                    <th>{'Column 10'}</th>
+                    <th>{'Column 11'}</th>
+                    <th>{'Column 12'}</th>
+                    <th id="13">{'Column 13'}</th>
+                    <th id="14">{'Column 14'}</th>
+                    <th id="15">{'Column 15'}</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>
+                    <td>{'Value 6'}</td>
+                    <td>{'Value 7'}</td>
+                    <td>{'Value 8'}</td>
+                    <td>{'Value 9'}</td>
+                    <td>{'Value 10'}</td>
+                    <td>{'Value 11'}</td>
+                    <td>{'Value 12'}</td>
+                    <td id="13">{'Value 13'}</td>
+                    <td id="14">{'Value 14'}</td>
+                    <td id="15">{'Value 15'}</td>
+                </tr>
+                <tr>
+                    <td>{'Value 1'}</td>
+                    <td>{'Value 2'}</td>
+                    <td>{'Value 3'}</td>
+                    <td>{'Value 4'}</td>
+                    <td>{'Value 5'}</td>
+                    <td>{'Value 6'}</td>
+                    <td>{'Value 7'}</td>
+                    <td>{'Value 8'}</td>
+                    <td>{'Value 9'}</td>
+                    <td>{'Value 10'}</td>
+                    <td>{'Value 11'}</td>
+                    <td>{'Value 12'}</td>
+                    <td id="13">{'Value 13'}</td>
+                    <td id="14">{'Value 14'}</td>
+                    <td id="15">{'Value 15'}</td>
+                </tr>
+                <tr>
+                    <td>{'Value 1'}</td>
+                    <td>{'Value 2'}</td>
+                    <td>{'Value 3'}</td>
+                    <td>{'Value 4'}</td>
+                    <td>{'Value 5'}</td>
+                    <td>{'Value 6'}</td>
+                    <td>{'Value 7'}</td>
+                    <td>{'Value 8'}</td>
+                    <td>{'Value 9'}</td>
+                    <td>{'Value 10'}</td>
+                    <td>{'Value 11'}</td>
+                    <td>{'Value 12'}</td>
+                    <td id="13">{'Value 13'}</td>
+                    <td id="14">{'Value 14'}</td>
+                    <td id="15">{'Value 15'}</td>
+                </tr>
+            </tbody>
+        </Table>
+    )
+}
+
+export default TableStickyRightColumns

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

@@ -0,0 +1,5 @@
+The `stickyRightColumn` prop works in the same way as the above `stickyLeftColumn` prop. It expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
+
+If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
+
+Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `stickyRightColumn` prop.