playbook_ui 14.16.0.pre.alpha.play1959tablekitstripedlogicoverridesbackground6893 → 14.16.0.pre.alpha.play1960buttonkitdisablenotworkingdanger6850

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b1b61bbe353c51c6d0b9b65fe43a989ecd07bc6383f816a8ca36385541a8fab3
-  data.tar.gz: 9e0b3698c30553e33d081a9cd6eb70d1a299b5a309ae197cbb44ce65b1be3e69
+  metadata.gz: ec0875c5557cec086ec99ae1cbaf9f47361e3a4584e4b677136fd3ce394db55d
+  data.tar.gz: 456a8945cc951c32c481c638e66ee8a685902e1a1b02b75bcd8fb6e5709a5c2e
 SHA512:
-  metadata.gz: db55d048eb70afdb219b9e6bcc9eb44301414a209daf19fff52a4b858e744eda43764ce1e3abb7f94c3eb4d8b1fbd208405f1ec45a00bb9bf33cc2049a7cba51
-  data.tar.gz: 0afca121c5aab26a344906909da824344db35d0fcf0b74c5f4450a1204cd1606ac0888e26c2c7a8dd71a2f4ae128864aae0bb25b928c1da482c78e213522cbe1
+  metadata.gz: 7d30f5a21e8502edb67813757f015e1c7b95a1f19cbc435e5e5e553fd0c3477c82fba61713834accd60a58286f500c03623d062183485b6f9a5c98b84b2ceb6a
+  data.tar.gz: 67b9bac93175b4881f236ea5f2ceef4023a6eeefea241dc5503ec8e7c27a5d3a128fdc90aa73bde6a8dabc02648ed7450e0fc62e3f75a9a666c65a3b17024215

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

