playbook_ui 13.27.0.pre.alpha.PLAY1342DRYcontenttagRailssimplekits2896 → 13.27.0.pre.alpha.PLAY1349checkboxzindexsticky2936

data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_props_swift.md

@@ -0,0 +1,11 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **date** | `Date` | Sets the date | `Date()` |  |
+| **size** | `PBFont` | Sets the font size | `.body` |  `.body` `.caption` `.subcaption` |
+| **iconSize** | `PBIcon.IconSize` | Sets the icon size | `.xSmall` | `xSmall` `small` `large` `x1` |
+| **startDate** | `String` | Takes a string value to set the starting date range value | |  |
+| **endDate** | `String` | Takes a string value to set the ending date range value | |  |
+| **startVariant** | `PBDate.Variant` | Changes the style of the starting date | `.standard` | `.short(showIcon: false)` `.dayDate` `.standard` `.withIcon(isStandard: true)` `withIcon(isStandard: false)` |
+| **endVariant** | `PBDate.Variant` | Changes the style of the ending date | `.standard` | `.short(showIcon: false)` `.dayDate` `.standard` `.withIcon(isStandard: true)` `withIcon(isStandard: false)` |
+| **isArrowIconBold** | `Bool` | Determines if the date range arrow is bold | `false` | `true` `false` |

data/app/pb_kits/playbook/pb_date_range_inline/docs/example.yml

@@ -6,4 +6,7 @@ examples:
   
   react:
   - date_range_inline_default: Default
-  
+
+  swift:
+  - date_range_inline_default_swift: Default
+  - date_range_inline_props_swift: ""

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold_swift.md

@@ -0,0 +1,32 @@
+![Date-Stacked-Bold](https://github.com/powerhome/playbook-swift/assets/54749071/e241e4b8-efce-4872-99f9-aefb1e3007d2)
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBDateStacked(
+    alignment: .leading,
+    date: Date(),
+    variant: .short(showIcon: false),
+    dateSize: .title4,
+    isMonthStacked: true,
+    isMonthBold: true
+  )
+  PBDateStacked(
+    alignment: .center,
+    date: Date().makeDate(year: 2018, month: 3, day: 20),
+    variant: .standard,
+    dateSize: .title4,
+    isStandardStacked: true,
+    isYearBold: true,
+    isMonthBold: true
+  )
+  .frame(maxWidth: .infinity, alignment: .center)
+  PBDateStacked(
+    alignment: .trailing, 
+    date: Date(),
+    variant: .short(showIcon: false),
+    dateSize: .title4,
+    isMonthStacked: true,
+    isMonthBold: true
+  )
+  .frame(maxWidth: .infinity, alignment: .trailing)
+}
+```

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default_swift.md

@@ -0,0 +1,17 @@
+![Date-Stacked-Default](https://github.com/powerhome/playbook-swift/assets/54749071/5185a6b6-534a-43c0-8c87-abecf770b8f5)
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBDateStacked(
+    date: Date(),
+    variant: .short(showIcon: false),
+    dateSize: .title4,
+    isMonthStacked: true
+  )
+  PBDateStacked(
+    date: Date(),
+    variant: .short(showIcon: false),
+    dateSize: .title3,
+    isMonthStacked: true
+  )
+}
+```

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year_swift.md

@@ -0,0 +1,19 @@
+![Date-Stacked-Not-Current-Year](https://github.com/powerhome/playbook-swift/assets/54749071/f778f10f-21c3-42b9-b660-9def6c75ecf3)
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBDateStacked(
+    alignment: .leading,
+    date: Date().makeDate(year: 2018, month: 3, day: 20),
+    variant: .standard,
+    dateSize: .title4,
+    isStandardStacked: true
+  )
+  PBDateStacked(
+    alignment: .leading,
+    date: Date().makeDate(year: 2018, month: 3, day: 20),
+    variant: .standard,
+    dateSize: .title3,
+    isStandardStacked: true
+  )
+}
+```

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_props_swift.md

@@ -0,0 +1,10 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **alignment** | `HorizontalAlignment` | Changes the alignment of the date | `.leading` | `.leading` `.trailing` |
+| **dateSize** | `PBFont` |Sets the size of the date | `.body` |  `.subcaption` `.caption` `.body` |
+| **isReversed** | `Bool` | Boolean value that determines whether or not the month and date are reversed. | `false` |  `true` `false` |
+| **isMonthStacked** | `Bool` | Boolean value that determines whether or not the month is stacked | `false` |  `true` `false` |
+| **isStandardStacked** | `Bool` | Boolean value that determines whether or not the standard date variant is stacked. | `false` |  `true` `false` |
+| **isYearBold** | `Bool` | Boolean value that determines whether or not the the year is bold | `false` |  `true` `false` |
+| **isMonthBold** | `Bool` | Boolean value that determines whether or not the month  is bold. | `false` |  `true` `false` |

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reversed_swift.md

@@ -0,0 +1,17 @@
+![Date-Stacked-Reversed](https://github.com/powerhome/playbook-swift/assets/54749071/4dc3ff84-3a0d-4d9b-a363-5d649a3bdae6)
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBDateStacked(
+    date: Date(),
+    variant: .short(showIcon: false),
+    dateSize: .title4,
+    isReversed: true
+  )
+  PBDateStacked(
+    date: Date(),
+    variant: .short(showIcon: false),
+    dateSize: .title3,
+    isReversed: true
+  )
+}
+```

