playbook_ui 13.11.0 → 13.11.1.pre.alpha.play900startratingasinput1530
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/collapsible_content.rb +3 -1
- 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_collapsible/index.js +4 -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_star_rating/_star_rating.scss +61 -49
- data/app/pb_kits/playbook/pb_star_rating/_star_rating.tsx +151 -54
- data/app/pb_kits/playbook/pb_star_rating/custom-icons.js +356 -0
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_color_options.html.erb +7 -0
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_color_options.jsx +40 -0
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.html.erb +11 -1
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.jsx +17 -2
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.html.erb +6 -1
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.jsx +22 -5
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_number_config.html.erb +12 -0
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_number_config.jsx +57 -0
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_size_options.html.erb +23 -0
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_size_options.jsx +59 -0
- data/app/pb_kits/playbook/pb_star_rating/docs/example.yml +10 -5
- data/app/pb_kits/playbook/pb_star_rating/docs/index.js +6 -0
- data/app/pb_kits/playbook/pb_star_rating/star.svg +3 -0
- data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +56 -15
- data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +49 -6
- data/app/pb_kits/playbook/pb_star_rating/star_rating.test.js +33 -34
- data/app/pb_kits/playbook/pb_table/docs/_table_header.html.erb +4 -4
- data/app/pb_kits/playbook/pb_table/styles/_hover.scss +26 -2
- data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss +1 -17
- data/app/pb_kits/playbook/pb_table/table_header.html.erb +4 -3
- data/app/pb_kits/playbook/pb_table/table_header.rb +28 -5
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +25 -9
- 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/app/pb_kits/playbook/pb_tooltip/index.js +6 -0
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +2 -1
- data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx +34 -0
- data/app/pb_kits/playbook/playbook-doc.js +1 -1
- data/dist/playbook-rails.js +5 -5
- data/lib/playbook/pb_doc_helper.rb +2 -21
- data/lib/playbook/version.rb +2 -2
- metadata +39 -8
- data/app/pb_kits/playbook/pb_dawg/docs/example.yml +0 -9
|
@@ -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'
|
|
@@ -54,6 +54,8 @@ export default class PbTooltip extends PbEnhancedElement {
|
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
showTooltip(trigger) {
|
|
57
|
+
if (this.shouldShowTooltip === "false") return
|
|
58
|
+
|
|
57
59
|
this.popper = createPopper(trigger, this.tooltip, {
|
|
58
60
|
placement: this.position,
|
|
59
61
|
modifiers: [
|
|
@@ -127,4 +129,8 @@ export default class PbTooltip extends PbEnhancedElement {
|
|
|
127
129
|
get triggerElementSelector() {
|
|
128
130
|
return this.element.dataset.pbTooltipTriggerElementSelector
|
|
129
131
|
}
|
|
132
|
+
|
|
133
|
+
get shouldShowTooltip() {
|
|
134
|
+
return this.element.dataset.pbTooltipShowTooltip
|
|
135
|
+
}
|
|
130
136
|
}
|
|
@@ -20,7 +20,8 @@ module Playbook
|
|
|
20
20
|
pb_tooltip_position: position,
|
|
21
21
|
pb_tooltip_trigger_element_selector: trigger_element_selector,
|
|
22
22
|
pb_tooltip_trigger_element_id: trigger_element_id,
|
|
23
|
-
pb_tooltip_tooltip_id: tooltip_id
|
|
23
|
+
pb_tooltip_tooltip_id: tooltip_id,
|
|
24
|
+
pb_tooltip_show_tooltip: true
|
|
24
25
|
)
|
|
25
26
|
end
|
|
26
27
|
|
|
@@ -92,5 +92,39 @@ test("has position fixed", async () => {
|
|
|
92
92
|
cleanup();
|
|
93
93
|
})
|
|
94
94
|
|
|
95
|
+
cleanup();
|
|
96
|
+
});
|
|
97
|
+
|
|
98
|
+
test("display tooltip with showTooltip set to true", async () => {
|
|
99
|
+
render(
|
|
100
|
+
<Tooltip
|
|
101
|
+
data={{ testid: "fixed-position-test" }}
|
|
102
|
+
showTooltip
|
|
103
|
+
/>
|
|
104
|
+
);
|
|
105
|
+
|
|
106
|
+
fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
|
|
107
|
+
await waitFor(() => {
|
|
108
|
+
expect(screen.queryByRole("tooltip")).toBeInTheDocument();
|
|
109
|
+
cleanup();
|
|
110
|
+
})
|
|
111
|
+
|
|
112
|
+
cleanup();
|
|
113
|
+
});
|
|
114
|
+
|
|
115
|
+
test("doesn't display tooltip with showTooltip set to false", async () => {
|
|
116
|
+
render(
|
|
117
|
+
<Tooltip
|
|
118
|
+
data={{ testid: "fixed-position-test" }}
|
|
119
|
+
showTooltip={false}
|
|
120
|
+
/>
|
|
121
|
+
);
|
|
122
|
+
|
|
123
|
+
fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
|
|
124
|
+
await waitFor(() => {
|
|
125
|
+
expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
|
|
126
|
+
cleanup();
|
|
127
|
+
})
|
|
128
|
+
|
|
95
129
|
cleanup();
|
|
96
130
|
});
|
|
@@ -104,7 +104,7 @@ import * as UserBadge from 'pb_user_badge/docs'
|
|
|
104
104
|
import * as Walkthrough from 'pb_walkthrough/docs'
|
|
105
105
|
import * as WeekdayStacked from 'pb_weekday_stacked/docs'
|
|
106
106
|
|
|
107
|
-
WebpackerReact.
|
|
107
|
+
WebpackerReact.registerComponents({
|
|
108
108
|
...Avatar,
|
|
109
109
|
...AvatarActionButton,
|
|
110
110
|
...Background,
|