mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-22 19:26:13 +02:00
Adding margin auto support to Box (#12801)
This commit is contained in:
parent
75e8b4f8b9
commit
761f3ac33f
@ -14,13 +14,33 @@ import {
|
|||||||
FLEX_WRAP,
|
FLEX_WRAP,
|
||||||
} from '../../../helpers/constants/design-system';
|
} from '../../../helpers/constants/design-system';
|
||||||
|
|
||||||
const ValidSize = PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]);
|
const ValidSize = PropTypes.oneOf([
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
2,
|
||||||
|
3,
|
||||||
|
4,
|
||||||
|
5,
|
||||||
|
6,
|
||||||
|
7,
|
||||||
|
8,
|
||||||
|
9,
|
||||||
|
10,
|
||||||
|
11,
|
||||||
|
12,
|
||||||
|
'auto',
|
||||||
|
]);
|
||||||
const ArrayOfValidSizes = PropTypes.arrayOf(ValidSize);
|
const ArrayOfValidSizes = PropTypes.arrayOf(ValidSize);
|
||||||
export const MultipleSizes = PropTypes.oneOfType([
|
export const MultipleSizes = PropTypes.oneOfType([
|
||||||
ValidSize,
|
ValidSize,
|
||||||
ArrayOfValidSizes,
|
ArrayOfValidSizes,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
function isValidValue(type, value) {
|
||||||
|
// for now only margin type can have 'auto'
|
||||||
|
return typeof value === 'number' || (type === 'margin' && value === 'auto');
|
||||||
|
}
|
||||||
|
|
||||||
function generateSizeClasses(baseClass, type, main, top, right, bottom, left) {
|
function generateSizeClasses(baseClass, type, main, top, right, bottom, left) {
|
||||||
const arr = Array.isArray(main) ? main : [];
|
const arr = Array.isArray(main) ? main : [];
|
||||||
const singleDigit = Array.isArray(main) ? undefined : main;
|
const singleDigit = Array.isArray(main) ? undefined : main;
|
||||||
@ -35,12 +55,13 @@ function generateSizeClasses(baseClass, type, main, top, right, bottom, left) {
|
|||||||
const isAllFour = arr.length === 4;
|
const isAllFour = arr.length === 4;
|
||||||
const hasAtLeastTwo = arr.length >= 2;
|
const hasAtLeastTwo = arr.length >= 2;
|
||||||
const hasAtLeastThree = arr.length >= 3;
|
const hasAtLeastThree = arr.length >= 3;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
[`${baseClass}--${type}-${singleDigit}`]: singleDigit !== undefined,
|
[`${baseClass}--${type}-${singleDigit}`]: isValidValue(type, singleDigit),
|
||||||
[`${baseClass}--${type}-top-${top}`]: typeof top === 'number',
|
[`${baseClass}--${type}-top-${top}`]: isValidValue(type, top),
|
||||||
[`${baseClass}--${type}-right-${right}`]: typeof right === 'number',
|
[`${baseClass}--${type}-right-${right}`]: isValidValue(type, right),
|
||||||
[`${baseClass}--${type}-bottom-${bottom}`]: typeof bottom === 'number',
|
[`${baseClass}--${type}-bottom-${bottom}`]: isValidValue(type, bottom),
|
||||||
[`${baseClass}--${type}-left-${left}`]: typeof left === 'number',
|
[`${baseClass}--${type}-left-${left}`]: isValidValue(type, left),
|
||||||
// As long as an array of length >= 2 has been provided, the first number
|
// As long as an array of length >= 2 has been provided, the first number
|
||||||
// will always be for the top value.
|
// will always be for the top value.
|
||||||
[`${baseClass}--${type}-top-${arr?.[0]}`]: hasAtLeastTwo,
|
[`${baseClass}--${type}-top-${arr?.[0]}`]: hasAtLeastTwo,
|
||||||
|
@ -1,8 +1,11 @@
|
|||||||
|
@use "sass:list";
|
||||||
@use "sass:map";
|
@use "sass:map";
|
||||||
@use "design-system";
|
@use "design-system";
|
||||||
@use "utilities";
|
@use "utilities";
|
||||||
|
|
||||||
$attributes: padding, margin, gap;
|
$attributes: padding, margin, gap;
|
||||||
|
$extraProperties: auto;
|
||||||
|
$attributesToApplyExtraProperties: margin;
|
||||||
|
|
||||||
.box {
|
.box {
|
||||||
// Padding, Margin, and Gap
|
// Padding, Margin, and Gap
|
||||||
@ -20,6 +23,20 @@ $attributes: padding, margin, gap;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@if list.index($attributesToApplyExtraProperties, $attribute) {
|
||||||
|
@each $property in $extraProperties {
|
||||||
|
&--#{$attribute}-#{$property} {
|
||||||
|
#{$attribute}: $property;
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $direction in design-system.$directions {
|
||||||
|
&--#{$attribute}-#{$direction}-#{$property} {
|
||||||
|
#{$attribute}-#{$direction}: $property;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Borders
|
// Borders
|
||||||
|
@ -17,6 +17,7 @@ export default {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const sizeKnobOptions = [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
|
const sizeKnobOptions = [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
|
||||||
|
const marginSizeKnobOptions = [...sizeKnobOptions, 'auto'];
|
||||||
|
|
||||||
export const DefaultStory = () => {
|
export const DefaultStory = () => {
|
||||||
const items = [];
|
const items = [];
|
||||||
@ -42,16 +43,31 @@ export const DefaultStory = () => {
|
|||||||
)}
|
)}
|
||||||
textAlign={select('textAlign', TEXT_ALIGN, undefined, 'left')}
|
textAlign={select('textAlign', TEXT_ALIGN, undefined, 'left')}
|
||||||
alignItems={select('alignItems', ALIGN_ITEMS, undefined, 'display')}
|
alignItems={select('alignItems', ALIGN_ITEMS, undefined, 'display')}
|
||||||
margin={select('margin', sizeKnobOptions, undefined, 'margin')}
|
margin={select('margin', marginSizeKnobOptions, undefined, 'margin')}
|
||||||
marginTop={select('marginTop', sizeKnobOptions, undefined, 'margin')}
|
marginTop={select(
|
||||||
marginRight={select('marginRight', sizeKnobOptions, undefined, 'margin')}
|
'marginTop',
|
||||||
marginBottom={select(
|
marginSizeKnobOptions,
|
||||||
'marginBottom',
|
undefined,
|
||||||
sizeKnobOptions,
|
'margin',
|
||||||
|
)}
|
||||||
|
marginRight={select(
|
||||||
|
'marginRight',
|
||||||
|
marginSizeKnobOptions,
|
||||||
|
undefined,
|
||||||
|
'margin',
|
||||||
|
)}
|
||||||
|
marginBottom={select(
|
||||||
|
'marginBottom',
|
||||||
|
marginSizeKnobOptions,
|
||||||
|
undefined,
|
||||||
|
'margin',
|
||||||
|
)}
|
||||||
|
marginLeft={select(
|
||||||
|
'marginLeft',
|
||||||
|
marginSizeKnobOptions,
|
||||||
undefined,
|
undefined,
|
||||||
'margin',
|
'margin',
|
||||||
)}
|
)}
|
||||||
marginLeft={select('marginLeft', sizeKnobOptions, undefined, 'margin')}
|
|
||||||
padding={select('padding', sizeKnobOptions, undefined, 'padding')}
|
padding={select('padding', sizeKnobOptions, undefined, 'padding')}
|
||||||
paddingTop={select('paddingTop', sizeKnobOptions, undefined, 'padding')}
|
paddingTop={select('paddingTop', sizeKnobOptions, undefined, 'padding')}
|
||||||
paddingRight={select(
|
paddingRight={select(
|
||||||
|
Loading…
Reference in New Issue
Block a user