RubyGems - playbook_ui - Versions diffs - 13.27.0.pre.alpha.testingcollapsible2917 → 13.27.0 - Mend

playbook_ui 13.27.0.pre.alpha.testingcollapsible2917 → 13.27.0

Files changed (75) hide show

data/app/pb_kits/playbook/pb_card/card.rb CHANGED Viewed

@@ -15,7 +15,7 @@ module Playbook
                            values: %w[xs sm md lg xl none rounded],
                            default: "md"
       prop :background, type: Playbook::Props::Enum,
-                        values: %w[white light dark product_1_background product_1_highlight product_2_background product_2_highlight product_3_background product_3_highlight product_4_background product_4_highlight product_5_background product_5_highlight product_6_background product_6_highlight product_7_background product_7_highlight product_8_background product_8_highlight product_9_background product_9_highlight product_10_background product_10_highlight windows siding doors solar roofing gutters insulation none success_subtle warning_subtle error_subtle info_subtle neutral_subtle],
+                        values: %w[white light dark product_1_background product_1_highlight product_2_background product_2_highlight product_3_background product_3_highlight product_4_background product_4_highlight product_5_background product_5_highlight product_6_background product_6_highlight product_7_background product_7_highlight product_8_background product_8_highlight product_9_background product_9_highlight product_10_background product_10_highlight windows siding doors solar roofing gutters insulation none],
                         default: "none"
       def classname

data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb CHANGED Viewed

@@ -42,23 +42,3 @@
     dark: true
   }) %>
 <% end %>
