RubyGems - playbook_ui - Versions diffs - 13.27.0.pre.alpha.PLAY1250fixTextInpputaddonborderradiusformgroup2862 → 13.27.0.pre.alpha.PLAY11782916 - Mend

playbook_ui 13.27.0.pre.alpha.PLAY1250fixTextInpputaddonborderradiusformgroup2862 → 13.27.0.pre.alpha.PLAY11782916

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 (64) hide show

data/app/pb_kits/playbook/pb_card/_card_mixin.scss CHANGED Viewed

@@ -17,6 +17,11 @@ $additional_colors: (
   "light": $bg_light,
   "white": $white,
   "none": none,
+  "success_subtle": $success_subtle,
+  "warning_subtle": $warning_subtle,
+  "error_subtle": $error_subtle,
+  "info_subtle": $info_subtle,
+  "neutral_subtle": $neutral_subtle,
 );
 $background_colors: map-merge($product_colors, $additional_colors);
 $pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors), $category_colors);

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],
+                        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],
                         default: "none"
       def classname

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

@@ -42,3 +42,23 @@
     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,7 +90,47 @@ 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.
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.

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/~~utilities~~" 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/visual_guidelines/colors" 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/~~utilities~~" 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/visual_guidelines/colors" target="_blank">here</a>.

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:           $primary,
+  link:           $active_dark,
   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", variant: "link", size: "sm", display: hide_button }) %>
+            <%= pb_rails("button", props: { id:"copy-html-#{example_key}", icon: "copy", text: "Copy HTML", classname: dark ? "dark" : "", variant: "link", size: "sm", display: hide_button }) %>
             </li>
           <li>
-            <%= 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" }) %>
+            <%= 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" }) %>
           </li>
         </ul>
       </div>

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

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

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

@@ -114,8 +114,10 @@ const Dropdown = (props: DropdownProps) => {
     setIsDropDownClosed(isClosed)
    },[isClosed])