@@ -167,95 +167,93 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const isActionBarVisible = selectableRows && showActionsBar && selectedRowsLength > 0;
 
   return (
-    <>
-      {/* Top Pagination */}
-      {pagination && (
-        <TablePagination
-            onChange={onPageChange}
-            position="top"
-            range={paginationProps?.range}
-            table={table}
-        />
-      )}
-
-      <div
-          {...ariaProps}
-          {...dataProps}
-          {...htmlProps}
-          className={classes}
-          id={id}
-          onScroll={virtualizedRows ? e => fetchMoreOnBottomReached(
-            e.currentTarget,
-            fetchNextPage,
-            isFetching,
-            totalFetched,
-            fullData.length
-          ) : undefined}
-          ref={tableWrapperRef}
-          style={tableWrapperStyle as React.CSSProperties}
+    <div
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        id={id}
+        onScroll={virtualizedRows ? e => fetchMoreOnBottomReached(
+          e.currentTarget,
+          fetchNextPage,
+          isFetching,
+          totalFetched,
+          fullData.length
+        ) : undefined}
+        ref={tableWrapperRef}
+        style={tableWrapperStyle as React.CSSProperties}
+    >
+      <AdvancedTableProvider
+          columnDefinitions={columnDefinitions}
+          enableToggleExpansion={enableToggleExpansion}
+          enableVirtualization={virtualizedRows}
+          expanded={expanded}
+          expandedControl={expandedControl}
+          handleExpandOrCollapse={handleExpandOrCollapse}
+          hasAnySubRows={hasAnySubRows}
+          inlineRowLoading={inlineRowLoading}
+          isActionBarVisible={isActionBarVisible}
+          loading={loading}
+          responsive={responsive}
+          selectableRows={selectableRows}
+          setExpanded={setExpanded}
+          showActionsBar={showActionsBar}
+          sortControl={sortControl}
+          subRowHeaders={tableOptions?.subRowHeaders}
+          table={table}
+          tableContainerRef={tableWrapperRef}
+          toggleExpansionIcon={toggleExpansionIcon}
+          virtualizedRows={virtualizedRows}
       >
-        <AdvancedTableProvider
-            columnDefinitions={columnDefinitions}
-            enableToggleExpansion={enableToggleExpansion}
-            enableVirtualization={virtualizedRows}
-            expanded={expanded}
-            expandedControl={expandedControl}
-            handleExpandOrCollapse={handleExpandOrCollapse}
-            hasAnySubRows={hasAnySubRows}
-            inlineRowLoading={inlineRowLoading}
-            isActionBarVisible={isActionBarVisible}
-            loading={loading}
-            responsive={responsive}
-            selectableRows={selectableRows}
-            setExpanded={setExpanded}
-            showActionsBar={showActionsBar}
-            sortControl={sortControl}
-            subRowHeaders={tableOptions?.subRowHeaders}
-            table={table}
-            tableContainerRef={tableWrapperRef}
-            toggleExpansionIcon={toggleExpansionIcon}
-            virtualizedRows={virtualizedRows}
-        >
-          <React.Fragment>
-            {/* Selection Action Bar */}
-            <TableActionBar
-                actions={actions}
-                isVisible={isActionBarVisible}
-                selectedCount={selectedRowsLength}
+        <React.Fragment>
+          {/* Top Pagination */}
+          {pagination && (
+            <TablePagination
+                onChange={onPageChange}
+                position="top"
+                range={paginationProps?.range}
+                table={table}
             />
+          )}
+
+          {/* Selection Action Bar */}
+          <TableActionBar
+              actions={actions}
+              isVisible={isActionBarVisible}
+              selectedCount={selectedRowsLength}
+          />
 
-            {/* Main Table */}
-            <Table
-                className={`${loading ? "content-loading" : ""}`}
-                dark={dark}
-                dataTable
-                numberSpacing="tabular"
-                responsive="none"
-                {...tableProps}
-            >
-              {children ? (
-                children
-              ) : (
-                <>
-                  <TableHeader />
-                  <TableBody />
-                </>
-              )}
-            </Table>
-          </React.Fragment>
-        </AdvancedTableProvider>
-     
-      </div>
- {/* Bottom Pagination */}
-      {pagination && (
-        <TablePagination
-            onChange={onPageChange}
-            position="bottom"
-            range={paginationProps?.range}
-            table={table}
-        />
-      )}
-    </>
+          {/* Main Table */}
+          <Table
+              className={`${loading ? "content-loading" : ""}`}
+              dark={dark}
+              dataTable
+              numberSpacing="tabular"
+              responsive="none"
+              {...tableProps}
+          >
+            {children ? (
+              children
+            ) : (
+              <>
+                <TableHeader />
+                <TableBody />
+              </>
+            )}
+          </Table>
+
+          {/* Bottom Pagination */}
+          {pagination && (
+            <TablePagination
+                onChange={onPageChange}
+                position="bottom"
+                range={paginationProps?.range}
+                table={table}
+            />
+          )}
+        </React.Fragment>
+      </AdvancedTableProvider>
+    </div>
   );
 };
 

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

