playbook_ui 14.14.0.pre.alpha.play1755pbcontenttag6478 → 14.14.0.pre.alpha.play1852reacthookformsupportradio6318
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/pb_currency/_currency.tsx +31 -46
- data/app/pb_kits/playbook/pb_currency/currency.html.erb +8 -15
- data/app/pb_kits/playbook/pb_currency/currency.rb +2 -17
- data/app/pb_kits/playbook/pb_currency/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_currency/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_drawer/_drawer.scss +8 -32
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb +1 -20
- data/app/pb_kits/playbook/pb_drawer/docs/example.yml +0 -5
- data/app/pb_kits/playbook/pb_drawer/drawer.html.erb +12 -20
- data/app/pb_kits/playbook/pb_drawer/drawer.rb +1 -49
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
- data/app/pb_kits/playbook/pb_overlay/_overlay.scss +0 -13
- data/app/pb_kits/playbook/pb_overlay/_overlay.tsx +1 -7
- data/app/pb_kits/playbook/pb_overlay/docs/example.yml +0 -3
- data/app/pb_kits/playbook/pb_overlay/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_overlay/overlay.html.erb +3 -5
- data/app/pb_kits/playbook/pb_overlay/overlay.rb +1 -16
- data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx +0 -12
- data/app/pb_kits/playbook/pb_radio/_radio.tsx +85 -74
- data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.jsx +60 -0
- data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.md +1 -0
- data/app/pb_kits/playbook/pb_radio/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_radio/radio.test.js +16 -0
- data/app/pb_kits/playbook/pb_select/select.html.erb +5 -3
- data/app/pb_kits/playbook/pb_select/select.rb +0 -8
- data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +5 -1
- data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.html.erb +4 -1
- data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.html.erb +5 -1
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +3 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_tooltip/index.js +1 -1
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +2 -10
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +1 -34
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_typeahead/index.ts +8 -61
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +1 -13
- data/dist/chunks/{_typeahead-NXKDTf__.js → _typeahead-8okiJBmN.js} +2 -2
- data/dist/chunks/_weekday_stacked-DrKLZrfR.js +45 -0
- data/dist/chunks/{lib-Dmay5Z6U.js → lib-D3us1bGD.js} +1 -1
- data/dist/chunks/{pb_form_validation-DdP7BnVX.js → pb_form_validation-BpihMSOQ.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +2 -2
- 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/version.rb +1 -1
- metadata +8 -34
- data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.html.erb +0 -22
- data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.jsx +0 -34
- data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_rails.md +0 -1
- data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_react.md +0 -1
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.html.erb +0 -8
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.html.erb +0 -33
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.html.erb +0 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.html.erb +0 -24
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.html.erb +0 -21
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.md +0 -1
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.html.erb +0 -49
- data/app/pb_kits/playbook/pb_drawer/index.js +0 -257
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.html.erb +0 -11
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.jsx +0 -37
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_rails.md +0 -1
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_react.md +0 -1
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.html.erb +0 -11
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.md +0 -1
- data/app/pb_kits/playbook/pb_overlay/index.js +0 -61
- data/app/pb_kits/playbook/pb_select/index.js +0 -38
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.html.erb +0 -39
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.md +0 -3
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.html.erb +0 -26
- data/app/pb_kits/playbook/pb_tooltip/floating_ui.js +0 -282
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.html.erb +0 -45
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.md +0 -5
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options_pure_rails.html.erb +0 -33
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options_pure_rails.md +0 -3
- data/dist/chunks/_weekday_stacked-DtCYkCXM.js +0 -45
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: '08169588154946fcdb034524b646de6a050c504884a381f360f3a5470ea4917d'
|
4
|
+
data.tar.gz: d2794398a68601eeac259328439846e39816d671489e70cf35c9e9cc3669b76e
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: ca7b5000b148f3a0e8beac0926d11b05e36b9cc32cef3ccd72b8c53e04a4bdb6822e957ac82c85d50910dd4240d165c912e2b4eeb09566c8dbae3b70b28320de
|
7
|
+
data.tar.gz: fa1e9d28c2a166f674ac45c0c662262fb86fb69815409769be724bdba9a36b31bf24fe484053f17f97c691f9083759827b054f5a2a6652c7aab72bd8dc1c06f3
|
@@ -21,7 +21,6 @@ type CurrencyProps = {
|
|
21
21
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
22
22
|
id?: string,
|
23
23
|
label?: string,
|
24
|
-
nullDisplay?: string,
|
25
24
|
size?: 'sm' | 'md' | 'lg',
|
26
25
|
symbol?: string,
|
27
26
|
variant?: 'default' | 'light' | 'bold',
|
@@ -50,7 +49,6 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
|
|
50
49
|
unit,
|
51
50
|
className,
|
52
51
|
label = '',
|
53
|
-
nullDisplay = '',
|
54
52
|
size = 'sm',
|
55
53
|
symbol = '$',
|
56
54
|
variant = 'default',
|
@@ -120,57 +118,44 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
|
|
120
118
|
id={id}
|
121
119
|
>
|
122
120
|
<Caption dark={dark}>{label}</Caption>
|
121
|
+
|
123
122
|
<div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
|
124
123
|
{unstyled ? (
|
125
|
-
|
126
|
-
<div>{
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
{unit ? unit : getDecimalValue}
|
134
|
-
</div>
|
135
|
-
</>
|
136
|
-
)
|
124
|
+
<>
|
125
|
+
<div>{handleNegative}{symbol}</div>
|
126
|
+
<div>{getAmount}</div>
|
127
|
+
<div>
|
128
|
+
{getAbbreviation}
|
129
|
+
{unit ? unit : getDecimalValue}
|
130
|
+
</div>
|
131
|
+
</>
|
137
132
|
) : (
|
138
|
-
|
133
|
+
<>
|
134
|
+
<Body
|
135
|
+
className="dollar_sign"
|
136
|
+
color="light"
|
137
|
+
dark={dark}
|
138
|
+
>
|
139
|
+
{handleNegative}{symbol}
|
140
|
+
</Body>
|
141
|
+
|
139
142
|
<Title
|
140
143
|
className="pb_currency_value"
|
141
144
|
dark={dark}
|
142
145
|
size={sizes[size]}
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
<Title
|
157
|
-
className="pb_currency_value"
|
158
|
-
dark={dark}
|
159
|
-
size={sizes[size]}
|
160
|
-
>
|
161
|
-
{getAmount}
|
162
|
-
</Title>
|
163
|
-
|
164
|
-
<Body
|
165
|
-
className="unit"
|
166
|
-
color="light"
|
167
|
-
dark={dark}
|
168
|
-
>
|
169
|
-
{getAbbreviation}
|
170
|
-
{unit ? unit : getDecimalValue}
|
171
|
-
</Body>
|
172
|
-
</>
|
173
|
-
)
|
146
|
+
>
|
147
|
+
{getAmount}
|
148
|
+
</Title>
|
149
|
+
|
150
|
+
<Body
|
151
|
+
className="unit"
|
152
|
+
color="light"
|
153
|
+
dark={dark}
|
154
|
+
>
|
155
|
+
{getAbbreviation}
|
156
|
+
{unit ? unit : getDecimalValue}
|
157
|
+
</Body>
|
158
|
+
</>
|
174
159
|
)}
|
175
160
|
</div>
|
176
161
|
</div>
|
@@ -1,24 +1,17 @@
|
|
1
1
|
<%= pb_content_tag do %>
|
2
2
|
<%= pb_rails("caption", props: object.caption_props) %>
|
3
|
+
|
3
4
|
<div class=<%= "pb_currency_wrapper#{object.variant_class || object.emphasized_class}" %>>
|
4
5
|
<% if object.unstyled %>
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
<div><%= object.negative_sign %><%= object.symbol %></div>
|
9
|
-
<div><%= object.title_props[:text] %></div>
|
10
|
-
<div><%= object.body_props[:text] %></div>
|
11
|
-
<% end %>
|
6
|
+
<div><%= object.negative_sign %><%= object.symbol %></div>
|
7
|
+
<div><%= object.title_props[:text] %></div>
|
8
|
+
<div><%= object.body_props[:text] %></div>
|
12
9
|
<% else %>
|
13
|
-
|
14
|
-
<%=
|
15
|
-
<% else %>
|
16
|
-
<%= pb_rails("body", props: object.currency_wrapper_props) do %>
|
17
|
-
<%= object.negative_sign %><%= object.symbol %>
|
18
|
-
<% end %>
|
19
|
-
<%= pb_rails("title", props: object.title_props) %>
|
20
|
-
<%= pb_rails("body", props: object.body_props) %>
|
10
|
+
<%= pb_rails("body", props: object.currency_wrapper_props) do %>
|
11
|
+
<%= object.negative_sign %><%= object.symbol %>
|
21
12
|
<% end %>
|
13
|
+
<%= pb_rails("title", props: object.title_props) %>
|
14
|
+
<%= pb_rails("body", props: object.body_props) %>
|
22
15
|
<% end %>
|
23
16
|
</div>
|
24
17
|
<% end %>
|
@@ -46,9 +46,6 @@ module Playbook
|
|
46
46
|
prop :comma_separator, type: Playbook::Props::Boolean,
|
47
47
|
default: false
|
48
48
|
|
49
|
-
prop :null_display, type: Playbook::Props::String,
|
50
|
-
required: false
|
51
|
-
|
52
49
|
def classname
|
53
50
|
generate_classname("pb_currency_kit", align, size, dark_class)
|
54
51
|
end
|
@@ -68,20 +65,10 @@ module Playbook
|
|
68
65
|
}
|
69
66
|
end
|
70
67
|
|
71
|
-
def title_text
|
72
|
-
if null_display
|
73
|
-
null_display
|
74
|
-
elsif swap_negative
|
75
|
-
absolute_amount(abbr_or_format_amount)
|
76
|
-
else
|
77
|
-
abbr_or_format_amount
|
78
|
-
end
|
79
|
-
end
|
80
|
-
|
81
68
|
def title_props
|
82
69
|
{
|
83
70
|
size: size_value,
|
84
|
-
text:
|
71
|
+
text: swap_negative ? absolute_amount(abbr_or_format_amount) : abbr_or_format_amount,
|
85
72
|
classname: "pb_currency_value",
|
86
73
|
dark: dark,
|
87
74
|
}
|
@@ -158,10 +145,8 @@ module Playbook
|
|
158
145
|
1
|
159
146
|
when "md"
|
160
147
|
3
|
161
|
-
when "sm"
|
162
|
-
4
|
163
148
|
else
|
164
|
-
|
149
|
+
4
|
165
150
|
end
|
166
151
|
end
|
167
152
|
|
@@ -10,7 +10,6 @@ examples:
|
|
10
10
|
- currency_unstyled: Unstyled
|
11
11
|
- currency_comma_separator: Comma Separator
|
12
12
|
- currency_negative: Negative
|
13
|
-
- currency_null_display: Null Display
|
14
13
|
|
15
14
|
react:
|
16
15
|
- currency_variants: Variants
|
@@ -22,7 +21,6 @@ examples:
|
|
22
21
|
- currency_unstyled: Unstyled
|
23
22
|
- currency_comma_separator: Comma Separator
|
24
23
|
- currency_negative: Negative
|
25
|
-
- currency_null_display: Null Display
|
26
24
|
|
27
25
|
swift:
|
28
26
|
- currency_size_swift: Size
|
@@ -6,5 +6,4 @@ export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
|
|
6
6
|
export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
|
7
7
|
export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'
|
8
8
|
export { default as CurrencyCommaSeparator } from './_currency_comma_separator.jsx'
|
9
|
-
export { default as CurrencyNegative } from './_currency_negative.jsx'
|
10
|
-
export { default as CurrencyNullDisplay } from './_currency_null_display.jsx'
|
9
|
+
export { default as CurrencyNegative } from './_currency_negative.jsx'
|
@@ -134,6 +134,14 @@ body.PBDrawer__Body--close {
|
|
134
134
|
transition: margin-left $animation-duration ease-out, margin-right $animation-duration ease-out;
|
135
135
|
}
|
136
136
|
|
137
|
+
.pb_drawer_lg_left.pb_drawer {
|
138
|
+
transform: translateX(-100%);
|
139
|
+
}
|
140
|
+
|
141
|
+
.pb_drawer_lg_right.pb_drawer {
|
142
|
+
transform: translateX(100%);
|
143
|
+
}
|
144
|
+
|
137
145
|
.pb_drawer.pb_drawer_after_open {
|
138
146
|
pointer-events: auto;
|
139
147
|
transform: translate3d(0, 0, 0);
|
@@ -149,34 +157,6 @@ body.PBDrawer__Body--close {
|
|
149
157
|
animation-duration: $animation-duration;
|
150
158
|
outline: none;
|
151
159
|
|
152
|
-
&.pb_drawer_within_element_rails {
|
153
|
-
position: relative;
|
154
|
-
width: 100%;
|
155
|
-
display: block;
|
156
|
-
background-color: $white;
|
157
|
-
overflow: hidden;
|
158
|
-
|
159
|
-
// Use max-height for a smooth accordion-like animation
|
160
|
-
max-height: 0;
|
161
|
-
transition: max-height $animation-duration ease-in-out;
|
162
|
-
z-index: 1;
|
163
|
-
|
164
|
-
&.open {
|
165
|
-
max-height: 1000px;
|
166
|
-
}
|
167
|
-
|
168
|
-
&::before {
|
169
|
-
content: '';
|
170
|
-
position: absolute;
|
171
|
-
top: 0;
|
172
|
-
left: 0;
|
173
|
-
right: 0;
|
174
|
-
bottom: 0;
|
175
|
-
background-color: inherit;
|
176
|
-
z-index: -1;
|
177
|
-
}
|
178
|
-
}
|
179
|
-
|
180
160
|
&.pb_drawer_within_element {
|
181
161
|
position: relative;
|
182
162
|
width: 100%;
|
@@ -349,10 +329,6 @@ body.PBDrawer__Body--close {
|
|
349
329
|
opacity: 1;
|
350
330
|
pointer-events: none;
|
351
331
|
|
352
|
-
& .pb_drawer {
|
353
|
-
pointer-events: auto;
|
354
|
-
}
|
355
|
-
|
356
332
|
&_before_close {
|
357
333
|
height: 0;
|
358
334
|
}
|
@@ -1,20 +1 @@
|
|
1
|
-
<%= pb_rails("
|
2
|
-
<%= pb_rails("button", props: { text: "Left Drawer", margin_right: "sm", data: {"open-drawer": "drawer-1"} }) %>
|
3
|
-
|
4
|
-
<%= pb_rails("drawer", props: {
|
5
|
-
id:"drawer-1",
|
6
|
-
}) do %>
|
7
|
-
Test me (Left Drawer)
|
8
|
-
<% end %>
|
9
|
-
|
10
|
-
|
11
|
-
<%= pb_rails("button", props: { text: "Right Drawer", data: {"open-drawer": "drawer-2"} }) %>
|
12
|
-
|
13
|
-
<%= pb_rails("drawer", props: {
|
14
|
-
id:"drawer-2",
|
15
|
-
placement: "right"
|
16
|
-
}) do %>
|
17
|
-
Test me (Right Drawer)
|
18
|
-
<% end %>
|
19
|
-
<% end %>
|
20
|
-
|
1
|
+
<%= pb_rails("drawer") %>
|
@@ -1,20 +1,12 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
>
|
14
|
-
<div class="<%= overlay_classes %>" style="display:none;" id="drawer-overlay-<%= object.id %>">
|
15
|
-
<%= pb_content_tag do %>
|
16
|
-
<%= content %>
|
17
|
-
<% end %>
|
18
|
-
</div>
|
19
|
-
</div>
|
20
|
-
<% end %>
|
1
|
+
<!-- Go to pb_content_tag definition in kit_base.rb for usage information. Commented out options are default (showing the default shape), and each can be deleted if not customizing that param. -->
|
2
|
+
<!-- If using nonstandard params please un-comment out and replace with your custom params. -->
|
3
|
+
<%= pb_content_tag(
|
4
|
+
# :div,
|
5
|
+
# aria: object.aria,
|
6
|
+
# class: object.classname,
|
7
|
+
# data: object.data,
|
8
|
+
# id: object.id,
|
9
|
+
# **combined_html_options
|
10
|
+
) do %>
|
11
|
+
<span>DRAWER CONTENT</span>
|
12
|
+
<% end %>
|
@@ -2,55 +2,7 @@
|
|
2
2
|
|
3
3
|
module Playbook
|
4
4
|
module PbDrawer
|
5
|
-
class Drawer < Playbook::KitBase
|
6
|
-
prop :size, type: Playbook::Props::Enum,
|
7
|
-
values: %w[xs sm md lg xl full],
|
8
|
-
default: "md"
|
9
|
-
prop :placement, type: Playbook::Props::Enum,
|
10
|
-
values: %w[left right bottom],
|
11
|
-
default: "left"
|
12
|
-
prop :behavior, type: Playbook::Props::Enum,
|
13
|
-
values: %w[floating push],
|
14
|
-
default: "floating"
|
15
|
-
prop :overlay, type: Playbook::Props::Boolean,
|
16
|
-
default: true
|
17
|
-
prop :within_element, type: Playbook::Props::Boolean,
|
18
|
-
default: false
|
19
|
-
prop :border, type: Playbook::Props::Enum,
|
20
|
-
values: %w[full none right left],
|
21
|
-
default: "none"
|
22
|
-
prop :breakpoint, type: Playbook::Props::Enum,
|
23
|
-
values: %w[none xs sm md lg xl],
|
24
|
-
default: "none"
|
25
|
-
|
26
|
-
def classname
|
27
|
-
generate_classname("pb_drawer pb_drawer_#{size}_#{placement} #{within_class} #{border_classes}")
|
28
|
-
end
|
29
|
-
|
30
|
-
def border_classes
|
31
|
-
case border
|
32
|
-
when "full"
|
33
|
-
"drawer_border-full"
|
34
|
-
when "right"
|
35
|
-
"drawer_border-right"
|
36
|
-
when "left"
|
37
|
-
"drawer_border-left"
|
38
|
-
else
|
39
|
-
""
|
40
|
-
end
|
41
|
-
end
|
42
|
-
|
43
|
-
def overlay_close
|
44
|
-
!should_close_on_overlay_click ? "overlay_close" : ""
|
45
|
-
end
|
46
|
-
|
47
|
-
def within_class
|
48
|
-
within_element ? "pb_drawer_within_element_rails" : ""
|
49
|
-
end
|
50
|
-
|
51
|
-
def overlay_classes
|
52
|
-
"pb_drawer_#{overlay ? '' : 'no_'}overlay drawer_content_#{placement} pb_drawer_overlay_after_open #{overlay ? '' : 'no-background'}"
|
53
|
-
end
|
5
|
+
class Drawer < ::Playbook::KitBase
|
54
6
|
end
|
55
7
|
end
|
56
8
|
end
|
@@ -32,7 +32,7 @@
|
|
32
32
|
<%= form.url_field :example_url_field_validation, props: { label: true, required: true } %>
|
33
33
|
<%= form.text_area :example_text_area_validation, props: { label: true, required: true } %>
|
34
34
|
<%= form.dropdown_field :example_dropdown_validation, props: { label: true, options: example_dropdown_options, required: true } %>
|
35
|
-
<%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true
|
35
|
+
<%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
|
36
36
|
<%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
|
37
37
|
<%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
|
38
38
|
<%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
|
@@ -69,17 +69,4 @@ $overlay_colors: (
|
|
69
69
|
pointer-events: none;
|
70
70
|
z-index: 1;
|
71
71
|
}
|
72
|
-
|
73
|
-
&.overlay-hide-scrollbar {
|
74
|
-
& [class*="overflow_x_auto"],
|
75
|
-
& [class*="overflow_y_auto"],
|
76
|
-
& [class*="overflow_auto"] {
|
77
|
-
&::-webkit-scrollbar {
|
78
|
-
display: none !important;
|
79
|
-
}
|
80
|
-
|
81
|
-
-ms-overflow-style: none !important;
|
82
|
-
scrollbar-width: none !important;
|
83
|
-
}
|
84
|
-
}
|
85
72
|
}
|
@@ -11,7 +11,6 @@ export type OverlayChildrenProps = {
|
|
11
11
|
dynamic?: boolean,
|
12
12
|
position: string,
|
13
13
|
size: string,
|
14
|
-
scrollBarNone?: boolean,
|
15
14
|
}
|
16
15
|
|
17
16
|
type OverlayProps = {
|
@@ -24,8 +23,6 @@ type OverlayProps = {
|
|
24
23
|
htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
|
25
24
|
id?: string,
|
26
25
|
layout: { [key: string]: string },
|
27
|
-
scrollBarNone?: boolean,
|
28
|
-
|
29
26
|
}
|
30
27
|
|
31
28
|
const Overlay = (props: OverlayProps) => {
|
@@ -39,12 +36,11 @@ const Overlay = (props: OverlayProps) => {
|
|
39
36
|
htmlOptions = {},
|
40
37
|
id,
|
41
38
|
layout = { "bottom": "full" },
|
42
|
-
scrollBarNone = false,
|
43
39
|
} = props
|
44
40
|
|
45
41
|
const ariaProps = buildAriaProps(aria)
|
46
42
|
const dataProps = buildDataProps(data)
|
47
|
-
const classes = classnames(buildCss('pb_overlay'),
|
43
|
+
const classes = classnames(buildCss('pb_overlay'), globalProps(props), className)
|
48
44
|
const htmlProps = buildHtmlProps(htmlOptions)
|
49
45
|
const dynamicInlineProps = globalInlineProps(props)
|
50
46
|
|
@@ -72,14 +68,12 @@ const Overlay = (props: OverlayProps) => {
|
|
72
68
|
children,
|
73
69
|
color,
|
74
70
|
position: getPosition(),
|
75
|
-
scrollBarNone,
|
76
71
|
size: getSize()
|
77
72
|
}) : OverlayToken({
|
78
73
|
children,
|
79
74
|
color,
|
80
75
|
dynamic: dynamic,
|
81
76
|
position: getPosition(),
|
82
|
-
scrollBarNone,
|
83
77
|
size: getSize()
|
84
78
|
})
|
85
79
|
}
|
@@ -4,11 +4,8 @@ examples:
|
|
4
4
|
- overlay_multi_directional: Multi-directional
|
5
5
|
- overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
|
6
6
|
- overlay_toggle: Toggle
|
7
|
-
- overlay_hide_scroll_bar: Hide Scroll Bar
|
8
7
|
|
9
8
|
rails:
|
10
9
|
- overlay_default: Default
|
11
10
|
- overlay_multi_directional: Multi-directional
|
12
|
-
- overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
|
13
11
|
- overlay_toggle: Toggle
|
14
|
-
- overlay_hide_scroll_bar: Hide Scroll Bar
|
@@ -2,4 +2,3 @@ export { default as OverlayDefault } from './_overlay_default.jsx'
|
|
2
2
|
export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'
|
3
3
|
export { default as OverlayToggle } from './_overlay_toggle.jsx'
|
4
4
|
export { default as OverlayVerticalDynamicMultiDirectional } from './_overlay_vertical_dynamic_multi_directional.jsx'
|
5
|
-
export { default as OverlayHideScrollBar } from './_overlay_hide_scroll_bar.jsx'
|
@@ -16,14 +16,12 @@ id: object.id,
|
|
16
16
|
<% end %>
|
17
17
|
|
18
18
|
<% else %>
|
19
|
-
<div class="<%= previous_overlay_class_name %>"
|
19
|
+
<div class="<%= previous_overlay_class_name %>"></div>
|
20
20
|
|
21
|
-
|
22
|
-
<%= content.presence %>
|
23
|
-
</div>
|
21
|
+
<%= content.presence %>
|
24
22
|
|
25
23
|
<% if has_subsequent_overlay %>
|
26
|
-
<div class="<%= subsequent_overlay_class_name %>"
|
24
|
+
<div class="<%= subsequent_overlay_class_name %>"></div>
|
27
25
|
<% end %>
|
28
26
|
<% end %>
|
29
27
|
<% end %>
|
@@ -8,13 +8,9 @@ module Playbook
|
|
8
8
|
default: "card_light"
|
9
9
|
prop :layout, type: Playbook::Props::HashProp,
|
10
10
|
default: { "bottom": "full" }
|
11
|
-
prop :dynamic, type: Playbook::Props::Boolean,
|
12
|
-
default: false
|
13
|
-
prop :scroll_bar_none, type: Playbook::Props::Boolean,
|
14
|
-
default: false
|
15
11
|
|
16
12
|
def classname
|
17
|
-
generate_classname("pb_overlay"
|
13
|
+
generate_classname("pb_overlay")
|
18
14
|
end
|
19
15
|
|
20
16
|
def position
|
@@ -109,17 +105,6 @@ module Playbook
|
|
109
105
|
"bg_dark": "#0a0527",
|
110
106
|
}
|
111
107
|
end
|
112
|
-
|
113
|
-
def data_attributes
|
114
|
-
data ||= {}
|
115
|
-
data.merge!("data-pb-overlay" => true)
|
116
|
-
data.merge!("data-overlay-dynamic" => true) if dynamic
|
117
|
-
data
|
118
|
-
end
|
119
|
-
|
120
|
-
def hide_scroll_bar_class
|
121
|
-
scroll_bar_none ? " overlay-hide-scrollbar" : ""
|
122
|
-
end
|
123
108
|
end
|
124
109
|
end
|
125
110
|
end
|
@@ -64,15 +64,3 @@ test('should render children', () => {
|
|
64
64
|
const kit = screen.getByTestId(testId)
|
65
65
|
expect(kit).toHaveTextContent(props.children)
|
66
66
|
})
|
67
|
-
|
68
|
-
test('should add overlay-hide-scrollbar class when scrollBarNone is true', () => {
|
69
|
-
const props = {
|
70
|
-
children,
|
71
|
-
data: { testid: testId },
|
72
|
-
scrollBarNone: true
|
73
|
-
}
|
74
|
-
|
75
|
-
render(<Overlay {...props} />)
|
76
|
-
const kit = screen.getByTestId(testId)
|
77
|
-
expect(kit).toHaveClass('overlay-hide-scrollbar')
|
78
|
-
})
|