playbook_ui_docs 13.11.1 → 13.12.0.pre.alpha.PLAY880cardkithighlightzindex1655
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_external_controls.html.erb +22 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_external_controls.md +3 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_external_controls_multiple.html.erb +40 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_external_controls_multiple.md +1 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_icon/docs/_icon_border_swift.md +7 -0
- data/app/pb_kits/playbook/pb_icon/docs/_icon_default_swift.md +7 -0
- data/app/pb_kits/playbook/pb_icon/docs/_icon_flip_swift.md +11 -0
- data/app/pb_kits/playbook/pb_icon/docs/_icon_props_swift.md +8 -0
- data/app/pb_kits/playbook/pb_icon/docs/_icon_rotate_swift.md +11 -0
- data/app/pb_kits/playbook/pb_icon/docs/_icon_sizes_swift.md +46 -0
- data/app/pb_kits/playbook/pb_icon/docs/example.yml +8 -0
- data/app/pb_kits/playbook/pb_image/docs/_image_props_swift.md +7 -0
- data/app/pb_kits/playbook/pb_image/docs/_rounded_image_swift.md +47 -0
- data/app/pb_kits/playbook/pb_image/docs/_size_image_swift.md +47 -0
- data/app/pb_kits/playbook/pb_image/docs/_size_none_image_swift.md +15 -0
- data/app/pb_kits/playbook/pb_image/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_default_swift.md +11 -0
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples_swift.md +72 -0
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_swift.md +41 -0
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_props_swift.md +11 -0
- data/app/pb_kits/playbook/pb_label_value/docs/example.yml +6 -0
- data/app/pb_kits/playbook/pb_message/docs/_message_default_swift.md +57 -0
- data/app/pb_kits/playbook/pb_message/docs/_message_props_swift.md +12 -0
- data/app/pb_kits/playbook/pb_message/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default_swift.md +11 -0
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_props_swift.md +7 -0
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse_swift.md +13 -0
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size_swift.md +11 -0
- data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml +6 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default_swift.md +15 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_props_swift.md +5 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_small_swift.md +15 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_xsmall_swift.md +15 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +6 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children_swift.md +14 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dashed_swift.md +7 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line_swift.md +8 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_props_swift.md +8 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_swift.md +7 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical_swift.md +18 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/example.yml +8 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_header.html.erb +4 -4
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on_swift.md +35 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default_swift.md +29 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled_swift.md +13 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error_swift.md +24 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_props_swift.md +13 -0
- data/app/pb_kits/playbook/pb_text_input/docs/example.yml +7 -0
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default_swift.md +27 -0
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error_swift.md +11 -0
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_props_swift.md +9 -0
- data/app/pb_kits/playbook/pb_textarea/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default_swift.md +11 -0
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name_swift.md +10 -0
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_props_swift.md +6 -0
- data/app/pb_kits/playbook/pb_toggle/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx +0 -2
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.jsx +0 -1
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx +0 -1
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx +0 -1
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.html.erb +1 -1
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip.html.erb +39 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip.md +5 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx +45 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.md +3 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/index.js +1 -0
- data/dist/playbook-doc.js +7 -7
- metadata +56 -7
data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_small_swift.md
ADDED
@@ -0,0 +1,15 @@
|
|
1
|
+
![mulitple-users-stacked-small](https://github.com/powerhome/playbook/assets/92755007/277fd685-6302-462e-a02a-18a8fcb57715)
|
2
|
+
|
3
|
+
```swift
|
4
|
+
|
5
|
+
let oneUser = [andrew]
|
6
|
+
let twoUsers = [andrew, picAndrew]
|
7
|
+
let multipleUsers = [andrew, picAndrew, andrew, andrew]
|
8
|
+
|
9
|
+
HStack(spacing: Spacing.xSmall) {
|
10
|
+
PBMultipleUsersStacked(users: oneUser)
|
11
|
+
PBMultipleUsersStacked(users: twoUsers)
|
12
|
+
PBMultipleUsersStacked(users: multipleUsers)
|
13
|
+
}
|
14
|
+
|
15
|
+
```
|
data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_xsmall_swift.md
ADDED
@@ -0,0 +1,15 @@
|
|
1
|
+
![mulitple-users-stacked-xsmall](https://github.com/powerhome/playbook/assets/92755007/4f31976f-a41b-4923-9230-5015f6ad75f8)
|
2
|
+
|
3
|
+
```swift
|
4
|
+
|
5
|
+
let oneUser = [andrew]
|
6
|
+
let twoUsers = [andrew, picAndrew]
|
7
|
+
let multipleUsers = [andrew, picAndrew, andrew, andrew]
|
8
|
+
|
9
|
+
HStack(spacing: Spacing.xSmall) {
|
10
|
+
PBMultipleUsersStacked(users: oneUser, size: .xSmall)
|
11
|
+
PBMultipleUsersStacked(users: twoUsers, size: .xSmall)
|
12
|
+
PBMultipleUsersStacked(users: multipleUsers, size: .xSmall)
|
13
|
+
}
|
14
|
+
|
15
|
+
```
|
@@ -6,3 +6,9 @@ examples:
|
|
6
6
|
|
7
7
|
react:
|
8
8
|
- multiple_users_stacked_default: Default
|
9
|
+
|
10
|
+
swift:
|
11
|
+
- multiple_users_stacked_default_swift: Default
|
12
|
+
- multiple_users_stacked_small_swift: Small
|
13
|
+
- multiple_users_stacked_xsmall_swift: xSmall
|
14
|
+
- multiple_users_stacked_props_swift: ""
|
@@ -0,0 +1,14 @@
|
|
1
|
+
|
2
|
+
![section-separator-children](https://github.com/powerhome/playbook/assets/92755007/acd6a8eb-d034-4efd-b2e6-afabe739e678)
|
3
|
+
|
4
|
+
```swift
|
5
|
+
|
6
|
+
PBSectionSeparator(variant: .dashed) {
|
7
|
+
PBCard(alignment: .center, borderRadius: BorderRadius.rounded, padding: Spacing.xxSmall, width: 70) {
|
8
|
+
Text("Today")
|
9
|
+
.pbFont(.caption)
|
10
|
+
.frame(maxWidth: .infinity, alignment: .center)
|
11
|
+
}
|
12
|
+
}
|
13
|
+
|
14
|
+
```
|
@@ -0,0 +1,8 @@
|
|
1
|
+
### Props
|
2
|
+
| Name | Type | Description | Default | Values |
|
3
|
+
| --- | ----------- | --------- | --------- | --------- |
|
4
|
+
| **text** | `String` | Adds text to the Section Separator | `nil` | |
|
5
|
+
| **orientation** | `Orientation` | Changes the orientation | `.horizontal` | `.horizontal` `.vertical` |
|
6
|
+
| **variant** | `Variant` | Changes the style of the Section Separator | `.card` | `.dashed` `.card` |
|
7
|
+
| **dividerOpacity** | `CGFloat` | Adjusts the opacity of the divider | `1` | |
|
8
|
+
| **margin** | `CGFloat` | Adds margin between text and the divider | `Spacing.xSmall` | `Spacing.none` `Spacing.xxSmall` `Spacing.xSmall` `Spacing.small` `Spacing.medium` `Spacing.large` `Spacing.xLarge` |
|
@@ -0,0 +1,18 @@
|
|
1
|
+
![section-separator-verticle](https://github.com/powerhome/playbook/assets/92755007/21ca54a5-6b8a-459f-91ad-4e9b68258f68)
|
2
|
+
|
3
|
+
```swift
|
4
|
+
|
5
|
+
let loremIpsum: some View = Text(
|
6
|
+
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididt labore et dolore"
|
7
|
+
)
|
8
|
+
|
9
|
+
HStack(spacing: Spacing.none) {
|
10
|
+
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididt labore et dolore"
|
11
|
+
PBSectionSeparator(orientation: .vertical)
|
12
|
+
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididt labore et dolore"
|
13
|
+
}
|
14
|
+
.frame(maxWidth: .infinity)
|
15
|
+
.frame(height: 120, alignment: .center)
|
16
|
+
.listRowSeparator(.hidden)
|
17
|
+
|
18
|
+
```
|
@@ -13,3 +13,11 @@ examples:
|
|
13
13
|
- section_separator_text: Text Separator
|
14
14
|
- section_separator_vertical: Vertical
|
15
15
|
- section_separator_children: Children
|
16
|
+
|
17
|
+
swift:
|
18
|
+
- section_separator_line_swift: Line Separator
|
19
|
+
- section_separator_dashed_swift: Dashed Separator
|
20
|
+
- section_separator_text_swift: Text Separator
|
21
|
+
- section_separator_vertical_swift: Vertical
|
22
|
+
- section_separator_children_swift: Children
|
23
|
+
- section_separator_props_swift: ""
|
@@ -39,10 +39,10 @@
|
|
39
39
|
text: "Full Name",
|
40
40
|
colspan: 2,
|
41
41
|
sort_menu: [
|
42
|
-
{ item: "First Name
|
43
|
-
{ item: "First Name
|
44
|
-
{ item: "Last Name
|
45
|
-
{ item: "Last Name
|
42
|
+
{ item: "First Name", link: "?sort=firstname_desc#table-header", active: params["sort"] == "firstname_desc", direction: "desc" },
|
43
|
+
{ item: "First Name", link: "?sort=firstname_asc#table-header", active: params["sort"] == "firstname_asc", direction: "asc" },
|
44
|
+
{ item: "Last Name", link: "?sort=lastname_desc#table-header", active: params["sort"] == "lastname_desc", direction: "desc" },
|
45
|
+
{ item: "Last Name", link: "?sort=lastname_asc#table-header", active: params["sort"] == "lastname_asc", direction: "asc" }
|
46
46
|
],
|
47
47
|
}) %>
|
48
48
|
<%= pb_rails("table/table_header", props: {
|
@@ -0,0 +1,35 @@
|
|
1
|
+
![text-input-add-on](https://github.com/powerhome/playbook/assets/92755007/65a28e6a-9e65-4ca1-af8d-91dae6eac4f5)
|
2
|
+
|
3
|
+
```swift
|
4
|
+
|
5
|
+
PBTextInput(
|
6
|
+
"ADD ON WITH DEFAULTS",
|
7
|
+
text: $textAddOn,
|
8
|
+
style: .rightIcon(.user, divider: true)
|
9
|
+
)
|
10
|
+
|
11
|
+
PBTextInput(
|
12
|
+
"RIGHT-ALIGNED ADD ON WITH BORDER",
|
13
|
+
text: $textAddOnRight,
|
14
|
+
style: .rightIcon(.user, divider: true)
|
15
|
+
)
|
16
|
+
|
17
|
+
PBTextInput(
|
18
|
+
"RIGHT-ALIGNED ADD ON WITH NO BORDER",
|
19
|
+
text: $textAddOnRightNoBorder,
|
20
|
+
style: .rightIcon(.user, divider: false)
|
21
|
+
)
|
22
|
+
|
23
|
+
PBTextInput(
|
24
|
+
"LEFT-ALIGNED ADD ON WITH NO BORDER",
|
25
|
+
text: $textAddOnLeft,
|
26
|
+
style: .leftIcon(.user, divider: false)
|
27
|
+
)
|
28
|
+
|
29
|
+
PBTextInput(
|
30
|
+
"LEFT-ALIGNED ADD ON WITH BORDER",
|
31
|
+
text: $textAddOnLeftNoBorder,
|
32
|
+
style: .leftIcon(.user, divider: true)
|
33
|
+
)
|
34
|
+
|
35
|
+
```
|
@@ -0,0 +1,29 @@
|
|
1
|
+
![text-input-default](https://github.com/powerhome/playbook/assets/92755007/625a246e-9d5c-42ea-8c6e-7afcf0984c9a)
|
2
|
+
|
3
|
+
|
4
|
+
```swift
|
5
|
+
|
6
|
+
@State private var textFirstName: String = ""
|
7
|
+
@State private var textLastName: String = ""
|
8
|
+
@State private var textPhone: String = ""
|
9
|
+
|
10
|
+
PBTextInput(
|
11
|
+
"First name",
|
12
|
+
text: $textFirstName,
|
13
|
+
placeholder: "Enter first name"
|
14
|
+
)
|
15
|
+
|
16
|
+
PBTextInput(
|
17
|
+
"Last name",
|
18
|
+
text: $textLastName,
|
19
|
+
placeholder: "Enter last name"
|
20
|
+
)
|
21
|
+
|
22
|
+
PBTextInput(
|
23
|
+
"Phone number",
|
24
|
+
text: $textPhone,
|
25
|
+
placeholder: "Enter phone number",
|
26
|
+
keyboardType: .phonePad
|
27
|
+
)
|
28
|
+
|
29
|
+
```
|
@@ -0,0 +1,24 @@
|
|
1
|
+
![text-input-error](https://github.com/powerhome/playbook/assets/92755007/7c664f75-1d7a-4a94-bc59-6f845a68ce19)
|
2
|
+
|
3
|
+
|
4
|
+
```swift
|
5
|
+
|
6
|
+
@State private var textError: String = ""
|
7
|
+
@State private var textConfirmError: String = ""
|
8
|
+
|
9
|
+
PBTextInput(
|
10
|
+
"Email address",
|
11
|
+
text: $textError,
|
12
|
+
placeholder: "Enter email address",
|
13
|
+
error: (true, "Insert a valid email"),
|
14
|
+
style: .leftIcon(.user, divider: true)
|
15
|
+
)
|
16
|
+
|
17
|
+
PBTextInput(
|
18
|
+
"Confirm email address",
|
19
|
+
text: $textConfirmError,
|
20
|
+
placeholder: "Confirm email address",
|
21
|
+
style: .leftIcon(.user, divider: true)
|
22
|
+
)
|
23
|
+
|
24
|
+
```
|
@@ -0,0 +1,13 @@
|
|
1
|
+
### Props
|
2
|
+
| Name | Type | Description | Default | Values |
|
3
|
+
| --- | ----------- | --------- | --------- | --------- |
|
4
|
+
| **title** | `String` | Adds a title | `nil` | |
|
5
|
+
| **placeholder** | `String` | Adds placeholder text | `""` | |
|
6
|
+
| **error** | `(Bool, String)` | Changes the style of the Text Input | `nil` | |
|
7
|
+
| **style** | `Style` | Changes the style of the Text Input | `.default` | `.default` `.rightIcon` `.leftIcon` `.inline` `.disabled` |
|
8
|
+
| **onChange** | `Bool` | Adds an event handler | `nil` | |
|
9
|
+
| **keyboardType** | `UIKeyboardType` | Speficies the keyboard type (ios only) | `.default` | |
|
10
|
+
| **text** | `String` | Sets the Text Input's text value | | |
|
11
|
+
| **selected** | `Bool` | Changes the style of the Text Input | | `true` `false` |
|
12
|
+
| **isHovering** | `Bool` | Changes the style of the Text Input | `false` | `true` `false` |
|
13
|
+
| **isIconHovering** | `Bool` | Changes the style of the Text Input | `false` | `true` `false` |
|
@@ -16,3 +16,10 @@ examples:
|
|
16
16
|
- text_input_add_on: Add On
|
17
17
|
- text_input_inline: Inline
|
18
18
|
- text_input_no_label: No Label
|
19
|
+
|
20
|
+
swift:
|
21
|
+
- text_input_default_swift: Default
|
22
|
+
- text_input_error_swift: With Error
|
23
|
+
- text_input_disabled_swift: Disabled
|
24
|
+
- text_input_add_on_swift: Add On
|
25
|
+
- text_input_props_swift: ""
|
@@ -0,0 +1,27 @@
|
|
1
|
+
![textarea-default](https://github.com/powerhome/playbook/assets/92755007/40eec958-63d7-4840-bf5c-f8d1e34c911a)
|
2
|
+
|
3
|
+
```swift
|
4
|
+
|
5
|
+
@State var defaultText = ""
|
6
|
+
@State var placeholderText = ""
|
7
|
+
@State var customText = "Default value text"
|
8
|
+
|
9
|
+
VStack(alignment: .leading, spacing: Spacing.small) {
|
10
|
+
PBTextArea(
|
11
|
+
"Label",
|
12
|
+
text: $defaultText
|
13
|
+
)
|
14
|
+
|
15
|
+
PBTextArea(
|
16
|
+
"Label",
|
17
|
+
text: $placeholderText,
|
18
|
+
placeholder: "Placeholder with text"
|
19
|
+
)
|
20
|
+
|
21
|
+
PBTextArea(
|
22
|
+
"Label",
|
23
|
+
text: $customText
|
24
|
+
)
|
25
|
+
}
|
26
|
+
|
27
|
+
```
|
@@ -0,0 +1,9 @@
|
|
1
|
+
### Props
|
2
|
+
| Name | Type | Description | Default | Values |
|
3
|
+
| --- | ----------- | --------- | --------- | --------- |
|
4
|
+
| **characterCount** | `CharacterCount` | Adds a character counter to the Textarea | `.noCount` | `.noCount` `.count` `.maxCharacterCount` `.maxCharacterCountBlock` `.maxCharacterCountError` |
|
5
|
+
| **inline** | `Bool` | Changes the style of the Textarea | `false` | `true` `false` |
|
6
|
+
| **label** | `String` | Adds a label | `nil` | |
|
7
|
+
| **placeholder** | `String` | Adds placeholder text | `nil` | |
|
8
|
+
| **text** | `String` | Sets the Textarea's text value | `Binding<String>` | |
|
9
|
+
| **error** | `String` | Changes the style of the Textarea | `nil` | |
|
@@ -0,0 +1,6 @@
|
|
1
|
+
### Props
|
2
|
+
| Name | Type | Description | Default | Values |
|
3
|
+
| --- | ----------- | --------- | --------- | --------- |
|
4
|
+
| **isHovering** | `Bool` | Changes the style of the Toggle | `false` | `true` `false` |
|
5
|
+
| **label** | `String` | Adds a label to the Toggle | `nil` | |
|
6
|
+
| **checked** | `Bool` | Changes the style of the Toggle | | `true` `false` |
|
@@ -9,12 +9,10 @@ const TooltipDefaultReact = (props) => {
|
|
9
9
|
<Flex
|
10
10
|
flexDirection='row'
|
11
11
|
gap='md'
|
12
|
-
justifyContent='center'
|
13
12
|
wrap
|
14
13
|
>
|
15
14
|
<FlexItem>
|
16
15
|
<Tooltip
|
17
|
-
className={"customClassNameHere"}
|
18
16
|
placement='top'
|
19
17
|
text="Whoa. I'm a Tooltip"
|
20
18
|
zIndex={10}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
<%= pb_rails("flex", props: {
|
1
|
+
<%= pb_rails("flex", props: { orientation: "column" }) do %>
|
2
2
|
<%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
|
3
3
|
<%= pb_rails("button", props: {classname: "tooltip-example-trigger", text: "Example 1"}) %>
|
4
4
|
<% end %>
|
@@ -0,0 +1,39 @@
|
|
1
|
+
|
2
|
+
<%= pb_rails("flex", props: { orientation: "column", gap: "md" }) do %>
|
3
|
+
<%= pb_rails("button", props: {text: "Toggle state", id: "toggle-tooltip-button"}) %>
|
4
|
+
<%= pb_rails("body") do %>
|
5
|
+
Tooltip is: <code id="show-tooltip-state">enabled</code>
|
6
|
+
<% end %>
|
7
|
+
<%= pb_rails("flex/flex_item") do %>
|
8
|
+
<span id="truncated-tooltip-1">Hover me</span>
|
9
|
+
<%= pb_rails("tooltip", props: {
|
10
|
+
trigger_element_selector: "#truncated-tooltip-1",
|
11
|
+
tooltip_id: "truncated-1",
|
12
|
+
position: "right",
|
13
|
+
}) do %>
|
14
|
+
Tooltip is enabled
|
15
|
+
<% end %>
|
16
|
+
<% end %>
|
17
|
+
<% end %>
|
18
|
+
|
19
|
+
|
20
|
+
<script>
|
21
|
+
const toggleTooltipButton = document.getElementById("toggle-tooltip-button");
|
22
|
+
const showTooltipStateText = document.getElementById("show-tooltip-state");
|
23
|
+
|
24
|
+
function hideTooltipIfNotTruncated(tooltipId) {
|
25
|
+
const tooltipElement = document.querySelector(
|
26
|
+
`[data-pb-tooltip-tooltip-id="${tooltipId}"]`
|
27
|
+
);
|
28
|
+
|
29
|
+
tooltipElement.dataset.pbTooltipShowTooltip =
|
30
|
+
tooltipElement.dataset.pbTooltipShowTooltip == "false" ? "true" : "false";
|
31
|
+
|
32
|
+
showTooltipStateText.innerText =
|
33
|
+
tooltipElement.dataset.pbTooltipShowTooltip == "false" ? "disabled" : "enabled";
|
34
|
+
}
|
35
|
+
|
36
|
+
toggleTooltipButton.addEventListener("click", () => {
|
37
|
+
hideTooltipIfNotTruncated("truncated-1");
|
38
|
+
});
|
39
|
+
</script>
|
@@ -0,0 +1,5 @@
|
|
1
|
+
You can build your own logic to control whether to show or hide the tooltip.
|
2
|
+
|
3
|
+
Click on the `Toggle state` button to change the state of the component and hover over the 'hover me' text to see it in action.
|
4
|
+
|
5
|
+
Each Tooltip has a `dataset` with the `pbTooltipShowTooltip` property set to true by default. To update it, access the `pbTooltipShowTooltip` in the dataset of your tooltip element: `yourTooltip.dataset.pbTooltipShowTooltip = 'false'`
|
@@ -0,0 +1,45 @@
|
|
1
|
+
// @flow
|
2
|
+
|
3
|
+
import React, { useState } from 'react'
|
4
|
+
import { Button, Body, Flex, FlexItem, Tooltip } from '../..'
|
5
|
+
|
6
|
+
const TooltipShowTooltipReact = (props) => {
|
7
|
+
const [showTooltip, setShowTooltip] = useState(true);
|
8
|
+
|
9
|
+
return (
|
10
|
+
<Flex
|
11
|
+
flexDirection='column'
|
12
|
+
gap='md'
|
13
|
+
wrap
|
14
|
+
>
|
15
|
+
<FlexItem>
|
16
|
+
<Button
|
17
|
+
onClick={()=> setShowTooltip(!showTooltip)}
|
18
|
+
text="Toggle state"
|
19
|
+
/>
|
20
|
+
</FlexItem>
|
21
|
+
<FlexItem>
|
22
|
+
<Body >
|
23
|
+
<p>
|
24
|
+
{'Tooltip is: '}
|
25
|
+
<code>{showTooltip ? "enabled" : "disabled"}</code>
|
26
|
+
</p>
|
27
|
+
</Body>
|
28
|
+
</FlexItem>
|
29
|
+
<FlexItem>
|
30
|
+
<Tooltip
|
31
|
+
placement='right'
|
32
|
+
showTooltip={showTooltip}
|
33
|
+
text='Tooltip is enabled'
|
34
|
+
zIndex={10}
|
35
|
+
{...props}
|
36
|
+
>
|
37
|
+
{'Hover me.'}
|
38
|
+
</Tooltip>
|
39
|
+
</FlexItem>
|
40
|
+
|
41
|
+
</Flex>
|
42
|
+
)
|
43
|
+
}
|
44
|
+
|
45
|
+
export default TooltipShowTooltipReact
|
@@ -4,6 +4,7 @@ examples:
|
|
4
4
|
- tooltip_default: Default
|
5
5
|
- tooltip_selectors: Using Common Selectors
|
6
6
|
- tooltip_with_icon_circle: Icon Circle Tooltip
|
7
|
+
- tooltip_show_tooltip: Show Tooltip
|
7
8
|
|
8
9
|
react:
|
9
10
|
- tooltip_default_react: Default
|
@@ -11,3 +12,5 @@ examples:
|
|
11
12
|
- tooltip_margin: Margin
|
12
13
|
- tooltip_icon: Tooltip with Icon
|
13
14
|
- tooltip_delay: Delay
|
15
|
+
- tooltip_show_tooltip_react: Show Tooltip
|
16
|
+
|
@@ -3,3 +3,4 @@ export { default as TooltipInteraction } from './_tooltip_interaction'
|
|
3
3
|
export { default as TooltipMargin } from './_tooltip_margin'
|
4
4
|
export { default as TooltipIcon } from './_tooltip_icon'
|
5
5
|
export { default as TooltipDelay } from './_tooltip_delay'
|
6
|
+
export { default as TooltipShowTooltipReact } from './_tooltip_show_tooltip_react'
|