Skip to content

Commit 48e09a0

Browse files
tw15egankodiakhq[bot]
tw15egan
and
kodiakhq[bot]
authored
feat(spacing): change layout variables to spacing (#8063)
* feat(spacing): combine layout with spacing variables * test(snapshot): update snapshot tests Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent d9eb827 commit 48e09a0

File tree

13 files changed

+49
-26
lines changed

13 files changed

+49
-26
lines changed

‎packages/components/src/components/button/_mixins.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,6 @@
104104
@mixin button-padding-large {
105105
align-items: baseline;
106106
padding-top: $spacing-05;
107-
padding-right: $layout-05;
107+
padding-right: $spacing-10;
108108
padding-left: $spacing-05;
109109
}

‎packages/components/src/components/data-table/_data-table-action.scss‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
position: relative;
2222
display: flex;
2323
width: 100%;
24-
height: $layout-04;
24+
height: $spacing-09;
2525
overflow: hidden;
2626
background: $ui-01;
2727
}
@@ -30,7 +30,7 @@
3030
display: flex;
3131
justify-content: flex-end;
3232
width: 100%;
33-
height: $layout-04;
33+
height: $spacing-09;
3434
transform: translate3d(0, 0, 0);
3535
transition: transform $duration--fast-02 motion(standard, productive),
3636
clip-path $duration--fast-02 motion(standard, productive);
@@ -60,24 +60,24 @@
6060
//-------------------------------------------------
6161
.#{$prefix}--toolbar-search-container-expandable {
6262
position: relative;
63-
width: $layout-04;
64-
height: $layout-04;
63+
width: $spacing-09;
64+
height: $spacing-09;
6565
box-shadow: none;
6666
transition: flex $transition--expansion $carbon--standard-easing;
6767
}
6868

6969
.#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search {
7070
position: initial;
71-
width: $layout-04;
71+
width: $spacing-09;
7272
height: 100%;
7373
}
7474

7575
.#{$prefix}--toolbar-search-container-expandable
7676
.#{$prefix}--search
7777
.#{$prefix}--search-magnifier {
7878
left: 0;
79-
width: $layout-04;
80-
height: $layout-04;
79+
width: $spacing-09;
80+
height: $spacing-09;
8181
padding: $spacing-05;
8282
cursor: pointer;
8383
transition: background $duration--fast-02 motion(entrance, productive);
@@ -135,8 +135,8 @@
135135
.#{$prefix}--toolbar-search-container-expandable
136136
.#{$prefix}--search
137137
.#{$prefix}--search-close {
138-
width: $layout-04;
139-
height: $layout-04;
138+
width: $spacing-09;
139+
height: $spacing-09;
140140

141141
&::before {
142142
top: 2px;
@@ -239,8 +239,8 @@
239239
@include button-reset;
240240

241241
display: flex;
242-
width: $layout-04;
243-
height: $layout-04;
242+
width: $spacing-09;
243+
height: $spacing-09;
244244
padding: $spacing-05;
245245
cursor: pointer;
246246
transition: background $duration--fast-02 motion(entrance, productive);
@@ -251,8 +251,8 @@
251251
@include button-reset;
252252

253253
display: flex;
254-
width: $layout-04;
255-
height: $layout-04;
254+
width: $spacing-09;
255+
height: $spacing-09;
256256
cursor: pointer;
257257
transition: background $duration--fast-02 motion(entrance, productive);
258258
}
@@ -291,16 +291,16 @@
291291
}
292292

293293
.#{$prefix}--overflow-menu--data-table {
294-
height: $layout-04;
294+
height: $spacing-09;
295295
}
296296

297297
//-------------------------------------------------
298298
//TOOLBAR BUTTON ICONS
299299
//-------------------------------------------------
300300
.#{$prefix}--toolbar-action__icon {
301301
width: auto;
302-
max-width: $layout-01;
303-
height: $layout-01;
302+
max-width: $spacing-05;
303+
height: $spacing-05;
304304
fill: $icon-01;
305305
}
306306

@@ -310,7 +310,7 @@
310310
.#{$prefix}--toolbar-search-container-persistent {
311311
position: relative;
312312
width: 100%;
313-
height: $layout-04;
313+
height: $spacing-09;
314314
opacity: 1;
315315
}
316316

@@ -333,7 +333,7 @@
333333
.#{$prefix}--toolbar-search-container-persistent
334334
.#{$prefix}--search
335335
.#{$prefix}--search-input {
336-
height: $layout-04;
336+
height: $spacing-09;
337337
padding: 0 $spacing-09;
338338
border: none;
339339
}
@@ -362,8 +362,8 @@
362362
.#{$prefix}--toolbar-search-container-persistent
363363
.#{$prefix}--search
364364
.#{$prefix}--search-close {
365-
width: $layout-04;
366-
height: $layout-04;
365+
width: $spacing-09;
366+
height: $spacing-09;
367367
}
368368

369369
.#{$prefix}--batch-actions--active ~ .#{$prefix}--toolbar-search-container,
@@ -470,7 +470,7 @@
470470
left: 0;
471471
display: block;
472472
width: rem(1px);
473-
height: $layout-01;
473+
height: $spacing-05;
474474
background-color: $text-04;
475475
border: none;
476476
opacity: 1;

‎packages/components/src/components/data-table/_data-table-core.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070

