playbook_ui 15.0.0.pre.alpha.PLAY2420atfirstcolumnborderfix10658 → 15.0.0.pre.alpha.PLAY2422fixedconftoastaccessibility10327

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2e0949975bdc3c6bc71197680d702f252dcdc867dd322b72f8a7e9a9b17f7700
-  data.tar.gz: 7dcc2986c1fab9b7eef485e711fbe2e69f3b4432b0b897300bab80488471d879
+  metadata.gz: be71db65aaae3d05ad5a05e9c505672f4d5157b3a43c21324e5123b064fea3e1
+  data.tar.gz: 9a591a8849f6905e08519883fcd212b0ecc7348b537e6348961c0daf6dede396
 SHA512:
-  metadata.gz: fab07c88298ffca2fd945a14b31c4ab09085863565848f27b519d40b53c3b179da015adf1e040a9c99ae27091423c5e880e36daa7341ff78f38d832cca387c59
-  data.tar.gz: 23ed6327729e513e405f2322e8e05a701bea58e3e8bf17e3ae2eaba252c20d712f9e0c545df043956d4a1f0fc2334ca6f63f19140e48751eaaeca0f40e8f925c
+  metadata.gz: 7e48c32c68eaa11b6ff4ace1b9a92eeca35e9174ecb230ba372ba4358e462c02ff8986921f0748bd16fb68edf0594cefa906d581beff1f5b7c2a813409b3afa4
+  data.tar.gz: bd223268365e712962a7fa62c419ac6c522a995ab4d738bd0ad9d43dea585189b229bf4ac9041b15de82f7a586801eddc6d529735bb472486e6838c971b3ceda

data/app/pb_kits/playbook/_playbook.scss

@@ -1,6 +1,5 @@
 
 
-
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_background/background';
@@ -109,8 +108,6 @@
 @import 'pb_user_badge/user_badge';
 @import 'pb_weekday_stacked/weekday_stacked';
 @import 'pb_empty_state/empty_state';
-@import 'pb_pb_bar_graph/pb_bar_graph';
-@import 'pb_pb_circle_chart/pb_circle_chart';
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';

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

@@ -5,7 +5,6 @@ import { flexRender, Row, Cell } from "@tanstack/react-table"
 import { GenericObject } from "../../types"
 import { isChrome } from "../Utilities/BrowserCheck"
 import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
