playbook_ui 14.11.1.pre.alpha.PBNTR7495495 → 14.11.1.pre.alpha.PLAY1720phonenumberinputformatAsYouType5377

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: df3c9b4531b69ea3a50257a8429e2898af1d173485644571845454b2ed10f827
-  data.tar.gz: 85379401cf74e8322abc9c00ce7b80e73403423791e6676752005f5896a42d06
+  metadata.gz: f652f813944aec48c8bc973298758ac7c9cd498e72bdbe76c35d4153f23de637
+  data.tar.gz: aeb06568f624527493457b48c19964e1ce23add8a44dfc90f6453a4757e01063
 SHA512:
-  metadata.gz: ec8fab8e022539aabde7c89da023b0f985c7a459be5d5abc5012ecfe493bb90b69f7a40193996a19e2b64ae2360e35dd1dca5bf54d86ae3484238f97aaa872ab
-  data.tar.gz: 105b02ada9607e0a64e54e1b39e0eff596e041705d38f3982f28d1ac36bb5cf9f88d2a2cb524fc007d9823bccf6b0c3f7f13e8f967767c550b8eee9696521f83
+  metadata.gz: c730aad6b384918b56a6695814c71016baa1f8295ed5e0ba879cf9f620ecd3fb9e74c9fd9ddc3b84bd8396b84e83c4b0c90580754284671b59823bdf596ee470
+  data.tar.gz: f3043409e34d7a6c0b00576e83e3e6eeebb0e9d6e307f6075c157a9c8e4323261fe22c6f6372956be0bab4d9e95cb61935bcec6ce147a005008cdd3a26f1c14a

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

@@ -8,7 +8,6 @@ import { GlobalProps } from "../../utilities/globalProps"
 import Flex from "../../pb_flex/_flex"
 import FlexItem from "../../pb_flex/_flex_item"
 import Icon from "../../pb_icon/_icon"
-import Checkbox from "../../pb_checkbox/_checkbox"
 
 import AdvancedTableContext from "../Context/AdvancedTableContext"
 