-<%= pb_rails("title", props: { text: "Subtle Status Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
-<%= pb_rails("card", props: { background: "success_subtle", margin_bottom: "sm" })  do %>
-  <%= pb_rails("body", props: {
-    text: "Success Subtle"
-  }) %>
-<% end %>
-<%= pb_rails("card", props: { background: "warning_subtle", margin_bottom: "sm" })  do %>
-  <%= pb_rails("body", props: {
-    text: "Warning Subtle"
-  }) %>
-<% end %>
-<%= pb_rails("card", props: { background: "info_subtle", margin_bottom: "sm" })  do %>
-  <%= pb_rails("body", props: {
-    text: "Info Subtle"
-  }) %>
-<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx CHANGED Viewed

@@ -90,47 +90,7 @@ const CardBackground = (props) => {
         />
       </Card>
-      <Title
-          {...props}
-          marginBottom="sm"
-          size={4}
-          tag="h4"
-          text="Subtle Status Colors"
-      />
-      <Card
-          background="success_subtle"
-          marginBottom="sm"
-          {...props}
-      >
-        <Body
-            text="Success Subtle"
-            {...props}
-        />
-      </Card>
-      <Card
-          background="warning_subtle"
-          marginBottom="sm"
-          {...props}
-      >
-        <Body
-            text="Warning Subtle"
-            {...props}
-        />
-      </Card>
-      <Card
-          background="info_subtle"
-          marginBottom="sm"
-          {...props}
-      >
-        <Body
-            text="Info Subtle"
-            {...props}
-        />
-      </Card>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_card/docs/_card_background.md CHANGED Viewed

	@@ -1 +1 @@
1	- Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a> under Product Colors ~~and Status: Subtle Variations~~.
1	+ Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a> under Product Colors.

data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb CHANGED Viewed

@@ -67,4 +67,4 @@
   <%= pb_rails("card/card_body", props: { padding: "md",  }) do %>
     Body
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_header.md CHANGED Viewed

	@@ -1 +1 @@
1	- Card headers pass category, product, and background colors only. List of all category, product, and background colors can be viewed <a href="https://playbook.powerapp.cloud/~~visual_guidelines/colors~~" target="_blank">here</a>.
1	+ Card headers pass category, product, and background colors only. List of all category, product, and background colors can be viewed <a href="https://playbook.powerapp.cloud/utilities" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md CHANGED Viewed

	@@ -1 +1 @@
1	- Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/~~visual_guidelines/colors~~" target="_blank">here</a>.
1	+ Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/utilities" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx CHANGED Viewed

@@ -9,7 +9,6 @@ import CollapsibleContent from './child_kits/CollapsibleContent'
 import CollapsibleMain from './child_kits/CollapsibleMain'
 import CollapsibleContext from './context'
 import { IconSizes } from "../pb_icon/_icon"
-import CollapsibleIcon from './child_kits/CollapsibleIcon'
 type CollapsibleProps = {
@@ -53,15 +52,12 @@ const Collapsible = ({
   if (CollapsibleParent.length !== 2) {
     throw new Error('Collapsible requires <CollapsibleMain> and <CollapsibleContent> to function properly.')
   }
-  const FirstChild = CollapsibleParent[0]
-  const SecondChild = CollapsibleParent[1]
-  const Main = FirstChild.type === CollapsibleMain ? FirstChild : null
-  const Content = SecondChild.type === CollapsibleContent ? SecondChild : null
+  const Main = CollapsibleParent[0]
+  const Content = CollapsibleParent[1]
-  const { children: mainChildren = null, ...mainProps } = Main ? Main.props : {}
-  const { children: contentChildren = null, ...contentProps } = Content ? Content.props : {}
+  const { children: mainChildren, ...mainProps } = Main.props
+  const { children: contentChildren, ...contentProps } = Content.props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -79,19 +75,13 @@ const Collapsible = ({
           className={classes}
           id={id}
       >
-        {Main ? (
-          <CollapsibleMain {...mainProps}>
-            {mainChildren}
-          </CollapsibleMain>
-        ) : (
-          FirstChild
-        )}
+        <CollapsibleMain {...mainProps}>
+          {mainChildren}
+        </CollapsibleMain>
-        {Content && (
-          <CollapsibleContent {...contentProps}>
-            {contentChildren}
-          </CollapsibleContent>
-        )}
+        <CollapsibleContent {...contentProps}>
+          {contentChildren}
+        </CollapsibleContent>
       </div>
     </CollapsibleContext.Provider>
   )
@@ -99,6 +89,5 @@ const Collapsible = ({
 Collapsible.Main = CollapsibleMain
 Collapsible.Content = CollapsibleContent
-Collapsible.Icon = CollapsibleIcon
 export default Collapsible

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx CHANGED Viewed

@@ -7,9 +7,27 @@ import { globalProps } from '../../utilities/globalProps'
 import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
-import { IconSizes } from "../../pb_icon/_icon"
+import Icon, { IconSizes } from "../../pb_icon/_icon"
 import CollapsibleContext from '../context'
-import CollapsibleIcon from './CollapsibleIcon'
+type colorMap = {
+  default: string,
+  light: string,
+  lighter: string,
+  link: string,
+  error: string,
+  success: string
+}
+const colorMap = {
+  default: "#242B42",
+  light: "#687887",
+  lighter: "#C1CDD6",
+  link: "#0056CF",
+  error: "#FF2229",
+  success: "#00CA74",
+}
 type CollapsibleMainProps = {
   children: React.ReactNode[] | React.ReactNode,
@@ -20,6 +38,60 @@ type CollapsibleMainProps = {
 }
 type IconColors =  "default" | "light" | "lighter" | "link" | "error" | "success"
+type IconProps = {
+  collapsed: boolean | (()=> void)
+  icon?: string[] | string
+  iconColor?: IconColors
+  iconSize?: IconSizes
+  onIconClick?: ()=> void
+}
+const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, onIconClick }: IconProps) => {
+  const color = colorMap[iconColor]
+  const showIcon = (icon: string |string[]) => {
+    if (typeof icon === "string") {
+      return [icon, icon]
+    }
+    return icon
+  }
+  const handleIconClick = (e: React.MouseEvent<HTMLElement>) => {
+    if (onIconClick) {
+    e.stopPropagation();
+    onIconClick()
+    }
+  }
+  return (
+    <>
+      {collapsed ? (
+        <div
+            className="icon_wrapper"
+            key={icon ? showIcon(icon)[0] : "chevron-down"}
+            onClick={(e)=> handleIconClick(e)}
+            style={{ verticalAlign: "middle", color: color }}
+        >
+          <Icon icon={icon ? showIcon(icon)[0] : "chevron-down"}
+              size={iconSize}
+          />
+        </div>
+      ) : (
+        <div
+            className="icon_wrapper"
+            key={icon ? showIcon(icon)[1] : "chevron-up"}
+            onClick={(e)=> handleIconClick(e)}
+            style={{ verticalAlign: "middle", color: color }}
+        >
+          <Icon icon={icon ? showIcon(icon)[1] : "chevron-up"}
+              size={iconSize}
+          />
+        </div>
+      )}
+    </>
+  );
+}
 const CollapsibleMain = ({
   children,
   className,
@@ -48,7 +120,7 @@ const CollapsibleMain = ({
         >
           <FlexItem>{children}</FlexItem>
           <FlexItem>
-            <CollapsibleIcon
+            <ToggleIcon
                 collapsed={collapsed as () => void}
                 icon={icon as string[] | string}
                 iconColor={iconColor as IconColors}

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

@@ -7,7 +7,6 @@ examples:
   - collapsible_icons: Custom Icons
   - collapsible_external_controls: Toggle Collapsible With External Controls
   - collapsible_external_controls_multiple: Toggle All Collapsibles With One Control
-  - collapsible_custom_main_rails: Custom Main Section
   react:
   - collapsible_default: Default
@@ -15,8 +14,6 @@ examples:
   - collapsible_color: Icon Color
   - collapsible_icons: Custom Icons
   - collapsible_state: useCollapsible Hook
-  - collapsible_custom_main: Custom Main Section
   swift:
   - collapsible_default_swift: Default

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

@@ -2,5 +2,4 @@ export { default as CollapsibleDefault } from './_collapsible_default.jsx'
 export { default as CollapsibleSize } from './_collapsible_size.jsx'
 export { default as CollapsibleColor } from './_collapsible_color.jsx'
 export { default as CollapsibleIcons } from './_collapsible_icons.jsx'
-export { default as CollapsibleState } from './_collapsible_state.jsx'
-export { default as CollapsibleCustomMain } from './_collapsible_custom_main.jsx'
+export {default as CollapsibleState } from './_collapsible_state.jsx'

data/app/pb_kits/playbook/pb_collapsible/index.js CHANGED Viewed

@@ -75,23 +75,13 @@ export default class PbCollapsible extends PbEnhancedElement {
     this.displayUpArrow()
   }
-  toggleArrows(showDownArrow) {
-    const downArrow = this.element.querySelector(DOWN_ARROW_SELECTOR);
-    const upArrow = this.element.querySelector(UP_ARROW_SELECTOR);
-    if (downArrow) {
-      downArrow.style.display = showDownArrow ? 'inline-block' : 'none';
-    }
-    if (upArrow) {
-      upArrow.style.display = showDownArrow ? 'none' : 'inline-block';
-    }
-  }
   displayDownArrow() {
-    this.toggleArrows(true);
+    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'inline-block'
+    this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'none'
   }
   displayUpArrow() {
-    this.toggleArrows(false);
-  }
+    this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'inline-block'
+    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'none'
+   }
 }

data/app/pb_kits/playbook/pb_detail/_detail_mixins.scss CHANGED Viewed

@@ -15,7 +15,7 @@ $pb_dark_detail_colors: (
   light:          $text_dk_light,
   default:        $text_dk_default,
   lighter:        $text_dk_lighter,
-  link:           $active_dark,
+  link:           $primary,
   error:          $error_dark,
   success:        $text_dk_success_sm,
 );

data/app/pb_kits/playbook/pb_docs/kit_example.html.erb CHANGED Viewed

@@ -23,11 +23,11 @@
         <ul>
           <% hide_button = type == "rails" ? 'flex' : 'none' %>
             <li>
-            <%= pb_rails("button", props: { id:"copy-html-#{example_key}", icon: "copy", text: "Copy HTML", classname: dark ? "dark" : "", variant: "link", size: "sm", display: hide_button }) %>
+            <%= pb_rails("button", props: { id:"copy-html-#{example_key}", icon: "copy", text: "Copy HTML", variant: "link", size: "sm", display: hide_button }) %>
             </li>
           <li>
-            <%= pb_rails("button", props: { icon: "code", classname: dark ? "dark" : "", id:"toggle-open-opened", text: "Close Code", variant: "link", size: "sm", display: "none" }) %>
-            <%= pb_rails("button", props: { icon: "code", classname: dark ? "dark" : "", id:"toggle-open-closed", text: "Show Code", variant: "link", size: "sm" }) %>
+            <%= pb_rails("button", props: { icon: "code", id:"toggle-open-opened", text: "Close Code", variant: "link", size: "sm", display: "none" }) %>
+            <%= pb_rails("button", props: { icon: "code", id:"toggle-open-closed", text: "Show Code", variant: "link", size: "sm" }) %>
           </li>
         </ul>
       </div>

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss CHANGED Viewed

@@ -77,9 +77,8 @@
         }
         &[class*="selected"] {
           background-color: $primary;
-          color: $white;
           [class^="pb_body"],
-          [class^="pb_title_kit"], a {
+          [class^="pb_title_kit"] {
             color: $white !important;
           }
           &:hover {

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx CHANGED Viewed

@@ -114,10 +114,8 @@ const Dropdown = (props: DropdownProps) => {
     setIsDropDownClosed(isClosed)
    },[isClosed])
-  const filteredOptions = options?.filter((option: GenericObject) => {
-    const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
-    return String(label).toLowerCase().includes(filterItem.toLowerCase());
-  }
+  const filteredOptions = options?.filter((option: GenericObject) =>
+    option.label.toLowerCase().includes(filterItem.toLowerCase())
   );
 // For keyboard accessibility: Set focus within dropdown to selected item if it exists

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb CHANGED Viewed

@@ -1,8 +1,8 @@
 <%
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'United States', value: 'United States' },
+    { label: 'Canada', value: 'Canada' },
+    { label: 'Pakistan', value: 'Pakistan' },
   ]
 %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md CHANGED Viewed

	@@ -1 +1 @@
1	- ~~This~~ kit's `options` ~~prop requires an~~ array of ~~objects,~~ each of ~~which~~ ~~will~~ be ~~used~~ as ~~the~~ selectable ~~options~~ within ~~the~~ dropdown. Each ~~option~~ object can ~~support~~ ~~any~~ ~~number~~ of key-value pairs, but ~~each~~ ~~must~~ contain `label` and `value`.
1	+ The Dropdown kit accepts an `options` array and renders each object from that array as a selectable option within a dropdown container. `options` is a required prop and must be an array of objects. Each object can contain as many key/value pairs as needed but MUST contain 'label' and 'value' as the only required items within each object.

data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_subcomponent_structure_rails.html.erb → _dropdown_subcomponent_structure.html.erb} RENAMED Viewed

@@ -1,8 +1,8 @@
 <%
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'United States', value: 'United States' },
+    { label: 'Canada', value: 'Canada' },
+    { label: 'Pakistan', value: 'Pakistan' },
   ]
 %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md CHANGED Viewed

@@ -1,6 +1,7 @@
-The dropdown is built using all of the following subcomponents:
+The dropdown comes with the following subcomponents that can be used to achieve various levels of customization:
-`Dropdown.Trigger` is the UI component that users interact with to toggle the dropdown.
-`Dropdown.Container` is the floating container that wraps the list of dropdown options.
-`Dropdown.Option` renders options that are passed to the container.
-Each of these subcomponents can be altered using global props and/or their respective props. See doc examples below for more information on each.
+`Dropdown. Trigger` / `dropdown/dropdown_trigger`
+`Dropdown.Container`/ `dropdown/dropdown_container`
+`Dropdown.Option` / `dropdown/dropdown_option`
+See the code snippet below for a visual on how to use the kit with subcomponents. Each subcomponent allows for GlobalProps in addition to any subcomponent specfic props.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md CHANGED Viewed

@@ -1,5 +1,5 @@
-Optionally utilize `customDisplay` on the `Dropdown.Trigger` subcomponent to customize its content after an option is selected. The component passed to customDisplay will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
+The `customDisplay` prop can be used to customize the display of the selected item by allowing devs to pass in a component that will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
-The `placeholder` prop can also be used to customize the placeholder text for the default `Dropdown.Trigger`.
+The `placeholder` prop can also be used to customize the placeholder text for the default Trigger.
-The `onSelect` prop returns the selected option as an object to be utilized by the dev. In this example we are using the `onSelect` to set a state with the selected option and using it to customize the `customDisplay`.
+The `onSelect` prop is a function that gives the dev one argument: the selected option. In this example we are using the `onSelect` to set a state with the selected option and using it to customize the `customDisplay`.

data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_options_rails.html.erb → _dropdown_with_custom_options.html.erb} RENAMED Viewed

@@ -5,21 +5,21 @@
       value: "United States",
       areaCode: "+1",
       icon: "🇺🇸",
-      id: "us"
+      id: "United-states"
     },
     {
       label: "Canada",
       value: "Canada",
       areaCode: "+1",
       icon: "🇨🇦",
-      id: "ca"
+      id: "canada"
     },
     {
       label: "Pakistan",
       value: "Pakistan",
       areaCode: "+92",
       icon: "🇵🇰",
-      id: "pk"
+      id: "pakistan"
     }
   ]

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md CHANGED Viewed

	@@ -1 +1 @@
1	- `Dropdown~~.Option`~~ ~~subcomponent~~ ~~accepts~~ ~~any~~ ~~child~~ ~~components~~ to ~~customize~~ ~~the~~ ~~options'~~ ~~contents~~ ~~and~~ ~~display~~. By ~~default,~~ ~~options~~ are ~~Body~~ kit ~~text~~ ~~that~~ is ~~set~~ by ~~the~~ ~~`label`~~ ~~value~~ ~~from~~ ~~the~~ ~~`option`~~ ~~object~~.
1	+ The Dropdown also allows for custom options that can be passed in as children to the `Dropdown.Option` subcomponent. If no children are passed to `Dropdown.Option`, the kit will render each option as text within a Body kit by default.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb CHANGED Viewed

@@ -1,8 +1,8 @@
 <%
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'United States', value: 'United States' },
+    { label: 'Canada', value: 'Canada' },
+    { label: 'Pakistan', value: 'Pakistan' },
   ]
 %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md CHANGED Viewed

	@@ -1 +1 @@
1	- By default, ~~dropdown~~ option ~~padding~~ is set to `xs`, ~~but~~ ~~this~~ padding can be ~~overridden~~ ~~using~~ ~~our~~ ~~global~~ ~~prop spacing token~~. In this example we are ~~increasing~~ ~~the option~~ padding to `sm`.
1	+ By default, the padding on each option in the dropdown is set to `xs`. The `padding` Global Props however can be used to override this default. In this example, we are setting padding to `sm`.

data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_trigger_rails.html.erb → _dropdown_with_custom_trigger.html.erb} RENAMED Viewed

@@ -5,21 +5,21 @@
       value: "United States",
       areaCode: "+1",
       icon: "🇺🇸",
-      id: "us"
+      id: "United-states"
     },
     {
       label: "Canada",
       value: "Canada",
       areaCode: "+1",
       icon: "🇨🇦",
-      id: "ca"
+      id: "canada"
     },
     {
       label: "Pakistan",
       value: "Pakistan",
       areaCode: "+92",
       icon: "🇵🇰",
-      id: "pk"
+      id: "pakistan"
     }
   ]

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md CHANGED Viewed

	@@ -1 +1 @@
