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

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.