playbook_ui_docs 13.27.0.pre.alpha.PLAY11782918 → 13.27.0.pre.alpha.dropdowncustomoptionfix2924

Sign up to get free protection for your applications and to get access to all the features.
Files changed (37) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default_swift.md +61 -0
  3. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_props_swift.md +11 -0
  4. data/app/pb_kits/playbook/pb_date_range_inline/docs/example.yml +4 -1
  5. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold_swift.md +32 -0
  6. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default_swift.md +17 -0
  7. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year_swift.md +19 -0
  8. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_props_swift.md +10 -0
  9. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reversed_swift.md +17 -0
  10. data/app/pb_kits/playbook/pb_date_stacked/docs/example.yml +7 -0
  11. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_alignment_swift.md +39 -0
  12. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default_swift.md +39 -0
  13. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_props_swift.md +15 -0
  14. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size_swift.md +78 -0
  15. data/app/pb_kits/playbook/pb_date_time/docs/example.yml +6 -0
  16. data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default_swift.md +20 -0
  17. data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_props_swift.md +6 -0
  18. data/app/pb_kits/playbook/pb_date_year_stacked/docs/example.yml +4 -0
  19. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +6 -3
  20. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +11 -6
  21. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +5 -2
  22. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.html.erb +13 -8
  23. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md +1 -1
  24. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +5 -2
  25. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.html.erb +13 -8
  26. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children_swift.md +23 -0
  27. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close_swift.md +7 -0
  28. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default_swift.md +9 -0
  29. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dismiss_with_timer_swift.md +22 -0
  30. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_swift.md +9 -0
  31. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions_swift.md +62 -0
  32. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_props_swift.md +8 -0
  33. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +9 -0
  34. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -1
  35. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
  36. data/dist/playbook-doc.js +6 -6
  37. metadata +22 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 1764e38e2c32e8f92949e9e1503b210bf468c6209c9a077f6c743cda2c655701
4
- data.tar.gz: d50117779469846d7d942b019731f3b78b5b8e7831bd466c8c8091ea28b8794b
3
+ metadata.gz: bcdece19d6effa6dcfdd64a8dab9164c23e8ba6f5d5a20030a9cc0e9e8789fce
4
+ data.tar.gz: 2a0a23e42f6fd13048020603a2c796209f629bf23da41916a7c3f24ebe2050d1
5
5
  SHA512:
