playbook_ui 14.24.0.pre.alpha.PLAY23139411 → 14.24.0.pre.alpha.play23479502

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e3d762bec279ed08c6f2c32e62d81d19ff9309898bd898b64b5ebbafa042746c
-  data.tar.gz: 9e9e7d6f94777f1770757559c95bb1e12ac8b4016cc48d84236278a9d8ab15dd
+  metadata.gz: f4ccc02520ca6f12c398e5c4417dcfeb08b24b1b68bed3ca430137584fd25bf8
+  data.tar.gz: d916bb54b939ce9cbec50449fe9bf90791ae6ac0e330337f54c8fc8f5375c5cb
 SHA512:
-  metadata.gz: 50d7e0dd26c65b9bbf45ecb7132b46deb8507e5d06d6c9e3c8ee0d3f49f26844184f69fdef2ee7baccda44f490c13cc2a4232d8d2f73c0ec35dea88f10149aed
-  data.tar.gz: 4709d36e634964f8a1a9b9fb1b7d8fe0893951a5b5fc2d2b83d55fcbe2e966a7a95e03be098891c6e7811704f9db4c54d1eb903e891d4cf0b1f8d71348ddef14
+  metadata.gz: d3c9a37eb5044d3a60ac5d4843fec307a2c183ac800d9fdb940a93503a00cd1dd21f5c28df556096909eae5e7f6369df0f78ea108a0ca37761a595390ead7c0e
+  data.tar.gz: '0845b9c473a82d7322b6ee1d1d9a17e1a4221453ef23a105d66b01d6de4682fdfd6abe77ba38877ae66cdfa3dae70a2b4bfa9602d1808ba11df4aece44607714'

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

@@ -971,6 +971,40 @@
       }
     }
   }
+
+  // Firefox-specific fix for last-header-cell and last-cell vertical borders
+  @-moz-document url-prefix() {
+    .pb_advanced_table_header {
+      .last-header-cell {
+        border-right: none !important;
+        box-shadow: 1px 0 0 0 $border_light !important;
+      }
+    }
+
+    .pb_advanced_table_body {
+      .last-cell {
+        border-right: none !important;
+        box-shadow: 1px 0 0 0 $border_light !important;
+      }
+    }
+
+    // Dark mode Firefox fixes
+    &.dark {
+      .pb_advanced_table_header {
+        .last-header-cell {
+          border-right: none !important;
+          box-shadow: 1px 0 0 0 $border_dark !important;
+        }
+      }
+
+      .pb_advanced_table_body {
+        .last-cell {
+          border-right: none !important;
+          box-shadow: 1px 0 0 0 $border_dark !important;
+        }
+      }
+    }
+  }
 }
 
 // Outside of the pb_advanced_table class for popover

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