1	- ~~Optionally~~ ~~replace~~ ~~the~~ ~~default~~ ~~trigger's~~ ~~select~~ ~~element~~ by passing ~~child~~ ~~components directly~~ to the `Dropdown.Trigger`.
1	+ The Dropdown can also be given a custom Trigger by passing children to the `Dropdown.Trigger` subcomponent as shown in this example. Here we are using the IconCircle kit.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb CHANGED Viewed

@@ -1,8 +1,8 @@
 <%
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'United States', value: 'United States' },
+    { label: 'Canada', value: 'Canada' },
+    { label: 'Pakistan', value: 'Pakistan' },
   ]
 %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md CHANGED Viewed

	@@ -1 +1 @@
1	- The ~~top-level~~ ~~Dropdown~~ ~~component~~ ~~optionally~~ ~~accepts~~ ~~any~~ string ~~through~~ a ~~`label`~~ ~~prop~~ to ~~produce~~ a label ~~above~~ ~~your~~ ~~trigger element~~.
1	+ The optional `label` prop takes a string value that if present will render that string as the label for the Dropdown.

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

@@ -1,12 +1,12 @@
 examples:
   rails:
   - dropdown_default: Default
-  - dropdown_subcomponent_structure_rails: Subcomponent Structure
+  - dropdown_subcomponent_structure: Subcomponent Structure
   - dropdown_with_label: With Label