-import { getRowColorClass, shouldShowLoadingIndicator } from "../Utilities/RowUtils"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import Checkbox from "../../pb_checkbox/_checkbox"
@@ -61,7 +60,7 @@ const TableCellRenderer = ({
         const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
         const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
         const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
-
+        
         return (
           <td
               align={cellAlignment}
@@ -133,7 +132,6 @@ export const RegularTableView = ({
 
   const columnPinning = table.getState().columnPinning || { left: [] };
   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);
@@ -146,7 +144,7 @@ export const RegularTableView = ({
             backgroundColor: customRowStyle?.backgroundColor ? customRowStyle?.backgroundColor : 'white',
             color: customRowStyle?.fontColor,
             position: 'sticky',
-            top:
+            top:   
               row.getIsPinned() === 'top'
                   ? `${row.getPinnedIndex() * rowHeight + headerHeight}px`
                   : undefined,
@@ -171,20 +169,21 @@ export const RegularTableView = ({
   return (
     <>
       {pinnedRows && table.getTopRows().map((row: Row<GenericObject>) => (
-        <PinnedRow key={row.id}
-            row={row}
+        <PinnedRow key={row.id} 
+            row={row} 
         />
       ))}
       {totalRows.map((row: Row<GenericObject>, rowIndex: number) => {
+        const isExpandable = row.getIsExpanded();
         const isFirstChildofSubrow = row.depth > 0 && row.index === 0;
+        const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
         const numberOfColumns = table.getAllFlatColumns().length;
+        const isDataLoading = isExpandable && (inlineRowLoading && rowHasNoChildren) && (row.depth < columnDefinitions[0]?.cellAccessors?.length);
+        const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
+        const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
         const isFirstRegularRow = rowIndex === 0 && !row.getIsPinned();
         const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
 
-        // Use functions from RowUtils for consistent cell coloring
-        const rowColor = getRowColorClass(row, inlineRowLoading || false);
-        const isDataLoading = shouldShowLoadingIndicator(row, inlineRowLoading || false, columnDefinitions[0]?.cellAccessors?.length || 0);
-
         return (
           <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
             {isFirstChildofSubrow && subRowHeaders && (
@@ -229,7 +228,7 @@ export const RegularTableView = ({
 
             {/* Display LoadingInline if Row Data is querying and there are no children already */}
             {isDataLoading && (
-              <tr key={`${row.id}-loading-row`}>
+              <tr key={`${row.id}-row`}>
                 <td colSpan={numberOfColumns}
                     style={{ paddingLeft: `${row.depth === 0 ? 0.5 : (row.depth * 2)}em` }}
                 >
@@ -244,4 +243,4 @@ export const RegularTableView = ({
   );
 }
 
-export default RegularTableView;
+export default RegularTableView;

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

@@ -7,7 +7,6 @@ import { GenericObject } from "../../types"
 
 import { isChrome } from "../Utilities/BrowserCheck"
 import { getVirtualizedRowStyle } from "../Utilities/TableContainerStyles"
-import { getRowColorClass } from "../Utilities/RowUtils"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import Checkbox from "../../pb_checkbox/_checkbox"
@@ -46,10 +45,10 @@ export const VirtualizedTableView = ({
 
   const columnPinning = table.getState().columnPinning || { left: [] };
   const sortingState = JSON.stringify(table.getState().sorting || []);
-
+  
   // Store column widths extracted from header
   const [columnWidths, setColumnWidths] = useState<{[key: string]: string}>({});
-
+  
   // Function to get header cell widths
   const getHeaderCellWidths = () => {
     const widths: {[key: string]: string} = {};
@@ -137,7 +136,7 @@ export const VirtualizedTableView = ({
       </tr>
     );
   }
-
+  
   // Establish # of Parent Rows (so that Footer count does not include every single row)
   const topLevelRowCount = table.getRowModel().flatRows.filter((row: Row<GenericObject>) => row.depth === 0).length;
 
@@ -173,9 +172,10 @@ export const VirtualizedTableView = ({
 
         if (item.type === 'row') {
           const row = item.row;
-
-          // Use the utility function to get consistent row color
-          const rowColor = getRowColorClass(row, inlineRowLoading || false);
+          const isExpandable = row.getIsExpanded();
+          const rowHasNoChildren = row.original?.children && !row.original.children.length;
+          const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
+          const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
 
           return (
             <tr

data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts

@@ -10,14 +10,9 @@ export const getRowColorClass = (
 ): string => {
   const isExpandable = row.getIsExpanded();
   const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
+  const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
 
-  // Check if row can expand or is currently expanded
-  const shouldShowExpandedBackground = isExpandable && (
-    (!inlineRowLoading && row.getCanExpand()) ||
-    (inlineRowLoading && (rowHasNoChildren || row.getCanExpand()))
-  );
-
-  return row.getIsSelected() ? "bg-row-selection" : shouldShowExpandedBackground ? "bg-silver" : "bg-white";
+  return row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
 }
 
 /**

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

@@ -1011,62 +1011,18 @@
 .pb-advanced-table-popover-option:hover {
   background-color: $bg_light;
 }
-
 // Removes borders when Wrapped inside the Card Kit
-.pb_card_kit > .pb_advanced_table {
-  // Remove right border only from the actual last column
-  .pb_advanced_table_body tr td:last-child,
-  .pb_advanced_table_header tr th:last-child {
-    box-shadow: none !important; // prevents double up of borders on Firefox when in 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 {
     border-right: none !important;
-  }
-
-  // Without vertical border, remove all last-cell borders
-  // Specifically for header to prevent thicker borders in firefox.
-  .pb_table:not(.vertical-border) {
-    .pb_advanced_table_header .last-header-cell {
-      box-shadow: none !important;
-    }
-  }
-  // Firefox fix
-  @-moz-document url-prefix() {
-    .pb_advanced_table_header {
-      .last-header-cell {
-        box-shadow: 1px 0 0 0 $border_light !important;
-      }
-    }
-  }
-
-  // For tables WITH vertical borders, only remove border from actual last column
-  .pb_table.vertical-border {
-    .pb_advanced_table_body .last-cell:not(:last-child),
-    .pb_advanced_table_header .last-header-cell:not(:last-child) {
-      box-shadow: none !important;
-      border-right: 1px solid $border_light !important;
-    }
-
-    // Dark mode
-    &.dark {
-      .pb_advanced_table_body .last-cell:not(:last-child),
-      .pb_advanced_table_header .last-header-cell:not(:last-child) {
-        border-right: 1px solid $border_dark !important;
-      }
-    }
-  }
-
-  // Support column group border colors
-  &.pb_advanced_table[class*="column-group-border-"] {
-    .pb_advanced_table_body .last-cell:not(:last-child),
-    .pb_advanced_table_header .last-header-cell:not(:last-child) {
-      border-right: 1px solid var(--column-border-color) !important;
-    }
-  }
 }
 
-// Removes bottom borders when wrapped inside the Card Kit (keep existing behavior)
-.pb_card_kit > .pb_advanced_table tr:last-child,
+//  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 {
   td {
-    border-bottom: none !important;
+    border-bottom: none !important; 
   }
 }

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

@@ -39,7 +39,5 @@
     ],
   },
 ] %>
-<%# Adjusting for test purposes. Will revert prior to commit. %>
-<%= pb_rails("card", props: {})  do %>
-  <%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", table_data: @table_data, column_definitions: column_definitions, table_props: { container: false, vertical_border: true } }) %>
-<% end %>
+
+<%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true } }) %>

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

@@ -1,5 +1,4 @@
 import React from "react"
-import Card from "../../pb_card/_card"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
@@ -45,21 +44,19 @@ const AdvancedTableColumnHeadersVerticalBorder = (props) => {
       ],
     },
   ];
-
+  
   const tableProps = {
-    sticky: true,
+    verticalBorder: true
   }
-// Adjusted for testing purposes. Will revert prior to commit.
+
   return (
     <>
-      <Card>
-        <AdvancedTable
-            columnDefinitions={columnDefinitions}
-            tableData={MOCK_DATA}
-            tableProps={tableProps}
-            {...props}
-        />
-      </Card>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          tableProps={tableProps}
+          {...props}
+      />
     </>
   )
 }

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

@@ -4,6 +4,7 @@ examples:
   - bar_graph_default: Default
   - bar_graph_legend: Legend
   - bar_graph_legend_position: Legend Position
+  - bar_graph_legend_non_clickable: Legend Non Clickable
   - bar_graph_height: Height
   - bar_graph_spline: Spline
   - bar_graph_colors: Color Overrides

data/app/pb_kits/playbook/pb_card/_card.scss

@@ -20,7 +20,7 @@
 // Dark mode
 .pb_card_kit.dark {
   @include pb_card_dark;
-
+  
   &.pb_card_kit_selected {
     @include pb_card_selected_dark;
   }
@@ -33,8 +33,7 @@
 
 // Highlight styles
 .pb_card_kit_highlight_top,
-.pb_card_kit_highlight_side,
-.pb_card_kit_highlight_right_side {
+.pb_card_kit_highlight_side {
   overflow: hidden;
 }
 
@@ -53,20 +52,13 @@
   }
 }
 
-// Highlight side variants
+// Highlight side variants  
 @each $color_name, $color_value in $pb_card_highlight_colors {
   .pb_card_kit_highlight_side.pb_card_kit_highlight_#{$color_name}::before {
     @include pb_card_highlight($pb_card_highlight_size, 100%, $color_value);
   }
 }
 
-// Highlight side right variants
-@each $color_name, $color_value in $pb_card_highlight_colors {
-  .pb_card_kit_highlight_right_side.pb_card_kit_highlight_#{$color_name}::before {
-    @include pb_card_right_highlight($pb_card_highlight_size, 100%, $color_value);
-  }
-}
-
 // Card Header
 .pb_card_header_kit {
   flex-grow: 0;
@@ -76,7 +68,7 @@
   padding: $space_sm;
   border: 0;
   border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
-
+  
   // Inherit border radius from parent card
   .pb_card_kit_border_radius_xs & {
     border-radius: $border_radius_xs $border_radius_xs 0px 0px;

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -26,7 +26,7 @@ type CardPropTypes = {
   dragHandle?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   highlight?: {
-    position?: "side" | "right_side" | "top",
+    position?: "side" | "top",
     color?: string,
   },
   id?: string,
@@ -56,7 +56,7 @@ const Header = (props: CardHeaderProps) => {
   const { children, className, headerColor = 'category_1', headerColorStriped = false } = props
   const headerColorCSS = `pb_card_header_kit_${headerColor}`
   const headerStripedCSS = headerColorStriped ? `pb_card_header_kit_${headerColor}_striped` : ''
-
+  
   const headerCSS = classnames(
     'pb_card_header_kit',
     headerColorCSS,
@@ -108,7 +108,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
   const borderRadiusCSS = borderRadius !== 'md' ? `pb_card_kit_border_radius_${borderRadius}` : ''
   const highlightPositionCSS = highlight.position ? `pb_card_kit_highlight_${highlight.position}` : ''
   const highlightColorCSS = highlight.color ? `pb_card_kit_highlight_${highlight.color}` : ''
-
+  
   const cardCss = classnames(
     'pb_card_kit', // Base class
     selectedCSS,

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -87,16 +87,6 @@ $pb_card_header_colors: map-merge(map-merge(map-merge($product_colors, $addition
   background: $background;
 }
 
-@mixin pb_card_right_highlight($width, $height, $background){
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: $width;
-  height: $height;
-  background: $background;
-}
-
 @mixin pb_card_header_color($header_color) {
   background: $header_color;
 }

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb

@@ -4,9 +4,6 @@
 <%= pb_rails("card", props: {highlight: {position: "top", color:"warning"}, margin_bottom: "sm"}) do %>
   Top Position & Warning Color
 <% end %>
-<%= pb_rails("card", props: {highlight: {position: "right_side", color:"product_5_highlight"}, margin_bottom: "sm"}) do %>
-  Right Side Position & Product 5 Highlight Color
-<% end %>
 <%= pb_rails("card", props: {highlight: {position: "side", color:"category_2"}, margin_bottom: "sm"}) do %>
   Side Position & Category 2 Color
 <% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx

@@ -21,14 +21,6 @@ const CardHighlight = (props) => {
         {'Top Position & Warning Color'}
       </Card>
 
-      <Card
-          {...props}
-          highlight={{ position: 'right_side', color: 'product_5_highlight' }}
-          marginBottom="sm"
-      >
-        {'Right Side Position & Product 5 Highlight Color'}
-      </Card>
-
       <Card
           {...props}
           highlight={{ position: 'side', color: 'category_2' }}

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx

@@ -65,7 +65,6 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
         id={id}
     >
       <Button
-          aria={aria}
           dark={dark}
           disabled={disabled}
           htmlType={type}
@@ -79,7 +78,6 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
       >
         <Icon
             fixedWidth
-            htmlOptions={{'aria-hidden': true}}
             icon={icon}
         />
       </Button>

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb

@@ -1,6 +1,5 @@
 <%= pb_content_tag do %>
   <%= pb_rails("button", props: {
-    aria: object.aria,
     type: object.type, 
     loading: object.loading, 
     link: object.link, 

data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap

@@ -28,7 +28,6 @@ exports[`html structure is correct 1`] = `
               style="vertical-align: middle; color: rgb(193, 205, 214);"
             >
               <svg
-                aria-label="chevron-down icon"
                 class="pb_custom_icon svg-inline--fa svg_lg svg_fw"
                 color="currentColor"
                 fill="none"

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -210,12 +210,10 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
           className="input_wrapper"
       >
 
-        {!hideLabel && (
-          <Caption
-              className="pb_date_picker_kit_label"
-              text={label}
-          />
-        )}
+        <Caption
+            className="pb_date_picker_kit_label"
+            text={hideLabel ? null : label}
+        />
           <>
             <div className="date_picker_input_wrapper">
               <input

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -89,48 +89,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     }
   }
 
-  // Helper function to get min/max years based on yearRange. If minDate/maxDate provided, grab year from those values
-  const getMinMaxYears = () => {
-    const [minYear, maxYear] = yearRange;
-
-    const extractYear = (dateOption: typeof minDate | typeof maxDate): number | null => {
-      if (!dateOption) return null;
-
-      // If it's already a number, assume it's a year
-      if (typeof dateOption === 'number') {
-        return dateOption;
-      }
-
-      // If it's a string, extract year with regex
-      if (typeof dateOption === 'string') {
-        const match = dateOption.match(/\b(19|20)\d{2}\b/);
-        return match ? parseInt(match[0], 10) : null;
-      }
-
-      // If it's a Date object, get the year directly
-      if (dateOption instanceof Date) {
-        return dateOption.getFullYear();
-      }
-
-      return null;
-    };
-
-    const setMinYear = minDate ? (extractYear(minDate) ?? minYear) : minYear;
-    const setMaxYear = maxDate ? (extractYear(maxDate) ?? maxYear) : maxYear;
-
-    return { setMinYear, setMaxYear };
-  };
-
-  const { setMinYear, setMaxYear } = getMinMaxYears()
-
-  // Helper function to get min/max dates based on yearRange
-  const getMinMaxDates = () => {
-    const setMinDate = minDate || `01/01/${setMinYear}`
-    const setMaxDate = maxDate || `12/31/${setMaxYear}`
-
-    return { setMinDate, setMaxDate }
-  }
-
   const disabledWeekDays = () => {
     return (
       [
@@ -243,8 +201,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   // |             Flatpickr initializer w/ config             |
   // ===========================================================
 
-  const { setMinDate, setMaxDate } = getMinMaxDates()
-
   flatpickr(`#${pickerId}`, {
     allowInput,
     closeOnSelect,
@@ -256,8 +212,8 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     locale: {
       rangeSeparator: ' to '
     },
-    maxDate: setMaxDate,
-    minDate: setMinDate,
+    maxDate,
+    minDate,
     mode,
     nextArrow: '<i class="far fa-angle-right"></i>',
     onOpen: [() => {
@@ -294,7 +250,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
 
   // create html option tags for desired years
   let years = ''
-  for (let year = setMaxYear; year >= setMinYear; year--) {
+  for (let year = yearRange[1]; year >= yearRange[0]; year--) {
     years += `<option value="${year}">${year}</option>`
   }
 
@@ -367,7 +323,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   }
 // === End of Automatic Sync Logic ===
 
-
+    
   // Adding dropdown icons to year and month select
   dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDown}</i>`)
   if (picker.monthElements[0].parentElement) {

data/app/pb_kits/playbook/pb_dialog/_close_icon.tsx

@@ -12,14 +12,10 @@ export const CloseIcon = (props: CloseIconProps): React.ReactElement => {
   const timesIcon = getAllIcons()["times"]
   return (
     <div
-        aria-label="Close Dialog"
         className="pb_dialog_close_icon"
-        onClick={onClose}          
-        role="button"    
-        tabIndex={0}
+        onClick={onClose}
     >
       <Icon
-          aria={{ "hidden": true }} 
           className="svg-inline--fa"
           customIcon={timesIcon.icon as unknown as { [key: string]: SVGElement }}
           fixedWidth

data/app/pb_kits/playbook/pb_dialog/_dialog.tsx

@@ -73,8 +73,8 @@ const Dialog = (props: DialogProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
    const dataProps = buildDataProps(data)
    const htmlProps = buildHtmlProps(htmlOptions);
-  const classes = {
-    base: classnames("pb_dialog", buildCss("pb_dialog", size, placement), globalProps(props), className),
+  const dialogClassNames = {
+    base: classnames("pb_dialog", buildCss("pb_dialog", size, placement)),
     afterOpen: "pb_dialog_after_open",
     beforeClose: "pb_dialog_before_close",
   };
@@ -93,8 +93,10 @@ const Dialog = (props: DialogProps): React.ReactElement => {
 
   const dynamicInlineProps = globalInlineProps(props); 
 
-  const wrapperClasses = classnames(
+  const classes = classnames(
     buildCss("pb_dialog_wrapper"),
+    globalProps(props),
+    className
   );
 
   const [triggerOpened, setTriggerOpened] = useState(false),
@@ -171,13 +173,13 @@ const Dialog = (props: DialogProps): React.ReactElement => {
           {...ariaProps} 
           {...dataProps}
           {...htmlProps} 
-          className={wrapperClasses}
+          className={classes}
       >
         <Modal
             ariaHideApp={false}
-            className={classes}
+            className={dialogClassNames}
             closeTimeoutMS={200}
-            contentLabel="Dialog"
+            contentLabel="Minimal Modal Example"
             id={id}
             isOpen={modalIsOpened}
             onRequestClose={onClose}

data/app/pb_kits/playbook/pb_dialog/dialog.html.erb

@@ -12,7 +12,7 @@
         data-cancel-button-id="<%= object.cancel_button_id %>"
     <% end %>
 >
-    <%= pb_content_tag(:dialog, role: "dialog", "aria-modal": "true", "aria-label": "Dialog") do %>
+    <%= pb_content_tag(:dialog) do %>
             <% if object.status === "" && object.title %>
                 <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
             <% end %>