data/app/pb_kits/playbook/pb_date_stacked/docs/example.yml

@@ -15,3 +15,10 @@ examples:
   - date_stacked_reverse: Day & Month Reverse
   - date_stacked_sizes: Sizes
   - date_stacked_bold: Bold
+
+  swift:
+  - date_stacked_default_swift: Default
+  - date_stacked_not_current_year_swift: Not Current Year
+  - date_stacked_reversed_swift: Day & Month Reverse
+  - date_stacked_bold_swift: Bold
+  - date_stacked_props_swift: ""

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_alignment_swift.md

@@ -0,0 +1,39 @@
+![Date-Time-Alignment](https://github.com/powerhome/playbook-swift/assets/54749071/9d1e08ac-4906-406f-b81d-1edf0a09e2e3)
+
+```swift
+VStack(spacing: Spacing.small) {
+  HStack {
+    PBDateTime(
+      dateVariant: .short(showIcon: false),
+      timeVariant: .iconTimeZone,
+      isLowercase: true,
+      isTimeBold: true,
+      zone: .utc,
+      showTimeZone: true,
+      timeZoneIdentifier: "2012-08-02T17:49:29Z"
+    )
+  }
+  .frame(maxWidth: .infinity, alignment: .leading)
+    PBDateTime(
+        dateVariant: .short(showIcon: false),
+        timeVariant: .iconTimeZone,
+        isLowercase: true,
+        isTimeBold: true,
+        zone: .utc,
+        showTimeZone: true,
+        timeZoneIdentifier: "2012-08-02T17:49:29Z"
+      )
+  HStack {
+    PBDateTime(
+      dateVariant: .short(showIcon: false),
+      timeVariant: .iconTimeZone,
+      isLowercase: true,
+      isTimeBold: true,
+      zone: .utc,
+      showTimeZone: true,
+      timeZoneIdentifier: "2012-08-02T17:49:29Z"
+    )
+  }
+  .frame(maxWidth: .infinity, alignment: .trailing)
+}
+```

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default_swift.md

@@ -0,0 +1,39 @@
+![Date-Time-Default](https://github.com/powerhome/playbook-swift/assets/54749071/f9ea63f9-81bd-41a9-8171-8a213c55ccfe)
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBDateTime(
+    dateVariant: .dayDate(showYear: true),
+    timeVariant: .iconTimeZone,
+    isLowercase: true,
+    isTimeBold: true,
+    timeZoneIdentifier: "EST"
+  )
+  PBDateTime(
+    dateVariant: .dayDate(showYear: false),
+    timeVariant: .iconTimeZone,
+    isLowercase: true,
+    isTimeBold: true,
+    zone: .utc,
+    showTimeZone: true,
+    timeZoneIdentifier: "2012-08-02T17:49:29Z"
+  )
+  PBDateTime(
+    dateVariant: .short(showIcon: false),
+    timeVariant: .iconTimeZone,
+    isLowercase: true,
+    isTimeBold: true,
+    zone: .utc,
+    showTimeZone: true,
+    timeZoneIdentifier: "2012-08-02T17:49:29Z",
+    showIcon: true
+  )
+  PBDateTime(
+    dateVariant: .standard,
+    timeVariant: .iconTimeZone,
+    isLowercase: true,
+    isTimeBold: true,
+    showTimeZone: true,
+    timeZoneIdentifier: "GMT+9"
+  )
+}
+```

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_props_swift.md

@@ -0,0 +1,15 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **dateTime** | `Date` | Sets current date. | | |
+| **iconSize** | `PBIcon.IconSize` | Allows user to change the size of the clock icon. | `.x3` | `.small` `.medium` `.large` |
+| **dateVariant** | `PBDate.Variant` | Allows user to choose how they would like the date to be displayed | `.dayDate(showYear: false)` | `.short` `.dayDate(showYear: false)` `.standard` `.withIcon(isStandard: true)` `.withIcon(isStandard: false)` |
+| **timeVariant** | `PBTime.Variant` | Allows user to choose how they would like the time to be displayed | `.time` | `.time` `.clockIcon` `.timeZone` `.iconTimeZone` `.withTimeZoneHeader` |
+| **fontSize** | `PBFont` | Allows user to change the size of the text | `.caption` | `.subcaption` `.caption` `.body` |
+| **isLowercase** | `Bool` | Determines whether or not am/pm is capitalized | `false` | `true` `false` |
+| **isTimeBold** | `Bool` | Determines whether or not the time is bold | `false` | `true` `false` |
+| **isTimeZoneBold** | `Bool` | Determines whether or not the time zone is bold | `false` | `true` `false` |
+| **zone** | `PBTime.Zones` | Allows the user to set the time zone | `.east` | `.east` `.central` `.mountain` `.pacific` `.gmt` |
+| **showTimeZone** | `Bool` | Determines whether or not the time zone is displayed | `false` | `true` `false` |
+| **timeZoneIdentifier** | `String` | String that the time kit utilizes to calculate the current time and time zone | | |
+| **showIcon** | `Bool` | Determines whether or not the clock icon is displayed | `false` | `true` `false` |

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size_swift.md

@@ -0,0 +1,78 @@
+![Date-Time-Sizes](https://github.com/powerhome/playbook-swift/assets/54749071/59b2394d-cf25-46b5-a634-ca0721a7b3b0)
+```swift
+VStack(alignment: .leading, spacing: Spacing.xSmall) {
+  PBDateTime(
+    dateVariant: .dayDate(showYear: false), 
+    timeVariant: .iconTimeZone,
+    fontSize: .caption,
+    zone: .utc,
+    showTimeZone: true,
+    timeZoneIdentifier: "2012-08-02T17:49:29Z",
+    showIcon: true
+  )
+  PBDateTime(
+    dateVariant: .dayDate(showYear: false),
+    timeVariant: .iconTimeZone,
+    fontSize: .caption,
+    zone: .utc,
+    showTimeZone: true,
+    timeZoneIdentifier: "2012-08-02T17:49:29Z"
+  )
+  PBDateTime(
+    dateVariant: .short(showIcon: false),
+    timeVariant: .iconTimeZone,
+    fontSize: .caption,
+    zone: .utc,
+    showTimeZone: true,
+    timeZoneIdentifier: "2012-08-02T17:49:29Z",
+    showIcon: true
+  )
+  PBDateTime(
+    dateVariant: .short(showIcon: false),
+    timeVariant: .iconTimeZone,
+    fontSize: .caption,
+    zone: .utc,
+    showTimeZone: true,
+    timeZoneIdentifier: "2012-08-02T17:49:29Z"
+  )
+  Spacer()
+  PBDateTime(
+    dateVariant: .dayDate(showYear: false),
+    timeVariant: .iconTimeZone,
+    isLowercase: true,
+    isTimeBold: true,
+    zone: .utc,
+    showTimeZone: true,
+    timeZoneIdentifier: "2012-08-02T17:49:29Z",
+    showIcon: true
+  )
+  PBDateTime(
+    dateVariant: .dayDate(showYear: false),
+    timeVariant: .iconTimeZone,
+    isLowercase: true,
+    isTimeBold: true,
+    zone: .utc,
+    showTimeZone: true,
+    timeZoneIdentifier: "2012-08-02T17:49:29Z"
+  )
+  PBDateTime(
+    dateVariant: .short(showIcon: false),
+    timeVariant: .iconTimeZone,
+    isLowercase: true,
+    isTimeBold: true,
+    zone: .utc,
+    showTimeZone: true,
+    timeZoneIdentifier: "2012-08-02T17:49:29Z",
+    showIcon: true
+  )
+  PBDateTime(
+    dateVariant: .short(showIcon: false),
+    timeVariant: .iconTimeZone,
+    isLowercase: true,
+    isTimeBold: true,
+    zone: .utc,
+    showTimeZone: true,
+    timeZoneIdentifier: "2012-08-02T17:49:29Z"
+  )
+}
+```

data/app/pb_kits/playbook/pb_date_time/docs/example.yml

@@ -9,3 +9,9 @@ examples:
   - date_time_default: Default
   - date_time_align: Alignment
   - date_time_size: Size
+
+  swift:
+  - date_time_default_swift: Default
+  - date_time_alignment_swift: Alignment
+  - date_time_size_swift: Size
+  - date_time_props_swift: ""

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

@@ -63,6 +63,10 @@
       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;

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

@@ -4,7 +4,6 @@ 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";
@@ -235,9 +234,7 @@ 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.md

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

@@ -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_rails.md

@@ -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.jsx

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

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

@@ -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.html.erb → _dropdown_with_custom_display_rails.html.erb}

@@ -48,12 +48,17 @@
     <%= pb_rails("dropdown/dropdown_container") do %>
         <% options.each do |option| %>
             <%= pb_rails("dropdown/dropdown_option", props: {option: option}) 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 %>
+              <%= 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 %>
             <% end %>
         <% end %>
     <% end %>

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

@@ -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.jsx

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

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

@@ -30,14 +30,19 @@
     <%= pb_rails("dropdown/dropdown_container") do %>
         <% options.each do |option| %>
             <%= pb_rails("dropdown/dropdown_option", props: {option: option}) 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]}) %>
+              <%= 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 %>
             <% end %>
         <% end %>

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

@@ -0,0 +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.md

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

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

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

@@ -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. 
+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}

@@ -32,15 +32,20 @@
     <%= 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 %>
+                      <%= 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 %>
     <% end %>

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

@@ -0,0 +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.md

@@ -1 +1 @@
-The optional `label` prop takes a string value that if present will render that string as the label for the Dropdown.
+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

@@ -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.test.jsx

@@ -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 p_xs')
+  expect(option).toHaveClass('pb_dropdown_option_selected')
 })