-  - dropdown_with_custom_options_rails: Custom Options
-  - dropdown_with_custom_display_rails: Custom Display
-  - dropdown_with_custom_trigger_rails: Custom Trigger
-  - dropdown_with_custom_padding: Custom Option Padding
+  - dropdown_with_custom_options: Custom Options
+  - dropdown_with_custom_display: Custom Display
+  - dropdown_with_custom_trigger: Custom Trigger
+  - dropdown_with_custom_padding: Custom Padding for Dropdown Options
   react:
   - dropdown_default: Default
@@ -15,7 +15,7 @@ examples:
   - dropdown_with_custom_options: Custom Options
   - dropdown_with_custom_display: Custom Display
   - dropdown_with_custom_trigger: Custom Trigger
-  - dropdown_with_custom_padding: Custom Option Padding
+  - dropdown_with_custom_padding: Custom Padding for Dropdown Options
   # - dropdown_with_autocomplete: Autocomplete
   # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
   # - dropdown_with_external_control: useDropdown Hook

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

@@ -8,7 +8,6 @@
         <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
     <% end %>
     <div class="dropdown_wrapper" style="position: relative">
-    <input type="hidden" name="<%= object.name %>" id="dropdown-selected-option" value=""/>
     <% if content.present? %>
         <%= content.presence %>
     <% else %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb CHANGED Viewed

