playbook_ui 15.3.0.pre.alpha.PLAY2407daterangeinlineshowcurrentyear12138 → 15.3.0.pre.alpha.PLAY2565formkitsubmitfix11681

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

@@ -159,62 +159,6 @@ 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}}/>)
@@ -273,28 +217,4 @@ const PopoverTestAppendToSelector = () => {
     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

@@ -1 +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.
+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.

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

@@ -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/global_props/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/visual_guidelines/width) for more information on the global width prop.

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

@@ -216,33 +216,4 @@ $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

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

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

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

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

@@ -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/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.
+`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.

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

@@ -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/tokens/colors" 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/visual_guidelines" 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

@@ -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 on our <a href="https://playbook.powerapp.cloud/global_props/max_width" target="_blank">Max Width Global Props page.</a>
+Table can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>

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

@@ -31,7 +31,6 @@ 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
@@ -72,7 +71,6 @@ 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

@@ -29,7 +29,6 @@ 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

@@ -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 'text'
-          "text"
+          # Default to 'pointer'
+          "pointer"
         end
       end
 

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

@@ -165,13 +165,6 @@
     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 {

data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx

@@ -171,108 +171,4 @@ test('typeahead with defaultValue with focus behavior', async () => {
     expect(focusedOption).toBeInTheDocument()
     expect(focusedOption).toHaveTextContent('Red')
   })
-})
-
-test('typeahead with grouped options and defaultValue focus behavior', async () => {
-  const groupedOptions = [
-    {
-      label: "Warm Colors",
-      options: [
-        { label: "Red", value: "#FF0000" },
-        { label: "Orange", value: "#FFA500" },
-        { label: "Yellow", value: "#FFFF00" }
-      ]
-    },
-    {
-      label: "Cool Colors",
-      options: [
-        { label: "Blue", value: "#0000FF" },
-        { label: "Teal", value: "#008080" },
-        { label: "Cyan", value: "#00FFFF" }
-      ]
-    },
-    {
-      label: "Fun Shades",
-      options: [
-        { label: "Pink", value: "#FFC0CB" },
-        { label: "Magenta", value: "#FF00FF" },
-        { label: "Purple", value: "#800080" }
-      ]
-    }
-  ]
-
-  render(
-    <Typeahead
-        data={{ testid: 'grouped-options-focus-test' }}
-        defaultValue={[{ label: "Pink", value: "#FFC0CB" }]}
-        options={groupedOptions}
-    />
-  )
-
-  const kit = screen.getByTestId('grouped-options-focus-test')
-  const inputDiv = kit.querySelector(".typeahead-kit-select__single-value")
-  expect(inputDiv).toHaveTextContent("Pink")
-})
-
-test('multi-value pills have tabIndex for keyboard navigation', () => {
-  render(
-    <Typeahead
-        data={{ testid: 'pill-tabindex-test' }}
-        defaultValue={[options[0], options[1]]}
-        isMulti
-        options={options}
-    />
-  )
-
-  const kit = screen.getByTestId('pill-tabindex-test')
-  const pills = kit.querySelectorAll('.pb_form_pill_kit')
-  
-  expect(pills.length).toBe(2)
-  
-  pills.forEach(pill => {
-    expect(pill).toHaveAttribute('tabIndex', '0')
-  })
-})
-
-test('multi-value pills show focus indicator when focused', async () => {
-  render(
-    <Typeahead
-        data={{ testid: 'pill-focus-indicator-test' }}
-        defaultValue={[options[0], options[1], options[2]]}
-        isMulti
-        options={options}
-    />
-  )
-
-  const kit = screen.getByTestId('pill-focus-indicator-test')
-  const pills = kit.querySelectorAll('.pb_form_pill_kit')
-  
-  expect(pills.length).toBe(3)
-  
-  const firstPill = pills[0]
-  firstPill.focus()
-  
-  expect(document.activeElement).toBe(firstPill)
-})
-
-test('multi-value badges have tabIndex and focus class when focused', () => {
-  render(
-    <Typeahead
-        data={{ testid: 'badge-focus-test' }}
-        defaultValue={[options[0], options[1]]}
-        isMulti
-        multiKit="badge"
-        options={options}
-    />
-  )
-
-  const kit = screen.getByTestId('badge-focus-test')
-  const badges = kit.querySelectorAll('.pb_badge_kit_primary')
-  
-  expect(badges.length).toBe(2)
-
-  badges.forEach(badge => {
-    expect(badge).toHaveAttribute('tabIndex', '0')
-  })
-})
-
+})

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -144,18 +144,6 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   // Create a ref to access React Select instance
   const selectRef = useRef<any>(null)
 
-  // Helper function to flatten grouped options if custom groups are used
-  const flattenOptions = (options: any[]): any[] => {
-    if (!options) return []
-    
-    return options.reduce((acc, option) => {
-      if (option.options && Array.isArray(option.options)) {
-        return [...acc, ...option.options]
-      }
-      return [...acc, option]
-    }, [])
-  }
-
   // Configure focus on selected option using React Select's API
   const handleMenuOpen = () => {
     setTimeout(() => {
@@ -171,18 +159,17 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
 
         const options = props.options
         if (options) {
-          // Flatten grouped options to find the matching option and find matching option
-          const flatOptions = flattenOptions(options)
-          
-          const targetOption = flatOptions.find((option: any) => {
+          // Find the index of the current value
+          const focusedIndex = options.findIndex((option: any) => {
             const optionValue = props.getOptionValue ? props.getOptionValue(option) : option.value
             const currentOptionValue = props.getOptionValue ? props.getOptionValue(currentValue) : currentValue.value
             return optionValue === currentOptionValue
           })
           
-          if (targetOption) {
+          if (focusedIndex >= 0 && options[focusedIndex]) {
             // Use React Select's internal state to set focused option
             if (selectRef.current && selectRef.current.setState) {
+              const targetOption = options[focusedIndex]
               selectRef.current.setState({
                 focusedOption: targetOption,
                 focusedValue: null
@@ -192,12 +179,11 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
               setTimeout(() => {
                 if (selectRef.current && selectRef.current.menuListRef) {
                   const menuElement = selectRef.current.menuListRef
-                  // Find the focused option using React Select's class
-                  const focusedElement = menuElement.querySelector('.typeahead-kit-select__option--is-focused')
-                  
-                  if (focusedElement) {
-                    const optionTop = focusedElement.offsetTop
-                    const optionHeight = focusedElement.offsetHeight
+                  if (menuElement && menuElement.children && menuElement.children[focusedIndex]) {
+                    // Calculate the position of the selected option and scroll the menu container
+                    const optionElement = menuElement.children[focusedIndex] as HTMLElement
+                    const optionTop = optionElement.offsetTop
+                    const optionHeight = optionElement.offsetHeight
                     const menuHeight = menuElement.clientHeight
                     
                     // Set the menu's scrollTop to position the selected option in the middle

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx

@@ -12,12 +12,11 @@ type Props = {
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
   removeProps: any,
   selectProps: any,
-  isFocused?: boolean,
 }
 
 
 const MultiValue = (props: Props) => {
-  const { removeProps, isFocused } = props
+  const { removeProps } = props
   const { imageUrl, label } = props.data
   const { dark, multiKit, pillColor, truncate, wrapped } = props.selectProps
 
@@ -30,28 +29,6 @@ const MultiValue = (props: Props) => {
 
   if (typeof imageUrl === 'string') formPillProps.avatarUrl = imageUrl
 
-  // Add className for focus state
-  const pillClassName = isFocused ? 'pb_form_pill_or_badge_focused' : ''
-
-  // Handle keyboard events on the pill itself to enable deletion when using tabIndex
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    if (event.key === 'Backspace' || event.key === 'Delete') {
-      event.preventDefault()
-      event.stopPropagation()
-      // Trigger the remove action from react-select
-      if (removeProps && removeProps.onClick) {
-        removeProps.onClick(event as any)
-      }
-    }
-    // if arrow keys used, transfer focus to input so react-select can take over
-    else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
-      const selectInput = event.currentTarget.closest('.pb_typeahead_kit')?.querySelector('input')
-      if (selectInput instanceof HTMLInputElement) {
-        selectInput.focus()
-      }
-    }
-  }
-
   return (
     <components.MultiValueContainer
         className="text_input_multivalue_container"
@@ -59,11 +36,8 @@ const MultiValue = (props: Props) => {
     >
       {multiKit === 'badge' &&
         <Badge
-            className={pillClassName}
             closeProps={removeProps}
-            htmlOptions={{onKeyDown:handleKeyDown}}
             removeIcon
-            tabIndex={0}
             text={label}
             variant="primary"
         />
@@ -72,15 +46,12 @@ const MultiValue = (props: Props) => {
       {multiKit !== 'badge' && imageUrl &&
         <FormPill
             avatarUrl={imageUrl}
-            className={pillClassName}
             closeProps={removeProps}
             color={pillColor}
             dark={dark}
-            htmlOptions={{onKeyDown:handleKeyDown}}
             marginRight="xs"
             name={label}
             size={multiKit === 'smallPill' ? 'small' : ''}
-            tabIndex={0}
             text=''
             truncate={truncate}
             wrapped={wrapped}
@@ -90,15 +61,12 @@ const MultiValue = (props: Props) => {
 
       {multiKit !== 'badge' && !imageUrl &&
         <FormPill
-            className={pillClassName}
             closeProps={removeProps}
             color={pillColor}
             dark={dark}
-            htmlOptions={{onKeyDown:handleKeyDown}}
             marginRight="xs"
             name=''
             size={multiKit === 'smallPill' ? 'small' : ''}
-            tabIndex={0}
             text={label}
             truncate={truncate}
             wrapped={wrapped}

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_options.html.erb

@@ -25,77 +25,11 @@
   ]
 %>
 
-<%
-  grouped_options = [
-    {
-      label: "Warm Colors",
-      options: [
-        { label: "Red", value: "#FF0000" },
-        { label: "Orange", value: "#FFA500" },
-        { label: "Yellow", value: "#FFFF00" },
-        { label: "Coral", value: "#FF7F50" },
-        { label: "Gold", value: "#FFD700" }
-      ]
-    },
-    {
-      label: "Cool Colors",
-      options: [
-        { label: "Blue", value: "#0000FF" },
-        { label: "Teal", value: "#008080" },
-        { label: "Cyan", value: "#00FFFF" },
-        { label: "Navy", value: "#000080" },
-        { label: "Turquoise", value: "#40E0D0" }
-      ]
-    },
-    {
-      label: "Neutrals",
-      options: [
-        { label: "White", value: "#FFFFFF" },
-        { label: "Black", value: "#000000" },
-        { label: "Gray", value: "#808080" },
-        { label: "Beige", value: "#F5F5DC" },
-        { label: "Silver", value: "#C0C0C0" }
-      ]
-    },
-    {
-      label: "Earth Tones",
-      options: [
-        { label: "Brown", value: "#A52A2A" },
-        { label: "Olive", value: "#808000" },
-        { label: "Forest Green", value: "#228B22" },
-        { label: "Tan", value: "#D2B48C" },
-        { label: "Maroon", value: "#800000" }
-      ]
-    },
-    {
-      label: "Fun Shades",
-      options: [
-        { label: "Pink", value: "#FFC0CB" },
-        { label: "Magenta", value: "#FF00FF" },
-        { label: "Lime", value: "#00FF00" },
-        { label: "Purple", value: "#800080" },
-        { label: "Indigo", value: "#4B0082" }
-      ]
-    }
-  ]
-%>
-
-
 <%= pb_rails("typeahead", props: {
     default_options: [{ label: 'Gray', value: '#808080' }],
     id: "typeahead-default-value",
     options: options,
-    label: "Default Value with basic options",
-    name: :foo,
-    is_multi: false
-  })
-%>
-
-<%= pb_rails("typeahead", props: {
-    default_options:[{ label: "Pink", value: "#FFC0CB" }],
-    id: "typeahead-default-value-grouped-options",
-    options: grouped_options,
-    label: "Default Value with grouped options",
+    label: "Colors",
     name: :foo,
     is_multi: false
   })

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_value.jsx

@@ -27,76 +27,14 @@ const options = [
   { label: 'Coral', value: '#FF7F50' }
 ]
 
-const groupedOptions = [
-  {
-    label: "Warm Colors",
-    options: [
-      { label: "Red", value: "#FF0000" },
-        { label: "Orange", value: "#FFA500" },
-        { label: "Yellow", value: "#FFFF00" },
-        { label: "Coral", value: "#FF7F50" },
-        { label: "Gold", value: "#FFD700" }
-      ]
-    },
-    {
-      label: "Cool Colors",
-      options: [
-        { label: "Blue", value: "#0000FF" },
-        { label: "Teal", value: "#008080" },
-        { label: "Cyan", value: "#00FFFF" },
-        { label: "Navy", value: "#000080" },
-        { label: "Turquoise", value: "#40E0D0" }
-      ]
-    },
-    {
-      label: "Neutrals",
-      options: [
-        { label: "White", value: "#FFFFFF" },
-        { label: "Black", value: "#000000" },
-        { label: "Gray", value: "#808080" },
-        { label: "Beige", value: "#F5F5DC" },
-        { label: "Silver", value: "#C0C0C0" }
-      ]
-    },
-    {
-      label: "Earth Tones",
-      options: [
-        { label: "Brown", value: "#A52A2A" },
-        { label: "Olive", value: "#808000" },
-        { label: "Forest Green", value: "#228B22" },
-        { label: "Tan", value: "#D2B48C" },
-        { label: "Maroon", value: "#800000" }
-      ]
-    },
-    {
-      label: "Fun Shades",
-      options: [
-        { label: "Pink", value: "#FFC0CB" },
-        { label: "Magenta", value: "#FF00FF" },
-        { label: "Lime", value: "#00FF00" },
-        { label: "Purple", value: "#800080" },
-        { label: "Indigo", value: "#4B0082" }
-      ]
-    }
-  ]
-
 const TypeaheadDefaultValue = (props) => {
   return (
-    <>
-      <Typeahead
-          defaultValue={options[10]}
-          label="Default Value with basic options"
-          options={options}
-          {...props}
-      />
-      <br />
-      <Typeahead
-          defaultValue={{ label: "Pink", value: "#FFC0CB" }}
-          label="Default Value with grouped options"
-          options={groupedOptions}
-          {...props}
-      />
-    </>
+    <Typeahead
+        defaultValue={options[10]}
+        label="Colors"
+        options={options}
+        {...props}
+    />
   )
 }
 

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.md

@@ -1 +1 @@
-For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/global_props/truncate) for more information on the truncate global prop.
+For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.

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

@@ -1,7 +1,6 @@
 examples:
   rails:
     - typeahead_default: Default
-    - typeahead_custom_options: With Grouped Options
     - typeahead_default_options: With Default Options
     - typeahead_with_context: With Context
     - typeahead_with_pills: With Pills
@@ -21,7 +20,6 @@ examples:
 
   react:
     - typeahead_default: Default
-    - typeahead_custom_options: With Grouped Options
     - typeahead_default_value: With Default Value
     - typeahead_react_hook: React Hook
     - typeahead_with_highlight: With Highlight

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

@@ -16,5 +16,4 @@ export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.j
 export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
 export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'
 export { default as TypeaheadPreserveInput } from './_typeahead_preserve_input.jsx'
-export { default as TypeaheadDefaultValue } from './_typeahead_default_value.jsx'
-export { default as TypeaheadCustomOptions } from './_typeahead_custom_options.jsx'
+export { default as TypeaheadDefaultValue } from './_typeahead_default_value.jsx'