RubyGems - playbook_ui - Versions diffs - 13.27.0.pre.alpha.PLAY1342DRYcontenttagRailssimplekits2896 → 13.27.0.pre.alpha.PLAY1349checkboxzindexsticky2936 - Mend

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

Files changed (77) hide show

data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb CHANGED Viewed

@@ -10,18 +10,12 @@
         padding:"none",
         cursor: "pointer"
         }) do %>
-            <%= pb_rails("flex", props: {
-                align: "center",
-                classname:"dropdown_option_wrapper",
-                justify: "between",
-                padding_x:"sm",
-                padding_y:"xxs",
-                }) do %>
+            <div class="dropdown_option_wrapper">
                 <% if content.present? %>
                     <%= content.presence %>
                 <% else %>
                     <%= pb_rails("body", props: {text: object.option[:label]}) %>
                 <% end %>
-            <% end %>
+            </div>
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_option.rb CHANGED Viewed

@@ -3,19 +3,15 @@
 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
         Hash(prop(:data)).merge("dropdown_option_label": option)
       end
-      def padding_helper
-        " p_xs"
-      end
       def classname
-        generate_classname("pb_dropdown_option", "list") + padding_helper
+        generate_classname("pb_dropdown_option", "list")
       end
     end
   end

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx CHANGED Viewed

@@ -10,7 +10,6 @@ import { globalProps, GlobalProps } from "../../utilities/globalProps";
 import DropdownContext from "../context";
-import Flex from "../../pb_flex/_flex";
 import Body from "../../pb_body/_body";
 import ListItem from "../../pb_list/_list_item";
 import { GenericObject } from "../../types";
@@ -39,7 +38,6 @@ const DropdownOption = (props: DropdownOptionProps) => {
     id,
     key,
     option,
-    padding = "xs",
   } = props;
   const {
@@ -77,7 +75,7 @@ const DropdownOption = (props: DropdownOptionProps) => {
       selectedClass,
       focusedClass,
     ),
-    globalProps(props, {padding}),
+    globalProps(props),
     className
   );
@@ -98,20 +96,12 @@ const DropdownOption = (props: DropdownOptionProps) => {
           key={option.label}
           padding="none"
       >
-        <Flex
-            align="center"
-            className="dropdown_option_wrapper"
-            justify="between"
-            paddingX="sm"
-            paddingY="xxs"
-        >
           {children ?
-              children :
+          <div className="dropdown_option_wrapper">{children}</div> :
               <Body dark={dark}
                   text={option.label}
               />
           }
-        </Flex>
       </ListItem>
     </div>
   );

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children_swift.md ADDED Viewed

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

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

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

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

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

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

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

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

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

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb CHANGED Viewed

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

data/app/pb_kits/playbook/pb_pagination/_pagination.scss CHANGED Viewed

@@ -11,7 +11,7 @@ $top_bottom_radius: 0px;
   border-radius: $border_rad_light;
   border: $border_rad_lightest solid $border_light;
   background-color: $white;
-  padding: $space_xxs 0px;
+  padding: $space_xxs 0px !important;
   li {
     display: inline;
     > a, li > span {

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

@@ -102,6 +102,9 @@
     pointer-events: none;
   }
   &.inline {
+    svg {
+      right: 6px;
+    }
     @mixin active_arrow_style {
       svg {
         color: $primary !important;
@@ -130,6 +133,7 @@
       box-shadow: none;
       border-color: transparent;
       padding: 4px 8px;
+      padding-right: $space_lg;
       border-radius: 4px;
       option {
         background-color: $white;
@@ -213,6 +217,9 @@
     }
   }
   &.inline {
+    svg {
+      right: 6px;
+    }
     &:not(:hover) {
       svg {
         display: none;
@@ -233,6 +240,7 @@
       border-color: transparent;
       background: transparent;
       padding: 4px 8px;
+      padding-right: $space_lg;
       border-radius: 4px;
       option {
         background-color: $white;

data/app/pb_kits/playbook/pb_text_input/_text_input.scss CHANGED Viewed

@@ -76,6 +76,25 @@
         .text_input {
           border-color: $error_dark;
         }
+        [class*=pb_body_kit_negative] {
+          color: $error_dark;
+        }
+      }
+      .text_input_wrapper_add_on {
+        .add-on {
+          &-right {
+            .add-on-card {
+              border: 1px solid $error_dark;
+              border-left: 0;
+            }
+          }
+          &-left {
+            .add-on-card {
+              border: 1px solid $error_dark;
+              border-right: 0;
+            }
+          }
+        }
       }
     }
   }

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.