playbook_ui 15.4.0.pre.alpha.PLAY2556advancedtablefirstcolumnborder12527 → 15.4.0.pre.alpha.PLAY2582rails722112532

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 511c977ba15b20fba7fa52c1c9bf80ee9c562cf27acc8f2e41e32157b73d7a7d
-  data.tar.gz: 32a534c6deaede0523539dc0d3ebf2e1e4b0f8100a0b824966d7cc46e3e2b8d0
+  metadata.gz: 707a9a3553c2813cb3297123f4a4f44c1c7d766cec8f3af6bc0c3d269a632e21
+  data.tar.gz: e7884a7c8be2f43ef9d3a37a25f6a3a6cc72834486c592b0d6d941c9092182a9
 SHA512:
-  metadata.gz: caf333d083ca806c032c6d1d3f34a30a7f2d48f896e59fc3e891b0aae1fd68f38ca16aed891d31f68596409d008b932c9eedd5cd0f8d1d8822e83cd4c48a2b18
-  data.tar.gz: 113ac9c350af9108918cd78e4486e18ae3b452ee60d263553a5c7b24ed065c1bc138e66923b655c4a210a81e20604bc1cb84cba559acf54d7154e0fb8412b51c
+  metadata.gz: c96cce1ab96980e86fc78ce13b394860410986add89fd48814f332e2e1459dead8b9fd86146f76b53bfd595ec143241eb539d14cd9f43388a47a9e5b51489d37
+  data.tar.gz: eeaff59ae0aa931d6e4358cee1fa7fc5d3b803cfa3fce18d728be8926f97af4105d023813b4a92416bf64315a17acc11970ab723663b7482c0e310bd0e7353b7

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

@@ -791,28 +791,6 @@
       box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
     }
 
