RubyGems - playbook_ui - Versions diffs - 13.27.0.pre.alpha.PLAY888Cardkithighlightoverflowtooltiperror2930 → 13.27.0.pre.alpha.PLAY1122fixMultipleUserspaddingoverflow2844 - Mend

playbook_ui 13.27.0.pre.alpha.PLAY888Cardkithighlightoverflowtooltiperror2930 → 13.27.0.pre.alpha.PLAY1122fixMultipleUserspaddingoverflow2844

Files changed (164) hide show

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

@@ -63,10 +63,6 @@
       width: 100%;
       [class*="pb_dropdown_option"] {
-        padding-left: $space_sm;
-        padding-right: $space_sm;
-        padding-top: $space_xs;
-        padding-bottom: $space_xs;
         cursor: pointer;
         &:hover {
           background-color: $border_light;
@@ -81,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

@@ -4,6 +4,7 @@ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../uti
 import { globalProps } from "../utilities/globalProps";
 import { GenericObject } from "../types";
+import Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
 import DropdownContainer from "./subcomponents/DropdownContainer";
@@ -113,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
@@ -234,7 +233,9 @@ const Dropdown = (props: DropdownProps) => {
                   options?.map((option: GenericObject) => (
                     <Dropdown.Option key={option.id}
                         option={option}
-                    />
+                    >
+                      <Body text={option.label} />
+                    </Dropdown.Option>
                   ))}
               </DropdownContainer>
             </>

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_rails.html.erb → _dropdown_with_custom_display.html.erb} RENAMED Viewed

@@ -48,17 +48,12 @@
     <%= pb_rails("dropdown/dropdown_container") do %>
         <% options.each do |option| %>
             <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
-              <%= pb_rails("flex", props: {
-                align: "center",
-                justify: "between",
-                }) do %>
-                  <%= pb_rails("flex/flex_item") do %>
-                      <%= pb_rails("user", props: {name: option[:label], align:"left", avatar: true, orientation:"horizontal", territory:option[:territory], title: option[:title]}) %>
-                  <% end %>
-                  <%= pb_rails("flex/flex_item") do %>
-                      <%= pb_rails("badge", props: {rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
-                  <% end %>
-              <% end %>
+                <%= pb_rails("flex/flex_item") do %>
+                    <%= pb_rails("user", props: {name: option[:label], align:"left", avatar: true, orientation:"horizontal", territory:option[:territory], title: option[:title]}) %>
+                <% end %>
+                <%= pb_rails("flex/flex_item") do %>
+                    <%= pb_rails("badge", props: {rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
+                <% end %>
             <% end %>
         <% end %>
     <% end %>

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Dropdown, User, Flex, FlexItem, Badge, Avatar } from '../../'
+import { Dropdown, User, FlexItem, Badge, Avatar } from '../../'
 const DropdownWithCustomDisplay = (props) => {
   const [selectedOption, setSelectedOption] = useState();
@@ -69,10 +69,7 @@ const DropdownWithCustomDisplay = (props) => {
           <Dropdown.Option key={option.id}
               option={option}
           >
-            <Flex
-                align="center"
-                justify="between"
-            >
+            <>
               <FlexItem>
                 <User
                     align="left"
@@ -96,7 +93,7 @@ const DropdownWithCustomDisplay = (props) => {
                     }`}
                 />
               </FlexItem>
-            </Flex>
+            </>
           </Dropdown.Option>
         ))}
     </Dropdown>

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"
     }
   ]
@@ -30,19 +30,14 @@
     <%= pb_rails("dropdown/dropdown_container") do %>
         <% options.each do |option| %>
             <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
-              <%= pb_rails("flex", props: {
-                align: "center",
-                justify: "between",
-                }) do %>
-                  <%= pb_rails("flex/flex_item") do %>
-                      <%= pb_rails("flex") do %>
-                          <%= pb_rails("icon", props: {icon: option[:icon]}) %>
-                          <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
-                      <% end %>
-                  <% end %>
-                  <%= pb_rails("flex/flex_item") do %>
-                      <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
-                  <% end %>
+                <%= pb_rails("flex/flex_item") do %>
+                    <%= pb_rails("flex") do %>
+                        <%= pb_rails("icon", props: {icon: option[:icon]}) %>
+                        <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
+                    <% end %>
+                <% end %>
+                <%= pb_rails("flex/flex_item") do %>
+                    <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
                 <% end %>
             <% end %>
         <% end %>

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

@@ -38,10 +38,7 @@ const DropdownWithCustomOptions = (props) => {
           <Dropdown.Option key={option.id}
               option={option}
           >
-            <Flex
-                align="center"
-                justify="between"
-            >
+            <>
               <FlexItem>
                 <Flex>
                   <Icon icon={option.icon}
@@ -55,7 +52,7 @@ const DropdownWithCustomOptions = (props) => {
                     text={option.areaCode}
                 />
               </FlexItem>
-            </Flex>
+            </>
           </Dropdown.Option>
         ))}
     </Dropdown>

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~~ ~~paddingX~~ is ~~set~~ to ~~`sm`~~ ~~and~~ ~~paddingY~~ is set to `xs`, ~~but~~ ~~this~~ padding can be ~~overridden~~ ~~using~~ ~~our~~ ~~global~~ ~~padding props~~. In this example we are setting ~~the option~~ padding to `sm~~` all around.~~
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"
     }
   ]
@@ -32,20 +32,15 @@
     <%= pb_rails("dropdown/dropdown_container", props:{max_width:"xs"}) do %>
         <% options.each do |option| %>
             <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
-              <%= pb_rails("flex", props: {
-                align: "center",
-                justify: "between",
-                }) do %>
                 <%= pb_rails("flex/flex_item") do %>
-                      <%= pb_rails("flex") do %>
-                          <%= pb_rails("icon", props: {icon: option[:icon]}) %>
-                          <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
-                      <% end %>
-                  <% end %>
-                  <%= pb_rails("flex/flex_item") do %>
-                      <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
-                  <% end %>
-              <% end %>
+                    <%= pb_rails("flex") do %>
+                        <%= pb_rails("icon", props: {icon: option[:icon]}) %>
+                        <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
+                    <% end %>
+                <% end %>
+                <%= pb_rails("flex/flex_item") do %>
+                    <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
+                <% end %>
             <% end %>
         <% end %>
     <% end %>

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

@@ -51,10 +51,7 @@ const [selectedOption, setSelectedOption] = useState();
           <Dropdown.Option key={option.id}
               option={option}
           >
-            <Flex
-                align="center"
-                justify="between"
-            >
+            <>
               <FlexItem>
                 <Flex>
                   <Icon icon={option.icon}
@@ -68,7 +65,7 @@ const [selectedOption, setSelectedOption] = useState();
                     text={option.areaCode}
                 />
               </FlexItem>
-            </Flex>
+            </>
           </Dropdown.Option>
         ))}
       </Dropdown.Container>

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.test.jsx CHANGED Viewed

@@ -203,5 +203,5 @@ test('selected option on click', () => {
   const kit = screen.getByTestId(testId)
   const option = kit.querySelector('.pb_dropdown_option_list')
   option.click()
-  expect(option).toHaveClass('pb_dropdown_option_selected')
+  expect(option).toHaveClass('pb_dropdown_option_selected p_xs')
 })

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",
@@ -10,12 +10,18 @@
         padding:"none",
         cursor: "pointer"
         }) do %>
-            <div class="dropdown_option_wrapper">
+            <%= pb_rails("flex", props: {
+                align: "center",
+                classname:"dropdown_option_wrapper",
+                justify: "between",
+                padding_x:"sm",
+                padding_y:"xxs",
+                }) do %>
                 <% if content.present? %>
                     <%= content.presence %>
                 <% else %>
                     <%= pb_rails("body", props: {text: object.option[:label]}) %>
                 <% end %>
-            </div>
+            <% end %>
     <% end %>
 <% end %>

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

@@ -3,15 +3,19 @@
 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
         Hash(prop(:data)).merge("dropdown_option_label": option)
       end
+      def padding_helper
+        " p_xs"
+      end
       def classname
-        generate_classname("pb_dropdown_option", "list")
+        generate_classname("pb_dropdown_option", "list") + padding_helper
       end
     end
   end

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

@@ -10,6 +10,7 @@ import { globalProps, GlobalProps } from "../../utilities/globalProps";
 import DropdownContext from "../context";
+import Flex from "../../pb_flex/_flex";
 import Body from "../../pb_body/_body";
 import ListItem from "../../pb_list/_list_item";
 import { GenericObject } from "../../types";
@@ -38,6 +39,7 @@ const DropdownOption = (props: DropdownOptionProps) => {
     id,
     key,
     option,
+    padding = "xs",
   } = props;
   const {
@@ -48,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;
@@ -75,7 +75,7 @@ const DropdownOption = (props: DropdownOptionProps) => {
       selectedClass,
       focusedClass,
     ),
-    globalProps(props),
+    globalProps(props, {padding}),
     className
   );
@@ -96,12 +96,20 @@ const DropdownOption = (props: DropdownOptionProps) => {
           key={option.label}
           padding="none"
       >
+        <Flex
+            align="center"
+            className="dropdown_option_wrapper"
+            justify="between"
+            paddingX="sm"
+            paddingY="xxs"
+        >
           {children ?
-          <div className="dropdown_option_wrapper">{children}</div> :
+              children :
               <Body dark={dark}
                   text={option.label}
               />
           }
+        </Flex>
       </ListItem>
     </div>
   );

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

@@ -14,12 +14,3 @@ examples:
   - fixed_confirmation_toast_positions: Click to Show Positions
   - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
-  swift:
-  - fixed_confirmation_toast_default_swift: Default
-  - fixed_confirmation_toast_multi_line_swift: Multi Line
-  #- fixed_confirmation_toast_close_swift: Click to Close
-  #- fixed_confirmation_toast_positions_swift: Click to Show Positions
-  - fixed_confirmation_toast_children_swift: Children
-  #- fixed_confirmation_toast_dismiss_with_timer_swift: Timer
-  - fixed_confirmation_toast_props_swift: ""

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb CHANGED Viewed

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
     <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true }) %>
     <% if content %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb CHANGED Viewed

@@ -16,7 +16,7 @@
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
   <%= form.typeahead :example_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
-  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
+  <%= form.telephone_field :example_phone_field, props: { label: true } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
   <%= form.number_field :example_number_field, props: { label: true } %>
   <%= form.search_field :example_search_field, props: { label: true } %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb CHANGED Viewed

@@ -15,7 +15,7 @@
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
   <%= form.text_field :example_text_field, props: { label: true, required: true } %>
-  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
+  <%= form.telephone_field :example_phone_field, props: { label: true, required: true, validation: { pattern: "[0-9]{3}-[0-9]{3}-[0-9]{4}", message: "Please enter a valid phone number (example: 888-888-8888)." } } %>
   <%= form.email_field :example_email_field, props: { label: true, required: true } %>
   <%= form.number_field :example_number_field, props: { label: true, required: true } %>
   <%= form.search_field :example_project_number, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>

data/app/pb_kits/playbook/pb_form_group/_form_group.scss CHANGED Viewed

@@ -33,17 +33,6 @@
         outline-offset: -1px;
       }
     }
-    .text_input_wrapper_add_on .add-on-right [class^=pb_card_kit] {
-      border-bottom-right-radius: 0;
-      border-top-right-radius: 0;
-      border-right-width: 0;
-    }
-    .text_input_wrapper_add_on .add-on-right.border_left_on .card-right-aligned {
-      border-left: 1px $border_light solid;
-      &.dark {
-        border-left: 1px rgba($white, 0.15) solid;
-      }
-    }
   }
   & > [class^=pb_text_input_kit]:not(:first-child) {
@@ -51,10 +40,6 @@
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
     }
-    .text_input_wrapper_add_on .add-on-left [class^=pb_card_kit] {
-      border-bottom-left-radius: 0;
-      border-top-left-radius: 0;
-    }
   }
   & > [class^=pb_button_kit]:not(:last-child) {

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb CHANGED Viewed

@@ -1,3 +1,8 @@
-<%= 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("icon", props: { dark: object.dark, icon: object.icon, fixed_width: true }) %>
 <% end %>