playbook_ui_docs 13.11.1.pre.alpha.play900startratingasinput1530 → 13.11.1
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/example.yml +0 -2
- data/app/pb_kits/playbook/pb_icon/docs/example.yml +0 -8
- data/app/pb_kits/playbook/pb_image/docs/example.yml +0 -5
- data/app/pb_kits/playbook/pb_label_value/docs/example.yml +0 -6
- data/app/pb_kits/playbook/pb_message/docs/example.yml +0 -4
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.html.erb +1 -11
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.jsx +2 -17
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.html.erb +1 -6
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.jsx +5 -22
- data/app/pb_kits/playbook/pb_star_rating/docs/example.yml +5 -10
- data/app/pb_kits/playbook/pb_star_rating/docs/index.js +0 -6
- data/app/pb_kits/playbook/pb_table/docs/_table_header.html.erb +4 -4
- 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 +2 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.jsx +1 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx +1 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx +1 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.html.erb +1 -1
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +0 -3
- data/app/pb_kits/playbook/pb_tooltip/docs/index.js +0 -1
- data/dist/playbook-doc.js +8 -8
- metadata +7 -37
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_external_controls.html.erb +0 -22
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_external_controls.md +0 -3
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_external_controls_multiple.html.erb +0 -40
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_external_controls_multiple.md +0 -1
- data/app/pb_kits/playbook/pb_icon/docs/_icon_border_swift.md +0 -7
- data/app/pb_kits/playbook/pb_icon/docs/_icon_default_swift.md +0 -7
- data/app/pb_kits/playbook/pb_icon/docs/_icon_flip_swift.md +0 -11
- data/app/pb_kits/playbook/pb_icon/docs/_icon_props_swift.md +0 -8
- data/app/pb_kits/playbook/pb_icon/docs/_icon_rotate_swift.md +0 -11
- data/app/pb_kits/playbook/pb_icon/docs/_icon_sizes_swift.md +0 -46
- data/app/pb_kits/playbook/pb_image/docs/_image_props_swift.md +0 -7
- data/app/pb_kits/playbook/pb_image/docs/_rounded_image_swift.md +0 -47
- data/app/pb_kits/playbook/pb_image/docs/_size_image_swift.md +0 -47
- data/app/pb_kits/playbook/pb_image/docs/_size_none_image_swift.md +0 -15
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_default_swift.md +0 -11
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples_swift.md +0 -72
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_swift.md +0 -41
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_props_swift.md +0 -11
- data/app/pb_kits/playbook/pb_message/docs/_message_default_swift.md +0 -57
- data/app/pb_kits/playbook/pb_message/docs/_message_props_swift.md +0 -12
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_color_options.html.erb +0 -7
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_color_options.jsx +0 -40
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_number_config.html.erb +0 -12
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_number_config.jsx +0 -57
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_size_options.html.erb +0 -23
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_size_options.jsx +0 -59
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip.html.erb +0 -39
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip.md +0 -5
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx +0 -45
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.md +0 -3
@@ -1,7 +0,0 @@
|
|
1
|
-
<%= pb_rails("star_rating", props: { rating: 3 }) %>
|
2
|
-
</br>
|
3
|
-
<%= pb_rails("star_rating", props: { rating: 3, color_option: "outline" }) %>
|
4
|
-
</br>
|
5
|
-
<%= pb_rails("star_rating", props: { rating: 3, color_option: "primary" }) %>
|
6
|
-
</br>
|
7
|
-
<%= pb_rails("star_rating", props: { rating: 3, color_option: "subtle" }) %>
|
@@ -1,40 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
|
3
|
-
import StarRating from '../_star_rating'
|
4
|
-
|
5
|
-
const StarRatingColorOptions = (props) => (
|
6
|
-
<>
|
7
|
-
|
8
|
-
<StarRating
|
9
|
-
rating={3}
|
10
|
-
{...props}
|
11
|
-
/>
|
12
|
-
|
13
|
-
<br />
|
14
|
-
|
15
|
-
<StarRating
|
16
|
-
colorOption='outline'
|
17
|
-
rating={3}
|
18
|
-
{...props}
|
19
|
-
/>
|
20
|
-
|
21
|
-
<br />
|
22
|
-
|
23
|
-
<StarRating
|
24
|
-
colorOption='primary'
|
25
|
-
rating={3}
|
26
|
-
{...props}
|
27
|
-
/>
|
28
|
-
|
29
|
-
<br />
|
30
|
-
|
31
|
-
<StarRating
|
32
|
-
colorOption='subtle'
|
33
|
-
rating={3}
|
34
|
-
{...props}
|
35
|
-
/>
|
36
|
-
|
37
|
-
</>
|
38
|
-
)
|
39
|
-
|
40
|
-
export default StarRatingColorOptions
|
@@ -1,12 +0,0 @@
|
|
1
|
-
<%= pb_rails("star_rating", props: { rating: 3, denominator: 3 }) %>
|
2
|
-
</br>
|
3
|
-
<%= pb_rails("star_rating", props: { rating: 3, denominator: 4 }) %>
|
4
|
-
</br>
|
5
|
-
<%= pb_rails("star_rating", props: { rating: 3 }) %>
|
6
|
-
</br>
|
7
|
-
<%= pb_rails("star_rating", props: { rating: 3, denominator: 6 }) %>
|
8
|
-
</br>
|
9
|
-
<%= pb_rails("star_rating", props: { rating: 3, denominator: 7 }) %>
|
10
|
-
</br>
|
11
|
-
<%= pb_rails("star_rating", props: { rating: 3, denominator: 8 }) %>
|
12
|
-
</br>
|
@@ -1,57 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
|
3
|
-
import StarRating from '../_star_rating'
|
4
|
-
|
5
|
-
const StarRatingNumberConfig = (props) => (
|
6
|
-
<>
|
7
|
-
|
8
|
-
<StarRating
|
9
|
-
denominator={3}
|
10
|
-
rating={3}
|
11
|
-
{...props}
|
12
|
-
/>
|
13
|
-
|
14
|
-
<br />
|
15
|
-
|
16
|
-
<StarRating
|
17
|
-
denominator={4}
|
18
|
-
rating={3}
|
19
|
-
{...props}
|
20
|
-
/>
|
21
|
-
|
22
|
-
<br />
|
23
|
-
|
24
|
-
<StarRating
|
25
|
-
denominator={5}
|
26
|
-
rating={3}
|
27
|
-
{...props}
|
28
|
-
/>
|
29
|
-
|
30
|
-
<br />
|
31
|
-
|
32
|
-
<StarRating
|
33
|
-
denominator={6}
|
34
|
-
rating={3}
|
35
|
-
{...props}
|
36
|
-
/>
|
37
|
-
|
38
|
-
<br />
|
39
|
-
|
40
|
-
<StarRating
|
41
|
-
denominator={7}
|
42
|
-
rating={3}
|
43
|
-
{...props}
|
44
|
-
/>
|
45
|
-
|
46
|
-
<br />
|
47
|
-
|
48
|
-
<StarRating
|
49
|
-
denominator={8}
|
50
|
-
rating={3}
|
51
|
-
{...props}
|
52
|
-
/>
|
53
|
-
|
54
|
-
</>
|
55
|
-
)
|
56
|
-
|
57
|
-
export default StarRatingNumberConfig
|
@@ -1,23 +0,0 @@
|
|
1
|
-
<%= pb_rails("star_rating", props: { rating: 3, size: "xs" }) %>
|
2
|
-
|
3
|
-
<br>
|
4
|
-
|
5
|
-
<%= pb_rails("star_rating", props: { rating: 3, size: "sm" }) %>
|
6
|
-
|
7
|
-
<br>
|
8
|
-
|
9
|
-
<%= pb_rails("star_rating", props: { rating: 3, size: "md" }) %>
|
10
|
-
|
11
|
-
<br>
|
12
|
-
|
13
|
-
<%= pb_rails("star_rating", props: { rating: 3, size: "lg" }) %>
|
14
|
-
|
15
|
-
<br>
|
16
|
-
|
17
|
-
<%= pb_rails("star_rating", props: { rating: 3, size: "lg", layout_option: "number" }) %>
|
18
|
-
|
19
|
-
<br>
|
20
|
-
|
21
|
-
<%= pb_rails("star_rating", props: { rating: 3, size: "lg", layout_option: "onestar" }) %>
|
22
|
-
|
23
|
-
<br>
|
@@ -1,59 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
|
3
|
-
import StarRating from '../_star_rating'
|
4
|
-
|
5
|
-
const StarRatingSizeOptions = (props) => (
|
6
|
-
<>
|
7
|
-
|
8
|
-
<StarRating
|
9
|
-
rating={3}
|
10
|
-
size="xs"
|
11
|
-
{...props}
|
12
|
-
/>
|
13
|
-
|
14
|
-
<br />
|
15
|
-
|
16
|
-
<StarRating
|
17
|
-
rating={3}
|
18
|
-
size="sm"
|
19
|
-
{...props}
|
20
|
-
/>
|
21
|
-
|
22
|
-
<br />
|
23
|
-
|
24
|
-
<StarRating
|
25
|
-
rating={3}
|
26
|
-
size="md"
|
27
|
-
{...props}
|
28
|
-
/>
|
29
|
-
|
30
|
-
<br />
|
31
|
-
|
32
|
-
<StarRating
|
33
|
-
rating={3}
|
34
|
-
size="lg"
|
35
|
-
{...props}
|
36
|
-
/>
|
37
|
-
|
38
|
-
<br />
|
39
|
-
|
40
|
-
<StarRating
|
41
|
-
layoutOption="number"
|
42
|
-
rating={3}
|
43
|
-
size="lg"
|
44
|
-
{...props}
|
45
|
-
/>
|
46
|
-
|
47
|
-
<br />
|
48
|
-
|
49
|
-
<StarRating
|
50
|
-
layoutOption="onestar"
|
51
|
-
rating={3}
|
52
|
-
size="lg"
|
53
|
-
{...props}
|
54
|
-
/>
|
55
|
-
|
56
|
-
</>
|
57
|
-
)
|
58
|
-
|
59
|
-
export default StarRatingSizeOptions
|
@@ -1,39 +0,0 @@
|
|
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>
|
@@ -1,5 +0,0 @@
|
|
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'`
|
@@ -1,45 +0,0 @@
|
|
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
|