playbook_ui 13.4.0 → 13.5.0.pre.alpha.PLAY823globalpropoverflow1191
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/_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: 2160d2dca66448db7a51fd731cd747293c0ed0cc32a428de4f180f25ad150e91
|
|
4
|
+
data.tar.gz: 3aebd0b2fdbd43ed59303b7bf572c3787039f2f91ec2b1b91e92580fa21efb5b
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 3640aecd238d433a9e7c3d755825220166f3e1368f3bc2a7af172193deddae2b09d420e4ab848a0985eb179248a168483afdf062cf62dc47194470b09b01f5f3
|
|
7
|
+
data.tar.gz: 6cf78964758853e947de447f20764ffc9a67a8deab91e8df4be1378725bc0865af01ca6814b37b9043cd7e86c7e6d0b19ac167b1d5c35faf10e64759cf0de2ad
|
|
@@ -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 = ''
|