playbook_ui 14.25.0.pre.alpha.PLAY2379datekitjesttestreact9838 → 14.25.0.pre.alpha.PLAY2413togglefocusstate9860
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_props_swift.md +3 -2
- data/app/pb_kits/playbook/pb_toggle/_toggle.scss +24 -3
- data/app/pb_kits/playbook/pb_toggle/_toggle.tsx +3 -0
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.html.erb +4 -2
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx +2 -1
- data/app/pb_kits/playbook/pb_user/docs/_user_props_table.md +14 -7
- data/dist/chunks/{_weekday_stacked-CX4YxAHz.js → _weekday_stacked-2gKd1RZJ.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +2 -2
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +3 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 3677879da7e593e31525255b55b5237409162518114a48b5831e32c1180590a0
|
|
4
|
+
data.tar.gz: 4dc0cdad6ff5ab48b0a4ecd6679dc64b03f80552fb8a41ab770484ec6cc4a59b
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: aaa29afaa3704156fdc575ca96dbe0b1352ec51efe1782d6614c488a74cffafea43cb11891ff647c6d6f6cfa631cd6a8d5d9168e571710ae4dd8a86abd4e6cb0
|
|
7
|
+
data.tar.gz: cc0eb00716a6d0095082da70b28c6bdc1089987b71822f603c909b46b8c3569d80a7a61294af65b4792da0eba762a2baa57aba99b3a24080d1a801859ba07f02
|
data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_props_swift.md
CHANGED
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
| Name | Type | Description | Default | Values |
|
|
3
3
|
| --- | ----------- | --------- | --------- | --------- |
|
|
4
4
|
| **text** | `String` |`Value for the toast message` | `nil` | |
|
|
5
|
-
| **
|
|
6
|
-
`
|
|
5
|
+
| **font** | `PBFont` |`Value for the toast message font style` | `.title4` | |
|
|
6
|
+
| **animatedIcon** | `AnyView` |`Value for the option to use an animated icon` | `nil` | |
|
|
7
|
+
| **variant** | `Variant` | `Determines the type pf toast message being displayed` | `.custom()` | `error` `success` `neutral` `custom()` |
|
|
7
8
|
| **actionView** | `dismissAction` | Dismisses the toast message | `.default` | `default` `custom()` `withTimer()` |
|
|
8
9
|
| **dismissAction** | `(() -> Void)` | `Triggers the dismiss action` | | |
|
|
@@ -13,6 +13,8 @@ $transition: .2s ease-in-out;
|
|
|
13
13
|
$border_default: 3px solid $color_checkbox_default;
|
|
14
14
|
|
|
15
15
|
.pb_toggle_wrapper {
|
|
16
|
+
position: relative;
|
|
17
|
+
|
|
16
18
|
.pb_toggle_control {
|
|
17
19
|
cursor: pointer;
|
|
18
20
|
transition: $transition;
|
|
@@ -23,6 +25,7 @@ $transition: .2s ease-in-out;
|
|
|
23
25
|
border: $border_default;
|
|
24
26
|
position: relative;
|
|
25
27
|
box-sizing: content-box;
|
|
28
|
+
pointer-events: none;
|
|
26
29
|
|
|
27
30
|
&:after {
|
|
28
31
|
transition: $transition;
|
|
@@ -46,7 +49,21 @@ $transition: .2s ease-in-out;
|
|
|
46
49
|
}
|
|
47
50
|
|
|
48
51
|
input {
|
|
49
|
-
|
|
52
|
+
position: absolute;
|
|
53
|
+
top: 0;
|
|
54
|
+
left: 0;
|
|
55
|
+
width: 100%;
|
|
56
|
+
height: 100%;
|
|
57
|
+
margin: 0;
|
|
58
|
+
padding: 0;
|
|
59
|
+
opacity: 0;
|
|
60
|
+
z-index: 2;
|
|
61
|
+
|
|
62
|
+
&:focus + .pb_toggle_control,
|
|
63
|
+
&:focus-visible + .pb_toggle_control {
|
|
64
|
+
box-shadow: 0px 0px 0px 2px $white, 0px 0px 0px 4px $primary;
|
|
65
|
+
outline: none;
|
|
66
|
+
}
|
|
50
67
|
|
|
51
68
|
&:disabled + .pb_toggle_control {
|
|
52
69
|
cursor: not-allowed;
|
|
@@ -61,8 +78,6 @@ $transition: .2s ease-in-out;
|
|
|
61
78
|
}
|
|
62
79
|
|
|
63
80
|
input:checked {
|
|
64
|
-
display: none;
|
|
65
|
-
|
|
66
81
|
&:checked + .pb_toggle_control {
|
|
67
82
|
border: $border_success;
|
|
68
83
|
background-color: $color_checkbox_success;
|
|
@@ -73,6 +88,12 @@ $transition: .2s ease-in-out;
|
|
|
73
88
|
}
|
|
74
89
|
}
|
|
75
90
|
|
|
91
|
+
&:focus + .pb_toggle_control,
|
|
92
|
+
&:focus-visible + .pb_toggle_control {
|
|
93
|
+
box-shadow: 0px 0px 0px 2px $white, 0px 0px 0px 4px $primary;
|
|
94
|
+
outline: none;
|
|
95
|
+
}
|
|
96
|
+
|
|
76
97
|
&:disabled + .pb_toggle_control {
|
|
77
98
|
cursor: not-allowed;
|
|
78
99
|
opacity: 0.5;
|
|
@@ -23,6 +23,7 @@ type Props = {
|
|
|
23
23
|
name?: string,
|
|
24
24
|
onChange?: InputCallback<HTMLInputElement>,
|
|
25
25
|
size?: "sm" | "md",
|
|
26
|
+
tabIndex?: number,
|
|
26
27
|
value?: string,
|
|
27
28
|
} & GlobalProps
|
|
28
29
|
|
|
@@ -40,6 +41,7 @@ const Toggle = ({
|
|
|
40
41
|
// Function body here
|
|
41
42
|
},
|
|
42
43
|
size = 'sm',
|
|
44
|
+
tabIndex,
|
|
43
45
|
value,
|
|
44
46
|
...props
|
|
45
47
|
}: Props): React.ReactElement => {
|
|
@@ -73,6 +75,7 @@ const Toggle = ({
|
|
|
73
75
|
disabled={disabled}
|
|
74
76
|
name={name}
|
|
75
77
|
onChange={onChange}
|
|
78
|
+
tabIndex={tabIndex}
|
|
76
79
|
type="checkbox"
|
|
77
80
|
value={value}
|
|
78
81
|
/>
|
|
@@ -1,11 +1,18 @@
|
|
|
1
1
|
### Props
|
|
2
2
|
| Name | Type | Description | Default | Values |
|
|
3
3
|
| --- | ----------- | --------- | --------- | --------- |
|
|
4
|
-
| **name** | `String` | Sets the User's name |
|
|
4
|
+
| **name** | `String` | Sets the User's name | `""` | |
|
|
5
|
+
| **nameFont** | `Typography` | Font styling for the user's name | `.init(font: .title4, variant: .bold)` | |
|
|
6
|
+
| **image** | `Image?` | Sets image for the avatar | `nil` | |
|
|
7
|
+
| **orientation** | `Orientation` | Changes the orientation of the User | `.horizontal` | `.horizontal` `.vertical` |
|
|
8
|
+
| **size** | `Size` | Changes the size of the User | `.medium` | `.xxSmall` `.xSmall` `.small` `.medium` `.large` `.xLarge` |
|
|
9
|
+
| **territory** | `String?` | Adds the User's territory | `nil` | |
|
|
10
|
+
| **title** | `String?` | Adds a title | `nil` | |
|
|
11
|
+
| **subtitle** | `AnyView?` | Adds a subtitle view | `nil` | |
|
|
12
|
+
| **status** | `PBOnlineStatus.Status?` | An indicator for the current status of the user | `nil` | `.online` `.away` `.offline` |
|
|
5
13
|
| **displayAvatar** | `Bool` | Displays the User's avatar | `true` | `true` `false` |
|
|
6
|
-
| **
|
|
7
|
-
| **
|
|
8
|
-
| **
|
|
9
|
-
| **
|
|
10
|
-
|
|
11
|
-
| **status** | `PBAvatar.PresenceStatus?` | An idicator for the current status of the user | `.none` | `.online` `.away` `.offline` |
|
|
14
|
+
| **territoryTitleFont** | `PBFont` | Font for territory and title text | `.subcaption` | `.title1` `.body` `.caption` `.subcaption` `.badgeText` `.title4` |
|
|
15
|
+
| **isActive** | `Bool` | Sets whether the user is active | `true` | `true` `false` |
|
|
16
|
+
| **hasInactiveBadge** | `Bool` | Shows inactive badge when user is not active | `false` | `true` `false` |
|
|
17
|
+
| **spacing** | `CGFloat` | Controls spacing between elements | `Spacing.small` | `.none` `.xxSmall` `.xSmall` `.small` `.medium` `.large` `.xLarge` |
|
|
18
|
+
|