@@ -40,6 +40,7 @@ const AdvancedTablePagination = (props) => {
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           pagination
+          responsive="none"
           tableData={PAGINATION_MOCK_DATA}
           {...props}
       />

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx

@@ -32,12 +32,11 @@ type RichTextEditorProps = {
   advancedEditor?: any,
   advancedEditorToolbar?: boolean,
   toolbarBottom?: boolean,
-  children?: React.ReactNode | React.ReactNode[],
+  children?: React.ReactNode | React.ReactNode[]
   className?: string,
   data?: { [key: string]: string },
   focus?: boolean,
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
-  inputOptions?: { [key: string]: string | number | boolean | (() => void) },
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   inline?: boolean,
   extensions?: { [key: string]: string }[],
@@ -62,7 +61,6 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     data = {},
     focus = false,
     htmlOptions = {},
-    inputOptions = {},
     inline = false,
     extensions,
     name,
@@ -72,7 +70,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     sticky = false,
     template = '',
     value = '',
-    maxWidth = "md"
+    maxWidth="md"
   } = props
 
   const ariaProps = buildAriaProps(aria),
@@ -81,28 +79,12 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
 
   const htmlProps = buildHtmlProps(htmlOptions)
   
-  const handleOnEditorReady = (editorInstance: Editor) => {
-    setEditor(editorInstance)
-    setTimeout(() => {
-      const oldId = editorInstance.element.getAttribute('input')
-      if (oldId) {
-        const hiddenInput = document.getElementById(oldId)
-        if (hiddenInput) {
-          const newId = (inputOptions.id as string) || oldId  
-          hiddenInput.id = newId
-          editorInstance.element.setAttribute('input', newId)
-
-          if (inputOptions.name) {
-            hiddenInput.setAttribute('name', inputOptions.name as string)
-          }
-        }
-      }
-    })
-  }
+  const handleOnEditorReady = (editorInstance: Editor) => setEditor(editorInstance),
+    element = editor?.element
 
   // DOM manipulation must wait for editor to be ready
-  if (editor && editor.element) {
-    const toolbarElement = editor.element.parentElement.querySelector('trix-toolbar') as HTMLElement,
+  if (editor) {
+    const toolbarElement = element.parentElement.querySelector('trix-toolbar') as HTMLElement,
       blockCodeButton = toolbarElement.querySelector('[data-trix-attribute=code]') as HTMLElement
 
     // replace default trix "block code" button with "inline code" button
@@ -136,8 +118,8 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   }, [editor, template])
 
   useEffect(() => {
-    if (!editor?.element) return
-    editor.element.addEventListener('click', ({ target }: Event) => {
+    if (!element) return
+    element.addEventListener('click', ({ target }: Event) => {
       const trixEditorContainer = (target as Element).closest('.pb_rich_text_editor_kit')
       if (!trixEditorContainer) return
 
@@ -146,7 +128,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
 
       if (anchorElement.hasAttribute('href')) window.open(anchorElement.href)
     })
-  }, [editor])
+  }, [element])
 
   const richTextEditorClass = 'pb_rich_text_editor_kit',
     simpleClass = simple ? 'simple' : '',
@@ -155,7 +137,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     inlineClass = inline ? 'inline' : '',
     toolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
 
-  let css = classnames(globalProps(props, { maxWidth }), className)
+  let css = classnames(globalProps(props, {maxWidth}), className)
   css = classnames(
     richTextEditorClass,
     simpleClass,

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb

@@ -1 +1 @@
-<%= pb_rails("rich_text_editor", props: {input_options: { id: 'hidden_input_id', name: "hidden_input_name" }, value: "Add your text here. You can format your text, add links, quotes, and bullets."}) %>
+<%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here. You can format your text, add links, quotes, and bullets."}) %>

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.html.erb

@@ -1,5 +1,5 @@
 <%= react_component('RichTextEditor',
-                    object.rich_text_options,
-                    aria: object.aria,
-                    data: object.data
-                   ) %>
+  object.rich_text_options,
+  aria: object.aria,
+  data: object.data
+) %>

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb

@@ -20,7 +20,6 @@ module Playbook
       prop :value
       prop :template
       prop :placeholder
-      prop :input_options
 
       def classname
         generate_classname("pb_rich_text_editor_kit", simple_class, focus_class, sticky_class, separator: " ")
@@ -50,7 +49,6 @@ module Playbook
           value: value,
           template: template,
           placeholder: placeholder,
-          inputOptions: input_options,
         }
       end
     end

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

@@ -21,7 +21,6 @@ type TableProps = {
     data?: { [key: string]: string },
     dataTable: boolean,
     disableHover?: boolean,
-    headerStyle?: "default" | "borderless" | "floating"
     htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
     id?: string,
     outerPadding?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
@@ -47,7 +46,6 @@ const Table = (props: TableProps): React.ReactElement => {
         data = {},
         dataTable = false,
         disableHover = false,
-        headerStyle = "default",
         htmlOptions = {},
         id,
         outerPadding = '',
@@ -87,8 +85,6 @@ const Table = (props: TableProps): React.ReactElement => {
             'sticky-left-column': stickyLeftColumn,
             'sticky-right-column': stickyRightColumn,
             'striped': striped,
-            'header-borderless': headerStyle === 'borderless',
-            'header-floating': headerStyle === 'floating',
             [outerPaddingCss]: outerPadding !== '',
         },
         globalProps(props),

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

@@ -75,5 +75,3 @@ examples:
     - table_with_collapsible_with_nested_table: Table with Collapsible with Nested Table
     - table_with_clickable_rows: Table with Clickable Rows
     - table_with_selectable_rows: Table with Selectable Rows
-    - table_with_header_style_borderless: Header Style Borderless
-    - table_with_header_style_floating: Header Style Floating

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

@@ -35,5 +35,3 @@ export { default as TableWithCollapsibleWithNestedRows } from './_table_with_col
 export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'
 export { default as TableWithSelectableRows } from './_table_with_selectable_rows.jsx'
 export { default as TableWithClickableRows } from './_table_with_clickable_rows.jsx'
-export { default as TableWithHeaderStyleBorderless } from './_table_with_header_style_borderless.jsx'
-export { default as TableWithHeaderStyleFloating } from './_table_with_header_style_floating.jsx'

data/app/pb_kits/playbook/pb_table/styles/_headers.scss

@@ -14,79 +14,3 @@
     }
   }
 }
