playbook_ui 12.29.0.pre.alpha.play716popoverkitcloseonclickissue893 → 12.30.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_icon/_icon.tsx +27 -1
- data/app/pb_kits/playbook/pb_icon/icon.html.erb +2 -0
- data/app/pb_kits/playbook/pb_icon/icon.rb +5 -0
- data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss +5 -0
- data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx +5 -3
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.html.erb +13 -7
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_emoji.html.erb +16 -0
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_emoji.jsx +31 -0
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_emoji.md +1 -0
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.html.erb +5 -5
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.jsx +6 -0
- data/app/pb_kits/playbook/pb_icon_circle/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_icon_circle/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb +1 -1
- data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb +2 -0
- data/app/pb_kits/playbook/pb_icon_circle/icon_circle.test.js +97 -0
- data/app/pb_kits/playbook/pb_label_value/label_value.test.js +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx +56 -27
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss +1 -2
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +12 -29
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.md +3 -1
- data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb +4 -0
- data/app/pb_kits/playbook/pb_popover/_popover.tsx +3 -5
- data/app/pb_kits/playbook/pb_popover/index.ts +2 -5
- data/app/pb_kits/playbook/pb_table/docs/_table_data_table.html.erb +0 -14
- data/app/pb_kits/playbook/pb_table/docs/_table_data_table.md +1 -0
- data/app/pb_kits/playbook/pb_table/styles/_structure.scss +12 -0
- data/app/pb_kits/playbook/pb_title/_title.scss +18 -0
- data/app/pb_kits/playbook/pb_title/_title.tsx +21 -2
- data/app/pb_kits/playbook/pb_title/docs/_title_responsive.html.erb +1 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_responsive.jsx +16 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_responsive.md +1 -0
- data/app/pb_kits/playbook/pb_title/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_title/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_title/title.rb +17 -4
- data/app/pb_kits/playbook/pb_title/title.test.js +2 -2
- data/app/pb_kits/playbook/utilities/globalProps.ts +9 -4
- data/app/pb_kits/playbook/utilities/test/globalProps/flexGrow.test.js +1 -1
- data/app/pb_kits/playbook/utilities/test/globalProps/flexShrink.test.js +1 -1
- data/dist/playbook-rails.js +6 -6
- data/lib/playbook/version.rb +1 -1
- metadata +15 -7
@@ -9,6 +9,9 @@ module Playbook
|
|
9
9
|
default: []
|
10
10
|
prop :return_all_selected, type: Playbook::Props::Boolean,
|
11
11
|
default: false
|
12
|
+
prop :input_display, type: Playbook::Props::Enum,
|
13
|
+
values: %w[pills none],
|
14
|
+
default: "pills"
|
12
15
|
|
13
16
|
def classname
|
14
17
|
generate_classname("pb_multi_level_select")
|
@@ -17,6 +20,7 @@ module Playbook
|
|
17
20
|
def multi_level_select_options
|
18
21
|
{
|
19
22
|
id: id,
|
23
|
+
inputDisplay: input_display,
|
20
24
|
name: name,
|
21
25
|
treeData: tree_data,
|
22
26
|
returnAllSelected: return_all_selected,
|
@@ -171,19 +171,17 @@ const PbReactPopover = (props: PbPopoverProps) => {
|
|
171
171
|
|
172
172
|
switch (closeOnClick) {
|
173
173
|
case "outside":
|
174
|
-
if (!targetIsPopover
|
174
|
+
if (!targetIsPopover || targetIsReference) {
|
175
175
|
shouldClosePopover(true);
|
176
176
|
}
|
177
177
|
break;
|
178
178
|
case "inside":
|
179
|
-
if (targetIsPopover) {
|
179
|
+
if (targetIsPopover || targetIsReference) {
|
180
180
|
shouldClosePopover(true);
|
181
181
|
}
|
182
182
|
break;
|
183
183
|
case "any":
|
184
|
-
|
185
|
-
shouldClosePopover(true);
|
186
|
-
}
|
184
|
+
shouldClosePopover(true);
|
187
185
|
break;
|
188
186
|
}
|
189
187
|
},
|
@@ -49,16 +49,13 @@ export default class PbPopover extends PbEnhancedElement {
|
|
49
49
|
checkCloseTooltip() {
|
50
50
|
document.querySelector('body').addEventListener('click', ({ target } ) => {
|
51
51
|
const isTooltipElement = (target as HTMLElement).closest(`#${this.tooltipId}`) !== null
|
52
|
-
const isTriggerElement = (target as HTMLElement).closest(`#${this.triggerElementId}`) !== null
|
53
52
|
|
54
53
|
switch (this.closeOnClick) {
|
55
54
|
case 'any':
|
56
|
-
|
57
|
-
this.hideTooltip()
|
58
|
-
}
|
55
|
+
this.hideTooltip()
|
59
56
|
break
|
60
57
|
case 'outside':
|
61
|
-
if (!isTooltipElement
|
58
|
+
if (!isTooltipElement) {
|
62
59
|
this.hideTooltip()
|
63
60
|
}
|
64
61
|
break
|
@@ -30,19 +30,5 @@
|
|
30
30
|
<td>Value 4</td>
|
31
31
|
<td>Value 5</td>
|
32
32
|
</tr>
|
33
|
-
<tr>
|
34
|
-
<td>Value 1</td>
|
35
|
-
<td>Value 2</td>
|
36
|
-
<td>Value 3</td>
|
37
|
-
<td>Value 4</td>
|
38
|
-
<td>Value 5</td>
|
39
|
-
</tr>
|
40
|
-
<tr>
|
41
|
-
<td>Value 1</td>
|
42
|
-
<td>Value 2</td>
|
43
|
-
<td>Value 3</td>
|
44
|
-
<td>Value 4</td>
|
45
|
-
<td>Value 5</td>
|
46
|
-
</tr>
|
47
33
|
</tbody>
|
48
34
|
<% end %>
|
@@ -0,0 +1 @@
|
|
1
|
+
Tighter spacing in first- and last-child cells of each row for data-heavy tables.
|
@@ -39,10 +39,22 @@
|
|
39
39
|
thead tr th {
|
40
40
|
padding-top: $cell-pad-sm;
|
41
41
|
padding-bottom: $cell-pad-sm;
|
42
|
+
&:first-child {
|
43
|
+
padding-left: $cell-pad-sm;
|
44
|
+
}
|
45
|
+
&:last-child {
|
46
|
+
padding-right: $cell-pad-sm;
|
47
|
+
}
|
42
48
|
}
|
43
49
|
tbody tr td {
|
44
50
|
padding-top: $cell-pad-sm;
|
45
51
|
padding-bottom: $cell-pad-sm;
|
52
|
+
&:first-child {
|
53
|
+
padding-left: $cell-pad-sm;
|
54
|
+
}
|
55
|
+
&:last-child {
|
56
|
+
padding-right: $cell-pad-sm;
|
57
|
+
}
|
46
58
|
}
|
47
59
|
}
|
48
60
|
}
|
@@ -1,5 +1,6 @@
|
|
1
1
|
@import "../tokens/titles";
|
2
2
|
@import "../tokens/colors";
|
3
|
+
@import "../tokens/screen_sizes";
|
3
4
|
@import './title_mixin';
|
4
5
|
|
5
6
|
[class^=pb_title_kit]{
|
@@ -33,4 +34,21 @@
|
|
33
34
|
&[class*=_thin] {
|
34
35
|
@include pb_title_thin;
|
35
36
|
}
|
37
|
+
|
38
|
+
@each $size, $size_value in $breakpoints_grid {
|
39
|
+
@each $title_size_value in [1, 2, 3, 4] {
|
40
|
+
$min_size: map-get($size_value, "min");
|
41
|
+
$max_size: map-get($size_value, "max");
|
42
|
+
&[class*=_#{$size}_#{$title_size_value}] {
|
43
|
+
@include break_on($min_size, $max_size) {
|
44
|
+
@if $title_size_value == 1 { @include pb_title_1; }
|
45
|
+
@else if $title_size_value == 2 { @include pb_title_2; }
|
46
|
+
@else if $title_size_value == 3 { @include pb_title_3; }
|
47
|
+
@else if $title_size_value == 4 { @include pb_title_4; }
|
48
|
+
@include title_colors;
|
49
|
+
@if $title_size_value != 4 { @include pb_title_bold; }
|
50
|
+
}
|
51
|
+
}
|
52
|
+
}
|
53
|
+
}
|
36
54
|
}
|
@@ -3,6 +3,9 @@ import classnames from 'classnames'
|
|
3
3
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
4
4
|
import { deprecatedProps, GlobalProps, globalProps } from '../utilities/globalProps'
|
5
5
|
|
6
|
+
type SizeType = 1 | 2 | 3 | 4 | "1" | "2" | "3" | "4"
|
7
|
+
type SizeResponsiveType = {[key: string]: SizeType}
|
8
|
+
|
6
9
|
type TitleProps = {
|
7
10
|
aria?: {[key: string]: string},
|
8
11
|
bold?: boolean,
|
@@ -11,7 +14,7 @@ type TitleProps = {
|
|
11
14
|
color?: "default" | "light" | "lighter" | "success" | "error" | "link",
|
12
15
|
data?: {[key: string]: string},
|
13
16
|
id?: string,
|
14
|
-
size?:
|
17
|
+
size?: SizeType | SizeResponsiveType,
|
15
18
|
tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
|
16
19
|
text?: string,
|
17
20
|
variant?: null | "link",
|
@@ -36,9 +39,25 @@ const Title = (props: TitleProps): React.ReactElement => {
|
|
36
39
|
const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
|
37
40
|
const dataProps: {[key: string]: string | number} = buildDataProps(data)
|
38
41
|
const getBold = bold ? '' : 'thin'
|
42
|
+
|
43
|
+
const generateSizeClasses = () => {
|
44
|
+
let css = ''
|
45
|
+
|
46
|
+
if (typeof size == "number" || typeof size == "string") {
|
47
|
+
css += `pb_title_kit_size_${size} `
|
48
|
+
} else {
|
49
|
+
Object.entries(size).forEach((sizeObj) => {
|
50
|
+
css += `pb_title_kit_${sizeObj[0]}_${sizeObj[1]} `
|
51
|
+
})
|
52
|
+
}
|
53
|
+
|
54
|
+
return css.trim()
|
55
|
+
}
|
56
|
+
|
39
57
|
const classes = classnames(
|
40
|
-
buildCss('pb_title_kit',
|
58
|
+
buildCss('pb_title_kit', variant, color, getBold),
|
41
59
|
globalProps(props),
|
60
|
+
generateSizeClasses(),
|
42
61
|
className
|
43
62
|
)
|
44
63
|
const Tag: React.ReactElement | any = `${tag}`
|
@@ -0,0 +1 @@
|
|
1
|
+
<%= pb_rails("title", props: { text: "Responsive Title", tag: "h1", size: {xs: 3, sm: 2, md: 1} }) %>
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import Title from '../_title'
|
3
|
+
|
4
|
+
const TitleResponsive = (props) => {
|
5
|
+
return (
|
6
|
+
<>
|
7
|
+
<Title
|
8
|
+
size={{xs: "3", sm: "2", md: "1"}}
|
9
|
+
text="Responsive Title"
|
10
|
+
{...props}
|
11
|
+
/>
|
12
|
+
</>
|
13
|
+
)
|
14
|
+
}
|
15
|
+
|
16
|
+
export default TitleResponsive
|
@@ -0,0 +1 @@
|
|
1
|
+
The `size` prop supports responsive sizes. To use them, pass an object to the size prop containing your size values relative to responsive break points (show code below). To test this here, resize your browser window to responsively change this Title's size.
|
@@ -3,8 +3,10 @@ examples:
|
|
3
3
|
- title_default: Default UI
|
4
4
|
- title_light_weight: Light Weight UI
|
5
5
|
- title_colors: Colors
|
6
|
+
- title_responsive: Responsive
|
6
7
|
|
7
8
|
react:
|
8
9
|
- title_default: Default UI
|
9
10
|
- title_light_weight: Light Weight UI
|
10
11
|
- title_colors: Colors
|
12
|
+
- title_responsive: Responsive
|
@@ -6,9 +6,7 @@ module Playbook
|
|
6
6
|
prop :color, type: Playbook::Props::Enum,
|
7
7
|
values: [nil, "default", "light", "lighter", "success", "error", "link"],
|
8
8
|
default: nil
|
9
|
-
prop :size,
|
10
|
-
values: [1, 2, 3, 4],
|
11
|
-
default: 3
|
9
|
+
prop :size, default: 3
|
12
10
|
prop :tag, type: Playbook::Props::Enum,
|
13
11
|
values: %w[h1 h2 h3 h4 h5 h6 p div span],
|
14
12
|
default: "h3"
|
@@ -20,12 +18,27 @@ module Playbook
|
|
20
18
|
prop :bold, type: Playbook::Props::Boolean, default: true
|
21
19
|
|
22
20
|
def classname
|
23
|
-
generate_classname("pb_title_kit",
|
21
|
+
title_class = generate_classname("pb_title_kit", variant, color, is_bold)
|
22
|
+
title_class + generate_size_classname
|
24
23
|
end
|
25
24
|
|
26
25
|
def is_bold
|
27
26
|
bold ? nil : "thin"
|
28
27
|
end
|
28
|
+
|
29
|
+
def generate_size_classname
|
30
|
+
responsive = try(:size).is_a?(::Hash)
|
31
|
+
css = ""
|
32
|
+
if responsive
|
33
|
+
size.each do |key, value|
|
34
|
+
css += " pb_title_kit_#{key}_#{value}"
|
35
|
+
end
|
36
|
+
else
|
37
|
+
css += " pb_title_kit_size_#{size}"
|
38
|
+
end
|
39
|
+
|
40
|
+
css unless css.blank?
|
41
|
+
end
|
29
42
|
end
|
30
43
|
end
|
31
44
|
end
|
@@ -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_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('
|
41
|
+
expect(kit).toHaveClass('pb_title_kit_success')
|
42
42
|
})
|
@@ -2,6 +2,7 @@ import { omit } from 'lodash'
|
|
2
2
|
import { camelToSnakeCase } from './text'
|
3
3
|
|
4
4
|
import {
|
5
|
+
BitValues,
|
5
6
|
Binary,
|
6
7
|
Display,
|
7
8
|
DisplaySizes,
|
@@ -48,7 +49,7 @@ type FlexDirection = {
|
|
48
49
|
}
|
49
50
|
|
50
51
|
type FlexGrow = {
|
51
|
-
flexGrow?:
|
52
|
+
flexGrow?: Binary
|
52
53
|
}
|
53
54
|
|
54
55
|
type FlexShrink = {
|
@@ -316,15 +317,19 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
|
|
316
317
|
flexGrowProps: ({ flexGrow }: FlexGrow) => {
|
317
318
|
if (typeof flexGrow == 'object') {
|
318
319
|
return getResponsivePropClasses(flexGrow, 'flex_grow')
|
320
|
+
} else if (BitValues.includes(flexGrow)) {
|
321
|
+
return `flex_grow_${flexGrow}`
|
319
322
|
} else {
|
320
|
-
return
|
323
|
+
return ''
|
321
324
|
}
|
322
325
|
},
|
323
326
|
flexShrinkProps: ({ flexShrink }: FlexShrink) => {
|
324
327
|
if (typeof flexShrink == 'object') {
|
325
328
|
return getResponsivePropClasses(flexShrink, 'flex_shrink')
|
329
|
+
} else if (BitValues.includes(flexShrink)) {
|
330
|
+
return `flex_shrink_${flexShrink}`
|
326
331
|
} else {
|
327
|
-
return
|
332
|
+
return ''
|
328
333
|
}
|
329
334
|
},
|
330
335
|
justifyContentProps: ({ justifyContent }: JustifyContent) => {
|
@@ -392,4 +397,4 @@ export const domSafeProps = (props: {[key: string]: string}): {[key: string]: st
|
|
392
397
|
'dark',
|
393
398
|
]
|
394
399
|
return omit(props, notSafeProps)
|
395
|
-
}
|
400
|
+
}
|