@@ -6,7 +6,6 @@ module Playbook
       prop :options, type: Playbook::Props::Array,
                      default: []
       prop :label, type: Playbook::Props::String
-      prop :name, type: Playbook::Props::String
       def data
         Hash(prop(:data)).merge(pb_dropdown: true)

data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb CHANGED Viewed

@@ -2,7 +2,7 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.option[:id],
+    id: object.id,
     **combined_html_options) do %>
     <%= pb_rails("list/item", props: {
         display: "flex",

data/app/pb_kits/playbook/pb_dropdown/dropdown_option.rb CHANGED Viewed

@@ -3,7 +3,7 @@
 module Playbook
   module PbDropdown
     class DropdownOption < Playbook::KitBase
-      prop :option, type: Playbook::Props::HashProp
+      prop :option, type: Playbook::Props::String
       prop :id, type: Playbook::Props::String
       def data

data/app/pb_kits/playbook/pb_dropdown/index.js CHANGED Viewed

@@ -37,10 +37,8 @@ export default class PbDropdown extends PbEnhancedElement {
   handleOptionClick(event) {
     const option = event.target.closest(OPTION_SELECTOR);
-    const hiddenInput = this.element.querySelector("#dropdown-selected-option");
     if (option) {
       const value = option.dataset.dropdownOptionLabel;
-      hiddenInput.value = JSON.parse(value).id;
       this.onOptionSelected(value, option);
     }
   }
@@ -101,6 +99,7 @@ export default class PbDropdown extends PbEnhancedElement {
       option.classList.remove("pb_dropdown_option_selected");
     });
     selectedOption.classList.add("pb_dropdown_option_selected");
+    console.log(`Selected value: ${value}`);
   }
   get target() {

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx CHANGED Viewed

@@ -50,10 +50,8 @@ const DropdownOption = (props: DropdownOptionProps) => {
     selected,
   } = useContext(DropdownContext);
-  const isItemMatchingFilter = (option: GenericObject) => {
-    const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
-    return String(label).toLowerCase().includes(filterItem.toLowerCase());
-  }
+  const isItemMatchingFilter = (option: GenericObject) =>
+    option?.label.toLowerCase().includes(filterItem.toLowerCase());
   if (!isItemMatchingFilter(option)) {
     return null;