-// remove all outward facing borders from header
-.header-borderless > thead,
-.header-borderless > thead > tr,
-.header-borderless > thead > tr > th,
-.header-borderless > .pb_table_thead,
-.header-borderless > .pb_table_thead > .pb_table_tr,
-.header-borderless > .pb_table_thead .pb_table_th {
-  border-top: none !important;
-  border-left: none !important;
-  border-right: none !important;
-}
-
-// remove bottom border (internal to table) on header cells - only light mode needs this redundancy handled likely due to a difference in the base scss and table-dark.scss
-.header-borderless:not(.table-dark) > thead > tr:last-child > th,
-.header-borderless:not(.table-dark) > .pb_table_thead > .pb_table_tr:last-child > .pb_table_th {
-  border-bottom: none !important;
-}
-
-// preserves top rounded corners to header at top of table-card for unnested card
-.header-borderless > thead > tr:first-child > th:first-child,
-.header-borderless > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:first-child {
-  border-top-left-radius: $border_radius_md !important;
-}
-
-.header-borderless > thead > tr:first-child > th:last-child,
-.header-borderless > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:last-child {
-  border-top-right-radius: $border_radius_md !important;
-}
-
-// ensures top border is from first row of body to prevent double borders
-.header-borderless > tbody > tr:first-child > td,
-.header-borderless > .pb_table_tbody > .pb_table_tr:first-child > .pb_table_td {
-  border-top: 1px solid $border_light !important;
-}
-
-// floating code - this carries over everything for header-borderless
-.header-floating > thead,
-.header-floating > thead > tr,
-.header-floating > thead > tr > th,
-.header-floating > .pb_table_thead,
-.header-floating > .pb_table_thead > .pb_table_tr,
-.header-floating > .pb_table_thead .pb_table_th {
-  border-top: none !important;
-  border-left: none !important;
-  border-right: none !important;
-}
-
-.header-floating:not(.table-dark) > thead > tr:last-child > th,
-.header-floating:not(.table-dark) > .pb_table_thead > .pb_table_tr:last-child > .pb_table_th {
-  border-bottom: none !important;
-}
-
-.header-floating > thead > tr:first-child > th:first-child,
-.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:first-child {
-  border-top-left-radius: $border_radius_md !important;
-}
-
-.header-floating > thead > tr:first-child > th:last-child,
-.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:last-child {
-  border-top-right-radius: $border_radius_md !important;
-}
-
-.header-floating > tbody > tr:first-child > td,
-.header-floating > .pb_table_tbody > .pb_table_tr:first-child > .pb_table_td {
-  border-top: 1px solid $border_light !important;
-}
-
-// flatten out corners for floating headerstyle variant to avoid small triangle of white/empty space
-.header-floating > thead > tr:first-child > th:first-child,
-.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:first-child { 
-  border-top-left-radius: 0 !important; 
-} 
-.header-floating > thead > tr:first-child > th:last-child, 
-.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:last-child { 
-  border-top-right-radius: 0 !important; 
-}

data/app/pb_kits/playbook/pb_table/styles/_striped.scss