7171
.#{$prefix}--data-table tr {
7272
width: 100%;
73-
height: $layout-04;
73+
height: $spacing-09;
7474
border: none;
7575
}
7676

‎packages/components/src/components/data-table/_data-table-sort.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
// -------------------------------------
1919
.#{$prefix}--data-table--sort th,
2020
.#{$prefix}--data-table th[aria-sort] {
21-
height: $layout-04;
21+
height: $spacing-09;
2222
padding: 0;
2323
border-top: none;
2424
border-bottom: none;
@@ -122,7 +122,7 @@
122122

123123
.#{$prefix}--table-sort__icon-unsorted {
124124
width: rem(20px);
125-
min-width: $layout-01;
125+
min-width: $spacing-05;
126126
margin-right: $spacing-03;
127127
margin-left: $spacing-03;
128128
opacity: 0;
@@ -151,7 +151,7 @@
151151

152152
.#{$prefix}--table-sort__icon {
153153
width: rem(20px);
154-
min-width: $layout-01;
154+
min-width: $spacing-05;
155155
margin-right: $spacing-03;
156156
margin-left: $spacing-03;
157157
transform: rotate(0);

‎packages/components/src/globals/scss/_spacing.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,40 +109,47 @@ $spacing-3xl: $spacing-baseline * 3 !default;
109109
/// @access public
110110
/// @type Number
111111
/// @group global-spacing
112+
/// @deprecated
112113
$layout-2xs: $spacing-baseline !default;
113114

114115
/// 24px layout in rem units
115116
/// @access public
116117
/// @type Number
117118
/// @group global-spacing
119+
/// @deprecated
118120
$layout-xs: $spacing-baseline * 1.5 !default;
119121

120122
/// 32px layout in rem units
121123
/// @access public
122124
/// @type Number
123125
/// @group global-spacing
126+
/// @deprecated
124127
$layout-sm: $spacing-baseline * 2 !default;
125128

126129
/// 48px layout in rem units
127130
/// @access public
128131
/// @type Number
129132
/// @group global-spacing
133+
/// @deprecated
130134
$layout-md: $spacing-baseline * 3 !default;
131135

132136
/// 64px layout in rem units
133137
/// @access public
134138
/// @type Number
135139
/// @group global-spacing
140+
/// @deprecated
136141
$layout-lg: $spacing-baseline * 4 !default;
137142

138143
/// 96px layout in rem units
139144
/// @access public
140145
/// @type Number
141146
/// @group global-spacing
147+
/// @deprecated
142148
$layout-xl: $spacing-baseline * 6 !default;
143149

144150
/// 160px layout in rem units
145151
/// @access public
146152
/// @type Number
147153
/// @group global-spacing
154+
/// @deprecated
148155
$layout-2xl: $spacing-baseline * 10 !default;

‎packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -250,6 +250,7 @@ Array [
250250
"spacing10",
251251
"spacing11",
252252
"spacing12",
253+
"spacing13",
253254
"styles",
254255
"support01",
255256
"support02",

‎packages/layout/src/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@ export const spacing09 = miniUnits(6);
102102
export const spacing10 = miniUnits(8);
103103
export const spacing11 = miniUnits(10);
104104
export const spacing12 = miniUnits(12);
105+
export const spacing13 = miniUnits(20);
105106
export const spacing = [
106107
spacing01,
107108
spacing02,
@@ -115,6 +116,7 @@ export const spacing = [
115116
spacing10,
116117
spacing11,
117118
spacing12,
119+
spacing13,
118120
];
119121

120122
// Fluid spacing
@@ -130,6 +132,7 @@ export const fluidSpacing = [
130132
];
131133

132134
// Layout
135+
// Deprecated -- Remove in v11
133136
export const layout01 = miniUnits(2);
134137
export const layout02 = miniUnits(3);
135138
export const layout03 = miniUnits(4);

‎packages/layout/src/tokens.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export const unstable_tokens = [
1919
'spacing10',
2020
'spacing11',
2121
'spacing12',
22+
'spacing13',
2223

2324
// Fluid spacing
2425
'fluidSpacing01',
@@ -27,6 +28,7 @@ export const unstable_tokens = [
2728
'fluidSpacing04',
2829

2930
// Layout
31+
// Deprecated -- Remove in v11
3032
'layout01',
3133
'layout02',
3234
'layout03',

‎packages/themes/src/g10.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -184,12 +184,14 @@ export {
184184
spacing10,
185185
spacing11,
186186
spacing12,
187+
spacing13,
187188
// Fluid spacing
188189
fluidSpacing01,
189190
fluidSpacing02,
190191
fluidSpacing03,
191192
fluidSpacing04,
192193
// Layout
194+
// Deprecated -- Remove in v11
193195
layout01,
194196
layout02,
195197
layout03,

‎packages/themes/src/g100.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -183,12 +183,14 @@ export {
183183
spacing10,
184184
spacing11,
185185
spacing12,
186+
spacing13,
186187
// Fluid spacing
187188
fluidSpacing01,
188189
fluidSpacing02,
189190
fluidSpacing03,
190191
fluidSpacing04,
191192
// Layout
193+
// Deprecated -- Remove in v11
192194
layout01,
193195
layout02,
194196
layout03,

0 commit comments

Comments
 (0)