@@ -0,0 +1,43 @@
+<% column_definitions = [
+  {
+    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("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

@@ -0,0 +1,64 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableColumnHeadersVerticalBorder = (props) => {
+  const columnDefinitions = [
+    {
+      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 tableProps = {
+    verticalBorder: true
+  }
+
+  return (
+    <>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          tableProps={tableProps}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default AdvancedTableColumnHeadersVerticalBorder

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

@@ -13,6 +13,7 @@ examples:
   - advanced_table_with_custom_header_rails: Custom Header Cell
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
+  - advanced_table_column_headers_vertical_border: Multi-Header Columns with Vertical Borders
   - advanced_table_no_subrows: Table with No Subrows or Expansion
   - advanced_table_selectable_rows_rails: Selectable Rows
   - advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
@@ -53,6 +54,7 @@ examples:
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
   - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
+  - advanced_table_column_headers_vertical_border: Multi-Header Columns with Vertical Borders
   - advanced_table_no_subrows: Table with No Subrows or Expansion
   - advanced_table_pinned_rows: Pinned Rows
   - advanced_table_selectable_rows: Selectable Rows

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

@@ -21,6 +21,7 @@ export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_
 export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
 export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
 export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
+export { default as AdvancedTableColumnHeadersVerticalBorder } from './_advanced_table_column_headers_vertical_border.jsx'
 export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
 export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
 export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -43,7 +43,7 @@ module Playbook
       end
 
       def td_classname(column, index)
-        classes = %w[id-cell chrome-styles]
+        classes = %w[id-cell]
         classes << "last-cell" if column[:is_last_in_group]
         classes << "pinned-left" if index.zero? && is_pinned_left && responsive == "scroll"
         classes.join(" ")

data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.rb

@@ -29,7 +29,7 @@ module Playbook
       end
 
       def td_classname(index)
-        classes = %w[id-cell chrome-styles]
+        classes = %w[id-cell]
         classes << "pinned-left" if index.zero? && responsive == "scroll"
         classes.join(" ")
       end

data/app/pb_kits/playbook/pb_date/_date.tsx

@@ -19,6 +19,7 @@ type PbDateProps = {
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   showDayOfWeek?: boolean;
+  showCurrentYear?: boolean;
   showIcon?: boolean;
   size?: "sm" | "md" | "lg";
   unstyled?: boolean;
@@ -35,6 +36,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
     htmlOptions = {},
     id,
     showDayOfWeek = false,
+    showCurrentYear = false,
     showIcon = false,
     size = "md",
     unstyled = false,
@@ -90,7 +92,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
                 {month} {day}
               </span>
 
-              {currentYear != year && <span>{`, ${year}`}</span>}
+              {(currentYear !== year || showCurrentYear) && <span>{`, ${year}`}</span>}
             </span>
           </>
         : size == "md" || size == "lg"
@@ -124,7 +126,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
               <span>
                 {month} {day}
               </span>
-              {currentYear != year && <span>{`, ${year}`}</span>}
+              {(currentYear !== year || showCurrentYear) && <span>{`, ${year}`}</span>}
             </Title>
             )
           : (
@@ -158,7 +160,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
                 <Caption dark={dark}
                     tag="span">
                   {month} {day}
-                  {currentYear != year && <>{`, ${year}`}</>}
+                  {(currentYear !== year || showCurrentYear) && <>{`, ${year}`}</>}
                 </Caption>
               </>
             )}

data/app/pb_kits/playbook/pb_date/date.html.erb

@@ -13,8 +13,8 @@
     <% end %>
 
     <!-- month day, year -->
-    <%# if not current year %>
-    <% if object.year.to_s == DateTime.now.year.to_s %>
+    <%# if not current year or show_current_year is false %>
+    <% if object.year.to_s == DateTime.now.year.to_s && !object.show_current_year %>
       <span><%= "#{object.month} #{object.day}" %></span>
     <%# if is current year %>
     <% else %>
@@ -44,8 +44,8 @@
 
     <!-- month day, year -->
 
-    <%# if not current year %>
-    <% if object.year.to_s == DateTime.now.year.to_s %>
+    <%# if not current year or show_current_year is false %>
+    <% if object.year.to_s == DateTime.now.year.to_s  && !object.show_current_year  %>
       <%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}", size: 4 }) %>
     <%# if is current year %>
     <% else %>
@@ -74,8 +74,8 @@
 
     <!-- month day, year -->
 
-    <%# if not current year %>
-    <% if object.year.to_s == DateTime.now.year.to_s %>
+    <%# if not current year or show_current_year is false %>
+    <% if object.year.to_s == DateTime.now.year.to_s  && !object.show_current_year %>
       <%= pb_rails("caption", props: { tag: "span", text: "#{object.month} #{object.day}" }) %>
     <%# if is current year %>
     <% else %>

data/app/pb_kits/playbook/pb_date/date.rb

@@ -11,6 +11,8 @@ module Playbook
                        default: false
       prop :show_day_of_week, type: Playbook::Props::Boolean,
                               default: false
+      prop :show_current_year, type: Playbook::Props::Boolean,
+                               default: false
       prop :size, type: Playbook::Props::Enum,
                   values: %w[lg md sm xs],
                   default: "md"

data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("date", props: {
+  date: Date.today,
+  show_current_year: true
+}) %>

data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import FormattedDate from '../../pb_date/_date'
+
+const DateWithShowCurrentYear = (props) => {
+  return (
+    <>
+      <FormattedDate
+          showCurrentYear
+          value={new Date()}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default DateWithShowCurrentYear

data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.md

@@ -0,0 +1 @@
+By default, the Date kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting `showCurrentYear`/`show_current_year` to true as shown here. 

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

@@ -5,12 +5,14 @@ examples:
   - date_variants: Variants
   - date_alignment: Alignment
   - date_timezone: Timezones
+  - date_with_show_current_year: Show Current Year
   - date_unstyled: Unstyled
 
   react:
   - date_default: Default
   - date_variants: Variants
   - date_alignment: Alignment
+  - date_with_show_current_year: Show Current Year
   - date_unstyled: Unstyled
 
   swift:

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

@@ -2,3 +2,4 @@ export { default as DateDefault } from './_date_default.jsx'
 export { default as DateVariants } from './_date_variants.jsx'
 export { default as DateAlignment } from './_date_alignment.jsx'
 export { default as DateUnstyled } from './_date_unstyled.jsx'
+export { default as DateWithShowCurrentYear } from './_date_with_show_current_year.jsx'

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx

@@ -52,7 +52,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
   } = props;
 
   const returnedIcon = icon || iconMap[status]
-  const iconClass = icon ? "custom_icon" : ""
+  const iconClass = icon && icon !== "none" ? "custom_icon" : ""
 
   const css = classnames(
     `pb_fixed_confirmation_toast_kit_${status}`,
@@ -92,7 +92,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
             onClick={handleClick}
             {...htmlProps}
         >
-          {returnedIcon && (
+          {returnedIcon && icon !== "none" && (
             <Icon
                 className="pb_icon"
                 fixedWidth

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.html.erb

@@ -0,0 +1,22 @@
+<%= pb_rails("fixed_confirmation_toast", props: {
+  text: "Error Message",
+  status: "error",
+  icon: "none",
+  closeable: true
+})%>
+
+<br><br>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  text: "Items Successfully Moved",
+  status: "success",
+  icon: "none"
+})%>
+
+<br><br>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  text: "Scan to Assign Selected Items",
+  status: "neutral",
+  icon: "none"
+})%>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+
+import FixedConfirmationToast from '../_fixed_confirmation_toast'
+
+const FixedConfirmationToastNoIcon = (props) => {
+  return (
+    <div>
+      <div>
+        <FixedConfirmationToast
+            closeable
+            icon="none"
+            status="error"
+            text="Error Message"
+            {...props}
+        />
+      </div>
+
+      <br />
+
+      <div>
+        <FixedConfirmationToast
+            icon="none"
+            status="success"
+            text="Items Successfully Moved"
+            {...props}
+        />
+      </div>
+
+      <br />
+
+      <div>
+        <FixedConfirmationToast
+            icon="none"
+            status="neutral"
+            text="Scan to Assign Selected Items"
+            {...props}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default FixedConfirmationToastNoIcon

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.md

@@ -0,0 +1 @@
+Setting `icon` prop to "none" will render the fixed confirmation toast without the left side icon. 

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

@@ -8,6 +8,7 @@ examples:
   - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
   - fixed_confirmation_toast_custom_icon: Custom Icon
+  - fixed_confirmation_toast_no_icon: No Icon
   
   react:
   - fixed_confirmation_toast_default: Default
@@ -17,6 +18,7 @@ examples:
   - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
   - fixed_confirmation_toast_custom_icon: Custom Icon
+  - fixed_confirmation_toast_no_icon: No Icon
 
   swift:
   - fixed_confirmation_toast_default_swift: Default

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

@@ -5,3 +5,4 @@ export { default as FixedConfirmationToastPositions } from './_fixed_confirmatio
 export { default as FixedConfirmationToastAutoClose } from './_fixed_confirmation_toast_auto_close.jsx'
 export { default as FixedConfirmationToastChildren } from './_fixed_confirmation_toast_children.jsx'
 export { default as FixedConfirmationToastCustomIcon } from './_fixed_confirmation_toast_custom_icon.jsx'
+export { default as FixedConfirmationToastNoIcon } from './_fixed_confirmation_toast_no_icon.jsx'

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb

@@ -1,6 +1,7 @@
 <%= pb_content_tag do %>
+    <% if object.icon_value && object.icon_value != "none" %>
     <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true }) %>
-
+    <% end %>
     <% if content %>
         <%= content %>
     <% elsif object.show_text? %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb

@@ -56,7 +56,7 @@ module Playbook
       end
 
       def icon_class
-        icon.present? ? " custom_icon" : ""
+        icon.present? && icon != "none" ? " custom_icon" : ""
       end
 
       def classname

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.test.js

@@ -56,6 +56,12 @@ test('renders custom icon when provided', () => {
     expect(container.querySelector('.custom_icon')).toBeInTheDocument();
 });
 
+test("renders no icon when icon prop is 'none'", () => {
+    const { container } = render(<FixedConfirmationToast icon="none" />);
+    expect(container.querySelector('.pb_icon')).not.toBeInTheDocument();
+    expect(container.querySelector('.custom_icon')).not.toBeInTheDocument();
+});
+
 test('renders correctly with multiLine prop', () => {
     const { container } = render(<FixedConfirmationToast multiLine />);
     expect(container.querySelector('._multi_line')).toBeInTheDocument();