-  const filteredOptions = options?.filter((option: GenericObject) =>
-    option.label.toLowerCase().includes(filterItem.toLowerCase())
+  const filteredOptions = options?.filter((option: GenericObject) => {
+    const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
+    return String(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' },
-    { label: 'Canada', value: 'Canada' },
-    { label: 'Pakistan', value: 'Pakistan' },
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
   ]
 %>

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

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

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

@@ -1,7 +1,6 @@
-The dropdown comes with the following subcomponents that can be used to achieve various levels of customization:
+The dropdown is built using all of the following subcomponents:
-`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.
+`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.

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

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

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.md ADDED Viewed

@@ -0,0 +1,6 @@
+The dropdown is built using all of the following required subcomponents:
+`dropdown/dropdown_trigger` is the UI component that users interact with to toggle the dropdown.
+`dropdown/dropdown_container` is the floating container that wraps the list of dropdown options.
+`dropdown/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.

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

@@ -1,5 +1,5 @@
-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.
+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 `placeholder` prop can also be used to customize the placeholder text for the default Trigger.
+The `placeholder` prop can also be used to customize the placeholder text for the default `Dropdown.Trigger`.
-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`.
+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`.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md ADDED Viewed

@@ -0,0 +1,5 @@
+Optionally utilize `custom_display` on the `dropdown/dropdown_trigger` subcomponent to customize its content after an option is selected. The component passed to custom_display 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/dropdown_trigger`.
+The dropdown follows the typical rails pattern of utilizing hidden inputs for form submission. The hidden input value is the selected options' id.

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

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

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

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

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ `dropdown/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.

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' },
-    { label: 'Canada', value: 'Canada' },
-    { label: 'Pakistan', value: 'Pakistan' },
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
   ]
 %>

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

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

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

	@@ -1 +1 @@
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.~~
1	+ Optionally replace the default trigger's select element by passing child components directly to the `Dropdown.Trigger`.

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

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

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Optionally replace the default trigger's select element by passing child components directly to the `dropdown/dropdown_trigger`.

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' },
-    { label: 'Canada', value: 'Canada' },
-    { label: 'Pakistan', value: 'Pakistan' },
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
   ]
 %>

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

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

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

@@ -1,12 +1,12 @@
 examples:
   rails:
   - dropdown_default: Default
-  - dropdown_subcomponent_structure: Subcomponent Structure
+  - dropdown_subcomponent_structure_rails: Subcomponent Structure
   - dropdown_with_label: With Label
-  - 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
+  - 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
   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 Padding for Dropdown Options
+  - dropdown_with_custom_padding: Custom Option Padding
   # - 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,6 +8,7 @@
         <%= 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,6 +6,7 @@ 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.id,
+    id: object.option[: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::String
+      prop :option, type: Playbook::Props::HashProp
       prop :id, type: Playbook::Props::String
       def data

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

@@ -37,8 +37,10 @@ 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);
     }
   }
@@ -99,7 +101,6 @@ 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,8 +50,10 @@ const DropdownOption = (props: DropdownOptionProps) => {
     selected,
   } = useContext(DropdownContext);
-  const isItemMatchingFilter = (option: GenericObject) =>
-    option?.label.toLowerCase().includes(filterItem.toLowerCase());
+  const isItemMatchingFilter = (option: GenericObject) => {
+    const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
+    return String(label).toLowerCase().includes(filterItem.toLowerCase());
+  }
   if (!isItemMatchingFilter(option)) {
     return null;

data/app/pb_kits/playbook/pb_icon/_icon.tsx CHANGED Viewed

@@ -19,7 +19,7 @@ export type IconSizes = "lg"
 | "10x"
 | ""
-type IconProps = {
+export type IconProps = {
   aria?: {[key: string]: string},
   border?: string,
   className?: string,

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss CHANGED Viewed

@@ -35,6 +35,10 @@ $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
     margin-left: $pb_multiple_users_overlap;
     margin-right: 0;
+    &:first-of-type {
+      margin-left: 0;
+    }
     &.dark {
       .avatar_wrapper {
         border: $pb_multiple_users_border_size solid $bg_dark;
@@ -58,6 +62,10 @@ $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
     .pb_multiple_users_item {
       margin-left: 0;
       margin-right: $pb_multiple_users_overlap;
+      &:first-of-type {
+        margin-right: 0;
+      }
     }
   }
 }

data/app/pb_kits/playbook/pb_select/_select.tsx CHANGED Viewed

@@ -7,7 +7,7 @@ import type { InputCallback } from '../types'
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
-import Icon from '../pb_icon/_icon'
+import Icon, { IconProps } from '../pb_icon/_icon'
 type SelectOption = {
   value: string,
@@ -25,6 +25,7 @@ type SelectProps = {
   disabled?: boolean,
   error?: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  iconProps?: IconProps,
   id?: string,
   includeBlank?: string,
   inline?: boolean,
@@ -36,6 +37,7 @@ type SelectProps = {
   onChange: InputCallback<HTMLSelectElement>,
   options: SelectOption[],
   required?: boolean,
+  selectProps?: GlobalProps & { [key: string]: any },
   showArrow?: boolean,
   value?: string,
 } & GlobalProps
@@ -59,6 +61,7 @@ const Select = ({
   data = {},
   disabled = false,
   error,
+  iconProps,
   label,
   htmlOptions = {},
   inline = false,
@@ -67,6 +70,7 @@ const Select = ({
   onChange = () => undefined,
   options = [],
   required = false,
+  selectProps = {},
   showArrow = false,
   value,
   ...props
@@ -90,6 +94,12 @@ const Select = ({
     compactClass
   );
+  const selectClasses = classnames(
+    buildCss('pb_html_select'),
+    globalProps(selectProps),
+    selectProps.className
+  )
   const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
   const selectBody =(() =>{
     if (children) return children
@@ -97,6 +107,7 @@ const Select = ({
       <select
           {...htmlOptions}
           {...domSafeProps(props)}
+          className={selectClasses}
           disabled={disabled}
           id={name}
           multiple={multiple}
@@ -137,6 +148,7 @@ const Select = ({
               className="pb_select_kit_caret"
               fixedWidth
               icon="angle-down"
+              {...iconProps}
           />
           :
           null

data/app/pb_kits/playbook/pb_title/_title.scss CHANGED Viewed

@@ -49,6 +49,10 @@
   }
   &.dark {
-    @include pb_title_dark;
+    @include pb_title_dark;
+  }
+  &.dark[class*=_link] {
+    @include pb_title_dark_link;
   }
 }

data/app/pb_kits/playbook/tokens/_titles.scss CHANGED Viewed

@@ -34,7 +34,11 @@
 }
 @mixin pb_title_dark {
-  color: $text_dk_default;
+    color: $text_dk_default;
+}
+@mixin pb_title_dark_link {
+    color: $active_dark;
 }
 @mixin pb_title_bold {

data/dist/menu.yml CHANGED Viewed

@@ -255,9 +255,9 @@ kits:
         description: Playbook's date picker is built using flatpickr, a vanilla js library. Common date picker use cases and features have been adapted into simple prop based configuration detailed in the docs below.
         status: "stable"
       - name: dropdown
-        platforms: *react_only
+        platforms: *web
         description: ""
-        status: "beta"
+        status: "stable"
       - name: "multi_level_select"
         platforms: *web
         description: The MultiLevelSelect kit renders a multi leveled select dropdown based on data from the user.