playbook_ui 14.3.0.pre.alpha.revert3654PBNTR479removeextraspacingfromradiochildren3734 → 14.3.0.pre.rc.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_avatar_action_button/_avatar_action_button.scss +3 -3
- data/app/pb_kits/playbook/pb_badge/_badge.scss +2 -2
- data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.scss +1 -1
- data/app/pb_kits/playbook/pb_button/_button.scss +1 -1
- data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_mixins.scss +2 -2
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss +1 -1
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx +0 -3
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb +0 -2
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js +0 -15
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleIcon.tsx +24 -30
- data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb +7 -11
- data/app/pb_kits/playbook/pb_collapsible/collapsible_main.rb +0 -2
- data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_collapsible/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss +1 -1
- data/app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss +2 -2
- data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss +4 -4
- data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss +4 -4
- data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +1 -4
- data/app/pb_kits/playbook/pb_dialog/dialog.rb +0 -3
- data/app/pb_kits/playbook/pb_dialog/dialogHelper.js +0 -21
- data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +2 -4
- data/app/pb_kits/playbook/pb_dialog/dialog_footer.rb +1 -10
- data/app/pb_kits/playbook/pb_dialog/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +1 -1
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +2 -2
- data/app/pb_kits/playbook/pb_hashtag/_hashtag.tsx +2 -16
- data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.html.erb +1 -1
- data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.jsx +1 -1
- data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.md +1 -1
- data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb +1 -1
- data/app/pb_kits/playbook/pb_hashtag/hashtag.rb +2 -9
- data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +0 -16
- data/app/pb_kits/playbook/pb_home_address_street/city_emphasis.html.erb +0 -1
- data/app/pb_kits/playbook/pb_home_address_street/city_emphasis.rb +0 -11
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.html.erb +1 -1
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.jsx +1 -1
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.md +1 -1
- data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb +0 -13
- data/app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js +2 -2
- data/app/pb_kits/playbook/pb_home_address_street/street_emphasis.html.erb +1 -2
- data/app/pb_kits/playbook/pb_home_address_street/street_emphasis.rb +0 -11
- data/app/pb_kits/playbook/pb_icon/icon.rb +0 -8
- data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss +1 -1
- data/app/pb_kits/playbook/pb_label_value/_label_value.scss +1 -1
- data/app/pb_kits/playbook/pb_message/_message_mixins.scss +1 -1
- data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss +1 -1
- data/app/pb_kits/playbook/pb_nav/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_nav/docs/index.js +3 -4
- data/app/pb_kits/playbook/pb_pagination/_pagination.scss +1 -3
- data/app/pb_kits/playbook/pb_passphrase/_passphrase.scss +3 -3
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +2 -9
- data/app/pb_kits/playbook/pb_pill/_pill.scss +2 -2
- data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss +2 -2
- data/app/pb_kits/playbook/pb_radio/_radio.tsx +50 -100
- data/app/pb_kits/playbook/pb_radio/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_radio/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/_previewer_mixin.scss +13 -49
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss +14 -2
- data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss +23 -23
- data/app/pb_kits/playbook/pb_rich_text_editor/_trix_styles.scss +27 -19
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb +11 -21
- data/app/pb_kits/playbook/pb_select/_select.scss +1 -1
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +3 -3
- data/app/pb_kits/playbook/pb_star_rating/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_star_rating/index.js +1 -11
- data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +1 -3
- data/app/pb_kits/playbook/pb_text_input/_text_input.scss +1 -1
- data/app/pb_kits/playbook/pb_textarea/_textarea.scss +1 -1
- data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss +4 -4
- data/app/pb_kits/playbook/pb_timeline/_timeline.scss +2 -2
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb +2 -2
- data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +2 -46
- data/app/pb_kits/playbook/pb_toggle/_toggle.scss +3 -3
- data/dist/chunks/{_typeahead-BWUFVlae.js → _typeahead-Cq7RLPBA.js} +3 -3
- data/dist/chunks/{_weekday_stacked-DpRkKl3_.js → _weekday_stacked-Cykj5kLZ.js} +2 -2
- data/dist/chunks/{lib-D9uVVKnh.js → lib-DErGXNy3.js} +1 -1
- data/dist/chunks/{pb_form_validation-u2wnZ3oe.js → pb_form_validation-BC6kh7Hu.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- 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 +2 -2
- metadata +6 -19
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_loading.html.erb +0 -29
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_loading.jsx +0 -43
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_no_icon.html.erb +0 -10
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_no_icon.jsx +0 -21
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb +0 -13
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md +0 -3
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_no_icon.html.erb +0 -24
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_no_icon.jsx +0 -88
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_no_icon_rails.md +0 -1
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_no_icon_react.md +0 -1
- data/app/pb_kits/playbook/pb_phone_number_input/intlTelInput.scss +0 -1290
- data/app/pb_kits/playbook/pb_radio/docs/_radio_children.jsx +0 -56
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default_value.html.erb +0 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 4daa4bafdd35c3b83a98323eaa16e7edca9e4bb963f961663a5f2edeca3f7814
|
4
|
+
data.tar.gz: 36ea0641461016941eaced65696528dd29ec39976de03491359742ee34e0f29e
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: d37e0a7b3fc4d054b5ebebbbbe4f26d3866760ccbbffc771eebd6159e3dc87400b109195814c1a3144b82e682fec154166f69f167ef20d842eedab09c6967df8
|
7
|
+
data.tar.gz: 0e89c8c1158d343ff42e84c1a16f1c7093d220d0f126dd48d1226d6b869900e7d5f7f6c3e7b4b60e04524d9bf25847a34e61fea9b1150a4f2e07619105f5c8a4
|
@@ -35,8 +35,8 @@
|
|
35
35
|
&[class*=_#{$name}] {
|
36
36
|
|
37
37
|
$avatar_size: map-get($avatar-sizes, $name);
|
38
|
-
$icon_size: $avatar_size / 2;
|
39
|
-
$border_size: $icon_size / 10;
|
38
|
+
$icon_size: calc($avatar_size / 2);
|
39
|
+
$border_size: calc($icon_size / 10);
|
40
40
|
|
41
41
|
position: relative;
|
42
42
|
width: $avatar_size * 1.25;
|
@@ -59,7 +59,7 @@
|
|
59
59
|
left: $icon_size * 1.5;
|
60
60
|
}
|
61
61
|
&[class*=_left] [class^=pb_avatar_kit] {
|
62
|
-
padding-left: $icon_size / 2;
|
62
|
+
padding-left: calc($icon_size / 2);
|
63
63
|
}
|
64
64
|
}
|
65
65
|
}
|
@@ -11,7 +11,7 @@
|
|
11
11
|
align-items: center;
|
12
12
|
justify-content: center;
|
13
13
|
border-radius: $border_rad_light;
|
14
|
-
padding: 0 $space_xs/2;
|
14
|
+
padding: 0 calc($space_xs/2);
|
15
15
|
border-width: 1px;
|
16
16
|
border-style: solid;
|
17
17
|
border-color: $card_light;
|
@@ -34,7 +34,7 @@
|
|
34
34
|
height: $pb_badge_height;
|
35
35
|
min-height: $pb_badge_height;
|
36
36
|
min-width: $pb_badge_height;
|
37
|
-
border-radius: $pb_badge_height / 2;
|
37
|
+
border-radius: calc($pb_badge_height / 2);
|
38
38
|
}
|
39
39
|
|
40
40
|
&[class*=_notification] {
|
@@ -11,13 +11,13 @@ $secondary_dark: rgba($bg_dark, $opacity_2);
|
|
11
11
|
@if $horizontal == true {
|
12
12
|
height: 2px;
|
13
13
|
width: calc(100% + #{$space_md} + #{$space_md});
|
14
|
-
top:
|
14
|
+
top: calc(-#{$space_xs} - 1px);
|
15
15
|
left: -$space_md;
|
16
16
|
} @else {
|
17
17
|
width: 2px;
|
18
18
|
height: $space_md;
|
19
19
|
top: 0;
|
20
|
-
right: $space_lg + 2px;
|
20
|
+
right: calc(#{$space_lg} + 2px);
|
21
21
|
}
|
22
22
|
background-color: $color;
|
23
23
|
content: '';
|
@@ -16,7 +16,7 @@ $pb_button_styles: (
|
|
16
16
|
flex-grow: 0;
|
17
17
|
width: $pb_button_size;
|
18
18
|
height: $pb_button_size;
|
19
|
-
border-radius: $pb_button_size
|
19
|
+
border-radius: calc($pb_button_size/2);
|
20
20
|
line-height: $pb_button_size;
|
21
21
|
flex-basis: $pb_button_size;
|
22
22
|
min-width: $pb_button_size;
|
@@ -16,7 +16,6 @@ type CircleIconButtonProps = {
|
|
16
16
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
17
17
|
id?: string,
|
18
18
|
link?: string,
|
19
|
-
loading?: boolean,
|
20
19
|
onClick?: React.MouseEventHandler<HTMLElement>,
|
21
20
|
newWindow?: boolean,
|
22
21
|
type?: 'button' | 'submit' | 'reset' | undefined,
|
@@ -33,7 +32,6 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
|
|
33
32
|
htmlOptions = {},
|
34
33
|
icon,
|
35
34
|
id,
|
36
|
-
loading = false,
|
37
35
|
onClick = noop,
|
38
36
|
type,
|
39
37
|
link,
|
@@ -63,7 +61,6 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
|
|
63
61
|
disabled={disabled}
|
64
62
|
htmlType={type}
|
65
63
|
link={link}
|
66
|
-
loading={loading}
|
67
64
|
newWindow={newWindow}
|
68
65
|
onClick={onClick}
|
69
66
|
text={null}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
<%= pb_content_tag do %>
|
2
|
-
<%= pb_rails("button", props: {type: object.type,
|
2
|
+
<%= pb_rails("button", props: {type: object.type, link: object.link, new_window:object.new_window, variant: object.variant, disabled: object.disabled, dark: object.dark}) do %>
|
3
3
|
<%= pb_rails("icon", props: {icon: object.icon, fixed_width: true, dark: object.dark}) %>
|
4
4
|
<% end %>
|
5
5
|
<% end %>
|
@@ -12,8 +12,6 @@ module Playbook
|
|
12
12
|
prop :disabled, type: Playbook::Props::Boolean,
|
13
13
|
default: false
|
14
14
|
prop :icon, required: true
|
15
|
-
prop :loading, type: Playbook::Props::Boolean,
|
16
|
-
default: false
|
17
15
|
prop :link
|
18
16
|
prop :new_window, type: Playbook::Props::Boolean,
|
19
17
|
default: false
|
@@ -15,18 +15,3 @@ test('default test', () => {
|
|
15
15
|
|
16
16
|
expect(kit).toHaveClass('pb_circle_icon_button_kit')
|
17
17
|
})
|
18
|
-
|
19
|
-
test('passes loading prop to button', () => {
|
20
|
-
render(
|
21
|
-
<CircleIconButton
|
22
|
-
data={{ testid: 'loading-test' }}
|
23
|
-
icon="plus"
|
24
|
-
loading
|
25
|
-
/>
|
26
|
-
)
|
27
|
-
|
28
|
-
const kit = screen.getByTestId('loading-test')
|
29
|
-
const button = kit.querySelector('.pb_button_kit_primary_inline_enabled_loading')
|
30
|
-
|
31
|
-
expect(button).toBeInTheDocument()
|
32
|
-
})
|
@@ -3,10 +3,8 @@ examples:
|
|
3
3
|
rails:
|
4
4
|
- circle_icon_button_default: Default
|
5
5
|
- circle_icon_button_link: Link
|
6
|
-
- circle_icon_button_loading: Loading
|
7
6
|
|
8
7
|
react:
|
9
8
|
- circle_icon_button_default: Default
|
10
9
|
- circle_icon_button_click: Click Handler
|
11
10
|
- circle_icon_button_link: Link
|
12
|
-
- circle_icon_button_loading: Loading
|
@@ -1,4 +1,3 @@
|
|
1
1
|
export { default as CircleIconButtonDefault } from './_circle_icon_button_default.jsx'
|
2
2
|
export { default as CircleIconButtonClick } from './_circle_icon_button_click.jsx'
|
3
3
|
export { default as CircleIconButtonLink } from './_circle_icon_button_link.jsx'
|
4
|
-
export { default as CircleIconButtonLoading } from './_circle_icon_button_loading.jsx'
|
@@ -45,9 +45,7 @@ const CollapsibleIcon = ({
|
|
45
45
|
const color = colorMap[iconColor];
|
46
46
|
|
47
47
|
const showIcon = (icon: string | string[]) => {
|
48
|
-
if (icon === "
|
49
|
-
return []
|
50
|
-
} else if (typeof icon === "string") {
|
48
|
+
if (typeof icon === "string") {
|
51
49
|
return [icon, icon];
|
52
50
|
}
|
53
51
|
return icon;
|
@@ -62,34 +60,30 @@ const CollapsibleIcon = ({
|
|
62
60
|
|
63
61
|
return (
|
64
62
|
<>
|
65
|
-
{
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
</div>
|
78
|
-
) : (
|
79
|
-
<div
|
80
|
-
className="icon_wrapper"
|
81
|
-
key={icon ? showIcon(icon)[1] : "chevron-up"}
|
82
|
-
onClick={(e) => handleIconClick(e)}
|
83
|
-
style={{ verticalAlign: "middle", color: color }}
|
84
|
-
>
|
85
|
-
<Icon
|
86
|
-
icon={icon ? showIcon(icon)[1] : "chevron-up"}
|
87
|
-
size={iconSize}
|
88
|
-
/>
|
89
|
-
</div>
|
90
|
-
)
|
63
|
+
{collapsed ? (
|
64
|
+
<div
|
65
|
+
className="icon_wrapper"
|
66
|
+
key={icon ? showIcon(icon)[0] : "chevron-down"}
|
67
|
+
onClick={(e) => handleIconClick(e)}
|
68
|
+
style={{ verticalAlign: "middle", color: color }}
|
69
|
+
>
|
70
|
+
<Icon
|
71
|
+
icon={icon ? showIcon(icon)[0] : "chevron-down"}
|
72
|
+
size={iconSize}
|
73
|
+
/>
|
74
|
+
</div>
|
91
75
|
) : (
|
92
|
-
<div
|
76
|
+
<div
|
77
|
+
className="icon_wrapper"
|
78
|
+
key={icon ? showIcon(icon)[1] : "chevron-up"}
|
79
|
+
onClick={(e) => handleIconClick(e)}
|
80
|
+
style={{ verticalAlign: "middle", color: color }}
|
81
|
+
>
|
82
|
+
<Icon
|
83
|
+
icon={icon ? showIcon(icon)[1] : "chevron-up"}
|
84
|
+
size={iconSize}
|
85
|
+
/>
|
86
|
+
</div>
|
93
87
|
)}
|
94
88
|
</>
|
95
89
|
);
|
@@ -5,19 +5,15 @@
|
|
5
5
|
<%= content.presence %>
|
6
6
|
<% end %>
|
7
7
|
<%= pb_rails("flex/flex_item") do %>
|
8
|
-
|
9
|
-
|
8
|
+
<div style="color: <%= object.icon_color %>" class="icon_wrapper" >
|
9
|
+
<% if object.icon.present? %>
|
10
|
+
<%= pb_rails("icon", props: { icon: object.show_icon(object.icon)[0], id:"collapsible_open_icon", size: object.size }) %>
|
11
|
+
<%= pb_rails("icon", props: { icon: object.show_icon(object.icon)[1], id:"collapsible_close_icon", size: object.size }) %>
|
10
12
|
<% else %>
|
11
|
-
|
12
|
-
|
13
|
-
<%= pb_rails("icon", props: { icon: object.show_icon(object.icon)[0], id:"collapsible_open_icon", size: object.size }) %>
|
14
|
-
<%= pb_rails("icon", props: { icon: object.show_icon(object.icon)[1], id:"collapsible_close_icon", size: object.size }) %>
|
15
|
-
<% else %>
|
16
|
-
<%= pb_rails("icon", props: { icon: "chevron-down", id:"collapsible_open_icon", size: object.size }) %>
|
17
|
-
<%= pb_rails("icon", props: { icon: "chevron-up", id:"collapsible_close_icon", size: object.size }) %>
|
18
|
-
<% end %>
|
19
|
-
</div>
|
13
|
+
<%= pb_rails("icon", props: { icon: "chevron-down", id:"collapsible_open_icon", size: object.size }) %>
|
14
|
+
<%= pb_rails("icon", props: { icon: "chevron-up", id:"collapsible_close_icon", size: object.size }) %>
|
20
15
|
<% end %>
|
16
|
+
</div>
|
21
17
|
<% end %>
|
22
18
|
<% end %>
|
23
19
|
<% end %>
|
@@ -9,7 +9,6 @@ examples:
|
|
9
9
|
- collapsible_external_controls_multiple: Toggle All Collapsibles With One Control
|
10
10
|
- collapsible_custom_main_rails: Custom Main Section
|
11
11
|
- collapsible_custom_main_with_icon_rails: Custom Main Section With Icon
|
12
|
-
- collapsible_no_icon: No Icon
|
13
12
|
|
14
13
|
|
15
14
|
react:
|
@@ -20,7 +19,6 @@ examples:
|
|
20
19
|
- collapsible_state: useCollapsible Hook
|
21
20
|
- collapsible_custom_main: Custom Main Section
|
22
21
|
- collapsible_custom_main_with_icon: Custom Main Section With Icon
|
23
|
-
- collapsible_no_icon: No Icon
|
24
22
|
|
25
23
|
|
26
24
|
|
@@ -4,5 +4,4 @@ export { default as CollapsibleColor } from './_collapsible_color.jsx'
|
|
4
4
|
export { default as CollapsibleIcons } from './_collapsible_icons.jsx'
|
5
5
|
export { default as CollapsibleState } from './_collapsible_state.jsx'
|
6
6
|
export { default as CollapsibleCustomMain } from './_collapsible_custom_main.jsx'
|
7
|
-
export { default as CollapsibleCustomMainWithIcon } from './_collapsible_custom_main_with_icon.jsx'
|
8
|
-
export { default as CollapsibleNoIcon } from './_collapsible_no_icon.jsx'
|
7
|
+
export { default as CollapsibleCustomMainWithIcon } from './_collapsible_custom_main_with_icon.jsx'
|
@@ -21,14 +21,14 @@
|
|
21
21
|
display: flex;
|
22
22
|
align-items: center;
|
23
23
|
[class*=pb_date_range_inline_arrow] {
|
24
|
-
margin-left: $space_xs/2;
|
25
|
-
margin-right: $space_xs/2;
|
24
|
+
margin-left: calc($space_xs/2);
|
25
|
+
margin-right: calc($space_xs/2);
|
26
26
|
}
|
27
27
|
[class*=pb_date_range_inline_timezone] {
|
28
|
-
margin-left: $space_xs/2;
|
28
|
+
margin-left: calc($space_xs/2);
|
29
29
|
}
|
30
30
|
[class*=pb_date_range_inline_icon] {
|
31
|
-
margin-right: $space_xs/2;
|
31
|
+
margin-right: calc($space_xs/2);
|
32
32
|
}
|
33
33
|
}
|
34
34
|
}
|
@@ -1,11 +1,11 @@
|
|
1
1
|
[class^=pb_date_time_stacked] {
|
2
2
|
|
3
3
|
[class^=padding_month] {
|
4
|
-
padding-bottom: $space_xs + 2px !important;
|
4
|
+
padding-bottom: calc($space_xs + 2px) !important;
|
5
5
|
}
|
6
6
|
|
7
7
|
[class^=padding_day] {
|
8
|
-
padding-bottom: $space_xs + 2px !important;
|
8
|
+
padding-bottom: calc($space_xs + 2px) !important;
|
9
9
|
}
|
10
10
|
|
11
11
|
&[class*=_dark] {
|
@@ -19,7 +19,7 @@
|
|
19
19
|
|
20
20
|
}
|
21
21
|
.date-time-padding {
|
22
|
-
padding-right: $space_xs / 2;
|
23
|
-
padding-left: $space_xs / 2;
|
22
|
+
padding-right: calc($space_xs / 2);
|
23
|
+
padding-left: calc($space_xs / 2);
|
24
24
|
}
|
25
25
|
|
@@ -22,11 +22,8 @@
|
|
22
22
|
<% if object.cancel_button && object.confirm_button %>
|
23
23
|
<%= pb_rails("dialog/dialog_footer", props: {
|
24
24
|
cancel_button: object.cancel_button,
|
25
|
-
cancel_button_id: object.cancel_button_id,
|
26
25
|
confirm_button: object.confirm_button,
|
27
|
-
|
28
|
-
id: object.id,
|
29
|
-
loading: object.loading
|
26
|
+
id: object.id
|
30
27
|
}) %>
|
31
28
|
<% end %>
|
32
29
|
|
@@ -13,11 +13,8 @@ module Playbook
|
|
13
13
|
prop :should_close_on_overlay_click, type: Playbook::Props::Boolean, default: true
|
14
14
|
prop :title
|
15
15
|
prop :text
|
16
|
-
prop :loading
|
17
16
|
prop :confirm_button
|
18
|
-
prop :confirm_button_id
|
19
17
|
prop :cancel_button
|
20
|
-
prop :cancel_button_id
|
21
18
|
prop :status, type: Playbook::Props::Enum,
|
22
19
|
values: ["info", "caution", "delete", "error", "success", "default", ""],
|
23
20
|
default: ""
|
@@ -3,27 +3,6 @@ const dialogHelper = () => {
|
|
3
3
|
const closeTrigger = document.querySelectorAll("[data-close-dialog]");
|
4
4
|
const dialogs = document.querySelectorAll(".pb_dialog_rails")
|
5
5
|
|
6
|
-
const loadingButton = document.querySelector('[data-disable-with="Loading"]');
|
7
|
-
if (loadingButton) {
|
8
|
-
loadingButton.addEventListener("click", function() {
|
9
|
-
const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
|
10
|
-
const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
|
11
|
-
let currentClass = okayLoadingButton.className;
|
12
|
-
let cancelClass = cancelButton ? cancelButton.className : "";
|
13
|
-
|
14
|
-
let newClass = currentClass.replace("_enabled", "_disabled_loading");
|
15
|
-
let newCancelClass = cancelClass.replace("_enabled", "_disabled");
|
16
|
-
|
17
|
-
// Disable the buttons
|
18
|
-
okayLoadingButton.disabled = true;
|
19
|
-
if (cancelButton) cancelButton.disabled = true;
|
20
|
-
|
21
|
-
okayLoadingButton.className = newClass;
|
22
|
-
if (cancelButton) cancelButton.className = newCancelClass;
|
23
|
-
});
|
24
|
-
}
|
25
|
-
|
26
|
-
|
27
6
|
openTrigger.forEach((open) => {
|
28
7
|
open.addEventListener("click", () => {
|
29
8
|
var openTriggerData = open.dataset.openDialog;
|
@@ -3,12 +3,10 @@
|
|
3
3
|
<% if object.confirm_button && object.cancel_button %>
|
4
4
|
<div class="dialog-pseudo-footer"></div>
|
5
5
|
<%= pb_rails("flex", props: { classname:object.classname, spacing:"between", padding_x:"sm", padding:"sm", padding_bottom:"sm" }) do %>
|
6
|
-
|
7
|
-
<%= pb_rails("button", props: { type: "submit", id: object.confirm_button_id, data: loading_data,
|
8
|
-
}) do %>
|
6
|
+
<%= pb_rails("button", props: { type: "submit", id: object.confirm_button_id }) do %>
|
9
7
|
<%= object.confirm_button %>
|
10
8
|
<% end %>
|
11
|
-
<%= pb_rails("button", props: { type: "button", data: {"close-dialog": "#{object.id}"
|
9
|
+
<%= pb_rails("button", props: { type: "button", data: {"close-dialog": "#{object.id}" }, id: object.cancel_button_id, variant: "link"}) do %>
|
12
10
|
<%= object.cancel_button %>
|
13
11
|
<% end %>
|
14
12
|
<% end %>
|
@@ -4,22 +4,13 @@ module Playbook
|
|
4
4
|
module PbDialog
|
5
5
|
class DialogFooter < Playbook::KitBase
|
6
6
|
prop :cancel_button
|
7
|
-
prop :cancel_button_id
|
8
7
|
prop :confirm_button
|
9
8
|
prop :confirm_button_id
|
10
|
-
prop :
|
9
|
+
prop :cancel_button_id
|
11
10
|
|
12
11
|
def classname
|
13
12
|
generate_classname("dialog_footer")
|
14
13
|
end
|
15
|
-
|
16
|
-
def cancel_loading
|
17
|
-
loading ? "Loading" : ""
|
18
|
-
end
|
19
|
-
|
20
|
-
def loading_data
|
21
|
-
loading ? { disable_with: "Loading" } : {}
|
22
|
-
end
|
23
14
|
end
|
24
15
|
end
|
25
16
|
end
|
@@ -17,9 +17,9 @@ $form_pill_colors: (
|
|
17
17
|
display: inline-flex;
|
18
18
|
justify-content: center;
|
19
19
|
align-items: center;
|
20
|
-
padding: 0 $space-md/2;
|
20
|
+
padding: 0 calc($space-md/2);
|
21
21
|
height: $pb_form_pill_height;
|
22
|
-
border-radius: $pb_form_pill_height/2;
|
22
|
+
border-radius: calc($pb_form_pill_height/2);
|
23
23
|
margin-bottom: 2px;
|
24
24
|
margin-top: 2px;
|
25
25
|
cursor: pointer;
|
@@ -1,5 +1,5 @@
|
|
1
1
|
/* eslint-disable react/jsx-no-target-blank */
|
2
|
-
/* eslint-disable react/no-multi-comp */
|
2
|
+
/* eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
|
3
3
|
|
4
4
|
import React from 'react'
|
5
5
|
import classnames from 'classnames'
|
@@ -18,7 +18,6 @@ type HashtagProps = {
|
|
18
18
|
id?: string,
|
19
19
|
newWindow?: boolean,
|
20
20
|
rel?: string,
|
21
|
-
target?: string,
|
22
21
|
text?: string,
|
23
22
|
type: "default" | "home" | "project" | "appointment",
|
24
23
|
url?: string,
|
@@ -41,7 +40,6 @@ const Hashtag = (props: HashtagProps) => {
|
|
41
40
|
id,
|
42
41
|
newWindow,
|
43
42
|
rel,
|
44
|
-
target,
|
45
43
|
text,
|
46
44
|
type = 'default',
|
47
45
|
url,
|
@@ -52,18 +50,6 @@ const Hashtag = (props: HashtagProps) => {
|
|
52
50
|
const htmlProps = buildHtmlProps(htmlOptions)
|
53
51
|
const classes = classnames(buildCss('pb_hashtag_kit'), globalProps(props), className)
|
54
52
|
|
55
|
-
const getTargetAttribute = () => {
|
56
|
-
if (target && url) {
|
57
|
-
return target
|
58
|
-
} else if (newWindow) {
|
59
|
-
return '_blank'
|
60
|
-
} else {
|
61
|
-
return '_self'
|
62
|
-
}
|
63
|
-
|
64
|
-
return null
|
65
|
-
}
|
66
|
-
|
67
53
|
return (
|
68
54
|
<span
|
69
55
|
{...ariaProps}
|
@@ -75,7 +61,7 @@ const Hashtag = (props: HashtagProps) => {
|
|
75
61
|
<a
|
76
62
|
href={url}
|
77
63
|
rel={(newWindow ? "noreferrer" : rel)}
|
78
|
-
target={
|
64
|
+
target={(newWindow ? '_blank' : '_self')}
|
79
65
|
>
|
80
66
|
<Badge
|
81
67
|
dark={dark}
|
@@ -2,4 +2,4 @@
|
|
2
2
|
|
3
3
|
<br/><br/>
|
4
4
|
|
5
|
-
<%= pb_rails("hashtag", props: {text: "Open in a new Window", url: "https://google.com", type: "project",
|
5
|
+
<%= pb_rails("hashtag", props: {text: "Open in a new Window", url: "https://google.com", type: "project", new_window: true}) %>
|
@@ -1 +1 @@
|
|
1
|
-
Use the
|
1
|
+
Use the newWindow/new_window prop to control whether the link opens on the same page or a new tab (same page is the default behavior)
|
@@ -1,5 +1,5 @@
|
|
1
1
|
<%= pb_content_tag(:span) do %>
|
2
|
-
<%= link_to object.url, target: object.
|
2
|
+
<%= link_to object.url, target: object.link_option do %>
|
3
3
|
<%= pb_rails("badge", props: { dark: object.dark, variant: "primary", text: object.hashtag_text }) %>
|
4
4
|
<% end %>
|
5
5
|
<% end %>
|
@@ -10,7 +10,6 @@ module Playbook
|
|
10
10
|
values: %w[default project home appointment],
|
11
11
|
default: "default"
|
12
12
|
prop :url
|
13
|
-
prop :target
|
14
13
|
|
15
14
|
def classname
|
16
15
|
generate_classname("pb_hastag_kit")
|
@@ -20,14 +19,8 @@ module Playbook
|
|
20
19
|
type_text + text
|
21
20
|
end
|
22
21
|
|
23
|
-
def
|
24
|
-
|
25
|
-
target
|
26
|
-
elsif new_window
|
27
|
-
"_blank"
|
28
|
-
else
|
29
|
-
"_self"
|
30
|
-
end
|
22
|
+
def link_option
|
23
|
+
new_window ? "_blank" : "_self"
|
31
24
|
end
|
32
25
|
|
33
26
|
private
|