playbook_ui 14.16.0.pre.rc.3 → 14.16.0.pre.rc.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +4 -2
- data/app/pb_kits/playbook/pb_empty_state/_empty_state.scss +38 -0
- data/app/pb_kits/playbook/pb_empty_state/_empty_state.tsx +213 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.jsx +38 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.jsx +17 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.jsx +21 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.jsx +35 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/default_image/computer_fly_no_branding.svg +21 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/default_image/utils.tsx +118 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/example.yml +8 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/index.js +4 -0
- data/app/pb_kits/playbook/pb_empty_state/empty_state.test.jsx +17 -0
- data/app/pb_kits/playbook/pb_textarea/textarea.html.erb +1 -5
- data/app/pb_kits/playbook/pb_time/time.html.erb +1 -5
- data/app/pb_kits/playbook/pb_title/title.html.erb +1 -6
- data/app/pb_kits/playbook/pb_toggle/toggle.html.erb +1 -6
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +2 -2
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.html.erb +22 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb +7 -6
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +32 -7
- data/app/pb_kits/playbook/tokens/_display.scss +3 -1
- data/app/pb_kits/playbook/utilities/_display.scss +6 -1
- data/app/pb_kits/playbook/utilities/test/globalProps/display.test.js +1 -1
- data/dist/chunks/{_typeahead-BzyvjExg.js → _typeahead-D720juMS.js} +1 -1
- data/dist/chunks/_weekday_stacked-D_IMHltv.js +45 -0
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +8 -0
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/display.rb +2 -2
- data/lib/playbook/version.rb +1 -1
- metadata +16 -4
- data/dist/chunks/_weekday_stacked-BjRQgfjn.js +0 -45
@@ -0,0 +1,22 @@
|
|
1
|
+
<%= pb_rails "flex", props: { flex_direction: "row", gap: "md", wrap: true } do %>
|
2
|
+
<%= pb_rails "button", props: { id: "tool-tip-sizing-1", text: "Height and Width" } %>
|
3
|
+
<%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-1", tooltip_id: "tool-tip-sizing-1", position: "top", height: "150px", width: "100px" } do %>
|
4
|
+
I'm 150px high and 100px wide!
|
5
|
+
<% end %>
|
6
|
+
<%= pb_rails "button", props: { id: "tool-tip-sizing-2", text: "max_height" } %>
|
7
|
+
<%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-2", tooltip_id: "tool-tip-sizing-2", position: "top", width: "250px", max_height: "100px" } do %>
|
8
|
+
I have a max_height of 100px! Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
9
|
+
<% end %>
|
10
|
+
<%= pb_rails "button", props: { id: "tool-tip-sizing-3", text: "max_width" } %>
|
11
|
+
<%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-3", tooltip_id: "tool-tip-sizing-3", position: "top", max_width: "150px" } do %>
|
12
|
+
I have a max_width of 150px! Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
13
|
+
<% end %>
|
14
|
+
<%= pb_rails "button", props: { id: "tool-tip-sizing-4", text: "min_width" } %>
|
15
|
+
<%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-4", tooltip_id: "tool-tip-sizing-4", position: "top", min_width: "300px" } do %>
|
16
|
+
I have a min_width of 300px!
|
17
|
+
<% end %>
|
18
|
+
<%= pb_rails "button", props: { id: "tool-tip-sizing-5", text: "min_height" } %>
|
19
|
+
<%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-5", tooltip_id: "tool-tip-sizing-5", position: "top", min_height: "300px", height: "200px" } do %>
|
20
|
+
I have a min_height of 300px!
|
21
|
+
<% end %>
|
22
|
+
<% end %>
|
@@ -4,6 +4,7 @@ examples:
|
|
4
4
|
- tooltip_default: Default
|
5
5
|
- tooltip_interaction: Content Interaction
|
6
6
|
- tooltip_selectors: Using Common Selectors
|
7
|
+
- tooltip_sizing: Tooltip Sizing
|
7
8
|
- tooltip_icon_rails: Tooltip with Icon
|
8
9
|
- tooltip_with_icon_circle: Icon Circle Tooltip
|
9
10
|
- tooltip_delay_rails: Delay
|
@@ -1,10 +1,11 @@
|
|
1
1
|
<%= content_tag(:div,
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
2
|
+
id: object.id,
|
3
|
+
data: object.data,
|
4
|
+
class: object.classname,
|
5
|
+
style: remove_height_properties(combined_html_options[:style]) || "",
|
6
|
+
**combined_html_options.except(:style)) do %>
|
7
|
+
<div class="tooltip_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.height_and_width_helper %>">
|
7
8
|
<%= content.presence %>
|
8
9
|
<div class="arrow" id="<%= object.tooltip_id %>-arrow"></div>
|
9
10
|
</div>
|
10
|
-
<% end %>
|
11
|
+
<% end %>
|
@@ -3,24 +3,49 @@
|
|
3
3
|
module Playbook
|
4
4
|
module PbTooltip
|
5
5
|
class Tooltip < Playbook::KitBase
|
6
|
+
prop :dark, type: Playbook::Props::Boolean,
|
7
|
+
default: false
|
8
|
+
prop :delay_open
|
9
|
+
prop :delay_close
|
10
|
+
prop :height
|
11
|
+
prop :interaction, type: Playbook::Props::Boolean,
|
12
|
+
default: false
|
13
|
+
prop :max_height
|
14
|
+
prop :max_width
|
15
|
+
prop :min_height
|
16
|
+
prop :min_width
|
6
17
|
prop :position
|
18
|
+
prop :tooltip_id
|
7
19
|
prop :trigger_element_selector
|
8
20
|
prop :trigger_element_id, deprecated: true
|
9
|
-
prop :tooltip_id
|
10
|
-
prop :interaction, type: Playbook::Props::Boolean,
|
11
|
-
default: false
|
12
|
-
prop :delay_open
|
13
|
-
prop :delay_close
|
14
|
-
prop :dark, type: Playbook::Props::Boolean,
|
15
|
-
default: false
|
16
21
|
prop :trigger_method, type: Playbook::Props::Enum,
|
17
22
|
values: %w[hover click],
|
18
23
|
default: "hover"
|
24
|
+
prop :width
|
19
25
|
|
20
26
|
def classname
|
21
27
|
generate_classname("pb_tooltip_kit", dark_class)
|
22
28
|
end
|
23
29
|
|
30
|
+
def remove_height_properties(combined_html_options_style)
|
31
|
+
return nil if combined_html_options_style.nil?
|
32
|
+
|
33
|
+
combined_html_options_style.gsub(/\s*(height|min-height|max-height)\s*:[^;]*;?\s*/, "")
|
34
|
+
.strip
|
35
|
+
.presence
|
36
|
+
end
|
37
|
+
|
38
|
+
def height_and_width_helper
|
39
|
+
out = ""
|
40
|
+
out += "width: #{width};" if width.present?
|
41
|
+
out += "height: #{height};" if height.present?
|
42
|
+
out += "max-height: #{max_height};" if max_height.present?
|
43
|
+
out += "max-width: #{max_width};" if max_width.present?
|
44
|
+
out += "min-height: #{min_height};" if min_height.present?
|
45
|
+
out += "min-width: #{min_width};" if min_width.present?
|
46
|
+
out
|
47
|
+
end
|
48
|
+
|
24
49
|
def data
|
25
50
|
data = Hash(values[:data]).merge(
|
26
51
|
pb_tooltip_kit: true,
|
@@ -4,10 +4,12 @@ $display_inline_block: inline-block !default;
|
|
4
4
|
$display_flex: flex !default;
|
5
5
|
$display_none: none !default;
|
6
6
|
$display_inline_flex: inline-flex !default;
|
7
|
+
$display_grid: grid !default;
|
7
8
|
$displays: (
|
8
9
|
display_none: $display_none,
|
9
10
|
display_flex: $display_flex,
|
10
11
|
display_inline: $display_inline,
|
11
12
|
display_inline_block: $display_inline_block,
|
12
|
-
display_block: $display_block
|
13
|
+
display_block: $display_block,
|
14
|
+
display_grid: $display_grid
|
13
15
|
);
|
@@ -24,13 +24,18 @@
|
|
24
24
|
display: none;
|
25
25
|
}
|
26
26
|
|
27
|
+
.display_grid {
|
28
|
+
display: grid;
|
29
|
+
}
|
30
|
+
|
27
31
|
$display_values: (
|
28
32
|
none: $display_none,
|
29
33
|
flex: $display_flex,
|
30
34
|
inline: $display_inline,
|
31
35
|
inline_block: $display_inline_block,
|
32
36
|
inline_flex: $display_inline_flex,
|
33
|
-
block: $display_block
|
37
|
+
block: $display_block,
|
38
|
+
grid: $display_grid
|
34
39
|
);
|
35
40
|
|
36
41
|
// using a grid here
|
@@ -9,7 +9,7 @@ const testSubject = 'body'
|
|
9
9
|
|
10
10
|
// %w[block inline_block inline flex inline_flex none]
|
11
11
|
test('Global Props: returns proper class name', () => {
|
12
|
-
const propValues = ["block", "inline", "inline_block", "flex", "inline_flex", "none"]
|
12
|
+
const propValues = ["block", "inline", "inline_block", "flex", "inline_flex", "none", "grid" ]
|
13
13
|
for(let x = 0, y = propValues.length; x < y; ++x) {
|
14
14
|
const testId = `${testSubject}-${propValues[x]}`
|
15
15
|
render(
|