playbook_ui_docs 13.27.0.pre.alpha.PLAY1349checkboxzindexsticky2936 → 13.27.0.pre.alpha.PLAY11782916

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4134036f740bcd4977836fb024499446a1a8f826088b89aeb20e7fab3ffa24e1
-  data.tar.gz: c327257a2aa21f0d845b7df2d7bcee6e46413035db0c74f88426388d63ef3586
+  metadata.gz: 45f2a2a93d837d6e33f621fb7ecefc79ed343cc9b50ea2b98e30a4236ff4ce3d
+  data.tar.gz: 4a310adcb59da5abbe1e000765cdcd4ab371c7d81bc9fe56e4728bb9dc6fd7f5
 SHA512:
-  metadata.gz: c58fc52783e5868c1db19e94fd6234349875e998b7a8fd6a8232abf6ffc991e6fe16226e42acf3002b817021a440d8114a3d0add292d7e6c5f8b1e317ee08c9d
-  data.tar.gz: 33b8b3632e0aa675f0f7ba71904c2e3a458a89cdbeedb623a8aa412badd5cd7e159e6d1bb6ab6c63c9ca3cbacfb124d2dbd5895d9a8b81304584a437716d7650
+  metadata.gz: 4373c106ebd8baf36bcfd40a122ca86e6e630fdeb26bddabb397c68a99c6b8583f1d81087f2302fff03117375d536cf67c563e7c96dbce91b870bce4170d5a9c
+  data.tar.gz: fc5f30cab8685522e73bdb8574d0c75fde4ae358b9d7328d45456925d34a5745c6f2d77b89711dc8528d83ea20736d9be683877b8d5a67b7674e5037d12a5899

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

@@ -7,9 +7,6 @@ examples:
   - collapsible_icons: Custom Icons
   - collapsible_external_controls: Toggle Collapsible With External Controls
   - collapsible_external_controls_multiple: Toggle All Collapsibles With One Control
-  - collapsible_custom_main_rails: Custom Main Section
-  - collapsible_custom_main_with_icon_rails: Custom Main Section With Icon
-
 
   react:
   - collapsible_default: Default
@@ -17,10 +14,6 @@ examples:
   - collapsible_color: Icon Color
   - collapsible_icons: Custom Icons
   - collapsible_state: useCollapsible Hook
-  - collapsible_custom_main: Custom Main Section
-  - collapsible_custom_main_with_icon: Custom Main Section With Icon
-
-
 
   swift:
   - collapsible_default_swift: Default

data/app/pb_kits/playbook/pb_collapsible/docs/index.js

@@ -2,6 +2,4 @@ export { default as CollapsibleDefault } from './_collapsible_default.jsx'
 export { default as CollapsibleSize } from './_collapsible_size.jsx'
 export { default as CollapsibleColor } from './_collapsible_color.jsx'
 export { default as CollapsibleIcons } from './_collapsible_icons.jsx'
-export { default as CollapsibleState } from './_collapsible_state.jsx'
-export { default as CollapsibleCustomMain } from './_collapsible_custom_main.jsx'
-export { default as CollapsibleCustomMainWithIcon } from './_collapsible_custom_main_with_icon.jsx'
+export {default as CollapsibleState } from './_collapsible_state.jsx'

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

@@ -6,7 +6,4 @@ 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/example.yml

@@ -15,10 +15,3 @@ 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/example.yml

@@ -9,9 +9,3 @@ 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/docs/_dropdown_with_custom_display.jsx

@@ -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_rails.html.erb

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

@@ -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_rails.html.erb

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

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

@@ -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_rails.html.erb

@@ -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_fixed_confirmation_toast/docs/example.yml

@@ -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_form/docs/_form_form_with.html.erb

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

@@ -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)." } } %>