playbook_ui 14.25.0.pre.alpha.testingcss10239 → 14.25.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c56d482bc374ac4f4c557dc4c38a5566256e97c5c42e888e44b9d4a4eece739f
-  data.tar.gz: cbb0c351a9df1754580fb350b28825ca262a2593540568199dcbf6ff71647f81
+  metadata.gz: 7acc2e53df8398198aa9fed4b39f2dc04a954918e790a904220898da123e15e8
+  data.tar.gz: 606391f77a95f67235606bdf5113c7f2fb1c749ff7bb99999fff120f358f7d85
 SHA512:
-  metadata.gz: 360fdcd96e91166da90fb76c1dcb5b270344cd04cdb53d15532eb553e472bd8cb845d32d8656a22edd3b1c791800ee26d64a8085351a030f8f911e3cd9be9854
-  data.tar.gz: b7456754e270e0092c9ba439e87417efe03448981e34bea2ac54bcaec189b1cac065621d2d76df2a8af021da5cfc1afe5c77413ec40b1953add06e710d8817c8
+  metadata.gz: 4f381cbe31526cc2e7fe5c0f90402e169e88d6bca29b6257a200460ca24539db770651df305094d9ac4b0db2ffb39d435308f0b4af4e91ce3a57fa69c51a78a6
+  data.tar.gz: b2d994c35bd502f6221e469c7a65da5911222b835672bbfa955d8b12f9612e47dd4bd9b20c4f08e6e57a2c2163e0b4c415f1ac516b62eef772ca9540487cb7fb

data/app/pb_kits/playbook/_playbook.scss

@@ -31,6 +31,7 @@
 @import 'pb_dialog/dialog';
 @import 'pb_distribution_bar/distribution_bar';
 @import 'pb_draggable/draggable';
+@import 'pb_drawer/drawer';
 @import 'pb_dropdown/dropdown';
 @import 'pb_file_upload/file_upload';
 @import 'pb_filter/filter';

data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx

@@ -58,9 +58,7 @@ const TableCellRenderer = ({
         // Find the “owning” colDefinition by accessor. Needed for multi column logic
         const colDef = findColumnDefByAccessor(columnDefinitions ?? [], column.id)
         const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
-        const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
-        const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
-        
+
         return (
           <td
               align={cellAlignment}
@@ -70,7 +68,6 @@ const TableCellRenderer = ({
                 isPinnedLeft && 'pinned-left',
                 stickyLeftColumn && stickyLeftColumn.length > 0 && isPinnedLeft && 'sticky-left',
                 isLastCell && 'last-cell',
-                paddingClass
               )}
               key={`${cell.id}-data`}
               style={{
@@ -134,15 +131,13 @@ export const RegularTableView = ({
   const columnDefinitions = table.options.meta?.columnDefinitions || [];
   // Row pinning
   function PinnedRow({ row }: { row: Row<any> }) {
-    const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
     return (
       <tr
           className={classnames(
             `pinned-row`,
           )}
           style={{
-            backgroundColor: customRowStyle?.backgroundColor ? customRowStyle?.backgroundColor : 'white',
-            color: customRowStyle?.fontColor,
+            backgroundColor: 'white',
             position: 'sticky',
             top:   
               row.getIsPinned() === 'top'
@@ -155,7 +150,6 @@ export const RegularTableView = ({
             collapsibleTrail={collapsibleTrail}
             columnDefinitions={columnDefinitions}
             columnPinning={columnPinning}
-            customRowStyle={customRowStyle}
             loading={loading}
             row={row}
             stickyLeftColumn={stickyLeftColumn}

data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

@@ -113,6 +113,7 @@ export const TableHeaderCell = ({
     return visibleSiblings.at(-1) === header.column;
   })();
 
+
 const cellClassName = classnames(
   "table-header-cells",
   `${showActionsBar && isActionBarVisible && "header-cells-with-actions"}`,
@@ -121,7 +122,7 @@ const cellClassName = classnames(
   { "pinned-left": responsive === "scroll" && isPinnedLeft },
    isLastHeaderCell ? "last-header-cell" : "",
   stickyLeftColumn && stickyLeftColumn.length > 0 && isPinnedLeft ? 'sticky-left' : "",
-  colDef?.columnStyling?.headerPadding && `p_${colDef?.columnStyling?.headerPadding}`
+
 ); 
 
 const cellId = `${loading ? 

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

@@ -1012,16 +1012,16 @@
   background-color: $bg_light;
 }
 // Removes borders when Wrapped inside the Card Kit
-.pb_card_kit > .pb_advanced_table .pb_advanced_table_body .last-cell,
-.pb_card_kit > .pb_advanced_table .pb_advanced_table_header .last-header-cell,
-.pb_card_kit > .pb_advanced_table .pb_advanced_table_body tr td:last-child,
-.pb_card_kit > .pb_advanced_table .pb_advanced_table_header tr th:last-child {
+[class^=pb_card_kit] > .pb_advanced_table .pb_advanced_table_body .last-cell,
+[class^=pb_card_kit] > .pb_advanced_table .pb_advanced_table_header .last-header-cell,
+[class^=pb_card_kit] > .pb_advanced_table .pb_advanced_table_body tr td:last-child,
+[class^=pb_card_kit] > .pb_advanced_table .pb_advanced_table_header tr th:last-child {
     border-right: none !important;
 }
 
 //  Removes borders when Wrapped inside the Card Kit
-.pb_card_kit > .pb_advanced_table tr:last-child, 
-.pb_card_kit > .pb_advanced_table .last-row-cell {
+[class^=pb_card_kit] > .pb_advanced_table tr:last-child, 
+[class^=pb_card_kit] > .pb_advanced_table .last-row-cell {
   td {
     border-bottom: none !important; 
   }

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -443,7 +443,7 @@ test("sort button exists and sorts column data", () => {
 
   const kit = screen.getByTestId(testId)
 
-  const sortButton= kit.querySelector(".pb_flex_kit.pb_flex_kit_orientation_row.pb_flex_kit_justify_content_between.pb_flex_kit_align_items_top.pb_flex_kit_spacing_none.pl_xxs.cursor_pointer.header-sort-button.pb_th_link.false")
+  const sortButton= kit.querySelector(".pb_flex_kit_orientation_row_justify_content_between_align_items_top_spacing_none.pl_xxs.cursor_pointer.header-sort-button.pb_th_link")
   expect(sortButton).toBeInTheDocument()
 
   const row1 = kit.getElementsByTagName('tr')[1]
@@ -651,36 +651,6 @@ test("columnStyling.cellAlignment sets each <td> align attribute as expected", (
   expect(firstEnrollmentCell).toHaveAttribute("align", "left");
 });
 
-test("columnStyling.cellPadding sets cell padding", () => {
-  const styledColumnDefs = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      columnStyling: { cellPadding: "none" },
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-  ];
-
-  render(
-    <AdvancedTable
-        columnDefinitions={styledColumnDefs}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const firstEnrollmentCell = screen.getAllByText("20")[0].closest("td");
-  expect(firstEnrollmentCell).toHaveClass('p_none')
-});
-
 test("renders virtualized table rows and header", () => {
   render(
     <AdvancedTable
@@ -724,32 +694,6 @@ test("rowStyling prop works as expected", () => {
   expect(row1).toHaveStyle({backgroundColor: colors.white, color: colors.black})
 })
 
-test("rowStyling prop to allow padding control", () => {
-  const rowStyling = [
-  {
-    rowId: "1",
-    cellPadding: "lg"
-  },
-];
-
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        rowStyling={rowStyling}
-        tableData={MOCK_DATA_WITH_ID}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const tableBody = kit.querySelector('tbody')
-  const row1 = tableBody.querySelector('tr:nth-child(1)') 
-   const cells = row1.querySelectorAll("td");
-  cells.forEach((cell) => {
-    expect(cell.classList.contains("p_lg")).toBe(true);
-  });
-})
-
 test("Sort icon renders with enableSort on individual columns", () => {
   render(
     <AdvancedTable

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

@@ -68,10 +68,8 @@ examples:
   - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
   - advanced_table_row_styling: Row Styling
-  - advanced_table_padding_control_per_row: Padding Control using Row Styling
   - advanced_table_column_styling: Column Styling
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
-  - advanced_table_padding_control: Padding Control using Column Styling
   - advanced_table_column_border_color: Column Group Border Color
   - advanced_table_fullscreen: Fullscreen
   - advanced_table_infinite_scroll: Infinite Scroll

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

@@ -43,6 +43,4 @@ export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_c
 export { default as AdvancedTableCustomSort } from './_advanced_table_custom_sort.jsx'
 export { default as AdvancedTableWithCustomHeaderMultiHeader } from './_advanced_table_with_custom_header_multi_header.jsx'
 export { default as AdvancedTableSortPerColumn } from './_advanced_table_sort_per_column.jsx'
-export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced_table_sort_per_column_for_multi_column.jsx'
-export { default as AdvancedTablePaddingControl } from './_advanced_table_padding_control.jsx'
-export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
+export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced_table_sort_per_column_for_multi_column.jsx'

data/app/pb_kits/playbook/pb_avatar/_avatar.scss

@@ -12,83 +12,88 @@ $avatar-sizes: (
   "xl":   100px,
 );
 
-@each $name, $size in $avatar-sizes {
-  .pb_avatar_kit_size_#{$name},
-  .pb_avatar_kit_size_#{$name}_thumb {
-    width: $size;
-    height: $size;
-    object-fit: cover;
-    position: relative;
-    flex-shrink: 0;
-    flex-grow: 0;
-    flex-basis: $size;
+[class^=pb_avatar_kit] {
+  position: relative;
 
-    > .pb_flex_kit {
-      .pb_card_kit {
-        padding: 2px;
-      }
-      .pb_card_kit.overlay_bottom_center,
-      .pb_card_kit.overlay_top_center {
-        left: 50%;
-        transform: translateX(-50%);
-      }
-      .pb_card_kit.overlay_left_center,
-      .pb_card_kit.overlay_right_center {
-        top: 50%;
-        transform: translateY(-50%);
-      }
-    }
-
-    .avatar_wrapper {
+  @each $name, $size in $avatar-sizes {
+    &[class*=_size_#{$name}],
+    &[class*=_size_#{$name}_thumb] {
       width: $size;
       height: $size;
       object-fit: cover;
-      border-radius: $border-rad-mega;
-      background: $slate;
-      overflow: hidden;
       position: relative;
       flex-shrink: 0;
       flex-grow: 0;
       flex-basis: $size;
 
-      .dark & {
-        background: $text_dk_light;
-      }
+      & > [class^=pb_flex_kit] {
+        [class^=pb_card_kit] {
+          padding: 2px;
+        }
+        [class^=pb_card_kit].overlay_bottom_center,
+        [class^=pb_card_kit].overlay_top_center {
+          left: 50%;
+          transform: translateX(-50%);
+        }
 
-      &::before {
-        content: attr(data-initials);
-        width: 100%;
-        height: 100%;
-        display: block;
-        color: $white;
-        text-align: center;
-        font-size: $size * 0.38;
-        line-height: $size;
-        text-transform: uppercase;
-        position: relative;
+        [class^=pb_card_kit].overlay_left_center,
+        [class^=pb_card_kit].overlay_right_center {
+          top: 50%;
+          transform: translateY(-50%);
+        }
       }
 
-      img {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        border-radius: $border-rad-mega;
+      .avatar_wrapper {
+        width: $size;
+        height: $size;
         object-fit: cover;
-        display: block;
-      }
+        border-radius: $border-rad-mega;
+        background: $slate;
+        overflow: hidden;
+        position: relative;
+        flex-shrink: 0;
+        flex-grow: 0;
+        flex-basis: $size;
+
+        .dark & {
+          background: $text_dk_light;
+        }
 
-      .grayscale {
-        filter: grayscale(1);
+        &::before {
+          content: attr(data-initials);
+          width: 100%;
+          height: 100%;
+          display: block;
+          color: $white;
+          text-align: center;
+          font-size: $size * 0.38;
+          line-height: $size;
+          text-transform: uppercase;
+          position: relative;
+        }
+
+        img {
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          top: 0;
+          left: 0;
+          border-radius: $border-rad-mega;
+          object-fit: cover;
+          display: block;
+        }
+
+        .grayscale {
+          filter: grayscale(1);
+        }
       }
     }
   }
-}
 
-.pb_avatar_kit_dark {
-  .pb_card_kit {
-    position: absolute;
-    padding: 2px;
+  &.dark {
+    [class^=pb_card_kit] {
+      position: absolute;
+      padding: 2px;
+    }
   }
 }

data/app/pb_kits/playbook/pb_avatar/avatar.test.js

@@ -103,7 +103,7 @@ test('renders with online status', () => {
   );
 
   const onlineStatusAvatar = screen.getByTestId(testId);
-  const onlineStatus = onlineStatusAvatar.querySelector('.pb_online_status_kit')
+  const onlineStatus = onlineStatusAvatar.querySelector('.pb_online_status_kit_online_size_md')
   expect(onlineStatus).toBeInTheDocument();
 });
 

data/app/pb_kits/playbook/pb_background/_background.scss

@@ -18,7 +18,7 @@ $merge_kits6: map-merge($merge_kits5, $data_colors);
 $merge_kits7: map-merge($merge_kits6, $border_colors);
 $background_colors: map-merge($additional_colors, $merge_kits7);
 
-.pb_background_kit {
+[class^=pb_background_kit] {
   max-width: 100%;
   max-height: 100%;
   background-size: cover;
@@ -27,7 +27,7 @@ $background_colors: map-merge($additional_colors, $merge_kits7);
     &.pb_background_color_#{$name} {
       background: $color;
     }
-  }
+  };
 
   &.fade {
     opacity: 0;
@@ -56,7 +56,7 @@ $background_colors: map-merge($additional_colors, $merge_kits7);
     }
   }
 
-  &.imageoverlay {
+  &[class*=imageoverlay] {
     position: relative;
 
     &:before {

data/app/pb_kits/playbook/pb_badge/_badge.scss

@@ -4,15 +4,7 @@
 @import "../tokens/spacing";
 @import "../tokens/typography";
 
-// Base badge class and all variants
-.pb_badge_kit,
-.pb_badge_kit_rounded,
-.pb_badge_kit_notification,
-.pb_badge_kit_notification_rounded,
-.pb_badge_kit_notification_error,
-.pb_badge_kit_notification_error_rounded,
-.pb_badge_kit_success_sm,
-.pb_badge_kit_success_sm_rounded {
+[class^=pb_badge_kit] {
   $pb_badge_height_rounded: 16px;
 
   display: inline-flex;
@@ -29,141 +21,43 @@
     font-size: $font_smaller - 1;
     font-weight: $bolder;
   }
-}
-
-// Add base styles to all status color variants too
-@each $color_name, $color_value in $status_colors {
-  .pb_badge_kit_#{$color_name},
-  .pb_badge_kit_#{$color_name}_rounded {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: $border_rad_light;
-    padding: 0 $space_xs/2;
-    border-width: 1px;
-    border-color: $card_light;
-    white-space: nowrap;
 
-    span {
-      display: inline-block;
-      font-size: $font_smaller - 1;
-      font-weight: $bolder;
+  @each $color_name, $color_value in $status_colors {
+    &[class*=_#{$color_name}]  {
+      background: rgba($color_value, $opacity_1);
+      color: map-get($status_color_text, $color_name);
     }
   }
-}
 
-// Generate all status color variants (with and without rounded)
-@each $color_name, $color_value in $status_colors {
-  .pb_badge_kit_#{$color_name} {
-    background: rgba($color_value, $opacity_1);
-    color: map-get($status_color_text, $color_name);
+  &[class*=_rounded] {
+    height: $pb_badge_height_rounded;
+    min-height: $pb_badge_height_rounded;
+    min-width: $pb_badge_height_rounded;
+    border-radius: $pb_badge_height_rounded / 2;
   }
-  
-  .pb_badge_kit_#{$color_name}_rounded {
-    background: rgba($color_value, $opacity_1);
-    color: map-get($status_color_text, $color_name);
-    height: 16px !important;
-    min-height: 16px !important;
-    min-width: 16px !important;
-    border-radius: 8px !important;
-  }
-}
-
-// Special success_sm variant (since component maps "success" to "success_sm")
-.pb_badge_kit_success_sm {
-  background: rgba(map-get($status_colors, "success"), $opacity_1);
-  color: map-get($status_color_text, "success");
-}
-
-.pb_badge_kit_success_sm_rounded {
-  background: rgba(map-get($status_colors, "success"), $opacity_1);
-  color: map-get($status_color_text, "success");
-  height: 16px !important;
-  min-height: 16px !important;
-  min-width: 16px !important;
-  border-radius: 8px !important;
-}
-
-// Rounded variant (base)
-.pb_badge_kit_rounded {
-  height: 16px !important;
-  min-height: 16px !important;
-  min-width: 16px !important;
-  border-radius: 8px !important;
-}
-
-// Notification variants
-.pb_badge_kit_notification {
-  background: $primary;
-  color: $white;
-}
-
-.pb_badge_kit_notification_rounded {
-  background: $primary;
-  color: $white;
-  height: 16px !important;
-  min-height: 16px !important;
-  min-width: 16px !important;
-  border-radius: 8px !important;
-}
-
-.pb_badge_kit_notification_error {
-  background: $error;
-  color: $white;
-}
 
-.pb_badge_kit_notification_error_rounded {
-  background: $error;
-  color: $white;
-  height: 16px !important;
-  min-height: 16px !important;
-  min-width: 16px !important;
-  border-radius: 8px !important;
-}
-
-// Dark theme variants
-@each $color_name, $color_value in $status_colors {
-  .pb_badge_kit_#{$color_name}.dark {
-    border-width: 0;
-    background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
-    color: map-get($status_color_text_dark, $color_name);
-  }
-  
-  .pb_badge_kit_#{$color_name}_rounded.dark {
-    border-width: 0;
-    background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
-    color: map-get($status_color_text_dark, $color_name);
+  &[class*=_notification] {
+    background: $primary;
+    color: $white;
   }
-}
-
-.pb_badge_kit_success_sm.dark {
-  border-width: 0;
-  background: rgba(mix($bg_dark, map-get($status_colors, "success"), 10%), $opacity_2);
-  color: map-get($status_color_text_dark, "success");
-}
 
-.pb_badge_kit_success_sm_rounded.dark {
-  border-width: 0;
-  background: rgba(mix($bg_dark, map-get($status_colors, "success"), 10%), $opacity_2);
-  color: map-get($status_color_text_dark, "success");
-}
+  &[class*=_notification_error] {
+    background: $error;
+  }
 
-.pb_badge_kit_notification.dark {
-  border-width: 0;
-}
+  &.dark {
+    border-width: 0;
 
-.pb_badge_kit_notification_rounded.dark {
-  border-width: 0;
-}
+    @each $color_name, $color_value in $status_colors {
+      &[class*=_#{$color_name}]  {
+        background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
+        color: map-get($status_color_text_dark, $color_name);
+      }
+    }
 
-.pb_badge_kit_notification_error.dark {
-  border-width: 0;
-  background: $error_dark;
-  color: $white;
+    &[class*=_notification_error]  {
+      background: $error_dark;
+      color: $white;
+    }
+  }
 }
-
-.pb_badge_kit_notification_error_rounded.dark {
-  border-width: 0;
-  background: $error_dark;
-  color: $white;
-}