playbook_ui_docs 13.27.0.pre.alpha.PBNTR48phonenumberform2852 → 13.27.0.pre.alpha.PLAY888Cardkithighlightoverflowtooltiperror2930

Sign up to get free protection for your applications and to get access to all the features.
Files changed (76) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.html.erb +46 -66
  3. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +8 -29
  4. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.md +3 -0
  5. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb +13 -33
  6. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +48 -67
  7. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.md +3 -0
  8. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +0 -20
  9. data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -2
  10. data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb +20 -0
  11. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +41 -1
  12. data/app/pb_kits/playbook/pb_card/docs/_card_background.md +1 -1
  13. data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb +1 -1
  14. data/app/pb_kits/playbook/pb_card/docs/_card_header.md +1 -1
  15. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md +1 -1
  16. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx +72 -0
  17. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.md +3 -0
  18. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.html.erb +19 -0
  19. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.md +3 -0
  20. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx +73 -0
  21. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.md +3 -0
  22. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.html.erb +20 -0
  23. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.md +3 -0
  24. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +7 -0
  25. data/app/pb_kits/playbook/pb_collapsible/docs/index.js +3 -1
  26. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default_swift.md +61 -0
  27. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_props_swift.md +11 -0
  28. data/app/pb_kits/playbook/pb_date_range_inline/docs/example.yml +4 -1
  29. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold_swift.md +32 -0
  30. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default_swift.md +17 -0
  31. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year_swift.md +19 -0
  32. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_props_swift.md +10 -0
  33. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reversed_swift.md +17 -0
  34. data/app/pb_kits/playbook/pb_date_stacked/docs/example.yml +7 -0
  35. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_alignment_swift.md +39 -0
  36. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default_swift.md +39 -0
  37. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_props_swift.md +15 -0
  38. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size_swift.md +78 -0
  39. data/app/pb_kits/playbook/pb_date_time/docs/example.yml +6 -0
  40. data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default_swift.md +20 -0
  41. data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_props_swift.md +6 -0
  42. data/app/pb_kits/playbook/pb_date_year_stacked/docs/example.yml +4 -0
  43. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +3 -3
  44. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md +1 -1
  45. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md +5 -6
  46. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_subcomponent_structure.html.erb → _dropdown_subcomponent_structure_rails.html.erb} +3 -3
  47. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.md +6 -0
  48. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +6 -3
  49. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +3 -3
  50. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_display.html.erb → _dropdown_with_custom_display_rails.html.erb} +11 -6
  51. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md +5 -0
  52. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +5 -2
  53. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md +1 -1
  54. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_options.html.erb → _dropdown_with_custom_options_rails.html.erb} +16 -11
  55. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.md +1 -0
  56. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +3 -3
  57. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md +1 -1
  58. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +5 -2
  59. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md +1 -1
  60. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_trigger.html.erb → _dropdown_with_custom_trigger_rails.html.erb} +16 -11
  61. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.md +1 -0
  62. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +3 -3
  63. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md +1 -1
  64. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +6 -6
  65. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children_swift.md +23 -0
  66. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close_swift.md +7 -0
  67. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default_swift.md +9 -0
  68. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dismiss_with_timer_swift.md +22 -0
  69. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_swift.md +9 -0
  70. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions_swift.md +62 -0
  71. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_props_swift.md +8 -0
  72. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +9 -0
  73. data/dist/app/components/playbook/pb_docs/kit_example.html.erb +3 -3
  74. data/dist/menu.yml +2 -2
  75. data/dist/playbook-doc.js +6 -6
  76. metadata +40 -6
@@ -48,12 +48,17 @@
48
48
  <%= pb_rails("dropdown/dropdown_container") do %>
49
49
  <% options.each do |option| %>
50
50
  <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
