RubyGems - playbook_ui - Versions diffs - 15.3.0.pre.alpha.PLAY2322popoverconditionalrender11766 → 15.3.0.pre.alpha.PLAY2532flexboxdefaultresponsive12209 - Mend

playbook_ui 15.3.0.pre.alpha.PLAY2322popoverconditionalrender11766 → 15.3.0.pre.alpha.PLAY2532flexboxdefaultresponsive12209

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (151) hide show

data/app/pb_kits/playbook/pb_popover/_popover.scss CHANGED Viewed

@@ -56,15 +56,3 @@
 .pb_popover_reference_wrapper {
   display: inline-block;
 }
-// Temporary code to replicate bug - DO NOT MERGE
-@media (max-width: 619px) {
-  :root {
-    --is-pwa: 1;
-  }
-}
-@media (min-width: 620px) {
-  :root {
-    --is-pwa: 0;
-  }
-}

data/app/pb_kits/playbook/pb_popover/_popover.tsx CHANGED Viewed

@@ -24,6 +24,7 @@ import { uniqueId } from '../utilities/object';
 type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth' | 'maxHeight' | 'minHeight'>
 type PbPopoverProps = {
+  appendTo?: string;
   aria?: { [key: string]: string };
   className?: string;
   closeOnClick?: "outside" | "inside" | "any";
@@ -62,6 +63,25 @@ const popoverModifiers = ({
   return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers;
 };
+const getAppendTarget = (
+  appendTo: string | undefined,
+  targetId: string
+): HTMLElement => {
+  if (!appendTo || appendTo === "body") return document.body;
+  if (appendTo === "parent") {
+    const referenceWrapper = document.querySelector(`#reference-${targetId}`);
+    if (referenceWrapper?.parentElement) {
+      return referenceWrapper.parentElement;
+    }
+  }
+  const selectorMatch = document.querySelector(appendTo);
+  if (selectorMatch instanceof HTMLElement) return selectorMatch;
+  return document.body;
+};
 const Popover = (props: PbPopoverProps) => {
   const {
     aria = {},
@@ -113,7 +133,7 @@ const Popover = (props: PbPopoverProps) => {
   return (
     <Popper
-        modifiers={popoverModifiers({ modifiers, offset })}
+        modifiers={popoverModifiers({ modifiers, offset: offset || false })}
         placement={placement}
         referenceElement={referenceElement}
     >
@@ -154,6 +174,7 @@ const Popover = (props: PbPopoverProps) => {
 const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
   const [targetId] = useState(uniqueId('id-'))
   const {
+    appendTo,
     className,
     children,
     modifiers = [],
@@ -260,10 +281,10 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
         {show &&
           (usePortal ? (
             <>
-              {ReactDOM.createPortal(
-                popoverComponent,
-                document.querySelector(portal)
-              )}
+                {ReactDOM.createPortal(
+                  popoverComponent,
+                  getAppendTarget(appendTo, targetId)
+                )}
             </>
           ) : (
             { popoverComponent }

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.jsx ADDED Viewed

@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+import { PbReactPopover, CircleIconButton, Body, Flex } from "playbook-ui";
+const PopoverAppendTo = (props) => {
+  const [showParentPopover, setShowParentPopover] = useState(false);
+  const [showSelectorPopover, setShowSelectorPopover] = useState(false);
+  const parentPopoverReference = (
+    <CircleIconButton
+        icon="info"
+        onClick={() => setShowParentPopover(!showParentPopover)}
+        variant="secondary"
+    />
+  );
+  const selectorPopoverReference = (
+    <CircleIconButton
+        icon="info"
+        onClick={() => setShowSelectorPopover(!showSelectorPopover)}
+        variant="secondary"
+    />
+  );
+  return (
+    <>
+      <Flex
+          marginBottom="md"
+          orientation="row"
+          vertical="center"
+          {...props}
+      >
+        <Body text="Click info for more details" />
+        &nbsp;
+        <PbReactPopover
+            appendTo="parent"
+            offset
+            placement="top"
+            reference={parentPopoverReference}
+            show={showParentPopover}
+            {...props}
+        >
+          {'I\'m a popover. I have been appended to my parent element.'}
+        </PbReactPopover>
+      </Flex>
+      <Flex
+          orientation="row"
+          vertical="center"
+          {...props}
+      >
+        <Body text="Click info for more details" />
+        &nbsp;
+        <PbReactPopover
+            appendTo=".kit-show-wrapper"
+            offset
+            placement="top"
+            reference={selectorPopoverReference}
+            show={showSelectorPopover}
+            {...props}
+        >
+          {'I\'m a popover. I have been appended to the .kit-show-wrapper.'}
+        </PbReactPopover>
+      </Flex>
+    </>
+  );
+};
+export default PopoverAppendTo;

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to_react.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ By default, the popover tooltip attaches to the `<body>`. To attach it elsewhere, use the `appendTo` prop. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.

data/app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx CHANGED Viewed

@@ -3,14 +3,11 @@ import React, { useState } from 'react'
 import Button from '../../pb_button/_button'
 import Flex from '../../pb_flex/_flex'
 import PbReactPopover from '../../pb_popover/_popover'
-// Temporary code to replicate bug - DO NOT MERGE (Revert example when done)
-import useSmallScreenIndicator from './hook/useSmallScreenIndicator'
 const PopoverClose = (props) => {
   const [showInsidePopover, setInsideShowPopover] = useState(false)
   const [showOutsidePopover, setOutsideShowPopover] = useState(false)
   const [showAnyPopover, setAnyShowPopover] = useState(false)
-  const isPwa = useSmallScreenIndicator()
   const handleInsideShouldClosePopover = (shouldClosePopover) => {
     setInsideShowPopover(!shouldClosePopover)
@@ -62,10 +59,6 @@ const PopoverClose = (props) => {
     />
   )
-  if (isPwa) {
-    return null
-  }
   return (
     <Flex spacing="between">
       <PbReactPopover

data/app/pb_kits/playbook/pb_popover/docs/example.yml CHANGED Viewed

@@ -15,3 +15,4 @@ examples:
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
     - popover_actionable_content: With Actionable Content
+    - popover_append_to: Append To

data/app/pb_kits/playbook/pb_popover/docs/index.js CHANGED Viewed

@@ -4,3 +4,4 @@ export { default as PopoverClose } from './_popover_close.jsx'
 export { default as PopoverZIndex } from './_popover_z_index.jsx'
 export { default as PopoverScrollHeight } from './_popover_scroll_height.jsx'
 export { default as PopoverActionableContent } from './_popover_actionable_content.jsx'
+export { default as PopoverAppendTo } from './_popover_append_to.jsx'

data/app/pb_kits/playbook/pb_popover/popover.test.js CHANGED Viewed

@@ -159,6 +159,62 @@ const PopoverTestClicktoClose3 = () => {
   )
 };
+//Test Popover with appendTo="parent"
+const PopoverTestAppendToParent = () => {
+  const [mockState, setMockState] = React.useState(false)
+  const togglePopover = () => {
+    setMockState(!mockState)
+  }
+  const popoverReference = (
+    <Button onClick={togglePopover}
+        text="Click Me"
+    />
+  );
+  return (
+    <div data-testid="parent-container"
+        id="parent-container"
+    >
+      <PbReactPopover
+          appendTo="parent"
+          offset
+          reference={popoverReference}
+          show={mockState}
+      >
+        {"Appended to parent"}
+      </PbReactPopover>
+    </div>
+  )
+};
+//Test Popover with appendTo CSS selector
+const PopoverTestAppendToSelector = () => {
+  const [mockState, setMockState] = React.useState(false)
+  const togglePopover = () => {
+    setMockState(!mockState)
+  }
+  const popoverReference = (
+    <Button onClick={togglePopover}
+        text="Click Me"
+    />
+  );
+  return (
+    <div data-testid="custom-container"
+        id="custom-container"
+    >
+      <PbReactPopover
+          appendTo="#custom-container"
+          offset
+          reference={popoverReference}
+          show={mockState}
+      >
+        {"Appended to custom container"}
+      </PbReactPopover>
+    </div>
+  )
+};
   test("renders Popover", () => {
     render(<PopoverTest data={{ testid: testId}}/>)
@@ -217,4 +273,28 @@ const PopoverTestClicktoClose3 = () => {
     fireEvent.click(btn);
     expect(kit).not.toBeInTheDocument;
+  });
+  test("renders Popover with appendTo parent", () => {
+    render(<PopoverTestAppendToParent data={{ testid: testId}}/>)
+    const btn = screen.getByText(/click me/i)
+    fireEvent.click(btn);
+    const kit = screen.getByText("Appended to parent");
+    expect(kit).toBeInTheDocument();
+    // Check that the popover is rendered inside the parent container
+    const parentContainer = screen.getByTestId("parent-container");
+    expect(parentContainer).toContainElement(kit);
+  });
+  test("renders Popover with appendTo CSS selector", () => {
+    render(<PopoverTestAppendToSelector data={{ testid: testId}}/>)
+    const btn = screen.getByText(/click me/i)
+    fireEvent.click(btn);
+    const kit = screen.getByText("Appended to custom container");
+    expect(kit).toBeInTheDocument();
+    // Check that the popover is rendered inside the custom container
+    const customContainer = screen.getByTestId("custom-container");
+    expect(customContainer).toContainElement(kit);
   });

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_description.md CHANGED Viewed

	@@ -1 +1 @@
1	- NOTE: All editors have a default max-width of "md". Use our [Max Width global prop](https://playbook.powerapp.cloud/~~visual_guidelines~~/max_width) to override this default, as necessary.
1	+ NOTE: All editors have a default max-width of "md". Use our [Max Width global prop](https://playbook.powerapp.cloud/global_props/max_width) to override this default, as necessary.

data/app/pb_kits/playbook/pb_section_separator/docs/_description.md CHANGED Viewed

@@ -1,3 +1,3 @@
 Section separator is a divider line that compartmentalizes content, typically used on cards or white backgrounds.
-To ensure that the section separator is properly rendered, please be sure to use our global  `width` prop to set width to 100%. [See here](https://playbook.powerapp.cloud/visual_guidelines/width) for more information on the global width prop.
+To ensure that the section separator is properly rendered, please be sure to use our global  `width` prop to set width to 100%. [See here](https://playbook.powerapp.cloud/global_props/width) for more information on the global width prop.

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss CHANGED Viewed

@@ -216,4 +216,33 @@ $pb_selectable_paddings: (
       background: $error;
     }
   }
+}
+.pb_selectable_card_kit_disabled,
+.pb_selectable_card_kit_checked_disabled {
+  >label {
+    cursor: not-allowed;
+    @media (hover:hover) {
+      &:hover {
+        box-shadow: none !important;
+      }
+    }
+  }
+}
+.pb_selectable_card_kit_disabled>label {
+  border-color: $border_light !important;
+  .dark & {
+    border-color: $border_dark !important;
+  }
+}
+.pb_selectable_card_kit_checked_disabled>label {
+  border-color: $primary !important;
+  .dark & {
+    border-color: $primary_action_dark !important;
+  }
 }

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius_rails.md CHANGED Viewed

	@@ -1 +1 @@
1	- The `border_radius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/~~visual_guidelines~~/border_radius) tokens, with `sm` as default.
1	+ The `border_radius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/global_props/border_radius) tokens, with `sm` as default.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius_react.md CHANGED Viewed

	@@ -1 +1 @@
1	- The `borderRadius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/~~visual_guidelines~~/border_radius) tokens, with `sm` as default.
1	+ The `borderRadius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/global_props/border_radius) tokens, with `sm` as default.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.md CHANGED Viewed

@@ -1,3 +1,3 @@
 Use the `stack` and `gap` props in conjunction to layer multiple Skeleton loading bars on top of each other.
-`stack` accepts a number that correlates to the number of rows (1 is default), and `gap` accepts a portion of our [spacing props](https://playbook.powerapp.cloud/visual_guidelines/spacing) (`xxs` as default, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`) to set the pixel distance between each row. `gap` will not do anything if there is no corresponding `stack` prop set.
+`stack` accepts a number that correlates to the number of rows (1 is default), and `gap` accepts a portion of our [spacing props](https://playbook.powerapp.cloud/global_props/spacing) (`xxs` as default, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`) to set the pixel distance between each row. `gap` will not do anything if there is no corresponding `stack` prop set.

data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.md CHANGED Viewed

@@ -1,3 +1,3 @@
-Side highlight can take product, status, and category colors. To view full list of colors, visit <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">token colors</a>.
+Side highlight can take product, status, and category colors. To view full list of colors, visit <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">token colors</a>.
 Note: Only use category colors for categories. Do not mix it with product or status colors.

data/app/pb_kits/playbook/pb_table/docs/_table_sm.md CHANGED Viewed

@@ -1,3 +1,3 @@
 Use table size `"sm"` when data density is a priority. Smaller row height enables the user to view more data without the need for scrolling.
-Table can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>
+Table can leverage the max-width property. Learn more on our <a href="https://playbook.powerapp.cloud/global_props/max_width" target="_blank">Max Width Global Props page.</a>

data/app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible.html.erb ADDED Viewed

@@ -0,0 +1,63 @@
+<% content = capture do %>
+    <%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
+        <%= pb_rails("body", props: { text: "Nested content inside a Table Row" }) %>
+    <% end %>
+<% end %>
+<%= pb_rails("table", props: { size: "sm" }) do %>
+  <%= pb_rails("table/table_head") do %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
+          <%= pb_rails("table/table_header", props: { text: ""}) %>
+       <% end %>
+  <% end %>
+  <%= pb_rails("table/table_body") do %>
+      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, id: "11" }) do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1", html_options: { onclick: "toggleArrows()" }}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2", html_options: { onclick: "toggleArrows()" }}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3", html_options: { onclick: "toggleArrows()" }}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4", html_options: { onclick: "toggleArrows()" }}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5", html_options: { onclick: "toggleArrows()" }}) %>
+          <%= pb_rails("table/table_cell", props: { text_align: "right", html_options: { onclick: "toggleArrows()" }}) do %>
+            <%= pb_rails("icon", props: {id: "chevron-icon-down", icon: "chevron-down", fixed_width: true, color: "primary" }) %>
+            <%= pb_rails("icon", props: {id: "chevron-icon-up", icon: "chevron-up", fixed_width: true, color: "primary" }) %>
+          <% end %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+  <% end %>
+<% end %>
+<script>
+    const downArrow = document.getElementById("chevron-icon-down");
+    const upArrow = document.getElementById("chevron-icon-up");
+    upArrow.style.display = upArrow.style.display === 'none' ? 'inline-block' : 'none';
+    function toggleArrows() {
+        if (downArrow) {
+            downArrow.style.display = downArrow.style.display === 'none' ? 'inline-block' : 'none';
+        }
+        if (upArrow) {
+            upArrow.style.display = upArrow.style.display === 'none' ? 'inline-block' : 'none';
+        }
+    }
+</script>

data/app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible.jsx ADDED Viewed

@@ -0,0 +1,89 @@
+import React, { useState } from 'react'
+import Table from '../_table'
+import Icon from '../../pb_icon/_icon'
+import Card from '../../pb_card/_card'
+import Body from '../../pb_body/_body'
+const TableWithDynamicCollapsible = (props) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const handleToggleArrows = () => {
+    setIsOpen(!isOpen)
+  }
+  const Content = () => {
+    return (
+      <Card
+          borderNone
+          borderRadius="none"
+          padding="md"
+          {...props}
+      >
+        <Body {...props}>Nested content inside a Table Row</Body>
+      </Card>
+    );
+  };
+  return (
+    <Table
+        size="sm"
+        {...props}
+    >
+      <Table.Head>
+        <Table.Row>
+          <Table.Header>{'Column 1'}</Table.Header>
+          <Table.Header>{'Column 2'}</Table.Header>
+          <Table.Header>{'Column 3'}</Table.Header>
+          <Table.Header>{'Column 4'}</Table.Header>
+          <Table.Header>{'Column 5'}</Table.Header>
+          <Table.Header>{''}</Table.Header>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        <Table.Row collapsible
+            collapsibleContent={<Content />}
+            {...props}
+        >
+          <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 1'}</Table.Cell>
+          <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 2'}</Table.Cell>
+          <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 3'}</Table.Cell>
+          <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 4'}</Table.Cell>
+          <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 5'}</Table.Cell>
+          <Table.Cell
+              htmlOptions={{ onClick: handleToggleArrows }}
+              textAlign="right"
+          >
+            {
+              <Icon
+                  color="primary"
+                  fixedWidth
+                  icon={isOpen ? 'chevron-up' : 'chevron-down'}
+              />}
+          </Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>{'Value 1'}</Table.Cell>
+          <Table.Cell>{'Value 2'}</Table.Cell>
+          <Table.Cell>{'Value 3'}</Table.Cell>
+          <Table.Cell>{'Value 4'}</Table.Cell>
+          <Table.Cell>{'Value 5'}</Table.Cell>
+          <Table.Cell>{''}</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>{'Value 1'}</Table.Cell>
+          <Table.Cell>{'Value 2'}</Table.Cell>
+          <Table.Cell>{'Value 3'}</Table.Cell>
+          <Table.Cell>{'Value 4'}</Table.Cell>
+          <Table.Cell>{'Value 5'}</Table.Cell>
+          <Table.Cell>{''}</Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  )
+}
+export default TableWithDynamicCollapsible

data/app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible_rails.md ADDED Viewed

@@ -0,0 +1,4 @@
+The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsible_content` prop to add any content to the collapsible Row.
+Please be aware that you will need to pass in an `id` to any table rows you want to be collapsible. Make sure every `id` is unique if you are using multipe collapsibles.
+Follow this example to make the icons dynamic following the state of the collapsible.

data/app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible_react.md ADDED Viewed

@@ -0,0 +1,3 @@
+The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsibleContent` prop to add any content to the collapsible Row.
+Follow this example to make the icons dynamic following the state of the collapsible.

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

@@ -31,6 +31,7 @@ examples:
     - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
     - table_outer_padding: Outer Padding
     - table_with_collapsible: Table with Collapsible
+    - table_with_dynamic_collapsible: Table with Dynamic Collapsible
     - table_with_collapsible_with_custom_click: Table with Collapsible with Custom Click
     - table_with_collapsible_with_custom_content_rails: Table with Collapsible with Custom Content
     - table_with_collapsible_with_nested_rows_rails: Table with Collapsible with Nested Rows
@@ -71,6 +72,7 @@ examples:
     - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
     - table_outer_padding: Outer Padding
     - table_with_collapsible: Table with Collapsible
+    - table_with_dynamic_collapsible: Table with Dynamic Collapsible
     - table_with_collapsible_with_custom_click: Table with Collapsible with Custom Click
     - table_with_collapsible_with_custom_content: Table with Collapsible with Custom Content
     - table_with_collapsible_with_nested_rows: Table with Collapsible with Nested Rows

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

@@ -29,6 +29,7 @@ export { default as TableStickyLeftColumns } from './_table_sticky_left_columns.
 export { default as TableStickyRightColumns } from './_table_sticky_right_columns.jsx'
 export { default as TableStickyColumns } from './_table_sticky_columns.jsx'
 export { default as TableWithCollapsible } from './_table_with_collapsible.jsx'
+export { default as TableWithDynamicCollapsible } from './_table_with_dynamic_collapsible.jsx'
 export { default as TableWithCollapsibleWithCustomContent } from './_table_with_collapsible_with_custom_content.jsx'
 export { default as TableWithCollapsibleWithNestedTable } from './_table_with_collapsible_with_nested_table.jsx'
 export { default as TableWithCollapsibleWithNestedRows } from './_table_with_collapsible_with_nested_rows.jsx'

data/app/pb_kits/playbook/pb_text_input/text_input.rb CHANGED Viewed

@@ -99,8 +99,8 @@ module Playbook
           # Convert camelCase (ex. notAllowed) to kebab-case (ex. not-allowed)
           cursor.to_s.gsub(/([a-z\d])([A-Z])/, '\1-\2').downcase
         else
-          # Default to 'pointer'
-          "pointer"
+          # Default to 'text'
+          "text"
         end
       end

data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss CHANGED Viewed

@@ -165,6 +165,13 @@
     line-height: 16.5px;
     letter-spacing: normal;
   }
+  // Add focus indicator for multi-value pills
+  .pb_form_pill_or_badge_focused {
+    outline: $primary solid 2px;
+    outline-offset: -1px;
+  }
   &.inline {
     &:not(:hover) {
       .text_input {