playbook_ui 13.4.0 → 13.5.0.pre.alpha.PLAY823globalpropoverflow1188
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/_playbook.scss +1 -0
- data/app/pb_kits/playbook/pb_background/_background.tsx +1 -1
- data/app/pb_kits/playbook/pb_background/background.rb +1 -1
- data/app/pb_kits/playbook/pb_flex/_flex_item.scss +0 -8
- data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +2 -4
- data/app/pb_kits/playbook/pb_flex/flex_item.rb +1 -9
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb +38 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx +112 -47
- data/app/pb_kits/playbook/tokens/_overflow.scss +10 -0
- data/app/pb_kits/playbook/utilities/_overflow.scss +22 -0
- data/app/pb_kits/playbook/utilities/globalProps.ts +16 -1
- data/dist/playbook-rails.js +5 -5
- data/lib/playbook/classnames.rb +1 -0
- data/lib/playbook/kit_base.rb +2 -0
- data/lib/playbook/overflow.rb +33 -0
- data/lib/playbook/version.rb +2 -2
- metadata +10 -7
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 00e50b9e82d3a8a3731f8044cf47c1604e70a4b2b9006dca8774be500c6dd11f
|
|
4
|
+
data.tar.gz: 879064cb31cbdf95719c5905633c9776ded11e6a0b33a4c1683c35b2547de43c
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ff26d28f5082fa07f99a79a295d673bc7b32eea47ee1a40e3eae337f3c2c9eadba273db9781de8b307486d4534bbb9e59aeae2035cff7d9ae392060838be2a41
|
|
7
|
+
data.tar.gz: 261da322e4bfaa7f630a136f8b5dceee8616fe151afbcb06c427b755cf46e01e858a29d31b86b2782b96224a63738f44edb9b14b55999c9676efdc7f13f4ea8e
|
|
@@ -25,7 +25,7 @@ type BackgroundProps = {
|
|
|
25
25
|
id?: string,
|
|
26
26
|
imageUrl?: string,
|
|
27
27
|
padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
|
|
28
|
-
tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td',
|
|
28
|
+
tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col',
|
|
29
29
|
transition?: 'fade' | 'blur' | 'scale',
|
|
30
30
|
} & GlobalProps
|
|
31
31
|
|
|
@@ -92,7 +92,7 @@ module Playbook
|
|
|
92
92
|
prop :image_url
|
|
93
93
|
|
|
94
94
|
prop :tag, type: Playbook::Props::Enum,
|
|
95
|
-
values: %w[h1 h2 h3 h4 h5 h6 p div span tr th td],
|
|
95
|
+
values: %w[h1 h2 h3 h4 h5 h6 p div span tr th td thead col],
|
|
96
96
|
default: "div"
|
|
97
97
|
|
|
98
98
|
prop :transition, type: Playbook::Props::Enum,
|
|
@@ -44,14 +44,6 @@
|
|
|
44
44
|
order: -1;
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
-
$overflow_values: auto, hidden, inherit, initial, scroll, visible;
|
|
48
|
-
|
|
49
|
-
@each $value in $overflow_values {
|
|
50
|
-
&.overflow_#{$value} {
|
|
51
|
-
overflow: #{$value}
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
|
|
55
47
|
@for $i from 0 through 12 {
|
|
56
48
|
&[class*=_flex_#{$i}]{
|
|
57
49
|
flex: $i;
|
|
@@ -8,7 +8,7 @@ type FlexItemPropTypes = {
|
|
|
8
8
|
grow?: boolean,
|
|
9
9
|
shrink?: boolean,
|
|
10
10
|
className?: string,
|
|
11
|
-
overflow?: "auto" | "hidden" | "initial" | "inherit" | "scroll" | "visible",
|
|
11
|
+
// overflow?: "auto" | "hidden" | "initial" | "inherit" | "scroll" | "visible",
|
|
12
12
|
order?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'first' | 'none',
|
|
13
13
|
alignSelf?: "start" | "end" | "center" | "stretch" | null,
|
|
14
14
|
displayFlex?: boolean
|
|
@@ -20,7 +20,6 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
|
|
|
20
20
|
className,
|
|
21
21
|
fixedSize,
|
|
22
22
|
grow,
|
|
23
|
-
overflow = null,
|
|
24
23
|
shrink,
|
|
25
24
|
flex = 'none',
|
|
26
25
|
order = 'none',
|
|
@@ -30,7 +29,6 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
|
|
|
30
29
|
const growClass = grow === true ? 'grow' : ''
|
|
31
30
|
const displayFlexClass = displayFlex === true ? `display_flex_${displayFlex}` : ''
|
|
32
31
|
const flexClass = flex !== 'none' ? `flex_${flex}` : ''
|
|
33
|
-
const overflowClass = overflow ? `overflow_${overflow}` : ''
|
|
34
32
|
const shrinkClass = shrink === true ? 'shrink' : ''
|
|
35
33
|
const alignSelfClass = alignSelf ? `align_self_${alignSelf}` : ''
|
|
36
34
|
const fixedStyle =
|
|
@@ -39,7 +37,7 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
|
|
|
39
37
|
|
|
40
38
|
return (
|
|
41
39
|
<div
|
|
42
|
-
className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass),
|
|
40
|
+
className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), orderClass, alignSelfClass, globalProps(props), className)}
|
|
43
41
|
style={fixedStyle}
|
|
44
42
|
>
|
|
45
43
|
{children}
|
|
@@ -9,10 +9,6 @@ module Playbook
|
|
|
9
9
|
prop :shrink, type: Playbook::Props::Boolean,
|
|
10
10
|
default: false
|
|
11
11
|
|
|
12
|
-
prop :overflow, type: Playbook::Props::Enum,
|
|
13
|
-
values: %w[auto hidden inherit initial scroll visible] + [nil],
|
|
14
|
-
default: nil
|
|
15
|
-
|
|
16
12
|
prop :align_self, type: Playbook::Props::Enum,
|
|
17
13
|
values: %w[start center end stretch] + [nil],
|
|
18
14
|
default: nil
|
|
@@ -21,7 +17,7 @@ module Playbook
|
|
|
21
17
|
default: false
|
|
22
18
|
|
|
23
19
|
def classname
|
|
24
|
-
generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class) +
|
|
20
|
+
generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class) + align_self_class
|
|
25
21
|
end
|
|
26
22
|
|
|
27
23
|
def style_value
|
|
@@ -46,10 +42,6 @@ module Playbook
|
|
|
46
42
|
grow ? "grow" : nil
|
|
47
43
|
end
|
|
48
44
|
|
|
49
|
-
def overflow_class
|
|
50
|
-
overflow ? " overflow_#{overflow}" : ""
|
|
51
|
-
end
|
|
52
|
-
|
|
53
45
|
def shrink_class
|
|
54
46
|
shrink ? "shrink" : nil
|
|
55
47
|
end
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
You can individually align a
|
|
1
|
+
You can individually align a piece of table data, but a more practical use would be applied to align a column.
|
|
2
2
|
In the table above the "Rating" column contents is centered and the "Money" column contents is right aligned.
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
You can individually shift a
|
|
1
|
+
You can individually shift a piece of table data, or shift an entire column.
|
|
2
2
|
The first table shifts "Total" down, whereas the second table shifts the "Espresso Drinks" column contents up.
|
|
@@ -38,4 +38,41 @@
|
|
|
38
38
|
<td>Value 3</td>
|
|
39
39
|
</tr>
|
|
40
40
|
</tbody>
|
|
41
|
-
<% end %>
|
|
41
|
+
<% end %>
|
|
42
|
+
|
|
43
|
+
<%= pb_rails("table", props: { size: "sm", margin_bottom: "lg" }) do %>
|
|
44
|
+
<colgroup>
|
|
45
|
+
<%= pb_rails("background", props: { background_color: "error_subtle", tag: "col" }) %>
|
|
46
|
+
<%= pb_rails("background", props: { background_color: "card_light", tag: "col" }) %>
|
|
47
|
+
<%= pb_rails("background", props: { background_color: "warning_subtle", tag: "col" }) %>
|
|
48
|
+
</colgroup>
|
|
49
|
+
<%= pb_rails("background", props: { background_color: "card_light", tag: "thead" }) do %>
|
|
50
|
+
<tr>
|
|
51
|
+
<th>Column 1</th>
|
|
52
|
+
<th>Column 2</th>
|
|
53
|
+
<th>Column 3</th>
|
|
54
|
+
</tr>
|
|
55
|
+
<% end %>
|
|
56
|
+
<tbody>
|
|
57
|
+
<tr>
|
|
58
|
+
<td>Value 1</td>
|
|
59
|
+
<td>Value 2</td>
|
|
60
|
+
<td>Value 3</td>
|
|
61
|
+
</tr>
|
|
62
|
+
<tr>
|
|
63
|
+
<td>Value 1</td>
|
|
64
|
+
<td>Value 2</td>
|
|
65
|
+
<td>Value 3</td>
|
|
66
|
+
</tr>
|
|
67
|
+
<tr>
|
|
68
|
+
<td>Value 1</td>
|
|
69
|
+
<td>Value 2</td>
|
|
70
|
+
<td>Value 3</td>
|
|
71
|
+
</tr>
|
|
72
|
+
<tr>
|
|
73
|
+
<td>Value 1</td>
|
|
74
|
+
<td>Value 2</td>
|
|
75
|
+
<td>Value 3</td>
|
|
76
|
+
</tr>
|
|
77
|
+
</tbody>
|
|
78
|
+
<% end %>
|
|
@@ -6,57 +6,122 @@ import Background from "../../pb_background/_background"
|
|
|
6
6
|
const TableWithBackgroundKit = (props) => {
|
|
7
7
|
return (
|
|
8
8
|
<div>
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
<
|
|
21
|
-
<
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
9
|
+
<div>
|
|
10
|
+
<Table
|
|
11
|
+
{...props}
|
|
12
|
+
>
|
|
13
|
+
<thead>
|
|
14
|
+
<tr>
|
|
15
|
+
<th>{'Column 1'}</th>
|
|
16
|
+
<th>{'Column 2'}</th>
|
|
17
|
+
<th>{'Column 3'}</th>
|
|
18
|
+
</tr>
|
|
19
|
+
</thead>
|
|
20
|
+
<tbody>
|
|
21
|
+
<tr>
|
|
22
|
+
<td>{'Value 1'}</td>
|
|
23
|
+
<td>{'Value 2'}</td>
|
|
24
|
+
<td>{'Value 3'}</td>
|
|
25
|
+
</tr>
|
|
26
|
+
<Background
|
|
27
|
+
backgroundColor="error_subtle"
|
|
28
|
+
tag='tr'
|
|
29
|
+
>
|
|
30
|
+
<td>{'Value 1'}</td>
|
|
31
|
+
<td>{'Value 2'}</td>
|
|
32
|
+
<td>{'Value 3'}</td>
|
|
33
|
+
</Background>
|
|
34
|
+
<tr>
|
|
35
|
+
<td>{'Value 1'}</td>
|
|
36
|
+
<td>{'Value 2'}</td>
|
|
37
|
+
<td>{'Value 3'}</td>
|
|
38
|
+
</tr>
|
|
39
|
+
<tr>
|
|
40
|
+
<td>{'Value 1'}</td>
|
|
41
|
+
<td>{'Value 2'}</td>
|
|
42
|
+
<td>{'Value 3'}</td>
|
|
43
|
+
</tr>
|
|
44
|
+
<Background
|
|
45
|
+
backgroundColor="warning_subtle"
|
|
46
|
+
tag='tr'
|
|
47
|
+
>
|
|
48
|
+
<td>{'Value 1'}</td>
|
|
49
|
+
<td>{'Value 2'}</td>
|
|
50
|
+
<td>{'Value 3'}</td>
|
|
51
|
+
</Background>
|
|
52
|
+
<tr>
|
|
53
|
+
<td>{'Value 1'}</td>
|
|
54
|
+
<td>{'Value 2'}</td>
|
|
55
|
+
<td>{'Value 3'}</td>
|
|
56
|
+
</tr>
|
|
57
|
+
</tbody>
|
|
58
|
+
</Table>
|
|
59
|
+
</div>
|
|
60
|
+
<div>
|
|
61
|
+
<Table
|
|
62
|
+
paddingTop="sm"
|
|
63
|
+
{...props}
|
|
64
|
+
>
|
|
65
|
+
<colgroup>
|
|
66
|
+
<Background
|
|
67
|
+
backgroundColor="error_subtle"
|
|
68
|
+
tag='col'
|
|
69
|
+
/>
|
|
70
|
+
<Background
|
|
71
|
+
backgroundColor="card_light"
|
|
72
|
+
tag='col'
|
|
73
|
+
/>
|
|
74
|
+
<Background
|
|
75
|
+
backgroundColor="warning_subtle"
|
|
76
|
+
tag='col'
|
|
77
|
+
/>
|
|
78
|
+
</colgroup>
|
|
25
79
|
<Background
|
|
26
|
-
backgroundColor="
|
|
27
|
-
tag='
|
|
80
|
+
backgroundColor="card_light"
|
|
81
|
+
tag='thead'
|
|
28
82
|
>
|
|
29
|
-
<
|
|
30
|
-
|
|
31
|
-
|
|
83
|
+
<tr>
|
|
84
|
+
<th>{'Column 1'}</th>
|
|
85
|
+
<th>{'Column 2'}</th>
|
|
86
|
+
<th>{'Column 3'}</th>
|
|
87
|
+
</tr>
|
|
32
88
|
</Background>
|
|
33
|
-
<
|
|
34
|
-
<
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
<
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
<
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
<
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
89
|
+
<tbody>
|
|
90
|
+
<tr>
|
|
91
|
+
<td>{'Value 1'}</td>
|
|
92
|
+
<td>{'Value 2'}</td>
|
|
93
|
+
<td>{'Value 3'}</td>
|
|
94
|
+
</tr>
|
|
95
|
+
<tr>
|
|
96
|
+
<td>{'Value 1'}</td>
|
|
97
|
+
<td>{'Value 2'}</td>
|
|
98
|
+
<td>{'Value 3'}</td>
|
|
99
|
+
</tr>
|
|
100
|
+
<tr>
|
|
101
|
+
<td>{'Value 1'}</td>
|
|
102
|
+
<td>{'Value 2'}</td>
|
|
103
|
+
<td>{'Value 3'}</td>
|
|
104
|
+
</tr>
|
|
105
|
+
<tr>
|
|
106
|
+
<td>{'Value 1'}</td>
|
|
107
|
+
<td>{'Value 2'}</td>
|
|
108
|
+
<td>{'Value 3'}</td>
|
|
109
|
+
</tr>
|
|
110
|
+
<tr>
|
|
111
|
+
<td>{'Value 1'}</td>
|
|
112
|
+
<td>{'Value 2'}</td>
|
|
113
|
+
<td>{'Value 3'}</td>
|
|
114
|
+
</tr>
|
|
115
|
+
<tr>
|
|
116
|
+
<td>{'Value 1'}</td>
|
|
117
|
+
<td>{'Value 2'}</td>
|
|
118
|
+
<td>{'Value 3'}</td>
|
|
119
|
+
</tr>
|
|
120
|
+
</tbody>
|
|
121
|
+
</Table>
|
|
122
|
+
</div>
|
|
58
123
|
</div>
|
|
59
124
|
)
|
|
60
125
|
}
|
|
61
126
|
|
|
62
|
-
export default TableWithBackgroundKit
|
|
127
|
+
export default TableWithBackgroundKit
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
@import "../tokens/overflow";
|
|
2
|
+
|
|
3
|
+
$overflow_classes: (
|
|
4
|
+
visible: $visible,
|
|
5
|
+
hidden: $hidden,
|
|
6
|
+
scroll: $scroll,
|
|
7
|
+
auto: $auto,
|
|
8
|
+
);
|
|
9
|
+
|
|
10
|
+
$variants: (
|
|
11
|
+
overflow_x: "overflow-x",
|
|
12
|
+
overflow_y: "overflow-y",
|
|
13
|
+
overflow: "overflow",
|
|
14
|
+
);
|
|
15
|
+
|
|
16
|
+
@each $variant_name, $variant_property in $variants {
|
|
17
|
+
@each $class_name, $overflow_value in $overflow_classes {
|
|
18
|
+
.#{$variant_name}_#{$class_name} {
|
|
19
|
+
#{$variant_property}: #{$overflow_value} !important;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
@@ -128,6 +128,13 @@ type TextAlign = {
|
|
|
128
128
|
textAlign?: "start" | "end" | "left" | "right" | "center" | "justify" | "justifyAll" | "matchParent",
|
|
129
129
|
}
|
|
130
130
|
|
|
131
|
+
type OverflowTypes = "scroll" | "visible" | "hidden" | "auto"
|
|
132
|
+
type Overflow = {
|
|
133
|
+
overflowX?: OverflowTypes,
|
|
134
|
+
overflowY?: OverflowTypes,
|
|
135
|
+
overflow?: OverflowTypes
|
|
136
|
+
}
|
|
137
|
+
|
|
131
138
|
type ZIndexType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
|
|
132
139
|
type ZIndexResponsiveType = {[key: string]: ZIndexType}
|
|
133
140
|
type ZIndex = {
|
|
@@ -138,7 +145,7 @@ type ZIndex = {
|
|
|
138
145
|
export type GlobalProps = AlignContent & AlignItems & AlignSelf &
|
|
139
146
|
BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
|
|
140
147
|
FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
|
|
141
|
-
LineHeight & Margin & MaxWidth & NumberSpacing & Order & Padding &
|
|
148
|
+
LineHeight & Margin & MaxWidth & NumberSpacing & Order & Overflow & Padding &
|
|
142
149
|
Position & Shadow & TextAlign & ZIndex & { hover?: string };
|
|
143
150
|
|
|
144
151
|
const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
|
|
@@ -255,6 +262,14 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
|
|
|
255
262
|
css += borderRadius ? `border_radius_${borderRadius} ` : ''
|
|
256
263
|
return css
|
|
257
264
|
},
|
|
265
|
+
overflowProps: ({ overflow, overflowX, overflowY }: Overflow) => {
|
|
266
|
+
let css = ''
|
|
267
|
+
css += overflow ? `overflow_${overflow}` : ''
|
|
268
|
+
css += overflowX ? `overflow_x_${overflowX}` : ''
|
|
269
|
+
css += overflowY ? `overflow_y_${overflowY}` : ''
|
|
270
|
+
return css
|
|
271
|
+
},
|
|
272
|
+
|
|
258
273
|
darkProps: ({ dark }: Dark) => dark ? 'dark' : '',
|
|
259
274
|
numberSpacingProps: ({ numberSpacing }: NumberSpacing) => {
|
|
260
275
|
let css = ''
|