51
- <%= pb_rails("flex/flex_item") do %>
52
- <%= pb_rails("user", props: {name: option[:label], align:"left", avatar: true, orientation:"horizontal", territory:option[:territory], title: option[:title]}) %>
53
- <% end %>
54
- <%= pb_rails("flex/flex_item") do %>
55
- <%= pb_rails("badge", props: {rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
56
- <% end %>
51
+ <%= pb_rails("flex", props: {
52
+ align: "center",
53
+ justify: "between",
54
+ }) do %>
55
+ <%= pb_rails("flex/flex_item") do %>
56
+ <%= pb_rails("user", props: {name: option[:label], align:"left", avatar: true, orientation:"horizontal", territory:option[:territory], title: option[:title]}) %>
57
+ <% end %>
58
+ <%= pb_rails("flex/flex_item") do %>
59
+ <%= pb_rails("badge", props: {rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
60
+ <% end %>
61
+ <% end %>
57
62
  <% end %>
58
63
  <% end %>
59
64
  <% end %>
@@ -0,0 +1,5 @@
1
+ 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.
2
+
3
+ The `placeholder` prop can also be used to customize the placeholder text for the default `dropdown/dropdown_trigger`.
4
+
5
+ The dropdown follows the typical rails pattern of utilizing hidden inputs for form submission. The hidden input value is the selected options' id.
@@ -38,7 +38,10 @@ const DropdownWithCustomOptions = (props) => {
38
38
  <Dropdown.Option key={option.id}
39
39
  option={option}
40
40
  >
41
- <>
41
+ <Flex
42
+ align="center"
43
+ justify="between"
44
+ >
42
45
  <FlexItem>
43
46
  <Flex>
44
47
  <Icon icon={option.icon}
@@ -52,7 +55,7 @@ const DropdownWithCustomOptions = (props) => {
52
55
  text={option.areaCode}
53
56
  />
54
57
  </FlexItem>
55
- </>
58
+ </Flex>
56
59
  </Dropdown.Option>
57
60
  ))}
58
61
  </Dropdown>
@@ -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.
@@ -5,21 +5,21 @@
5
5
  value: "United States",
6
6
  areaCode: "+1",
7
7
  icon: "🇺🇸",
8
- id: "United-states"
8
+ id: "us"
9
9
  },
10
10
  {
11
11
  label: "Canada",
12
12
  value: "Canada",
13
13
  areaCode: "+1",
14
14
  icon: "🇨🇦",
15
- id: "canada"
15
+ id: "ca"
16
16
  },
17
17
  {
18
18
  label: "Pakistan",
19
19
  value: "Pakistan",
20
20
  areaCode: "+92",
21
21
  icon: "🇵🇰",
22
- id: "pakistan"
22
+ id: "pk"
23
23
  }
24
24
  ]
25
25
 
@@ -30,14 +30,19 @@
30
30
  <%= pb_rails("dropdown/dropdown_container") do %>
31
31
  <% options.each do |option| %>
32
32
  <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
33
- <%= pb_rails("flex/flex_item") do %>
34
- <%= pb_rails("flex") do %>
35
- <%= pb_rails("icon", props: {icon: option[:icon]}) %>
36
- <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
37
- <% end %>
38
- <% end %>
39
- <%= pb_rails("flex/flex_item") do %>
40
- <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
33
+ <%= pb_rails("flex", props: {
34
+ align: "center",
35
+ justify: "between",
36
+ }) do %>
37
+ <%= pb_rails("flex/flex_item") do %>
38
+ <%= pb_rails("flex") do %>
39
+ <%= pb_rails("icon", props: {icon: option[:icon]}) %>
40
+ <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
41
+ <% end %>
42
+ <% end %>
43
+ <%= pb_rails("flex/flex_item") do %>
44
+ <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
45
+ <% end %>
41
46
  <% end %>
42
47
  <% end %>
43
48
  <% end %>
@@ -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.
@@ -1,8 +1,8 @@
1
1
  <%
2
2
  options = [
3
- { label: 'United States', value: 'United States' },
4
- { label: 'Canada', value: 'Canada' },
5
- { label: 'Pakistan', value: 'Pakistan' },
3
+ { label: 'United States', value: 'United States', id: 'us' },
4
+ { label: 'Canada', value: 'Canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
6
6
  ]
7
7
 
8
8
  %>
@@ -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 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.
@@ -51,7 +51,10 @@ const [selectedOption, setSelectedOption] = useState();
51
51
  <Dropdown.Option key={option.id}
52
52
  option={option}
53
53
  >
54
- <>
54
+ <Flex
55
+ align="center"
56
+ justify="between"
57
+ >
55
58
  <FlexItem>
56
59
  <Flex>
57
60
  <Icon icon={option.icon}
@@ -65,7 +68,7 @@ const [selectedOption, setSelectedOption] = useState();
65
68
  text={option.areaCode}
66
69
  />
67
70
  </FlexItem>
68
- </>
71
+ </Flex>
69
72
  </Dropdown.Option>
70
73
  ))}
