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

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 (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 %>