playbook_ui_docs 13.11.1 → 13.12.0
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_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 +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 +3 -3
- metadata +26 -2
|
@@ -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'
|