playbook_ui 13.4.0 → 13.5.0.pre.alpha.PLAY823globalpropoverflow1188

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 4de8135dcb47909b6c71e27192382cc5ab8890bc54c6e1d5cb4c624553cc65a2
4
- data.tar.gz: c3dd0cd17ad4319288dc8c7b16f2d93147ed8b5a04d33b8ecd8876bebc97f221
3
+ metadata.gz: 00e50b9e82d3a8a3731f8044cf47c1604e70a4b2b9006dca8774be500c6dd11f
4
+ data.tar.gz: 879064cb31cbdf95719c5905633c9776ded11e6a0b33a4c1683c35b2547de43c
5
5
  SHA512:
6
- metadata.gz: a20fc82e7400098302e5e929cb70ad54a4c2360db26f42f2e38fdacb4bec2625528838b043695a6ba3c133c8f23553ccebeda91ab0f551b5d5032335cac1f682
7
- data.tar.gz: 4554d268f82cf779641860ea89b2ceebb194b407dc6a30374e762e207b9e2094c9d63dee0669494be80815d4ec663d0e503ef3b58138c9bf8923090aa6bdfc03
6
+ metadata.gz: ff26d28f5082fa07f99a79a295d673bc7b32eea47ee1a40e3eae337f3c2c9eadba273db9781de8b307486d4534bbb9e59aeae2035cff7d9ae392060838be2a41
7
+ data.tar.gz: 261da322e4bfaa7f630a136f8b5dceee8616fe151afbcb06c427b755cf46e01e858a29d31b86b2782b96224a63738f44edb9b14b55999c9676efdc7f13f4ea8e
@@ -113,5 +113,6 @@
113
113
  @import './utilities/border_radius';
114
114
  @import './utilities/hover';
115
115
  @import './utilities/text_align';
116
+ @import './utilities/overflow';
116
117
 
117
118
  @import 'pb_multi_level_select/multi_level_select';
@@ -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), overflowClass, orderClass, alignSelfClass, globalProps(props), className)}
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) + overflow_class + align_self_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 pieace of table data, but a more practical use would be applied to align a column.
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 pieace of table data, or shift an entire column.
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
- <Table
10
- {...props}
11
- >
12
- <thead>
13
- <tr>
14
- <th>{'Column 1'}</th>
15
- <th>{'Column 2'}</th>
16
- <th>{'Column 3'}</th>
17
- </tr>
18
- </thead>
19
- <tbody>
20
- <tr>
21
- <td>{'Value 1'}</td>
22
- <td>{'Value 2'}</td>
23
- <td>{'Value 3'}</td>
24
- </tr>
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="error_subtle"
27
- tag='tr'
80
+ backgroundColor="card_light"
81
+ tag='thead'
28
82
  >
29
- <td>{'Value 1'}</td>
30
- <td>{'Value 2'}</td>
31
- <td>{'Value 3'}</td>
83
+ <tr>
84
+ <th>{'Column 1'}</th>
85
+ <th>{'Column 2'}</th>
86
+ <th>{'Column 3'}</th>
87
+ </tr>
32
88
  </Background>
33
- <tr>
34
- <td>{'Value 1'}</td>
35
- <td>{'Value 2'}</td>
36
- <td>{'Value 3'}</td>
37
- </tr>
38
- <tr>
39
- <td>{'Value 1'}</td>
40
- <td>{'Value 2'}</td>
41
- <td>{'Value 3'}</td>
42
- </tr>
43
- <Background
44
- backgroundColor="warning_subtle"
45
- tag='tr'
46
- >
47
- <td>{'Value 1'}</td>
48
- <td>{'Value 2'}</td>
49
- <td>{'Value 3'}</td>
50
- </Background>
51
- <tr>
52
- <td>{'Value 1'}</td>
53
- <td>{'Value 2'}</td>
54
- <td>{'Value 3'}</td>
55
- </tr>
56
- </tbody>
57
- </Table>
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,10 @@
1
+ $visible: visible !default;
2
+ $hidden: hidden !default;
3
+ $scroll: scroll !default;
4
+ $auto: auto !default;
5
+ $overflow: (
6
+ visible: $visible,
7
+ hidden: $hidden,
8
+ scroll: $scroll,
9
+ auto: $auto,
10
+ );
@@ -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 = ''