playbook_ui_docs 13.27.0.pre.alpha.testingcollapsible2917 → 13.28.0.pre.alpha.PBNTR296dropdownwithform2941

data/app/pb_kits/playbook/pb_dropdown/docs/_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_padding.md

@@ -1 +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`.
+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_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_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children_swift.md

@@ -0,0 +1,23 @@
+![Children-Toast](https://github.com/powerhome/playbook-swift/assets/54749071/55aebd12-43c4-4061-92d3-6aebb07ff349)
+
+```swift
+VStack(alignment: .leading) {
+  PBToast(
+    text: message,
+    variant: .success,
+    actionView: .custom(AnyView(Text("Undo").pbFont(.title4, color: .white))),
+    dismissAction: closeToast
+  )
+  PBToast(
+    variant: .custom(nil, .pbPrimary),
+    actionView: .custom(
+    AnyView(
+      HStack {
+        Text("Undo action").pbFont(.caption, color: .white)
+        PBButton(variant: .primary, title: "Undo").disabled(true)
+      }
+    )),
+    dismissAction: closeToast
+  )
+}
+```

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close_swift.md

@@ -0,0 +1,7 @@
+```swift
+VStack(alignment: .leading) {
+  PBToast(text: "Error Message", variant: .error, actionView: .default, dismissAction: closeToast)
+  PBToast(text: "Items Successfully Moved", variant: .success, actionView: .default, dismissAction: closeToast)
+  PBToast(text: "Scan to Assign Selected Items", variant: .neutral, actionView: .default, dismissAction: closeToast)
+}
+```

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default_swift.md

@@ -0,0 +1,9 @@
+![Default-Toast](https://github.com/powerhome/playbook-swift/assets/54749071/cc465b1b-85ba-4492-a832-b06b842a1555)
+
+```swift
+VStack(alignment: .leading) {
+  PBToast(text: "Error Message", variant: .error, dismissAction: closeToast)
+  PBToast(text: "Items Successfully Moved", variant: .success, dismissAction: closeToast)
+  PBToast(text: "Scan to Assign Selected Items", variant: .neutral, dismissAction: closeToast)
+}
+```

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dismiss_with_timer_swift.md

@@ -0,0 +1,22 @@
+```swift
+HStack {
+  PBButton(variant: .secondary, title: "Top Center") {
+    position = .top
+    toastView = PBToast(
+    text: "Top Center",
+    variant: .neutral,
+    actionView: .withTimer(3),
+    dismissAction: closeToast
+    )
+  }
+  PBButton(variant: .secondary, title: "Bottom Center") {
+    position = .bottom
+    toastView = PBToast(
+    text: "Bottom Center",
+    variant: .neutral,
+    actionView: .withTimer(2),
+    dismissAction: closeToast
+    )
+  }
+}
+```

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_swift.md

@@ -0,0 +1,9 @@
+![Multiline-Toast](https://github.com/powerhome/playbook-swift/assets/54749071/df7bb8da-89ee-477e-8001-7262e48ce03a)
+
+```swift
+PBToast(
+  text: message,
+  variant: .custom(.infoCircle, .pbPrimary),
+  dismissAction: closeToast
+)
+```

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions_swift.md

@@ -0,0 +1,62 @@
+```swift
+GridRow {
+  PBButton(variant: .secondary, title: "Top Left") {
+    position = .topLeft
+    toastView = PBToast(
+    text: "Top Left",
+    variant: .neutral,
+    actionView: .default,
+    dismissAction: closeToast
+    )
+  }
+  PBButton(variant: .secondary, title: "Top Right") {
+    position = .topRight
+    toastView = PBToast(
+    text: "Top Right",
+    variant: .neutral,
+    actionView: .default,
+    dismissAction: closeToast
+    )
+  }
+}
+GridRow {
+  PBButton(variant: .secondary, title: "Top Center") {
+    position = .top
+    toastView = PBToast(
+    text: "Top Center",
+    variant: .neutral,
+    actionView: .default,
+    dismissAction: closeToast
+    )
+  }
+  PBButton(variant: .secondary, title: "Bottom Center") {
+    position = .bottom
+    toastView = PBToast(
+    text: "Bottom Center",
+    variant: .custom(.user, .status(.neutral)),
+    actionView: .default,
+    dismissAction: closeToast
+    )
+  }
+}
+GridRow {
+  PBButton(variant: .secondary, title: "Bottom Left") {
+    position = .bottomLeft
+    toastView = PBToast(
+    text: "Bottom Left",
+    variant: .custom(.user, .status(.neutral)),
+    actionView: .default,
+    dismissAction: closeToast
+    )
+  }
+  PBButton(variant: .secondary, title: "Bottom Right") {
+    position = .bottomRight
+    toastView = PBToast(
+    text: "Bottom Right",
+    variant: .custom(.user, .status(.neutral)),
+    actionView: .default,
+    dismissAction: closeToast
+    )
+  }
+}
+```

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_props_swift.md

@@ -0,0 +1,8 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **text** | `String` |`Value for the toast message` | `nil` |   |
+| **variant** | `Variant` | `Determines the type pf toast message being displayed` | `.custom()` |  `error`, `success`, 
+`neutral`, `custom()` |
+| **actionView** | `dismissAction` | Dismisses the toast message | `.default` | `default` `custom()` `withTimer()` |
+| **dismissAction** | `(() -> Void)` | `Triggers the dismiss action` |  |  |

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

@@ -14,3 +14,12 @@ 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

@@ -13,16 +13,26 @@
   ]
 %>
 
+<% 
+  example_dropdown_options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+
+%>
+
 <%= 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.telephone_field :example_phone_field, props: { label: true } %>
+  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
   <%= 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 } %>
   <%= form.password_field :example_password_field, props: { label: true } %>
   <%= form.url_field :example_url_field, props: { label: true } %>
   <%= form.text_area :example_text_area, props: { label: true } %>
+  <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
   <%= form.check_box :example_checkbox,

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.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.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
   <%= 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)." } } %>