-    // Override last-header-cell border color in dark mode
-    .pb_advanced_table_header {
-      > tr:not(:first-child) {
-        .last-header-cell {
-          border-right: 1px solid $border_dark !important;
-        }
-      }
-
-      th[colspan]:not([colspan="1"]) {
-        border-right: 1px solid $border_dark !important;
-      }
-    }
-
-    // Override last-cell border color in dark mode for body cells
-    .pb_advanced_table_body {
-      tr {
-        .last-cell:not(:last-of-type) {
-          border-right: 1px solid $border_dark !important;
-        }
-      }
-    }
-
     // Apply border colors in dark mode
     &[class*="column-group-border-"] {
       // For top-level column groups (ENROLLMENT DATA, PERFORMANCE DATA)
@@ -872,7 +850,7 @@
     // Restore vertical border styling in dark mode when verticalBorder is true
     .pb_table[data-vertical-border="true"] {
       .pb_advanced_table_header {
-        > tr {
+        > tr:not(:first-child) {
           th:not(:last-child) {
             border-right: 1px solid $border_dark !important;
           }
@@ -886,17 +864,11 @@
         }
       }
 
-      tr.virtualized-table-row {
-        td:not(:last-child) {
-          border-right: 1px solid $border_dark !important;
-        }
-      }
-
       // When both verticalBorder AND columnGroupBorderColor are set in dark mode,
       // override the default border-dark with the custom color
       &.pb_advanced_table[class*="column-group-border-"] {
         .pb_advanced_table_header {
-          > tr {
+          > tr:not(:first-child) {
             th:not(:last-child) {
               border-right: 1px solid var(--column-border-color) !important;
             }
@@ -909,12 +881,6 @@
             border-right: 1px solid var(--column-border-color) !important;
           }
         }
-
-        tr.virtualized-table-row {
-          td:not(:last-child) {
-            border-right: 1px solid var(--column-border-color) !important;
-          }
-        }
       }
     }
 
@@ -1019,90 +985,34 @@
   // Firefox-specific fix for last-header-cell and last-cell vertical borders
   @-moz-document url-prefix() {
     .pb_advanced_table_header {
-      th[colspan]:not([colspan="1"]):not(:last-child) {
-        border-right: none !important;
-        box-shadow: 1px 0 0 0 $border_light !important;
-      }
-
-      .last-header-cell:not(:last-child),
-      > tr:last-child .last-header-cell:not(:last-child) {
+      .last-header-cell:not(:last-child) {
         border-right: none !important;
         box-shadow: 1px 0 0 0 $border_light !important;
       }
     }
 
     .pb_advanced_table_body {
-      tr .last-cell:not(:last-of-type),
-      td.last-cell:not(:last-child),
-      .pb_table_td.last-cell:not(:last-child) {
+      .last-cell:not(:last-child) {
         border-right: none !important;
         box-shadow: 1px 0 0 0 $border_light !important;
       }
     }
 
-    &[class*="column-group-border-"] {
-      .pb_advanced_table_header {
-        th[colspan]:not([colspan="1"]):not(:last-child),
-        .last-header-cell:not(:last-child),
-        > tr:last-child .last-header-cell:not(:last-child) {
-          box-shadow: 1px 0 0 0 var(--column-border-color) !important;
-        }
-      }
-
-      .pb_advanced_table_body {
-        tr .last-cell:not(:last-of-type),
-        td.last-cell:not(:last-child),
-        .pb_table_td.last-cell:not(:last-child) {
-          box-shadow: 1px 0 0 0 var(--column-border-color) !important;
-        }
-      }
-    }
-
     // Dark mode Firefox fixes
     &.dark {
       .pb_advanced_table_header {
-        // Convert all colspan headers to box-shadow with dark color
-        th[colspan]:not([colspan="1"]) {
-          border-right: none !important;
-          box-shadow: 1px 0 0 0 $border_dark !important;
-        }
-
-        // Convert all last-header-cell borders to box-shadow with dark color
-        .last-header-cell:not(:last-child),
-        > tr:last-child .last-header-cell:not(:last-child),
-        > tr:not(:first-child) .last-header-cell:not(:last-child),
-        > tr:not(:first-child) .last-header-cell:last-child {
+        .last-header-cell:not(:last-child) {
           border-right: none !important;
           box-shadow: 1px 0 0 0 $border_dark !important;
         }
       }
 
       .pb_advanced_table_body {
-        tr .last-cell:not(:last-of-type),
-        td.last-cell:not(:last-child),
-        .pb_table_td.last-cell:not(:last-child) {
+        .last-cell:not(:last-child) {
           border-right: none !important;
           box-shadow: 1px 0 0 0 $border_dark !important;
         }
       }
-
-      &[class*="column-group-border-"] {
-        .pb_advanced_table_header {
-          th[colspan]:not([colspan="1"]):not(:last-child),
-          .last-header-cell:not(:last-child),
-          > tr:last-child .last-header-cell:not(:last-child) {
-            box-shadow: 1px 0 0 0 var(--column-border-color) !important;
-          }
-        }
-
-        .pb_advanced_table_body {
-          tr .last-cell:not(:last-of-type),
-          td.last-cell:not(:last-child),
-          .pb_table_td.last-cell:not(:last-child) {
-            box-shadow: 1px 0 0 0 var(--column-border-color) !important;
-          }
-        }
-      }
     }
   }
 }

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx

@@ -1,5 +1,6 @@
 import React from "react"
-import { AdvancedTable, colors } from "playbook-ui"
+import AdvancedTable from '../_advanced_table'
+import colors from '../../tokens/exports/_colors.module.scss'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { AdvancedTable } from "playbook-ui";
+import AdvancedTable from '../_advanced_table';
 import MOCK_DATA from "./advanced_table_mock_data.json";
 
 const AdvancedTableColumnStylingColumnHeaders = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from "react"
-import { AdvancedTable, Button, Flex } from "playbook-ui"
+import AdvancedTable from '../_advanced_table'
+import Flex from '../../pb_flex/_flex'
+import Button from '../../pb_button/_button'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 import PAGINATION_MOCK_DATA from "./advanced_table_pagination_mock_data.json"
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import AdvancedTable from '../_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data_infinite_scroll.json"
 
 const AdvancedTableInfiniteScroll = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from "react";
-import { AdvancedTable, TextInput, Body } from "playbook-ui";
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import TextInput from '../../pb_text_input/_text_input'
+import Body from '../../pb_body/_body'
 import MOCK_DATA from "./advanced_table_mock_data.json";
 
 const AdvancedTableInlineEditing = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.jsx

@@ -1,7 +1,8 @@
 import React from "react"
 import AdvancedTable from '../_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
-import { colors } from "playbook-ui"
+import colors from '../../tokens/exports/_colors.module.scss'
+
 
 const AdvancedTableRowStyling = (props) => {
   const columnDefinitions = [

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

@@ -29,167 +29,5 @@
       label: "Graduated Students",
     }
 ] %>
-<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Table Props" }) %>
-<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, margin_bottom: "md", column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>
 
-<% column_definitions_two = [
-  {
-    accessor: "year",
-    label: "Year",
-    cellAccessors: ["quarter", "month", "day"],
-  },
-  {
-    label: "Enrollment Data",
-    columns: [
-      {
-        accessor: "newEnrollments",
-        label: "New Enrollments",
-      },
-      {
-        accessor: "scheduledMeetings",
-        label: "Scheduled Meetings",
-      },
-    ],
-  },
-  {
-    label: "Performance Data",
-    columns: [
-      {
-        accessor: "attendanceRate",
-        label: "Attendance Rate",
-      },
-      {
-        accessor: "completedClasses",
-        label: "Completed Classes",
-      },
-      {
-        accessor: "classCompletionRate",
-        label: "Class Completion Rate",
-      },
-      {
-        accessor: "graduatedStudents",
-        label: "Graduated Students",
-      },
-    ],
-  },
-] %>
-<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Multi Header" }) %>
-<%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", margin_bottom: "md", table_data: @table_data, column_definitions: column_definitions_two, table_props: { vertical_border: true } }) %>
-
-<% column_definitions_three = [
-  {
-    accessor: "year",
-    label: "Year",
-    cellAccessors: ["quarter", "month", "day"],
-  },
-  {
-    label: "Enrollment Data",
-    columns: [
-      {
-        label: "Enrollment Stats",
-        columns: [
-          {
-            accessor: "newEnrollments",
-            label: "New Enrollments",
-          },
-          {
-            accessor: "scheduledMeetings",
-            label: "Scheduled Meetings",
-          },
-        ],
-      },
-    ],
-  },
-  {
-    label: "Performance Data",
-    columns: [
-      {
-        label: "Completion Metrics",
-        columns: [
-          {
-            accessor: "completedClasses",
-            label: "Completed Classes",
-          },
-          {
-            accessor: "classCompletionRate",
-            label: "Class Completion Rate",
-          },
-        ],
-      },
-      {
-        label: "Attendance",
-        columns: [
-          {
-            accessor: "attendanceRate",
-            label: "Attendance Rate",
-          },
-          {
-            accessor: "scheduledMeetings",
-            label: "Scheduled Meetings",
-          },
-        ],
-      },
-    ],
-  },
-] %>
-<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Multi Header with Column Group Border Color" }) %>
-<%= pb_rails("advanced_table", props: { id: "beta_table_with_color_headers", margin_bottom: "md", table_data: @table_data, column_definitions: column_definitions_three, column_group_border_color: "text_lt_default", table_props: { vertical_border: true } }) %>
-
-<% column_definitions_four = [
-  {
-    accessor: "year",
-    label: "Year",
-    cellAccessors: ["quarter", "month", "day"],
-  },
-  {
-    label: "Enrollment Data",
-    columns: [
-      {
-        label: "Enrollment Stats",
-        columns: [
-          {
-            accessor: "newEnrollments",
-            label: "New Enrollments",
-          },
-          {
-            accessor: "scheduledMeetings",
-            label: "Scheduled Meetings",
-          },
-        ],
-      },
-    ],
-  },
-  {
-    label: "Performance Data",
-    columns: [
-      {
-        label: "Completion Metrics",
-        columns: [
-          {
-            accessor: "completedClasses",
-            label: "Completed Classes",
-          },
-          {
-            accessor: "classCompletionRate",
-            label: "Class Completion Rate",
-          },
-        ],
-      },
-      {
-        label: "Attendance",
-        columns: [
-          {
-            accessor: "attendanceRate",
-            label: "Attendance Rate",
-          },
-          {
-            accessor: "scheduledMeetings",
-            label: "Scheduled Meetings",
-          },
-        ],
-      },
-    ],
-  },
-] %>
-<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Multi Header No Vertical Border" }) %>
-<%= pb_rails("advanced_table", props: {id: "beta_table_with_muilti_headers", table_data: @table_data, column_definitions: column_definitions_four }) %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx

@@ -1,7 +1,6 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
-import Caption from "../../pb_caption/_caption"
 
 const AdvancedTableTableProps = (props) => {
   const columnDefinitions = [
@@ -41,203 +40,14 @@ const AdvancedTableTableProps = (props) => {
     verticalBorder: true
   }
 
-  const columnDefinitionsTwo = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      label: "Enrollment Data",
-      columns: [
-        {
-          accessor: "newEnrollments",
-          label: "New Enrollments",
-        },
-        {
-          accessor: "scheduledMeetings",
-          label: "Scheduled Meetings",
-        },
-      ],
-    },
-    {
-      label: "Performance Data",
-      columns: [
-        {
-          accessor: "attendanceRate",
-          label: "Attendance Rate",
-        },
-        {
-          accessor: "completedClasses",
-          label: "Completed Classes",
-        },
-        {
-          accessor: "classCompletionRate",
-          label: "Class Completion Rate",
-        },
-        {
-          accessor: "graduatedStudents",
-          label: "Graduated Students",
-        },
-      ],
-    },
-  ];
-
-  const tablePropsTwo = {
-    verticalBorder: true,
-  }
-
-  const columnDefinitionsThree = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      label: "Enrollment Data",
-      columns: [
-        {
-          label: "Enrollment Stats",
-          columns: [
-            {
-              accessor: "newEnrollments",
-              label: "New Enrollments",
-            },
-            {
-              accessor: "scheduledMeetings",
-              label: "Scheduled Meetings",
-            },
-          ],
-        },
-      ],
-    },
-    {
-      label: "Performance Data",
-      columns: [
-        {
-          label: "Completion Metrics",
-          columns: [
-            {
-              accessor: "completedClasses",
-              label: "Completed Classes",
-            },
-            {
-              accessor: "classCompletionRate",
-              label: "Class Completion Rate",
-            },
-          ],
-        },
-        {
-          label: "Attendance",
-          columns: [
-            {
-              accessor: "attendanceRate",
-              label: "Attendance Rate",
-            },
-            {
-              accessor: "scheduledMeetings",
-              label: "Scheduled Meetings",
-            },
-          ],
-        },
-      ],
-    },
-  ];
-
-  const tablePropsThree = {
-    verticalBorder: true
-  }
-
-  const columnDefinitionsFour = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      label: "Enrollment Data",
-      columns: [
-        {
-          label: "Enrollment Stats",
-          columns: [
-            {
-              accessor: "newEnrollments",
-              label: "New Enrollments",
-            },
-            {
-              accessor: "scheduledMeetings",
-              label: "Scheduled Meetings",
-            },
-          ],
-        },
-      ],
-    },
-    {
-      label: "Performance Data",
-      columns: [
-        {
-          label: "Completion Metrics",
-          columns: [
-            {
-              accessor: "completedClasses",
-              label: "Completed Classes",
-            },
-            {
-              accessor: "classCompletionRate",
-              label: "Class Completion Rate",
-            },
-          ],
-        },
-        {
-          label: "Attendance",
-          columns: [
-            {
-              accessor: "attendanceRate",
-              label: "Attendance Rate",
-            },
-            {
-              accessor: "scheduledMeetings",
-              label: "Scheduled Meetings",
-            },
-          ],
-        },
-      ],
-    },
-  ];
-
   return (
     <div>
-      <Caption text="Advanced Table Vertical Border Table Props" />
       <AdvancedTable
           columnDefinitions={columnDefinitions}
-          marginBottom="md"
           tableData={MOCK_DATA}
           tableProps={tableProps}
           {...props}
       />
-      <Caption text="Advanced Table Vertical Border Multi Header" />
-      <AdvancedTable
-          columnDefinitions={columnDefinitionsTwo}
-          marginBottom="md"
-          tableData={MOCK_DATA}
-          tableProps={tablePropsTwo}
-          {...props}
-      />
-      <Caption text="Advanced Table Vertical Border Multi Header with Column Group Border Color" />
-      <AdvancedTable
-          columnDefinitions={columnDefinitionsThree}
-          columnGroupBorderColor="text_lt_default"
-          marginBottom="md"
-          tableData={MOCK_DATA}
-          tableProps={tablePropsThree}
-          {...props}
-      />
-      <Caption text="Advanced Table Vertical Border Multi Header No Vertical Border" />
-      <AdvancedTable
-          columnDefinitions={columnDefinitionsFour}
-          tableData={MOCK_DATA}
-          {...props}
-      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx

@@ -35,7 +35,7 @@ const CopyButton = (props: CopyButtonProps) => {
     tooltipPlacement = 'bottom',
     tooltipText = 'Copied!',
     value = '',
-    variant = 'button',
+    variant = 'icon',
   } = props
 
   const [copied, copy] = usePBCopy({ value, from, timeout })

data/app/pb_kits/playbook/pb_copy_button/copy_button.html.erb

@@ -1,6 +1,10 @@
 <%= pb_content_tag do %>
-    <%= pb_rails("button", props: { icon: "copy" }) do %>
-      <%= object.text %>
+    <% if object.variant == "icon" %>
+      <%= pb_rails("circle_icon_button", props: { icon: "copy", variant: "link" }) %>
+    <% else %>
+      <%= pb_rails("button", props: { icon: "copy" }) do %>
+        <%= object.text %>
+      <% end %>
     <% end %>
   <% if object.id %> 
   <%= pb_rails("tooltip", props: {

data/app/pb_kits/playbook/pb_copy_button/copy_button.rb

@@ -12,6 +12,9 @@ module Playbook
                           default: "Copied!"
       prop :value
       prop :from
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[button icon],
+                     default: "icon"
 
       def classname
         generate_classname("pb_copy_button_kit")

data/app/pb_kits/playbook/pb_copy_button/copy_button.test.jsx

@@ -37,6 +37,29 @@ it('copies the value to clipboard and pastes it into an input', async () => {
   expect(navigator.clipboard.writeText).toHaveBeenCalledWith("copy");
 })
 
+test('passes text and tooltip props to icon variant', () => {
+  render(
+      <CopyButton
+          data={{ testid: 'text-test' }}
+          tooltipPlacement="right"
+          tooltipText="Text copied!"
+          value="copy"
+      />
+  )
+
+  const kit = screen.getByTestId('text-test')
+  const button = kit.querySelector('.pb_button_kit.pb_button_link.pb_button_inline.pb_button_enabled')
+  expect(button).toBeInTheDocument()
+
+  fireEvent.click(button)
+  const tooltipContent = screen.getByText("Text copied!")
+  expect(tooltipContent).toHaveTextContent("Text copied!")
+
+  const tooltip = kit.querySelector('.pb_tooltip_kit')
+  expect(tooltip).toBeInTheDocument()
+})
+
+
 test('passes text and tooltip props to button', () => {
   render(
       <CopyButton
@@ -45,6 +68,7 @@ test('passes text and tooltip props to button', () => {
           tooltipPlacement="right"
           tooltipText="Text copied!"
           value="copy"
+          variant="button"
       />
   )