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.
Files changed (53) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +0 -2
  3. data/app/pb_kits/playbook/pb_icon/docs/example.yml +0 -8
  4. data/app/pb_kits/playbook/pb_image/docs/example.yml +0 -5
  5. data/app/pb_kits/playbook/pb_label_value/docs/example.yml +0 -6
  6. data/app/pb_kits/playbook/pb_message/docs/example.yml +0 -4
  7. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.html.erb +1 -11
  8. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.jsx +2 -17
  9. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.html.erb +1 -6
  10. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.jsx +5 -22
  11. data/app/pb_kits/playbook/pb_star_rating/docs/example.yml +5 -10
  12. data/app/pb_kits/playbook/pb_star_rating/docs/index.js +0 -6
  13. data/app/pb_kits/playbook/pb_table/docs/_table_header.html.erb +4 -4
  14. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +1 -1
  15. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx +2 -0
  16. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.jsx +1 -0
  17. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx +1 -0
  18. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx +1 -0
  19. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.html.erb +1 -1
  20. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +0 -3
  21. data/app/pb_kits/playbook/pb_tooltip/docs/index.js +0 -1
  22. data/dist/playbook-doc.js +8 -8
  23. metadata +7 -37
  24. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_external_controls.html.erb +0 -22
  25. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_external_controls.md +0 -3
  26. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_external_controls_multiple.html.erb +0 -40
  27. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_external_controls_multiple.md +0 -1
  28. data/app/pb_kits/playbook/pb_icon/docs/_icon_border_swift.md +0 -7
  29. data/app/pb_kits/playbook/pb_icon/docs/_icon_default_swift.md +0 -7
  30. data/app/pb_kits/playbook/pb_icon/docs/_icon_flip_swift.md +0 -11
  31. data/app/pb_kits/playbook/pb_icon/docs/_icon_props_swift.md +0 -8
  32. data/app/pb_kits/playbook/pb_icon/docs/_icon_rotate_swift.md +0 -11
  33. data/app/pb_kits/playbook/pb_icon/docs/_icon_sizes_swift.md +0 -46
  34. data/app/pb_kits/playbook/pb_image/docs/_image_props_swift.md +0 -7
  35. data/app/pb_kits/playbook/pb_image/docs/_rounded_image_swift.md +0 -47
  36. data/app/pb_kits/playbook/pb_image/docs/_size_image_swift.md +0 -47
  37. data/app/pb_kits/playbook/pb_image/docs/_size_none_image_swift.md +0 -15
  38. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_default_swift.md +0 -11
  39. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples_swift.md +0 -72
  40. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_swift.md +0 -41
  41. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_props_swift.md +0 -11
  42. data/app/pb_kits/playbook/pb_message/docs/_message_default_swift.md +0 -57
  43. data/app/pb_kits/playbook/pb_message/docs/_message_props_swift.md +0 -12
  44. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_color_options.html.erb +0 -7
  45. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_color_options.jsx +0 -40
  46. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_number_config.html.erb +0 -12
  47. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_number_config.jsx +0 -57
  48. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_size_options.html.erb +0 -23
  49. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_size_options.jsx +0 -59
  50. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip.html.erb +0 -39
  51. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip.md +0 -5
  52. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx +0 -45
  53. 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
@@ -1,3 +0,0 @@
1
- You can build your own logic to control whether to show the tooltip using the `showTooltip` prop. Its default value is `true`.
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.