@@ -1,7 +1,7 @@
-[class^=pb_table]:not(:has(colgroup)) {
+[class^=pb_table] {
   &.striped {
     tbody, .pb_table_tbody {
-      tr:nth-child(odd):not(.pb_background_kit), .pb_table_tr:nth-child(odd):not(.pb_background_kit) {
+      tr:nth-child(odd), .pb_table_tr:nth-child(odd) {
         background-color: $bg_light;
       }
     }
@@ -10,7 +10,7 @@
   &.dark {
     &.striped {
       tbody, .pb_table_tbody {
-        tr:nth-child(odd):not(.pb_background_kit), .pb_table_tr:nth-child(odd):not(.pb_background_kit) {
+        tr:nth-child(odd), .pb_table_tr:nth-child(odd) {
           background-color: $bg_dark;
         }
       }

data/app/pb_kits/playbook/pb_table/subcomponents/_table_head.tsx

@@ -12,7 +12,6 @@ type TableHeadPropTypes = {
   children: React.ReactNode[] | React.ReactNode;
   className: string;
   data?: { [key: string]: string };
-  headerStyle?: "default" | "borderless" | "floating";
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   tag?: "table" | "div";
@@ -24,7 +23,6 @@ const TableHead = (props: TableHeadPropTypes): React.ReactElement => {
     children,
     className,
     data = {},
-    headerStyle = "default",
     htmlOptions = {},
     id,
     tag = "table",
@@ -33,15 +31,7 @@ const TableHead = (props: TableHeadPropTypes): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
-  const classes = classnames(
-    "pb_table_thead", 
-    {
-      "pb_table_thead_borderless": headerStyle === "borderless" || headerStyle === "floating",
-      "pb_table_thead_floating": headerStyle === "floating",
-    },
-    globalProps(props), 
-    className
-  );
+  const classes = classnames("pb_table_thead", globalProps(props), className);
   const isTableTag = tag === "table";
 
   return (

data/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx

@@ -12,7 +12,6 @@ type TableHeaderPropTypes = {
   children: React.ReactNode[] | React.ReactNode;
   className: string;
   data?: { [key: string]: string };
-  headerStyle?: "default" | "borderless" | "floating";
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   tag?: "table" | "div";
@@ -25,7 +24,6 @@ const TableHeader = (props: TableHeaderPropTypes): React.ReactElement => {
     children,
     className,
     data = {},
-    headerStyle = "default",
     htmlOptions = {},
     id,
     tag = "table",
@@ -35,15 +33,7 @@ const TableHeader = (props: TableHeaderPropTypes): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
-  const classes = classnames(
-    "pb_table_th", 
-    {
-      "pb_table_thead_borderless": headerStyle === "borderless" || headerStyle === "floating",
-      "pb_table_thead_floating": headerStyle === "floating",
-    },
-    globalProps(props), 
-    className
-  );
+  const classes = classnames("pb_table_th", globalProps(props), className);
   const isTableTag = tag === "table";
 
   return (

data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx

@@ -22,7 +22,6 @@ type TableRowPropTypes = {
   dark?: boolean;
   dragId?: string;
   draggableItem?: boolean;
-  headerStyle?: "default" | "borderless" | "floating";
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   toggleCellId?: string;
@@ -42,7 +41,6 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
     dark = false,
     dragId,
     draggableItem = false,
-    headerStyle = "default",
     htmlOptions = {},
     id,
     toggleCellId,
@@ -62,9 +60,6 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
   const classes = classnames(
     buildCss("pb_table_row_kit", sideHighlightClass),
     "pb_table_tr",
-    {
-      "pb_table_tr_borderless_header": headerStyle === "borderless",
-    },
     collapsibleRow,
     globalProps(props),
     className

data/app/pb_kits/playbook/pb_table/table.test.js

@@ -167,20 +167,3 @@ test("Should have outerPadding class", () => {
   const kit = renderKit(Table, props, { outerPadding: "sm" })
   expect(kit).toHaveClass("pb_table table-sm table-responsive-collapse table-card outer_padding_space_sm table-collapse-sm")
 })
-
-test("when headerStyle is default", () => {
-  const kit = renderKit(Table, props)
-  expect(kit).toHaveClass("pb_table table-sm table-responsive-collapse table-card table-collapse-sm")
-  expect(kit).not.toHaveClass("header-borderless")
-  expect(kit).not.toHaveClass("header-floating")
-})
-
-test("when headerStyle is borderless", () => {
-  const kit = renderKit(Table, props, { headerStyle: "borderless" })
-  expect(kit).toHaveClass("pb_table table-sm table-responsive-collapse table-card header-borderless table-collapse-sm")
-})
-
-test("when headerStyle is floating", () => {
-  const kit = renderKit(Table, props, { headerStyle: "floating" })
-  expect(kit).toHaveClass("pb_table table-sm table-responsive-collapse table-card header-floating table-collapse-sm")
-})