71
74
  </Dropdown.Container>
@@ -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`.
@@ -5,21 +5,21 @@
5
5
  value: "United States",
6
6
  areaCode: "+1",
7
7
  icon: "🇺🇸",
8
- id: "United-states"
8
+ id: "us"
9
9
  },
10
10
  {
11
11
  label: "Canada",
12
12
  value: "Canada",
13
13
  areaCode: "+1",
14
14
  icon: "🇨🇦",
15
- id: "canada"
15
+ id: "ca"
16
16
  },
17
17
  {
18
18
  label: "Pakistan",
19
19
  value: "Pakistan",
20
20
  areaCode: "+92",
21
21
  icon: "🇵🇰",
22
- id: "pakistan"
22
+ id: "pk"
23
23
  }
24
24
  ]
25
25
 
@@ -32,15 +32,20 @@
32
32
  <%= pb_rails("dropdown/dropdown_container", props:{max_width:"xs"}) do %>
33
33
  <% options.each do |option| %>
34
34
  <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
35
+ <%= pb_rails("flex", props: {
36
+ align: "center",
37
+ justify: "between",
38
+ }) do %>
35
39
  <%= pb_rails("flex/flex_item") do %>
36
- <%= pb_rails("flex") do %>
37
- <%= pb_rails("icon", props: {icon: option[:icon]}) %>
38
- <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
39
- <% end %>
40
- <% end %>
41
- <%= pb_rails("flex/flex_item") do %>
42
- <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
43
- <% end %>
40
+ <%= pb_rails("flex") do %>
41
+ <%= pb_rails("icon", props: {icon: option[:icon]}) %>
42
+ <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
43
+ <% end %>
44
+ <% end %>
45
+ <%= pb_rails("flex/flex_item") do %>
46
+ <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
47
+ <% end %>
48
+ <% end %>
44
49
  <% end %>
45
50
  <% end %>
46
51
  <% end %>
@@ -0,0 +1 @@
1
+ Optionally replace the default trigger's select element by passing child components directly to the `dropdown/dropdown_trigger`.
@@ -1,8 +1,8 @@
1
1
  <%
2
2
  options = [
3
- { label: 'United States', value: 'United States' },
4
- { label: 'Canada', value: 'Canada' },
5
- { label: 'Pakistan', value: 'Pakistan' },
3
+ { label: 'United States', value: 'United States', id: 'us' },
4
+ { label: 'Canada', value: 'Canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
6
6
  ]
7
7
 
8
8
  %>
@@ -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.
@@ -1,12 +1,12 @@
1
1
  examples:
2
2
  rails:
3
3
  - dropdown_default: Default
4
- - dropdown_subcomponent_structure: Subcomponent Structure
4
+ - dropdown_subcomponent_structure_rails: Subcomponent Structure
5
5
  - dropdown_with_label: With Label
6
- - dropdown_with_custom_options: Custom Options
7
- - dropdown_with_custom_display: Custom Display
8
- - dropdown_with_custom_trigger: Custom Trigger
9
- - dropdown_with_custom_padding: Custom Padding for Dropdown Options
6
+ - dropdown_with_custom_options_rails: Custom Options
7
+ - dropdown_with_custom_display_rails: Custom Display
8
+ - dropdown_with_custom_trigger_rails: Custom Trigger
9
+ - dropdown_with_custom_padding: Custom Option Padding
10
10
 
11
11
  react:
12
12
  - dropdown_default: Default
@@ -15,7 +15,7 @@ examples:
15
15
  - dropdown_with_custom_options: Custom Options
16
16
  - dropdown_with_custom_display: Custom Display
17
17
  - dropdown_with_custom_trigger: Custom Trigger
18
- - dropdown_with_custom_padding: Custom Padding for Dropdown Options
18
+ - dropdown_with_custom_padding: Custom Option Padding
19
19
  # - dropdown_with_autocomplete: Autocomplete
20
20
  # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
21
21
  # - dropdown_with_external_control: useDropdown Hook
@@ -0,0 +1,23 @@
1
+ ![Children-Toast](https://github.com/powerhome/playbook-swift/assets/54749071/55aebd12-43c4-4061-92d3-6aebb07ff349)
2
+
3
+ ```swift
4
+ VStack(alignment: .leading) {
5
+ PBToast(
6
+ text: message,
7
+ variant: .success,
8
+ actionView: .custom(AnyView(Text("Undo").pbFont(.title4, color: .white))),
9
+ dismissAction: closeToast
10
+ )
11
+ PBToast(
12
+ variant: .custom(nil, .pbPrimary),
13
+ actionView: .custom(
14
+ AnyView(
15
+ HStack {
16
+ Text("Undo action").pbFont(.caption, color: .white)
17
+ PBButton(variant: .primary, title: "Undo").disabled(true)
18
+ }
19
+ )),
20
+ dismissAction: closeToast
21
+ )
22
+ }
23
+ ```
@@ -0,0 +1,7 @@
1
+ ```swift
2
+ VStack(alignment: .leading) {
3
+ PBToast(text: "Error Message", variant: .error, actionView: .default, dismissAction: closeToast)
4
+ PBToast(text: "Items Successfully Moved", variant: .success, actionView: .default, dismissAction: closeToast)
5
+ PBToast(text: "Scan to Assign Selected Items", variant: .neutral, actionView: .default, dismissAction: closeToast)
6
+ }
7
+ ```
@@ -0,0 +1,9 @@
1
+ ![Default-Toast](https://github.com/powerhome/playbook-swift/assets/54749071/cc465b1b-85ba-4492-a832-b06b842a1555)
2
+
3
+ ```swift
4
+ VStack(alignment: .leading) {
5
+ PBToast(text: "Error Message", variant: .error, dismissAction: closeToast)
6
+ PBToast(text: "Items Successfully Moved", variant: .success, dismissAction: closeToast)
7
+ PBToast(text: "Scan to Assign Selected Items", variant: .neutral, dismissAction: closeToast)
8
+ }
9
+ ```
@@ -0,0 +1,22 @@
1
+ ```swift
2
+ HStack {
3
+ PBButton(variant: .secondary, title: "Top Center") {
4
+ position = .top
5
+ toastView = PBToast(
6
+ text: "Top Center",
7
+ variant: .neutral,
8
+ actionView: .withTimer(3),
9
+ dismissAction: closeToast
10
+ )
11
+ }
12
+ PBButton(variant: .secondary, title: "Bottom Center") {
13
+ position = .bottom
14
+ toastView = PBToast(
15
+ text: "Bottom Center",
16
+ variant: .neutral,
17
+ actionView: .withTimer(2),
18
+ dismissAction: closeToast
19
+ )
20
+ }
21
+ }
22
+ ```
@@ -0,0 +1,9 @@
1
+ ![Multiline-Toast](https://github.com/powerhome/playbook-swift/assets/54749071/df7bb8da-89ee-477e-8001-7262e48ce03a)
2
+
3
+ ```swift
4
+ PBToast(
5
+ text: message,
6
+ variant: .custom(.infoCircle, .pbPrimary),
7
+ dismissAction: closeToast
8
+ )
9
+ ```
@@ -0,0 +1,62 @@
1
+ ```swift
2
+ GridRow {
3
+ PBButton(variant: .secondary, title: "Top Left") {
4
+ position = .topLeft
5
+ toastView = PBToast(
6
+ text: "Top Left",
7
+ variant: .neutral,
8
+ actionView: .default,
9
+ dismissAction: closeToast
10
+ )
11
+ }
12
+ PBButton(variant: .secondary, title: "Top Right") {
13
+ position = .topRight
14
+ toastView = PBToast(
15
+ text: "Top Right",
16
+ variant: .neutral,
17
+ actionView: .default,
18
+ dismissAction: closeToast
19
+ )
20
+ }
21
+ }
22
+ GridRow {
23
+ PBButton(variant: .secondary, title: "Top Center") {
24
+ position = .top
25
+ toastView = PBToast(
26
+ text: "Top Center",
27
+ variant: .neutral,
28
+ actionView: .default,
29
+ dismissAction: closeToast
30
+ )
31
+ }
32
+ PBButton(variant: .secondary, title: "Bottom Center") {
33
+ position = .bottom
34
+ toastView = PBToast(
35
+ text: "Bottom Center",
36
+ variant: .custom(.user, .status(.neutral)),
37
+ actionView: .default,
38
+ dismissAction: closeToast
39
+ )
40
+ }
41
+ }
42
+ GridRow {
43
+ PBButton(variant: .secondary, title: "Bottom Left") {
44
+ position = .bottomLeft
45
+ toastView = PBToast(
46
+ text: "Bottom Left",
47
+ variant: .custom(.user, .status(.neutral)),
48
+ actionView: .default,
49
+ dismissAction: closeToast
50
+ )
51
+ }
52
+ PBButton(variant: .secondary, title: "Bottom Right") {
53
+ position = .bottomRight
54
+ toastView = PBToast(
55
+ text: "Bottom Right",
56
+ variant: .custom(.user, .status(.neutral)),
57
+ actionView: .default,
58
+ dismissAction: closeToast
59
+ )
60
+ }
61
+ }
62
+ ```
@@ -0,0 +1,8 @@
1
+ ### Props
2
+ | Name | Type | Description | Default | Values |
3
+ | --- | ----------- | --------- | --------- | --------- |
4
+ | **text** | `String` |`Value for the toast message` | `nil` | |
5
+ | **variant** | `Variant` | `Determines the type pf toast message being displayed` | `.custom()` | `error`, `success`,
6
+ `neutral`, `custom()` |
7
+ | **actionView** | `dismissAction` | Dismisses the toast message | `.default` | `default` `custom()` `withTimer()` |
8
+ | **dismissAction** | `(() -> Void)` | `Triggers the dismiss action` | | |
@@ -14,3 +14,12 @@ examples:
14
14
  - fixed_confirmation_toast_positions: Click to Show Positions
15
15
  - fixed_confirmation_toast_auto_close: Click to Show Auto Close
16
16
  - fixed_confirmation_toast_children: Children
17
+
18
+ swift:
19
+ - fixed_confirmation_toast_default_swift: Default
20
+ - fixed_confirmation_toast_multi_line_swift: Multi Line
21
+ #- fixed_confirmation_toast_close_swift: Click to Close
22
+ #- fixed_confirmation_toast_positions_swift: Click to Show Positions
23
+ - fixed_confirmation_toast_children_swift: Children
24
+ #- fixed_confirmation_toast_dismiss_with_timer_swift: Timer
25
+ - fixed_confirmation_toast_props_swift: ""
@@ -23,11 +23,11 @@
23
23
  <ul>
24
24
  <% hide_button = type == "rails" ? 'flex' : 'none' %>
25
25
  <li>
26
- <%= pb_rails("button", props: { id:"copy-html-#{example_key}", icon: "copy", text: "Copy HTML", variant: "link", size: "sm", display: hide_button }) %>
26
+ <%= pb_rails("button", props: { id:"copy-html-#{example_key}", icon: "copy", text: "Copy HTML", classname: dark ? "dark" : "", variant: "link", size: "sm", display: hide_button }) %>
27
27
  </li>
28
28
  <li>
29
- <%= pb_rails("button", props: { icon: "code", id:"toggle-open-opened", text: "Close Code", variant: "link", size: "sm", display: "none" }) %>
30
- <%= pb_rails("button", props: { icon: "code", id:"toggle-open-closed", text: "Show Code", variant: "link", size: "sm" }) %>
29
+ <%= pb_rails("button", props: { icon: "code", id:"toggle-open-opened", classname: dark ? "dark" : "", text: "Close Code", variant: "link", size: "sm", display: "none" }) %>
30
+ <%= pb_rails("button", props: { icon: "code", id:"toggle-open-closed", classname: dark ? "dark" : "", text: "Show Code", variant: "link", size: "sm" }) %>
31
31
  </li>
32
32
  </ul>
33
33
  </div>
data/dist/menu.yml CHANGED
@@ -255,9 +255,9 @@ kits:
255
255
  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.
256
256
  status: "stable"
257
257
  - name: dropdown
258
- platforms: *react_only
258
+ platforms: *web
259
259
  description: ""
260
- status: "beta"
260
+ status: "stable"
261
261
  - name: "multi_level_select"
262
262
  platforms: *web
263
263
  description: The MultiLevelSelect kit renders a multi leveled select dropdown based on data from the user.