6
- metadata.gz: 1825009c58ceb72d13942224f1ff22a6703bd09a55b8648b6ed1623ad31de07cc3df2ac882660c56ec5b261df21357f1777dca6649e3a4b1c0b2dc2cf4cc31e9
7
- data.tar.gz: f8616bdd8d1d58497e469c7fd3dc3a324b522e8f78814673fe13ec9b564d766d2123f112cdad6f014db8b87e7ddf2754ab821ca32b49e1d57cc7fb218fa5bce3
6
+ metadata.gz: 45b35f35d9da62ba7465a22ebd9d7a389bb193c99d71287366182065d8ab194dd0f7ee47d4dd471c03444ffefbe16a7a97086a87811c93269ca1cf428e505f31
7
+ data.tar.gz: 8c2515c5260434f4453f9f7fd7a0cd57268a4599acb9b1c67a94385f0fde4c7139bb25b1a86e35ac7b83757f4b00cc44bdbaa8c44f232862057626b506d3235a
@@ -0,0 +1,61 @@
1
+ ![Date-Range-Inline-Default](https://github.com/powerhome/playbook-swift/assets/54749071/793dc133-b2a8-4283-96e1-c8b19065392d)
2
+
3
+ ```swift
4
+ VStack(alignment: .leading, spacing: Spacing.large) {
5
+ VStack(alignment: .leading, spacing: Spacing.small) {
6
+ PBDateRangeInline(
7
+ size: .caption,
8
+ iconSize: .xSmall,
9
+ startDate: "18 Jun 2013",
10
+ endDate: "20 Mar 2015",
11
+ startVariant: .standard
12
+ )
13
+ PBDateRangeInline(
14
+ size: .body,
15
+ iconSize: .x1,
16
+ startDate: "18 Jun 2013",
17
+ endDate: "20 Mar 2015",
18
+ startVariant: .standard
19
+ )
20
+ }
21
+ .frame(maxWidth: .infinity, alignment: .leading)
22
+ VStack(alignment: .center, spacing: Spacing.small) {
23
+ PBDateRangeInline(
24
+ size: .caption,
25
+ iconSize: .xSmall,
26
+ startDate: "15 Jan 2013",
27
+ endDate: "15 Aug 2015",
28
+ startVariant: .short(showIcon: true),
29
+ endVariant: .short(showIcon: false)
30
+ )
31
+ PBDateRangeInline(
32
+ size: .body,
33
+ iconSize: .x1,
34
+ startDate: "15 Jan 2013",
35
+ endDate: "15 Aug 2015",
36
+ startVariant: .short(showIcon: true),
37
+ endVariant: .short(showIcon: false)
38
+ )
39
+ }
40
+ .frame(maxWidth: .infinity, alignment: .center)
41
+ VStack(alignment: .trailing, spacing: Spacing.small) {
42
+ PBDateRangeInline(
43
+ size: .caption,
44
+ iconSize: .xSmall,
45
+ startDate: "15 Jan 2013",
46
+ endDate: "15 Aug 2015",
47
+ startVariant: .short(showIcon: true),
48
+ endVariant: .short(showIcon: false)
49
+ )
50
+ PBDateRangeInline(
51
+ size: .body,
52
+ iconSize: .x1,
53
+ startDate: "15 Jan 2013",
54
+ endDate: "15 Aug 2015",
55
+ startVariant: .short(showIcon: true),
56
+ endVariant: .short(showIcon: false)
57
+ )
58
+ }
59
+ .frame(maxWidth: .infinity, alignment: .trailing)
60
+ }
61
+ ```
@@ -0,0 +1,11 @@
1
+ ### Props
2
+ | Name | Type | Description | Default | Values |
3
+ | --- | ----------- | --------- | --------- | --------- |
4
+ | **date** | `Date` | Sets the date | `Date()` | |
5
+ | **size** | `PBFont` | Sets the font size | `.body` | `.body` `.caption` `.subcaption` |
6
+ | **iconSize** | `PBIcon.IconSize` | Sets the icon size | `.xSmall` | `xSmall` `small` `large` `x1` |
7
+ | **startDate** | `String` | Takes a string value to set the starting date range value | | |
8
+ | **endDate** | `String` | Takes a string value to set the ending date range value | | |
9
+ | **startVariant** | `PBDate.Variant` | Changes the style of the starting date | `.standard` | `.short(showIcon: false)` `.dayDate` `.standard` `.withIcon(isStandard: true)` `withIcon(isStandard: false)` |
10
+ | **endVariant** | `PBDate.Variant` | Changes the style of the ending date | `.standard` | `.short(showIcon: false)` `.dayDate` `.standard` `.withIcon(isStandard: true)` `withIcon(isStandard: false)` |
11
+ | **isArrowIconBold** | `Bool` | Determines if the date range arrow is bold | `false` | `true` `false` |
@@ -6,4 +6,7 @@ examples:
6
6
 
7
7
  react:
8
8
  - date_range_inline_default: Default
9
-
9
+
10
+ swift:
11
+ - date_range_inline_default_swift: Default
12
+ - date_range_inline_props_swift: ""
@@ -0,0 +1,32 @@
1
+ ![Date-Stacked-Bold](https://github.com/powerhome/playbook-swift/assets/54749071/e241e4b8-efce-4872-99f9-aefb1e3007d2)
2
+ ```swift
3
+ VStack(alignment: .leading, spacing: Spacing.small) {
4
+ PBDateStacked(
5
+ alignment: .leading,
6
+ date: Date(),
7
+ variant: .short(showIcon: false),
8
+ dateSize: .title4,
9
+ isMonthStacked: true,
10
+ isMonthBold: true
11
+ )
12
+ PBDateStacked(
13
+ alignment: .center,
14
+ date: Date().makeDate(year: 2018, month: 3, day: 20),
15
+ variant: .standard,
16
+ dateSize: .title4,
17
+ isStandardStacked: true,
18
+ isYearBold: true,
19
+ isMonthBold: true
20
+ )
21
+ .frame(maxWidth: .infinity, alignment: .center)
22
+ PBDateStacked(
23
+ alignment: .trailing,
24
+ date: Date(),
25
+ variant: .short(showIcon: false),
26
+ dateSize: .title4,
27
+ isMonthStacked: true,
28
+ isMonthBold: true
29
+ )
30
+ .frame(maxWidth: .infinity, alignment: .trailing)
31
+ }
32
+ ```
@@ -0,0 +1,17 @@
1
+ ![Date-Stacked-Default](https://github.com/powerhome/playbook-swift/assets/54749071/5185a6b6-534a-43c0-8c87-abecf770b8f5)
2
+ ```swift
3
+ VStack(alignment: .leading, spacing: Spacing.small) {
4
+ PBDateStacked(
5
+ date: Date(),
6
+ variant: .short(showIcon: false),
7
+ dateSize: .title4,
8
+ isMonthStacked: true
9
+ )
10
+ PBDateStacked(
11
+ date: Date(),
12
+ variant: .short(showIcon: false),
13
+ dateSize: .title3,
14
+ isMonthStacked: true
15
+ )
16
+ }
17
+ ```
@@ -0,0 +1,19 @@
1
+ ![Date-Stacked-Not-Current-Year](https://github.com/powerhome/playbook-swift/assets/54749071/f778f10f-21c3-42b9-b660-9def6c75ecf3)
2
+ ```swift
3
+ VStack(alignment: .leading, spacing: Spacing.small) {
4
+ PBDateStacked(
5
+ alignment: .leading,
6
+ date: Date().makeDate(year: 2018, month: 3, day: 20),
7
+ variant: .standard,
8
+ dateSize: .title4,
9
+ isStandardStacked: true
10
+ )
11
+ PBDateStacked(
12
+ alignment: .leading,
13
+ date: Date().makeDate(year: 2018, month: 3, day: 20),
14
+ variant: .standard,
15
+ dateSize: .title3,
16
+ isStandardStacked: true
17
+ )
18
+ }
19
+ ```
@@ -0,0 +1,10 @@
1
+ ### Props
2
+ | Name | Type | Description | Default | Values |
3
+ | --- | ----------- | --------- | --------- | --------- |
4
+ | **alignment** | `HorizontalAlignment` | Changes the alignment of the date | `.leading` | `.leading` `.trailing` |
5
+ | **dateSize** | `PBFont` |Sets the size of the date | `.body` | `.subcaption` `.caption` `.body` |
6
+ | **isReversed** | `Bool` | Boolean value that determines whether or not the month and date are reversed. | `false` | `true` `false` |
7
+ | **isMonthStacked** | `Bool` | Boolean value that determines whether or not the month is stacked | `false` | `true` `false` |
8
+ | **isStandardStacked** | `Bool` | Boolean value that determines whether or not the standard date variant is stacked. | `false` | `true` `false` |
9
+ | **isYearBold** | `Bool` | Boolean value that determines whether or not the the year is bold | `false` | `true` `false` |
10
+ | **isMonthBold** | `Bool` | Boolean value that determines whether or not the month is bold. | `false` | `true` `false` |
@@ -0,0 +1,17 @@
1
+ ![Date-Stacked-Reversed](https://github.com/powerhome/playbook-swift/assets/54749071/4dc3ff84-3a0d-4d9b-a363-5d649a3bdae6)
2
+ ```swift
3
+ VStack(alignment: .leading, spacing: Spacing.small) {
4
+ PBDateStacked(
5
+ date: Date(),
6
+ variant: .short(showIcon: false),
7
+ dateSize: .title4,
8
+ isReversed: true
9
+ )
10
+ PBDateStacked(
11
+ date: Date(),
12
+ variant: .short(showIcon: false),
13
+ dateSize: .title3,
14
+ isReversed: true
15
+ )
16
+ }
17
+ ```
@@ -15,3 +15,10 @@ examples:
15
15
  - date_stacked_reverse: Day & Month Reverse
16
16
  - date_stacked_sizes: Sizes
17
17
  - date_stacked_bold: Bold
18
+
19
+ swift:
20
+ - date_stacked_default_swift: Default
21
+ - date_stacked_not_current_year_swift: Not Current Year
22
+ - date_stacked_reversed_swift: Day & Month Reverse
23
+ - date_stacked_bold_swift: Bold
24
+ - date_stacked_props_swift: ""
@@ -0,0 +1,39 @@
1
+ ![Date-Time-Alignment](https://github.com/powerhome/playbook-swift/assets/54749071/9d1e08ac-4906-406f-b81d-1edf0a09e2e3)
2
+
3
+ ```swift
4
+ VStack(spacing: Spacing.small) {
5
+ HStack {
6
+ PBDateTime(
7
+ dateVariant: .short(showIcon: false),
8
+ timeVariant: .iconTimeZone,
9
+ isLowercase: true,
10
+ isTimeBold: true,
11
+ zone: .utc,
12
+ showTimeZone: true,
13
+ timeZoneIdentifier: "2012-08-02T17:49:29Z"
14
+ )
15
+ }
16
+ .frame(maxWidth: .infinity, alignment: .leading)
17
+ PBDateTime(
18
+ dateVariant: .short(showIcon: false),
19
+ timeVariant: .iconTimeZone,
20
+ isLowercase: true,
21
+ isTimeBold: true,
22
+ zone: .utc,
23
+ showTimeZone: true,
24
+ timeZoneIdentifier: "2012-08-02T17:49:29Z"
25
+ )
26
+ HStack {
27
+ PBDateTime(
28
+ dateVariant: .short(showIcon: false),
29
+ timeVariant: .iconTimeZone,
30
+ isLowercase: true,
31
+ isTimeBold: true,
32
+ zone: .utc,
33
+ showTimeZone: true,
34
+ timeZoneIdentifier: "2012-08-02T17:49:29Z"
35
+ )
36
+ }
37
+ .frame(maxWidth: .infinity, alignment: .trailing)
38
+ }
39
+ ```
@@ -0,0 +1,39 @@
1
+ ![Date-Time-Default](https://github.com/powerhome/playbook-swift/assets/54749071/f9ea63f9-81bd-41a9-8171-8a213c55ccfe)
2
+ ```swift
3
+ VStack(alignment: .leading, spacing: Spacing.small) {
4
+ PBDateTime(
5
+ dateVariant: .dayDate(showYear: true),
6
+ timeVariant: .iconTimeZone,
7
+ isLowercase: true,
8
+ isTimeBold: true,
9
+ timeZoneIdentifier: "EST"
10
+ )
11
+ PBDateTime(
12
+ dateVariant: .dayDate(showYear: false),
13
+ timeVariant: .iconTimeZone,
14
+ isLowercase: true,
15
+ isTimeBold: true,
16
+ zone: .utc,
17
+ showTimeZone: true,
18
+ timeZoneIdentifier: "2012-08-02T17:49:29Z"
19
+ )
20
+ PBDateTime(
21
+ dateVariant: .short(showIcon: false),
22
+ timeVariant: .iconTimeZone,
23
+ isLowercase: true,
24
+ isTimeBold: true,
25
+ zone: .utc,
26
+ showTimeZone: true,
27
+ timeZoneIdentifier: "2012-08-02T17:49:29Z",
28
+ showIcon: true
29
+ )
30
+ PBDateTime(
31
+ dateVariant: .standard,
32
+ timeVariant: .iconTimeZone,
33
+ isLowercase: true,
34
+ isTimeBold: true,
35
+ showTimeZone: true,
36
+ timeZoneIdentifier: "GMT+9"
37
+ )
38
+ }
39
+ ```
@@ -0,0 +1,15 @@
1
+ ### Props
2
+ | Name | Type | Description | Default | Values |
3
+ | --- | ----------- | --------- | --------- | --------- |
4
+ | **dateTime** | `Date` | Sets current date. | | |
5
+ | **iconSize** | `PBIcon.IconSize` | Allows user to change the size of the clock icon. | `.x3` | `.small` `.medium` `.large` |
6
+ | **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)` |
7
+ | **timeVariant** | `PBTime.Variant` | Allows user to choose how they would like the time to be displayed | `.time` | `.time` `.clockIcon` `.timeZone` `.iconTimeZone` `.withTimeZoneHeader` |
8
+ | **fontSize** | `PBFont` | Allows user to change the size of the text | `.caption` | `.subcaption` `.caption` `.body` |
9
+ | **isLowercase** | `Bool` | Determines whether or not am/pm is capitalized | `false` | `true` `false` |
10
+ | **isTimeBold** | `Bool` | Determines whether or not the time is bold | `false` | `true` `false` |
11
+ | **isTimeZoneBold** | `Bool` | Determines whether or not the time zone is bold | `false` | `true` `false` |
12
+ | **zone** | `PBTime.Zones` | Allows the user to set the time zone | `.east` | `.east` `.central` `.mountain` `.pacific` `.gmt` |
13
+ | **showTimeZone** | `Bool` | Determines whether or not the time zone is displayed | `false` | `true` `false` |
14
+ | **timeZoneIdentifier** | `String` | String that the time kit utilizes to calculate the current time and time zone | | |
15
+ | **showIcon** | `Bool` | Determines whether or not the clock icon is displayed | `false` | `true` `false` |
@@ -0,0 +1,78 @@
1
+ ![Date-Time-Sizes](https://github.com/powerhome/playbook-swift/assets/54749071/59b2394d-cf25-46b5-a634-ca0721a7b3b0)
2
+ ```swift
3
+ VStack(alignment: .leading, spacing: Spacing.xSmall) {
4
+ PBDateTime(
5
+ dateVariant: .dayDate(showYear: false),
6
+ timeVariant: .iconTimeZone,
7
+ fontSize: .caption,
8
+ zone: .utc,
9
+ showTimeZone: true,
10
+ timeZoneIdentifier: "2012-08-02T17:49:29Z",
11
+ showIcon: true
12
+ )
13
+ PBDateTime(
14
+ dateVariant: .dayDate(showYear: false),
15
+ timeVariant: .iconTimeZone,
16
+ fontSize: .caption,
17
+ zone: .utc,
18
+ showTimeZone: true,
19
+ timeZoneIdentifier: "2012-08-02T17:49:29Z"
20
+ )
21
+ PBDateTime(
22
+ dateVariant: .short(showIcon: false),
23
+ timeVariant: .iconTimeZone,
24
+ fontSize: .caption,
25
+ zone: .utc,
26
+ showTimeZone: true,
27
+ timeZoneIdentifier: "2012-08-02T17:49:29Z",
28
+ showIcon: true
29
+ )
30
+ PBDateTime(
31
+ dateVariant: .short(showIcon: false),
32
+ timeVariant: .iconTimeZone,
33
+ fontSize: .caption,
34
+ zone: .utc,
35
+ showTimeZone: true,
36
+ timeZoneIdentifier: "2012-08-02T17:49:29Z"
37
+ )
38
+ Spacer()
39
+ PBDateTime(
40
+ dateVariant: .dayDate(showYear: false),
41
+ timeVariant: .iconTimeZone,
42
+ isLowercase: true,
43
+ isTimeBold: true,
44
+ zone: .utc,
45
+ showTimeZone: true,
46
+ timeZoneIdentifier: "2012-08-02T17:49:29Z",
47
+ showIcon: true
48
+ )
49
+ PBDateTime(
50
+ dateVariant: .dayDate(showYear: false),
51
+ timeVariant: .iconTimeZone,
52
+ isLowercase: true,
53
+ isTimeBold: true,
54
+ zone: .utc,
55
+ showTimeZone: true,
56
+ timeZoneIdentifier: "2012-08-02T17:49:29Z"
57
+ )
58
+ PBDateTime(
59
+ dateVariant: .short(showIcon: false),
60
+ timeVariant: .iconTimeZone,
61
+ isLowercase: true,
62
+ isTimeBold: true,
63
+ zone: .utc,
64
+ showTimeZone: true,
65
+ timeZoneIdentifier: "2012-08-02T17:49:29Z",
66
+ showIcon: true
67
+ )
68
+ PBDateTime(
69
+ dateVariant: .short(showIcon: false),
70
+ timeVariant: .iconTimeZone,
71
+ isLowercase: true,
72
+ isTimeBold: true,
73
+ zone: .utc,
74
+ showTimeZone: true,
75
+ timeZoneIdentifier: "2012-08-02T17:49:29Z"
76
+ )
77
+ }
78
+ ```
@@ -9,3 +9,9 @@ examples:
9
9
  - date_time_default: Default
10
10
  - date_time_align: Alignment
11
11
  - date_time_size: Size
12
+
13
+ swift:
14
+ - date_time_default_swift: Default
15
+ - date_time_alignment_swift: Alignment
16
+ - date_time_size_swift: Size
17
+ - date_time_props_swift: ""
@@ -0,0 +1,20 @@
1
+ ![Date-Year-Stacked-Default](https://github.com/powerhome/playbook-swift/assets/54749071/997c9389-669a-42d4-b4af-661d546024b9)
2
+ ```swift
3
+ VStack(alignment: .leading, spacing: Spacing.small) {
4
+ PBDateYearStacked(
5
+ date: Date(),
6
+ alignment: .leading
7
+ )
8
+ .frame(maxWidth: .infinity, alignment: .leading)
9
+ PBDateYearStacked(
10
+ date: Date(),
11
+ alignment: .center
12
+ )
13
+ .frame(maxWidth: .infinity, alignment: .center)
14
+ PBDateYearStacked(
15
+ date: Date(),
16
+ alignment: .trailing
17
+ )
18
+ .frame(maxWidth: .infinity, alignment: .trailing)
19
+ }
20
+ ```
@@ -0,0 +1,6 @@
1
+ ### Props
2
+ | Name | Type | Description | Default | Values |
3
+ | --- | ----------- | --------- | --------- | --------- |
4
+ | **date** | `Date()` |Sets the size of the date | `Date()` | |
5
+ | **alignment** | `HorizontalAlignment` | Changes the alignment of the date | `.leading` | `.leading` `.trailing` |
6
+ | **variant** | `PBDate.Variant` | Boolean value that determines whether or not the month and date are reversed. | `.standard` | `short(showIcon: Bool)`, `standard`, `dayDate(showYear: Bool)`, `withIcon(isStandard: Bool)` |
@@ -5,3 +5,7 @@ examples:
5
5
 
6
6
  react:
7
7
  - date_year_stacked_default: Default
8
+
9
+ swift:
10
+ - date_year_stacked_default_swift: Default
11
+ - date_year_stacked_props_swift: ""
@@ -1,5 +1,5 @@
1
1
  import React, { useState } from 'react'
2
- import { Dropdown, User, FlexItem, Badge, Avatar } from '../../'
2
+ import { Dropdown, User, Flex, FlexItem, Badge, Avatar } from '../../'
3
3
 
4
4
  const DropdownWithCustomDisplay = (props) => {
5
5
  const [selectedOption, setSelectedOption] = useState();
@@ -69,7 +69,10 @@ const DropdownWithCustomDisplay = (props) => {
69
69
  <Dropdown.Option key={option.id}
70
70
  option={option}
71
71
  >
72
- <>
72
+ <Flex
73
+ align="center"
74
+ justify="between"
75
+ >
73
76
  <FlexItem>
74
77
  <User
75
78
  align="left"
@@ -93,7 +96,7 @@ const DropdownWithCustomDisplay = (props) => {
93
96
  }`}
94
97
  />
95
98
  </FlexItem>
96
- </>
99
+ </Flex>
97
100
  </Dropdown.Option>
98
101
  ))}
99
102
  </Dropdown>
@@ -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 %>
@@ -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>
@@ -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 %>
@@ -1 +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`.
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>
@@ -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,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
+ ```