playbook_ui 13.31.0.pre.alpha.PBNTR342navtabbing3231 → 13.31.0.pre.alpha.PLAY882formpillprimaryandneutral3201
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_background/background.html.erb +2 -11
- data/app/pb_kits/playbook/pb_body/body.html.erb +1 -6
- data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.html.erb +1 -6
- data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.html.erb +1 -6
- data/app/pb_kits/playbook/pb_button/_button.scss +3 -3
- data/app/pb_kits/playbook/pb_button/_button_mixins.scss +2 -3
- data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss +1 -1
- data/app/pb_kits/playbook/pb_caption/caption.html.erb +1 -6
- data/app/pb_kits/playbook/pb_card/card.html.erb +1 -7
- data/app/pb_kits/playbook/pb_dashboard/commonSettings.js +1 -1
- data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +1 -1
- data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +1 -1
- data/app/pb_kits/playbook/pb_detail/detail.html.erb +1 -6
- data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +1 -6
- data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb +1 -6
- data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +2 -5
- data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +1 -6
- data/app/pb_kits/playbook/pb_flex/flex.html.erb +1 -5
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +109 -6
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.test.jsx +53 -0
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +11 -2
- data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +5 -1
- data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb +1 -6
- data/app/pb_kits/playbook/pb_highlight/highlight.html.erb +1 -5
- data/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb +1 -5
- data/app/pb_kits/playbook/pb_nav/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_nav/nav.rb +0 -9
- data/app/pb_kits/playbook/playbook-rails.js +0 -3
- data/app/pb_kits/playbook/tokens/_titles.scss +4 -4
- data/app/pb_kits/playbook/tokens/_typography.scss +10 -10
- data/dist/playbook-rails.js +6 -6
- data/dist/reset.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +3 -5
- data/app/pb_kits/playbook/pb_nav/docs/_tab_nav.html.erb +0 -12
- data/app/pb_kits/playbook/pb_nav/docs/_tab_nav.html.md +0 -0
- data/app/pb_kits/playbook/pb_nav/index.js +0 -43
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 58be8143dc1d3b0b8f64fddf26414a5486df02decbd590b04e78a2fd96b5a1a3
|
|
4
|
+
data.tar.gz: e109a14b818fc8ea6dc9e1c1c0fd7fd27325481d730c3c3f0a249e5b2334a1c5
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 517fb2d246a141e0490421f1d64a1b719650908e26a16320d9d647e73edde4a286df47c5fbeafc080d48063e744c4d7c1d45fd18e8ab25850d6ac5ec88eb1081
|
|
7
|
+
data.tar.gz: aa0c86a28ba3c93000bf2be8c4857332c19fe9137d00c5cfbe8c796068dc3e99f8f34feae53e989143fbb01e6d5286aafbc2abceeef7ce2b825f80150eb32703
|
|
@@ -1,23 +1,14 @@
|
|
|
1
1
|
<% if object.image_url.present? %>
|
|
2
|
-
<%=
|
|
3
|
-
aria: object.aria,
|
|
4
|
-
data: object.data,
|
|
5
|
-
id: object.id,
|
|
6
|
-
class: object.classname,
|
|
2
|
+
<%= pb_content_tag(object.tag,
|
|
7
3
|
style: "background-image: url('#{object.image_url}');
|
|
8
4
|
background-repeat: #{object.background_repeat};
|
|
9
5
|
background-size: #{object.background_size};
|
|
10
6
|
background-position: #{object.background_position};",
|
|
11
|
-
**combined_html_options
|
|
12
7
|
) do %>
|
|
13
8
|
<%= content.presence %>
|
|
14
9
|
<% end %>
|
|
15
10
|
<% else %>
|
|
16
|
-
<%=
|
|
17
|
-
aria: object.aria,
|
|
18
|
-
data: object.data,
|
|
19
|
-
id: object.id,
|
|
20
|
-
class: object.classname,
|
|
11
|
+
<%= pb_content_tag(object.tag,
|
|
21
12
|
style: object.custom_background_color
|
|
22
13
|
) do %>
|
|
23
14
|
<%= content.presence %>
|
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
<%=
|
|
2
|
-
id: object.id,
|
|
3
|
-
data: object.data,
|
|
4
|
-
class: object.classname,
|
|
5
|
-
aria: object.aria,
|
|
6
|
-
**combined_html_options) do%>
|
|
1
|
+
<%= pb_content_tag do%>
|
|
7
2
|
<%= content_tag(object.link ? 'a' : 'span', class: 'bread_crumb_item', href: object.link) do %>
|
|
8
3
|
<%= content.presence %>
|
|
9
4
|
<% end %>
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
|
|
10
10
|
$pb_button_size: 40px;
|
|
11
11
|
$pb_button_v_padding: 7px;
|
|
12
|
-
$pb_button_h_padding:
|
|
12
|
+
$pb_button_h_padding: 34px;
|
|
13
13
|
$pb_button_hover_darken: 4%;
|
|
14
14
|
$pb_button_border_width: 0px;
|
|
15
15
|
|
|
@@ -27,14 +27,13 @@ $pb_button_border_width: 0px;
|
|
|
27
27
|
text-rendering: optimizeLegibility;
|
|
28
28
|
font-size: $font_small;
|
|
29
29
|
font-weight: $bold;
|
|
30
|
-
letter-spacing: $lspace_loose;
|
|
31
30
|
text-align: center;
|
|
32
31
|
text-decoration: none;
|
|
33
32
|
vertical-align: middle;
|
|
34
33
|
text-transform: none;
|
|
35
34
|
border-width: $pb_button_border_width;
|
|
36
35
|
border-style: solid;
|
|
37
|
-
border-radius: $
|
|
36
|
+
border-radius: $border_rad_light;
|
|
38
37
|
min-height: $pb_button_size;
|
|
39
38
|
line-height: 1.5;
|
|
40
39
|
padding: $pb_button_v_padding $pb_button_h_padding;
|
|
@@ -53,7 +53,7 @@ const adjustAxisStyle = (axis) => {
|
|
|
53
53
|
/* Change axis label styles */
|
|
54
54
|
axis.labels.style.fontFamily = typography.font_family_base
|
|
55
55
|
axis.labels.style.color = colors.charcoal
|
|
56
|
-
axis.labels.style.fontWeight = typography.
|
|
56
|
+
axis.labels.style.fontWeight = typography.light
|
|
57
57
|
axis.labels.style.fontSize = typography.font_small
|
|
58
58
|
}
|
|
59
59
|
|
|
@@ -1,10 +1,5 @@
|
|
|
1
1
|
<div class="pb_dialog_wrapper_rails <%= object.full_height_style %>" data-overlay-click= <%= object.overlay_close %> >
|
|
2
|
-
<%=
|
|
3
|
-
aria: object.aria,
|
|
4
|
-
data: object.data,
|
|
5
|
-
id: object.id,
|
|
6
|
-
class: object.classname,
|
|
7
|
-
**combined_html_options) do %>
|
|
2
|
+
<%= pb_content_tag(:dialog) do %>
|
|
8
3
|
<% if object.status === "" && object.title %>
|
|
9
4
|
<%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
|
|
10
5
|
<% end %>
|
|
@@ -1,8 +1,5 @@
|
|
|
1
|
-
<%=
|
|
2
|
-
|
|
3
|
-
data: object.data,
|
|
4
|
-
aria: object.aria,
|
|
5
|
-
**combined_html_options) do %>
|
|
1
|
+
<%= pb_content_tag(:div, class: "") do %>
|
|
2
|
+
<% 'excluded classname?' %>
|
|
6
3
|
<% if object.confirm_button && object.cancel_button %>
|
|
7
4
|
<div class="dialog-pseudo-footer"></div>
|
|
8
5
|
<%= pb_rails("flex", props: { classname:object.classname, spacing:"between", padding_x:"sm", padding:"sm", padding_bottom:"sm" }) do %>
|
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
<%=
|
|
2
|
-
id: object.id,
|
|
3
|
-
data: object.data,
|
|
4
|
-
class: object.sticky_header,
|
|
5
|
-
aria: object.aria,
|
|
6
|
-
**combined_html_options) do %>
|
|
1
|
+
<%= pb_content_tag(:div, class: object.sticky_header) do %>
|
|
7
2
|
<%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
|
|
8
3
|
<%= content.presence || object.title %>
|
|
9
4
|
|
|
@@ -8,6 +8,7 @@ $selector: ".pb_form_pill";
|
|
|
8
8
|
$pb_form_pill_height: 37px;
|
|
9
9
|
$form_pill_colors: (
|
|
10
10
|
primary: map-get($status_color_text, "primary"),
|
|
11
|
+
neutral: map-get($status_color_text, "neutral"),
|
|
11
12
|
);
|
|
12
13
|
|
|
13
14
|
|
|
@@ -23,39 +24,76 @@ $form_pill_colors: (
|
|
|
23
24
|
cursor: pointer;
|
|
24
25
|
@each $color_name, $color_value in $form_pill_colors {
|
|
25
26
|
&[class*=_#{$color_name}] {
|
|
26
|
-
background-color:
|
|
27
|
+
background-color: mix($color_value, $card_light, 10%);
|
|
28
|
+
@if ($color_name == "neutral") {
|
|
29
|
+
background-color: $white;
|
|
30
|
+
border: 1px solid $border_light;
|
|
31
|
+
}
|
|
27
32
|
transition: background-color 0.2s ease;
|
|
28
33
|
box-shadow: none;
|
|
29
34
|
@media (hover:hover) {
|
|
30
35
|
&:hover {
|
|
31
|
-
background-color:
|
|
36
|
+
background-color: mix($color_value, $card_light, 20%);
|
|
37
|
+
@if ($color_name == "neutral") {
|
|
38
|
+
background-color: mix($neutral, $card_light, 20%);
|
|
39
|
+
border: 1px solid $border_light;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
&:active {
|
|
43
|
+
background-color: mix($color_value, $card_light, 30%);
|
|
44
|
+
@if ($color_name == "neutral") {
|
|
45
|
+
background-color: mix($neutral, $card_light, 30%);
|
|
46
|
+
}
|
|
32
47
|
}
|
|
33
48
|
}
|
|
34
49
|
#{$selector}_text {
|
|
35
50
|
color: $color_value;
|
|
51
|
+
@if ($color_name == "neutral") {
|
|
52
|
+
color: $text_lt_default;
|
|
53
|
+
}
|
|
36
54
|
padding-left: $space-sm;
|
|
37
|
-
padding-right: $space-sm/
|
|
55
|
+
padding-right: $space-sm/2;
|
|
38
56
|
}
|
|
39
57
|
#{$selector}_close {
|
|
40
58
|
color: $color_value;
|
|
41
|
-
padding-left: $space-sm/
|
|
59
|
+
padding-left: $space-sm/4;
|
|
42
60
|
padding-right: $space-sm/4;
|
|
43
61
|
display: flex;
|
|
44
62
|
align-items: center;
|
|
45
|
-
height
|
|
63
|
+
// I had to temporarily change height to 27px so new hover state darker background forms a circle not an oval
|
|
64
|
+
// before size change (ticket 2 of 4) - change back to 100% when $pb_form_pill_height changed to 27px from 37px
|
|
65
|
+
height: 27px;
|
|
66
|
+
border-radius: 70px;
|
|
46
67
|
cursor: pointer;
|
|
68
|
+
&:hover {
|
|
69
|
+
background-color: mix($color_value, $card_light, 40%);
|
|
70
|
+
@if ($color_name == "neutral") {
|
|
71
|
+
background-color: mix($neutral, $card_light, 60%);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
47
74
|
}
|
|
48
75
|
#{$selector}_tag {
|
|
49
76
|
color: $color_value;
|
|
50
77
|
padding-left: $space-sm;
|
|
78
|
+
@if ($color_name == "neutral") {
|
|
79
|
+
color: $text_lt_default;
|
|
80
|
+
}
|
|
51
81
|
}
|
|
52
82
|
}
|
|
53
83
|
}
|
|
84
|
+
&:focus {
|
|
85
|
+
outline: $primary solid 2px;
|
|
86
|
+
outline-offset: -1px;
|
|
87
|
+
}
|
|
88
|
+
&:focus-visible {
|
|
89
|
+
outline: $primary solid 2px;
|
|
90
|
+
outline-offset: -1px;
|
|
91
|
+
}
|
|
54
92
|
&.small {
|
|
55
93
|
height: fit-content;
|
|
56
94
|
height: -moz-fit-content;
|
|
57
95
|
.pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag {
|
|
58
|
-
font-size:
|
|
96
|
+
font-size: 16px;
|
|
59
97
|
font-weight: $regular;
|
|
60
98
|
}
|
|
61
99
|
.pb_form_pill_text, .pb_form_pill_tag {
|
|
@@ -70,6 +108,71 @@ $form_pill_colors: (
|
|
|
70
108
|
&::before { line-height: 21px; }
|
|
71
109
|
}
|
|
72
110
|
}
|
|
111
|
+
&.dark {
|
|
112
|
+
@each $color_name, $color_value in $form_pill_colors {
|
|
113
|
+
// In dark mode, the base patterns below are needed for the next tickets for success, warning, error, info.
|
|
114
|
+
// Primary and Neutral are exceptions to the general rule in the handoff
|
|
115
|
+
&[class*=_#{$color_name}] {
|
|
116
|
+
// background-color: mix($color_value, $card_dark, 10%);
|
|
117
|
+
// .pb_form_pill_tag {
|
|
118
|
+
// color: $color_name;
|
|
119
|
+
// }
|
|
120
|
+
// .pb_form_pill_close {
|
|
121
|
+
// color: $color_name;
|
|
122
|
+
// &:hover {
|
|
123
|
+
// background-color: mix($color_value, $card_dark, 40%);
|
|
124
|
+
// }
|
|
125
|
+
// }
|
|
126
|
+
// &:hover {
|
|
127
|
+
// background-color: mix($color_value, $card_dark, 20%);
|
|
128
|
+
// }
|
|
129
|
+
// &:active {
|
|
130
|
+
// background-color: mix($color_value, $card_dark, 30%);
|
|
131
|
+
// }
|
|
132
|
+
@if ($color_name == "neutral") {
|
|
133
|
+
background-color: transparent;
|
|
134
|
+
border: 1px solid $border_dark;
|
|
135
|
+
.pb_form_pill_text, .pb_form_pill_tag {
|
|
136
|
+
color: $text_dk_default;
|
|
137
|
+
}
|
|
138
|
+
.pb_form_pill_close {
|
|
139
|
+
color: $text_dk_default;
|
|
140
|
+
&:hover {
|
|
141
|
+
background-color: mix($neutral, $card_dark, 40%);
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
&:hover {
|
|
145
|
+
background-color: mix($white, $card_dark, 10%);
|
|
146
|
+
}
|
|
147
|
+
&:active {
|
|
148
|
+
background-color: mix($white, $card_dark, 20%);
|
|
149
|
+
}
|
|
150
|
+
&:focus {
|
|
151
|
+
border: 1px solid $primary;
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
@if ($color_name == "primary") {
|
|
155
|
+
background-color: mix($active_dark, $card_dark, 10%);
|
|
156
|
+
.pb_form_pill_text, .pb_form_pill_tag {
|
|
157
|
+
color: $active_dark;
|
|
158
|
+
}
|
|
159
|
+
.pb_form_pill_close {
|
|
160
|
+
color: $active_dark;
|
|
161
|
+
&:hover {
|
|
162
|
+
background-color: mix($active_dark, $card_dark, 40%);
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
&:hover {
|
|
166
|
+
background-color: mix($active_dark, $card_dark, 20px);
|
|
167
|
+
}
|
|
168
|
+
&:active {
|
|
169
|
+
background-color: mix($active_dark, $card_dark, 30%);
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
|
|
73
176
|
&[class*=lowercase] {
|
|
74
177
|
text-transform: lowercase;
|
|
75
178
|
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { render, screen } from '../utilities/test-utils';
|
|
3
|
+
import FormPill from './_form_pill';
|
|
4
|
+
|
|
5
|
+
const testId = 'formpill';
|
|
6
|
+
|
|
7
|
+
test('should render classname', () => {
|
|
8
|
+
render(
|
|
9
|
+
<FormPill
|
|
10
|
+
data={{ testid: testId }}
|
|
11
|
+
text="test"
|
|
12
|
+
/>
|
|
13
|
+
)
|
|
14
|
+
|
|
15
|
+
const kit = screen.getByTestId(testId)
|
|
16
|
+
expect(kit).toHaveClass('pb_form_pill_kit_primary none')
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
test('displays text content', () => {
|
|
20
|
+
render(
|
|
21
|
+
<FormPill
|
|
22
|
+
data={{ testid: testId }}
|
|
23
|
+
text="test"
|
|
24
|
+
/>
|
|
25
|
+
)
|
|
26
|
+
|
|
27
|
+
const text = screen.getByText("test")
|
|
28
|
+
expect(text).toBeInTheDocument()
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
test('displays color variant', () => {
|
|
32
|
+
render(
|
|
33
|
+
<FormPill
|
|
34
|
+
color={"neutral"}
|
|
35
|
+
data={{ testid: testId }}
|
|
36
|
+
text={"test"}
|
|
37
|
+
/>
|
|
38
|
+
)
|
|
39
|
+
const kit = screen.getByTestId(testId)
|
|
40
|
+
expect(kit).toHaveClass(`pb_form_pill_kit_neutral none`)
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
test('displays size variant', () => {
|
|
44
|
+
render(
|
|
45
|
+
<FormPill
|
|
46
|
+
data={{ testid: testId }}
|
|
47
|
+
size={"small"}
|
|
48
|
+
text={"test"}
|
|
49
|
+
/>
|
|
50
|
+
)
|
|
51
|
+
const kit = screen.getByTestId('formpill')
|
|
52
|
+
expect(kit).toHaveClass(`pb_form_pill_kit_primary small none`)
|
|
53
|
+
});
|
|
@@ -5,7 +5,7 @@ import Title from '../pb_title/_title'
|
|
|
5
5
|
import Icon from '../pb_icon/_icon'
|
|
6
6
|
import Avatar from '../pb_avatar/_avatar'
|
|
7
7
|
import { globalProps, GlobalProps } from '../utilities/globalProps'
|
|
8
|
-
import { buildHtmlProps } from '../utilities/props'
|
|
8
|
+
import { buildDataProps, buildHtmlProps } from '../utilities/props'
|
|
9
9
|
|
|
10
10
|
type FormPillProps = {
|
|
11
11
|
className?: string,
|
|
@@ -18,6 +18,9 @@ type FormPillProps = {
|
|
|
18
18
|
avatarUrl?: string,
|
|
19
19
|
size?: string,
|
|
20
20
|
textTransform?: 'none' | 'lowercase',
|
|
21
|
+
color?: "primary" | "neutral",
|
|
22
|
+
data?: {[key: string]: string},
|
|
23
|
+
tabIndex?: number,
|
|
21
24
|
closeProps?: {
|
|
22
25
|
onClick?: React.MouseEventHandler<HTMLSpanElement>,
|
|
23
26
|
onMouseDown?: React.MouseEventHandler<HTMLSpanElement>,
|
|
@@ -36,20 +39,26 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
|
|
|
36
39
|
closeProps = {},
|
|
37
40
|
size = '',
|
|
38
41
|
textTransform = 'none',
|
|
42
|
+
color = "primary",
|
|
43
|
+
data = {},
|
|
44
|
+
tabIndex,
|
|
39
45
|
} = props
|
|
40
46
|
const css = classnames(
|
|
41
|
-
`pb_form_pill_kit_${
|
|
47
|
+
`pb_form_pill_kit_${color}`,
|
|
42
48
|
globalProps(props),
|
|
43
49
|
className,
|
|
44
50
|
size === 'small' ? 'small' : null,
|
|
45
51
|
textTransform,
|
|
46
52
|
)
|
|
47
53
|
|
|
54
|
+
const dataProps = buildDataProps(data)
|
|
48
55
|
const htmlProps = buildHtmlProps(htmlOptions)
|
|
49
56
|
|
|
50
57
|
return (
|
|
51
58
|
<div className={css}
|
|
52
59
|
id={id}
|
|
60
|
+
tabIndex={tabIndex}
|
|
61
|
+
{...dataProps}
|
|
53
62
|
{...htmlProps}
|
|
54
63
|
>
|
|
55
64
|
{name &&
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, **combined_html_options) do %>
|
|
1
|
+
<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
|
|
2
2
|
<% if object.name.present? %>
|
|
3
3
|
<%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xs" }) %>
|
|
4
4
|
<%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
|
|
@@ -11,9 +11,13 @@ module Playbook
|
|
|
11
11
|
prop :text_transform, type: Playbook::Props::Enum,
|
|
12
12
|
values: %w[none lowercase],
|
|
13
13
|
default: "none"
|
|
14
|
+
prop :color, type: Playbook::Props::Enum,
|
|
15
|
+
values: %w[primary neutral],
|
|
16
|
+
default: "primary"
|
|
17
|
+
prop :tabindex
|
|
14
18
|
|
|
15
19
|
def classname
|
|
16
|
-
generate_classname("pb_form_pill_kit",
|
|
20
|
+
generate_classname("pb_form_pill_kit", color, name, text, text_transform)
|
|
17
21
|
end
|
|
18
22
|
|
|
19
23
|
def display_text
|
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
<%=
|
|
2
|
-
aria: object.aria,
|
|
3
|
-
class: object.classname,
|
|
4
|
-
data: object.data,
|
|
5
|
-
id: object.id,
|
|
6
|
-
**combined_html_options) do %>
|
|
1
|
+
<%= pb_content_tag(:span) do %>
|
|
7
2
|
<%= link_to object.url, target: object.link_option do %>
|
|
8
3
|
<%= pb_rails("badge", props: { dark: object.dark, variant: "primary", text: object.hashtag_text }) %>
|
|
9
4
|
<% end %>
|
|
@@ -1,8 +1,4 @@
|
|
|
1
|
-
<%=
|
|
2
|
-
id: object.id,
|
|
3
|
-
data: object.data,
|
|
4
|
-
class: object.classname,
|
|
5
|
-
**combined_html_options) do %>
|
|
1
|
+
<%= pb_content_tag do %>
|
|
6
2
|
<%= pb_rails("home_address_street/#{emphasis}_emphasis", props: object.send("#{emphasis}_emphasis_props")) %>
|
|
7
3
|
<% end %>
|
|
8
4
|
|
|
@@ -13,20 +13,11 @@ module Playbook
|
|
|
13
13
|
default: "normal"
|
|
14
14
|
prop :highlight, type: Playbook::Props::Boolean, default: true
|
|
15
15
|
prop :borderless, type: Playbook::Props::Boolean, default: false
|
|
16
|
-
prop :tabbing, type: Playbook::Props::Boolean, default: false
|
|
17
16
|
|
|
18
17
|
def classname
|
|
19
18
|
generate_classname("pb_nav_list", variant, orientation, highlight_class, borderless_class)
|
|
20
19
|
end
|
|
21
20
|
|
|
22
|
-
def data
|
|
23
|
-
if tabbing
|
|
24
|
-
Hash(prop(:data)).merge(pb_nav_tab: true)
|
|
25
|
-
else
|
|
26
|
-
prop(:data)
|
|
27
|
-
end
|
|
28
|
-
end
|
|
29
|
-
|
|
30
21
|
def highlight_class
|
|
31
22
|
highlight ? "highlight" : nil
|
|
32
23
|
end
|
|
@@ -5,11 +5,10 @@
|
|
|
5
5
|
@mixin pb_title(
|
|
6
6
|
$fontSize: $heading_1,
|
|
7
7
|
$fontWeight: $lighter,
|
|
8
|
-
$lineHeight: $lh_tighter
|
|
9
|
-
$letterSpacing: $lspace_tight
|
|
8
|
+
$lineHeight: $lh_tighter
|
|
10
9
|
){
|
|
11
10
|
font-size: $fontSize;
|
|
12
|
-
letter-spacing: $
|
|
11
|
+
letter-spacing: $lspace_tight;
|
|
13
12
|
font-weight: $fontWeight;
|
|
14
13
|
color: $text_lt_default;
|
|
15
14
|
margin: 0;
|
|
@@ -30,7 +29,8 @@
|
|
|
30
29
|
}
|
|
31
30
|
|
|
32
31
|
@mixin pb_title_4 {
|
|
33
|
-
@include pb_title($heading_4, $bolder
|
|
32
|
+
@include pb_title($heading_4, $bolder);
|
|
33
|
+
letter-spacing: -0.03em;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
@mixin pb_title_dark {
|