@@ -18,7 +17,6 @@ interface CustomCellProps {
   row: Row<GenericObject>
   value?: string
   customRenderer?: (row: Row<GenericObject>, value: string | undefined) => React.ReactNode
-  selectableRows?: boolean
 } 
 
 export const CustomCell = ({
@@ -27,9 +25,8 @@ export const CustomCell = ({
   row,
   value,
   customRenderer,
-  selectableRows,
 }: CustomCellProps & GlobalProps) => {
-  const { setExpanded, expanded, expandedControl, inlineRowLoading, hasAnySubRows } = useContext(AdvancedTableContext);
+  const { setExpanded, expanded, expandedControl, inlineRowLoading } = useContext(AdvancedTableContext);
 
   const handleOnExpand = (row: Row<GenericObject>) => {
     onRowToggleClick && onRowToggleClick(row);
@@ -44,23 +41,10 @@ export const CustomCell = ({
 
   return (
     <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
-      <Flex 
-          alignItems="center" 
+      <Flex alignItems="center" 
           columnGap="xs"
-          justify={!hasAnySubRows ? "end" : "start"}
           orientation="row"
       >
-        {
-          selectableRows && hasAnySubRows && (
-          <Checkbox
-              checked={row.getIsSelected()}
-              disabled={!row.getCanSelect()}
-              indeterminate={row.getIsSomeSelected()}
-              name={row.id}
-              onChange={row.getToggleSelectedHandler()}
-          />
-          )
-        }
         {renderButton ? (
           <button
               className="gray-icon expand-toggle-icon"

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

@@ -1,13 +1,12 @@
 import React, { useContext } from "react"
 import classnames from "classnames"
-import { flexRender, Header, Table } from "@tanstack/react-table"
+import { flexRender, Header } from "@tanstack/react-table"
 
 import { GenericObject } from "../../types"
 
 import { GlobalProps } from "../../utilities/globalProps"
 
 import Flex from "../../pb_flex/_flex"
-import Checkbox from "../../pb_checkbox/_checkbox"
 
 import { SortIconButton } from "./SortIconButton"
 import { ToggleIconButton } from "./ToggleIconButton"
@@ -25,7 +24,6 @@ type TableHeaderCellProps = {
   isPinnedLeft?: boolean
   loading?: boolean
   sortIcon?: string | string[]
-  table?: Table<GenericObject>
 } & GlobalProps
 
 export const TableHeaderCell = ({
@@ -37,13 +35,9 @@ export const TableHeaderCell = ({
   isPinnedLeft = false,
   loading,
   sortIcon,
-  table
 }: TableHeaderCellProps) => {
-  const { sortControl, responsive, selectableRows, hasAnySubRows, showActionsBar } =
-    useContext(AdvancedTableContext);
+  const { sortControl, responsive } = useContext(AdvancedTableContext)
 
-  type justifyTypes = "none" | "center" | "start" | "end" | "between" | "around" | "evenly"
-  
   const toggleSortButton = (event: React.SyntheticEvent) => {
     if (sortControl) {
       const sortIsDesc = header?.column.getIsSorted() === "desc"
@@ -65,7 +59,6 @@ export const TableHeaderCell = ({
  
 const cellClassName = classnames(
   "table-header-cells",
-  `${showActionsBar && "header-cells-with-actions"}`,
   `${isChrome() ? "chrome-styles" : ""}`,
   `${enableSorting ? "table-header-cells-active" : ""}`,
   { "pinned-left": responsive === "scroll" && isPinnedLeft },
@@ -89,14 +82,8 @@ const isToggleExpansionEnabled =
   (enableToggleExpansion === "all" || "header") &&
   enableToggleExpansion !== "none"
 
-  let justifyHeader:justifyTypes;
+const justifyHeader = isLeafColumn ? "end" : "center"
 
-  if (header?.index === 0 && hasAnySubRows) {
-    justifyHeader = enableSorting ? "between" : "start";
-  } else {
-    justifyHeader = isLeafColumn ? "end" : "center";
-  }
-  
   return (
     <th
         align="right"
@@ -115,18 +102,9 @@ const isToggleExpansionEnabled =
       ) : (
         <Flex
             alignItems="center"
-            justify={justifyHeader}
+            justify={header?.index === 0 && enableSorting ? "between" : header?.index === 0 && !enableSorting ? "start" : justifyHeader}
         >
-          {
-            selectableRows && header?.index === 0 && hasAnySubRows && (
-              <Checkbox
-                  checked={table?.getIsAllRowsSelected()}
-                  indeterminate={table?.getIsSomeRowsSelected()}
-                  onChange={table?.getToggleAllRowsSelectedHandler()}
-              />
-            )
-          }
-          {isToggleExpansionEnabled && hasAnySubRows && (
+          {isToggleExpansionEnabled && (
               <ToggleIconButton onClick={handleExpandOrCollapse} />
             )}
 

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx

@@ -9,7 +9,6 @@ import { globalProps } from "../../utilities/globalProps"
 import { isChrome } from "../Utilities/BrowserCheck"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
-import Checkbox from "../../pb_checkbox/_checkbox"
 
 import { SubRowHeaderRow } from "../Components/SubRowHeaderRow"
 import { LoadingCell } from "../Components/LoadingCell"
@@ -43,8 +42,6 @@ export const TableBody = ({
     loading,
     responsive,
     table,
-    selectableRows,
-    hasAnySubRows
   } = useContext(AdvancedTableContext)
 
   const classes = classnames(
@@ -68,7 +65,7 @@ export const TableBody = ({
           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"
+
           return (
             <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
               {isFirstChildofSubrow && subRowHeaders && (
@@ -82,23 +79,11 @@ export const TableBody = ({
                 />
               )}
             <tr
-                className={`${rowColor} ${
+                className={`${rowBackground ? "bg-silver" : "bg-white"} ${
                   row.depth > 0 ? `depth-sub-row-${row.depth}` : ""
               }`}
                 id={`${row.index}-${row.id}-${row.depth}-row`}
             >
-              {/* Render custom checkbox column when we want selectableRows for non-expanding tables */}
-              {selectableRows && !hasAnySubRows && (
-                  <td className="checkbox-cell">
-                    <Checkbox
-                        checked={row.getIsSelected()}
-                        disabled={!row.getCanSelect()}
-                        indeterminate={row.getIsSomeSelected()}
-                        name={row.id}
-                        onChange={row.getToggleSelectedHandler()}
-                    />
-                  </td>
-                )}
               {row.getVisibleCells().map((cell, i) => {
                 const isPinnedLeft = columnPinning.left.includes(cell.column.id)
                 const isLastCell = cell.column.parent?.columns.at(-1)?.id === cell.column.id

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx

@@ -7,10 +7,8 @@ import { GenericObject } from "../../types"
 import { buildCss } from "../../utilities/props"
 import { globalProps } from "../../utilities/globalProps"
 
-import Checkbox from "../../pb_checkbox/_checkbox"
-
 import { TableHeaderCell } from "../Components/TableHeaderCell"
-import { isChrome } from "../Utilities/BrowserCheck"
+
 import AdvancedTableContext from "../Context/AdvancedTableContext"
 
 type TableHeaderProps = {
@@ -36,10 +34,6 @@ export const TableHeader = ({
     handleExpandOrCollapse,
     loading,
     table,
-    hasAnySubRows,
-    showActionsBar,
-    selectableRows,
-    responsive
   } = useContext(AdvancedTableContext)
 
   const classes = classnames(
@@ -50,12 +44,6 @@ export const TableHeader = ({
 
   const columnPinning = table.getState().columnPinning;
 
-  const customCellClassnames = classnames(
-    "table-header-cells-custom",
-    `${showActionsBar && "header-cells-with-actions"}`,
-    `${isChrome() ? "chrome-styles" : ""}`,
-    `${responsive === "scroll" && "pinned-left"}`,
-  );
   return (
     <>
       <thead className={classes}
@@ -64,15 +52,6 @@ export const TableHeader = ({
         {/* Get the header groups (only one in this example) */}
         {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
           <tr key={`${headerGroup.id}-headerGroup`}>
-            {!hasAnySubRows && selectableRows && (
-              <th className={customCellClassnames}>
-                <Checkbox
-                    checked={table?.getIsAllRowsSelected()}
-                    indeterminate={table?.getIsSomeRowsSelected()}
-                    onChange={table?.getToggleAllRowsSelectedHandler()}
-                />
-              </th>
-            )}
             {headerGroup.headers.map(header => {
               const isPinnedLeft = columnPinning.left.includes(header.id)
               return (
@@ -86,7 +65,6 @@ export const TableHeader = ({
                     key={`${header.id}-header`}
                     loading={loading}
                     sortIcon={sortIcon}
-                    table={table}
                 />
               )
             })}

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

@@ -23,20 +23,10 @@
     background-color: $white;
   }
 
-  .bg-row-selection {
-    background-color: $info_subtle;
-  }
-
   .full-width {
     width: 100%;
   }
 
-  .row-selection-actions-card {
-    border-bottom-right-radius: 0px !important;
-    border-bottom-left-radius: 0px !important;
-    border-bottom-color: transparent;
-  }
-
   .table-header-cells:first-child {
     min-width: 180px;
   }
@@ -57,16 +47,6 @@
     th[colspan]:not([colspan="1"]) {
       border-right: 1px solid $border_light !important;
     }
-    .table-header-cells-custom {
-      text-align:center;
-      [class^=pb_checkbox_kit] .pb_checkbox_label {
-        padding-left: 0px;
-      }
-    }
-    .header-cells-with-actions {
-      border-top-left-radius: 0px !important;
-      border-top-right-radius: 0px !important;
-    }
   }
 
   .pb_advanced_table_body {
@@ -79,14 +59,6 @@
     tr .pb_table_td:last-child {
       padding-right: 8px !important;
     }
-
-    .checkbox-cell {
-      display: flex;
-      justify-content: center;
-      [class^=pb_checkbox_kit] .pb_checkbox_label {
-        padding-left: 0px;
-      }
-    }
   }
 
 
@@ -144,7 +116,6 @@
 
   // Vertical separator
   .table-header-cells:first-child,
-  .table-header-cells-custom:first-child,
   td:first-child,
   .pb_table_td:first-child {
     box-shadow: 1px 0px 0px 0px $border_light !important;

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

@@ -12,17 +12,12 @@ import {
   Row,
   useReactTable,
   Getter,
-  RowSelectionState
 } from "@tanstack/react-table"
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props"
 import { globalProps, GlobalProps } from "../utilities/globalProps"
 
 import Table from "../pb_table/_table"
-import Card from "../pb_card/_card"
-import Caption from "../pb_caption/_caption"
-import Flex from "../pb_flex/_flex"
-import FlexItem from "../pb_flex/_flex_item"
 
 import AdvancedTableContext from "./Context/AdvancedTableContext"
 
@@ -35,7 +30,6 @@ import Pagination from "../pb_pagination/_pagination"
 
 type AdvancedTableProps = {
   aria?: { [key: string]: string }
-  actions?: React.ReactNode[] | React.ReactNode
   children?: React.ReactNode | React.ReactNode[]
   className?: string
   columnDefinitions: GenericObject[]
@@ -53,20 +47,16 @@ type AdvancedTableProps = {
   pagination?: boolean,
   paginationProps?: GenericObject
   responsive?: "scroll" | "none",
-  selectableRows?: boolean,
-  showActionsBar?: boolean,
   sortControl?: GenericObject
   tableData: GenericObject[]
   tableOptions?: GenericObject
   tableProps?: GenericObject
   toggleExpansionIcon?: string | string[]
-  onRowSelectionChange?: (arg: RowSelectionState) => void
 } & GlobalProps
 
 const AdvancedTable = (props: AdvancedTableProps) => {
   const {
     aria = {},
-    actions,
     children,
     className,
     columnDefinitions,
@@ -84,14 +74,11 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     pagination = false,
     paginationProps,
     responsive = "scroll",
-    showActionsBar = true,
-    selectableRows,
     sortControl,
     tableData,
     tableOptions,
     tableProps,
     toggleExpansionIcon = "arrows-from-line",
-    onRowSelectionChange,
   } = props
 
   const [loadingStateRowCount, setLoadingStateRowCount] = useState(
@@ -109,9 +96,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
 
   const columnHelper = createColumnHelper()
 
-  //Row Selection
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
-
   //Create cells for columns, with customization for first column
   const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element, index?: number) => {
     const columnCells = ({
@@ -132,7 +116,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
                     getValue={getValue}
                     onRowToggleClick={onRowToggleClick}
                     row={row}
-                    selectableRows={selectableRows}
                 />
           )
         }
@@ -145,7 +128,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
                 customRenderer={customRenderer}
                 onRowToggleClick={onRowToggleClick}
                 row={row} 
-                selectableRows={selectableRows}
                 value={accessorValue} 
             />
           ) : (
@@ -207,13 +189,9 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     },
   ]
 
-  const customState = () => {
-    if (sortControl && selectableRows) {
-      return { state: { expanded, sorting, rowSelection } }
-    } else if (sortControl) {
+  const expandAndSortState = () => {
+    if (sortControl) {
       return { state: { expanded, sorting } }
-    } else if (selectableRows) {
-      return { state: { expanded, rowSelection } }
     } else {
       return { state: { expanded } }
     }
@@ -241,24 +219,13 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     getSortedRowModel: getSortedRowModel(),
     enableSortingRemoval: false,
     sortDescFirst: true,
-    onRowSelectionChange: setRowSelection,
-    getRowId: selectableRows ? row => row.id : undefined,
-    ...customState(),
-    ...paginationInitializer,
+    ...expandAndSortState(),
+    ... paginationInitializer,
     ...tableOptions,
   })
 
   const tableRows = table.getRowModel()
 
-  const hasAnySubRows = tableRows.rows.some(row => row.subRows && row.subRows.length > 0);
-  const selectedRowsLength = Object.keys(table.getState().rowSelection).length
-
-  useEffect(() => {
-    if (onRowSelectionChange) {
-      onRowSelectionChange(table.getState().rowSelection)
-    }
-  } , [table.getState().rowSelection, onRowSelectionChange])
-
   // Set table row count for loading state
   const updateLoadingStateRowCount = useCallback(() => {
     const rowsCount = table.getRowModel().rows.length
@@ -317,9 +284,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             sortControl,
             table,
             toggleExpansionIcon,
-            showActionsBar,
-            selectableRows,
-            hasAnySubRows
           }}
       >
         <>
@@ -333,27 +297,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
                   total={table.getPageCount()}
                   />
           }
-          {
-            selectableRows && showActionsBar && (
-              <Card className="row-selection-actions-card"
-                  padding="xs"
-              >
-                <Flex alignItems="center"
-                    justify="between"
-                >
-                    <Caption color="light"
-                        paddingLeft="xs"
-                        size="xs"
-                    >
-                      {selectedRowsLength} Selected
-                    </Caption>
-                    <FlexItem>
-                    {actions}
-                    </FlexItem>
-                </Flex>
-              </Card>
-            )
-          }
           <Table
               className={`${loading ? "content-loading" : ""}`}
               dark={dark}

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

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

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

@@ -47,7 +47,6 @@ const AdvancedTablePaginationWithProps = (props) => {
           columnDefinitions={columnDefinitions}
           pagination
           paginationProps={paginationProps}
-          responsive="none"
           tableData={PAGINATION_MOCK_DATA}
           {...props}
       />

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

@@ -27,8 +27,3 @@ examples:
   - advanced_table_pagination_with_props: Pagination Props
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
-  # - advanced_table_no_subrows: Table with No Subrows
-  - advanced_table_selectable_rows: Selectable Rows
-  - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
-  - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
-  - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)

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

@@ -13,9 +13,4 @@ export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cel
 export { default as AdvancedTablePagination } from './_advanced_table_pagination.jsx'
 export { default as AdvancedTablePaginationWithProps } from './_advanced_table_pagination_with_props.jsx'
 export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
-export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'
-export { default as AdvancedTableSelectableRows } from './_advanced_table_selectable_rows.jsx'
-export { default as AdvancedTableSelectableRowsNoSubrows } from './_advanced_table_selectable_rows_no_subrows.jsx'
-export { default as AdvancedTableNoSubrows } from './_advanced_table_no_subrows.jsx'
-export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_selectable_rows_header.jsx'
-export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
+export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'

data/app/pb_kits/playbook/pb_button/button.html.erb

@@ -1,5 +1,6 @@
-<%= pb_content_tag(object.tag,
-                object.tag == "button" ? object.options : object.link_options) do %>
+<%= content_tag(object.tag,
+                object.tag == "button" ? object.options : object.link_options,
+                **combined_html_options) do %>
     <% if object.variant === "reaction" %>
         <% if icon && object.valid_emoji(object.icon) %>
             <%= pb_rails("flex", props:{ align: "center" }) do %>

data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag(:label) do %>
+<%= content_tag(:label, aria: object.aria,
+                        id: object.id,
+                        data: object.data,
+                        class: object.classname,
+                        **combined_html_options
+                ) do %>
   <%= content.presence || object.input %>
   <% if object.indeterminate %>
     <span data-pb-checkbox-icon-span="true" class="pb_checkbox_indeterminate">

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -1,5 +1,9 @@
-<%= pb_content_tag(:div,
-    class: object.classname + object.error_class) do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname + object.error_class,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <div class="input_wrapper">
     <% if content.present? %>
       <%= content %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md

@@ -2,4 +2,4 @@ The `defaultDate`/`default_date` prop has a null or empty string value by defaul
 
 If you use a Date object without UTC time standardization the Date Picker kit may misinterpret that date as yesterdays date (consequence of timezone differentials and the Javascript Date Object constructor).  See [this GitHub issue for more information](https://github.com/powerhome/playbook/issues/1167) and the anti-pattern examples below.
 
-You can leverage the `defaultDate`/`default_date` prop with custom logic in your filter or controller files where the determination of the default value changes based on user interaction. The page can load with an initial default date picker value or placeholder text, then after filter submission save the submitted values as the "new default" (via state or params).
+

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb

@@ -6,8 +6,14 @@
 
 ] %>
 
-<%= pb_rails("list", props: { enable_drag: true, items: initial_items }) do %>
-  <% initial_items.each do |item| %>
-    <%= pb_rails("list/item", props:{drag_id: item[:id]}) do %><%= item[:name] %><% end %>
+<%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
+  <%= pb_rails("draggable/draggable_container") do %>
+    <%= pb_rails("list", props: {ordered: false}) do %>
+        <% initial_items.each do |item| %>
+            <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
+                <%= pb_rails("list/item") do %><%= item[:name] %><% end %>
+            <% end %>
+        <% end %>
+    <% end %>
   <% end %>
 <% end %>

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

@@ -11,7 +11,6 @@ examples:
   rails:
   - draggable_default_rails: Default
   - draggable_with_list_rails: Draggable with List Kit
-  - draggable_with_selectable_list_rails: Draggable with SelectableList Kit
   - draggable_with_cards_rails: Draggable with Cards
 
 

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -1,14 +1,19 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
     <% if object.label.present? %>
         <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
     <% end %>
     <div class="dropdown_wrapper<%= error_class %>" style="position: relative">
-        <input
-            data-default-value="<%= input_default_value %>"
-            id="dropdown-selected-option"
-            name="<%= object.name %>"
-            style="display: none"
-            <%= object.required ? "required" : ""%>
+        <input 
+            data-default-value="<%= input_default_value %>" 
+            id="dropdown-selected-option" 
+            name="<%= object.name %>" 
+            style="display: none" 
+            <%= object.required ? "required" : ""%> 
         />
         <% if content.present? %>
             <%= content.presence %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb

@@ -1,15 +1,20 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
     <%= pb_rails("list", props: {ordered: false, borderless: false}) do %>
-            <% if content.present? %>
+            <% if content.present? %> 
                 <%= content.presence %>
-            <% else %>
+            <% else %> 
                 <%= pb_rails("list/item", props: {
-                    display: "flex",
-                    justify_content: "center",
-                    padding:"xs",
-                    }) do %>
+                    display: "flex", 
+                    justify_content: "center", 
+                    padding:"xs", 
+                    }) do %> 
                         <%= pb_rails("body", props: {text: "No option"}) %>
                 <% end %>
             <% end %>
-    <% end %>
-<% end %>
+    <% end %>        
+<% end %>