playbook_ui 12.24.0.pre.alpha.railsmultilevelimprovements749 → 12.25.0.pre.alpha.railsmultilevelimprovements758
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_date/_date.tsx +96 -42
- data/app/pb_kits/playbook/pb_date/date.html.erb +22 -2
- data/app/pb_kits/playbook/pb_date/date.rb +2 -0
- data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.html.erb +30 -0
- data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx +47 -0
- data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.md +1 -0
- data/app/pb_kits/playbook/pb_date/docs/example.yml +4 -4
- data/app/pb_kits/playbook/pb_date/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +7 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb +1 -1
- data/app/pb_kits/playbook/pb_time/_time.tsx +71 -35
- data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.html.erb +37 -0
- data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.jsx +58 -0
- data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.md +1 -0
- data/app/pb_kits/playbook/pb_time/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_time/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_time/time.html.erb +26 -7
- data/app/pb_kits/playbook/pb_time/time.rb +2 -0
- data/app/pb_kits/playbook/pb_title/_title.scss +2 -1
- data/app/pb_kits/playbook/pb_title/_title.tsx +3 -2
- data/app/pb_kits/playbook/pb_title/title.rb +10 -3
- data/app/pb_kits/playbook/pb_title/title.test.js +3 -3
- data/dist/playbook-rails.js +5 -5
- data/lib/playbook/version.rb +2 -2
- metadata +8 -2
@@ -18,6 +18,7 @@
|
|
18
18
|
&[class*=_3] {
|
19
19
|
@include pb_title_3;
|
20
20
|
@include title_colors;
|
21
|
+
@include pb_title_bold;
|
21
22
|
}
|
22
23
|
|
23
24
|
&[class*=_4] {
|
@@ -29,7 +30,7 @@
|
|
29
30
|
@include pb_title_dark;
|
30
31
|
}
|
31
32
|
|
32
|
-
&[class*=
|
33
|
+
&[class*=thin] {
|
33
34
|
@include pb_title_thin;
|
34
35
|
}
|
35
36
|
}
|
@@ -21,13 +21,13 @@ const Title = (props: TitleProps): React.ReactElement => {
|
|
21
21
|
if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
|
22
22
|
const {
|
23
23
|
aria = {},
|
24
|
-
bold = true,
|
25
24
|
children,
|
26
25
|
className,
|
27
26
|
color,
|
28
27
|
data = {},
|
29
28
|
id,
|
30
29
|
size = 3,
|
30
|
+
bold = size === 3 ? false : true,
|
31
31
|
tag = 'h3',
|
32
32
|
text,
|
33
33
|
variant = null,
|
@@ -35,9 +35,10 @@ const Title = (props: TitleProps): React.ReactElement => {
|
|
35
35
|
|
36
36
|
const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
|
37
37
|
const dataProps: {[key: string]: string | number} = buildDataProps(data)
|
38
|
+
|
38
39
|
const getBold = bold ? '' : 'thin'
|
39
40
|
const classes = classnames(
|
40
|
-
buildCss(
|
41
|
+
buildCss("pb_title_kit", `size_${size}`, variant, color) + ` ${getBold}`,
|
41
42
|
globalProps(props),
|
42
43
|
className
|
43
44
|
)
|
@@ -17,14 +17,21 @@ module Playbook
|
|
17
17
|
values: [nil, "link"],
|
18
18
|
default: nil,
|
19
19
|
deprecated: true
|
20
|
-
|
20
|
+
|
21
|
+
def initialize(props)
|
22
|
+
props[:bold] = [1, 2, 4].include?(props[:size]) unless props.key?(:bold)
|
23
|
+
props[:bold] = false if props[:size].nil? && !props.key?(:bold)
|
24
|
+
super(props)
|
25
|
+
end
|
26
|
+
|
27
|
+
prop :bold, type: Playbook::Props::Boolean
|
21
28
|
|
22
29
|
def classname
|
23
|
-
generate_classname("pb_title_kit", size, variant, color
|
30
|
+
generate_classname("pb_title_kit", size, variant, color) + is_bold
|
24
31
|
end
|
25
32
|
|
26
33
|
def is_bold
|
27
|
-
bold ?
|
34
|
+
bold ? "" : " thin"
|
28
35
|
end
|
29
36
|
end
|
30
37
|
end
|
@@ -12,7 +12,7 @@ test('returns namespaced class name', () => {
|
|
12
12
|
)
|
13
13
|
|
14
14
|
const kit = screen.getByTestId('primary-test')
|
15
|
-
expect(kit).toHaveClass('pb_title_kit_size_3')
|
15
|
+
expect(kit).toHaveClass('pb_title_kit_size_3 thin')
|
16
16
|
})
|
17
17
|
|
18
18
|
test('with thin font weight', () => {
|
@@ -25,7 +25,7 @@ test('with thin font weight', () => {
|
|
25
25
|
)
|
26
26
|
|
27
27
|
const kit = screen.getByTestId('primary-test')
|
28
|
-
expect(kit).toHaveClass('
|
28
|
+
expect(kit).toHaveClass('pb_title_kit_size_3 thin')
|
29
29
|
})
|
30
30
|
|
31
31
|
test('with colors', () => {
|
@@ -38,5 +38,5 @@ test('with colors', () => {
|
|
38
38
|
)
|
39
39
|
|
40
40
|
const kit = screen.getByTestId('primary-test')
|
41
|
-
expect(kit).toHaveClass('pb_title_kit_size_3_success')
|
41
|
+
expect(kit).toHaveClass('pb_title_kit_size_3_success thin')
|
42
42
|
})
|