Skip to content

GitLab

Commit 95e30849 authored by Tasso Evangelista's avatar Tasso Evangelista
Browse files
Options

Refactor Margins

parent 0ed36d11
Hide whitespace changes
Inline Side-by-side
Showing with 744 additions and 127 deletions
packages/fuselage-ui-kit/src/Actions.js
View file @ 95e30849
......@@ -2,7 +2,6 @@ import React, { useState } from 'react';
import {
Button,
Margins,
MarginsWrapper,
Flex,
Box,
} from '@rocket.chat/fuselage';
......@@ -36,14 +35,14 @@ export const Actions = ({ blockId, appId, elements, parser }) => {
return (
<Block>
<MarginsWrapper all={8}>
<Margins all='neg-x8'>
<Flex.Container wrap='wrap'>
<Box>
{renderedElements}
{showMoreVisible && (<Flex.Item><Button onClick={handleShowMoreClick}>Show more...</Button></Flex.Item>)}
</Box>
</Flex.Container>
</MarginsWrapper>
</Margins>
</Block>
);
};
packages/fuselage-ui-kit/src/Overflow.js
View file @ 95e30849
import React, { useRef } from 'react';
import {
AnimatedVisibility,
Button,
PositionAnimated,
Options,
......@@ -30,7 +31,7 @@ export const Overflow = ({ options, parser, onChange = console.log }) => {
</Button>
<PositionAnimated
width='auto'
visible={visible ? 1 : 0}
visible={visible ? AnimatedVisibility.VISIBLE : AnimatedVisibility.HIDDEN}
anchor={ref}
placement='bottom right'
>
......
packages/fuselage-ui-kit/src/index.js
View file @ 95e30849
......@@ -5,7 +5,6 @@ import {
SelectInput,
Flex,
Margins,
MarginsWrapper,
TextAreaInput,
TextInput,
InputBox,
......@@ -178,7 +177,7 @@ class MessageParser extends UiKitParserMessage {
<Block>
<Box is='div' className='TESTE'>
<Flex.Container alignItems='center' key={index}>
<MarginsWrapper all={4}>
<Margins all='neg-x4'>
<Box is='div'>
{elements.map((element, i) => (
<Margins all={4} key={i}>
......@@ -198,7 +197,7 @@ class MessageParser extends UiKitParserMessage {
</Margins>
))}
</Box>
</MarginsWrapper>
</Margins>
</Flex.Container>
</Box>
</Block>
......
packages/fuselage/src/components/Box/AnimatedVisibility/index.js
View file @ 95e30849
import PropTypes from 'prop-types';
import React, { useEffect, useState } from 'react';
import { useProps } from '../../../hooks';
export function AnimatedVisibility({ visibility: propVisibility, children }) {
export function AnimatedVisibility({ children, visibility: propVisibility }) {
const [visibility, setVisibility] = useState(AnimatedVisibility.HIDDEN);
useEffect(() => {
......@@ -37,10 +38,9 @@ export function AnimatedVisibility({ visibility: propVisibility, children }) {
className,
visibility === AnimatedVisibility.HIDING && 'rcx-box--hiding',
visibility === AnimatedVisibility.UNHIDING && 'rcx-box--unhiding',
console.log(visibility),
].filter(Boolean).join(' '),
...props,
}), [visibility]);
}), [visibility, propVisibility]);
if (visibility === AnimatedVisibility.HIDDEN) {
return null;
......@@ -49,7 +49,17 @@ export function AnimatedVisibility({ visibility: propVisibility, children }) {
return <PropsProvider children={children} />;
}
AnimatedVisibility.HIDDEN = 0;
AnimatedVisibility.VISIBLE = 1;
AnimatedVisibility.HIDING = 2;
AnimatedVisibility.UNHIDING = 3;
AnimatedVisibility.HIDDEN = 'hidden';
AnimatedVisibility.VISIBLE = 'visible';
AnimatedVisibility.HIDING = 'hiding';
AnimatedVisibility.UNHIDING = 'unhiding';
AnimatedVisibility.propTypes = {
children: PropTypes.node,
visibility: PropTypes.oneOf([
AnimatedVisibility.HIDDEN,
AnimatedVisibility.VISIBLE,
AnimatedVisibility.HIDING,
AnimatedVisibility.UNHIDING,
]),
};
packages/fuselage/src/components/Box/Margins/index.js
View file @ 95e30849
import { useClassName } from '@rocket.chat/fuselage-hooks';
import PropTypes from 'prop-types';
import React from 'react';
import { useProps } from '../../../hooks';
export function Margins({
children,
all,
block,
blockStart,
blockEnd,
inline,
inlineStart,
inlineEnd,
}) {
const [, PropsProvider] = useProps(({ className, ...props }) => ({
className: useClassName('rcx-margins', {
all,
block,
blockStart,
blockEnd,
inline,
inlineStart,
inlineEnd,
}, className),
...props,
}));
return <PropsProvider children={children} />;
}
const mapSpacing = (spacing) => {
if (typeof spacing === 'number') {
if (spacing < 0) {
console.warn(`Margins: Prefer ='neg-x${ -spacing }' over ={${ spacing }}`);
return `neg-x${ -spacing }`;
}
Margins.displayName = 'Margins';
console.warn(`Margins: Prefer ='x${ spacing }' over ={${ spacing }}`);
return `x${ spacing }`;
}
Margins.propTypes = {
all: PropTypes.oneOf([2, 4, 8, 12, 16, 24, 32, 40]),
block: PropTypes.oneOf([2, 4, 8, 12, 16, 24, 32, 40]),
blockStart: PropTypes.oneOf([2, 4, 8, 12, 16, 24, 32, 40]),
blockEnd: PropTypes.oneOf([2, 4, 8, 12, 16, 24, 32, 40]),
inline: PropTypes.oneOf([2, 4, 8, 12, 16, 24, 32, 40]),
inlineStart: PropTypes.oneOf([2, 4, 8, 12, 16, 24, 32, 40]),
inlineEnd: PropTypes.oneOf([2, 4, 8, 12, 16, 24, 32, 40]),
return spacing;
};
export function MarginsWrapper({
export function Margins({
children,
all,
block,
......@@ -52,29 +28,182 @@ export function MarginsWrapper({
inlineEnd,
}) {
const [, PropsProvider] = useProps(({ className, ...props }) => ({
className: useClassName('rcx-margins__wrapper', {
all,
block,
blockStart,
blockEnd,
inline,
inlineStart,
inlineEnd,
}, className),
className: [
className,
all && `rcx-box--m-${ mapSpacing(all) }`,
block && `rcx-box--mb-${ mapSpacing(block) }`,
blockStart && `rcx-box--mbs-${ mapSpacing(blockStart) }`,
blockEnd && `rcx-box--mbe-${ mapSpacing(blockEnd) }`,
inline && `rcx-box--mi-${ mapSpacing(inline) }`,
inlineStart && `rcx-box--mis-${ mapSpacing(inlineStart) }`,
inlineEnd && `rcx-box--mie-${ mapSpacing(inlineEnd) }`,
].filter(Boolean).join(' '),
...props,
}));
}), [all, block, blockStart, blockEnd, inline, inlineStart, inlineEnd]);
return <PropsProvider children={children} />;
}
MarginsWrapper.displayName = 'MarginsWrapper';
MarginsWrapper.propTypes = {
all: PropTypes.oneOf([2, 4, 8, 12, 16, 24, 32, 40]),
block: PropTypes.oneOf([2, 4, 8, 12, 16, 24, 32, 40]),
blockStart: PropTypes.oneOf([2, 4, 8, 12, 16, 24, 32, 40]),
blockEnd: PropTypes.oneOf([2, 4, 8, 12, 16, 24, 32, 40]),
inline: PropTypes.oneOf([2, 4, 8, 12, 16, 24, 32, 40]),
inlineStart: PropTypes.oneOf([2, 4, 8, 12, 16, 24, 32, 40]),
inlineEnd: PropTypes.oneOf([2, 4, 8, 12, 16, 24, 32, 40]),
Margins.propTypes = {
all: PropTypes.oneOf([
2, 4, 8, 12, 16, 24, 32, 40,
'none',
'x1', 'x2', 'x4', 'x8', 'x12', 'x16', 'x20', 'x24', 'x28', 'x32', 'x36',
'x40', 'x80', 'x120', 'x160', 'x200',
'x240', 'x280', 'x320', 'x360', 'x400',
'x440', 'x480', 'x520', 'x560', 'x600',
'x640', 'x680', 'x720', 'x760', 'x800',
'x840', 'x880', 'x920', 'x960', 'x1000',
'x1040', 'x1080', 'x120', 'x1160', 'x1200',
'x1240', 'x1280', 'x1320', 'x1360', 'x1400',
'x1440', 'x1480', 'x1520', 'x1560', 'x1600',
'neg-x1', 'neg-x2', 'neg-x4', 'neg-x8', 'neg-x12', 'neg-x16', 'neg-x20', 'neg-x24', 'neg-x28', 'neg-x32', 'neg-x36',
'neg-x40', 'neg-x80', 'neg-x120', 'neg-x160', 'neg-x200',
'neg-x240', 'neg-x280', 'neg-x320', 'neg-x360', 'neg-x400',
'neg-x440', 'neg-x480', 'neg-x520', 'neg-x560', 'neg-x600',
'neg-x640', 'neg-x680', 'neg-x720', 'neg-x760', 'neg-x800',
'neg-x840', 'neg-x880', 'neg-x920', 'neg-x960', 'neg-x1000',
'neg-x1040', 'neg-x1080', 'neg-x120', 'neg-x1160', 'neg-x1200',
'neg-x1240', 'neg-x1280', 'neg-x1320', 'neg-x1360', 'neg-x1400',
'neg-x1440', 'neg-x1480', 'neg-x1520', 'neg-x1560', 'neg-x1600',
'auto',
]),
block: PropTypes.oneOf([
2, 4, 8, 12, 16, 24, 32, 40,
'none',
'x1', 'x2', 'x4', 'x8', 'x12', 'x16', 'x20', 'x24', 'x28', 'x32', 'x36',
'x40', 'x80', 'x120', 'x160', 'x200',
'x240', 'x280', 'x320', 'x360', 'x400',
'x440', 'x480', 'x520', 'x560', 'x600',
'x640', 'x680', 'x720', 'x760', 'x800',
'x840', 'x880', 'x920', 'x960', 'x1000',
'x1040', 'x1080', 'x120', 'x1160', 'x1200',
'x1240', 'x1280', 'x1320', 'x1360', 'x1400',
'x1440', 'x1480', 'x1520', 'x1560', 'x1600',
'neg-x1', 'neg-x2', 'neg-x4', 'neg-x8', 'neg-x12', 'neg-x16', 'neg-x20', 'neg-x24', 'neg-x28', 'neg-x32', 'neg-x36',
'neg-x40', 'neg-x80', 'neg-x120', 'neg-x160', 'neg-x200',
'neg-x240', 'neg-x280', 'neg-x320', 'neg-x360', 'neg-x400',
'neg-x440', 'neg-x480', 'neg-x520', 'neg-x560', 'neg-x600',
'neg-x640', 'neg-x680', 'neg-x720', 'neg-x760', 'neg-x800',
'neg-x840', 'neg-x880', 'neg-x920', 'neg-x960', 'neg-x1000',
'neg-x1040', 'neg-x1080', 'neg-x120', 'neg-x1160', 'neg-x1200',
'neg-x1240', 'neg-x1280', 'neg-x1320', 'neg-x1360', 'neg-x1400',
'neg-x1440', 'neg-x1480', 'neg-x1520', 'neg-x1560', 'neg-x1600',
'auto',
]),
blockStart: PropTypes.oneOf([
2, 4, 8, 12, 16, 24, 32, 40,
'none',
'x1', 'x2', 'x4', 'x8', 'x12', 'x16', 'x20', 'x24', 'x28', 'x32', 'x36',
'x40', 'x80', 'x120', 'x160', 'x200',
'x240', 'x280', 'x320', 'x360', 'x400',
'x440', 'x480', 'x520', 'x560', 'x600',
'x640', 'x680', 'x720', 'x760', 'x800',
'x840', 'x880', 'x920', 'x960', 'x1000',
'x1040', 'x1080', 'x120', 'x1160', 'x1200',
'x1240', 'x1280', 'x1320', 'x1360', 'x1400',
'x1440', 'x1480', 'x1520', 'x1560', 'x1600',
'neg-x1', 'neg-x2', 'neg-x4', 'neg-x8', 'neg-x12', 'neg-x16', 'neg-x20', 'neg-x24', 'neg-x28', 'neg-x32', 'neg-x36',
'neg-x40', 'neg-x80', 'neg-x120', 'neg-x160', 'neg-x200',
'neg-x240', 'neg-x280', 'neg-x320', 'neg-x360', 'neg-x400',
'neg-x440', 'neg-x480', 'neg-x520', 'neg-x560', 'neg-x600',
'neg-x640', 'neg-x680', 'neg-x720', 'neg-x760', 'neg-x800',
'neg-x840', 'neg-x880', 'neg-x920', 'neg-x960', 'neg-x1000',
'neg-x1040', 'neg-x1080', 'neg-x120', 'neg-x1160', 'neg-x1200',
'neg-x1240', 'neg-x1280', 'neg-x1320', 'neg-x1360', 'neg-x1400',
'neg-x1440', 'neg-x1480', 'neg-x1520', 'neg-x1560', 'neg-x1600',
'auto',
]),
blockEnd: PropTypes.oneOf([
2, 4, 8, 12, 16, 24, 32, 40,
'none',
'x1', 'x2', 'x4', 'x8', 'x12', 'x16', 'x20', 'x24', 'x28', 'x32', 'x36',
'x40', 'x80', 'x120', 'x160', 'x200',
'x240', 'x280', 'x320', 'x360', 'x400',
'x440', 'x480', 'x520', 'x560', 'x600',
'x640', 'x680', 'x720', 'x760', 'x800',
'x840', 'x880', 'x920', 'x960', 'x1000',
'x1040', 'x1080', 'x120', 'x1160', 'x1200',
'x1240', 'x1280', 'x1320', 'x1360', 'x1400',
'x1440', 'x1480', 'x1520', 'x1560', 'x1600',
'neg-x1', 'neg-x2', 'neg-x4', 'neg-x8', 'neg-x12', 'neg-x16', 'neg-x20', 'neg-x24', 'neg-x28', 'neg-x32', 'neg-x36',
'neg-x40', 'neg-x80', 'neg-x120', 'neg-x160', 'neg-x200',
'neg-x240', 'neg-x280', 'neg-x320', 'neg-x360', 'neg-x400',
'neg-x440', 'neg-x480', 'neg-x520', 'neg-x560', 'neg-x600',
'neg-x640', 'neg-x680', 'neg-x720', 'neg-x760', 'neg-x800',
'neg-x840', 'neg-x880', 'neg-x920', 'neg-x960', 'neg-x1000',
'neg-x1040', 'neg-x1080', 'neg-x120', 'neg-x1160', 'neg-x1200',
'neg-x1240', 'neg-x1280', 'neg-x1320', 'neg-x1360', 'neg-x1400',
'neg-x1440', 'neg-x1480', 'neg-x1520', 'neg-x1560', 'neg-x1600',
'auto',
]),
inline: PropTypes.oneOf([
2, 4, 8, 12, 16, 24, 32, 40,
'none',
'x1', 'x2', 'x4', 'x8', 'x12', 'x16', 'x20', 'x24', 'x28', 'x32', 'x36',
'x40', 'x80', 'x120', 'x160', 'x200',
'x240', 'x280', 'x320', 'x360', 'x400',
'x440', 'x480', 'x520', 'x560', 'x600',
'x640', 'x680', 'x720', 'x760', 'x800',
'x840', 'x880', 'x920', 'x960', 'x1000',
'x1040', 'x1080', 'x120', 'x1160', 'x1200',
'x1240', 'x1280', 'x1320', 'x1360', 'x1400',
'x1440', 'x1480', 'x1520', 'x1560', 'x1600',
'neg-x1', 'neg-x2', 'neg-x4', 'neg-x8', 'neg-x12', 'neg-x16', 'neg-x20', 'neg-x24', 'neg-x28', 'neg-x32', 'neg-x36',
'neg-x40', 'neg-x80', 'neg-x120', 'neg-x160', 'neg-x200',
'neg-x240', 'neg-x280', 'neg-x320', 'neg-x360', 'neg-x400',
'neg-x440', 'neg-x480', 'neg-x520', 'neg-x560', 'neg-x600',
'neg-x640', 'neg-x680', 'neg-x720', 'neg-x760', 'neg-x800',
'neg-x840', 'neg-x880', 'neg-x920', 'neg-x960', 'neg-x1000',
'neg-x1040', 'neg-x1080', 'neg-x120', 'neg-x1160', 'neg-x1200',
'neg-x1240', 'neg-x1280', 'neg-x1320', 'neg-x1360', 'neg-x1400',
'neg-x1440', 'neg-x1480', 'neg-x1520', 'neg-x1560', 'neg-x1600',
'auto',
]),
inlineStart: PropTypes.oneOf([
2, 4, 8, 12, 16, 24, 32, 40,
'none',
'x1', 'x2', 'x4', 'x8', 'x12', 'x16', 'x20', 'x24', 'x28', 'x32', 'x36',
'x40', 'x80', 'x120', 'x160', 'x200',
'x240', 'x280', 'x320', 'x360', 'x400',
'x440', 'x480', 'x520', 'x560', 'x600',
'x640', 'x680', 'x720', 'x760', 'x800',
'x840', 'x880', 'x920', 'x960', 'x1000',
'x1040', 'x1080', 'x120', 'x1160', 'x1200',
'x1240', 'x1280', 'x1320', 'x1360', 'x1400',
'x1440', 'x1480', 'x1520', 'x1560', 'x1600',
'neg-x1', 'neg-x2', 'neg-x4', 'neg-x8', 'neg-x12', 'neg-x16', 'neg-x20', 'neg-x24', 'neg-x28', 'neg-x32', 'neg-x36',
'neg-x40', 'neg-x80', 'neg-x120', 'neg-x160', 'neg-x200',
'neg-x240', 'neg-x280', 'neg-x320', 'neg-x360', 'neg-x400',
'neg-x440', 'neg-x480', 'neg-x520', 'neg-x560', 'neg-x600',
'neg-x640', 'neg-x680', 'neg-x720', 'neg-x760', 'neg-x800',
'neg-x840', 'neg-x880', 'neg-x920', 'neg-x960', 'neg-x1000',
'neg-x1040', 'neg-x1080', 'neg-x120', 'neg-x1160', 'neg-x1200',
'neg-x1240', 'neg-x1280', 'neg-x1320', 'neg-x1360', 'neg-x1400',
'neg-x1440', 'neg-x1480', 'neg-x1520', 'neg-x1560', 'neg-x1600',
'auto',
]),
inlineEnd: PropTypes.oneOf([
2, 4, 8, 12, 16, 24, 32, 40,
'none',
'x1', 'x2', 'x4', 'x8', 'x12', 'x16', 'x20', 'x24', 'x28', 'x32', 'x36',
'x40', 'x80', 'x120', 'x160', 'x200',
'x240', 'x280', 'x320', 'x360', 'x400',
'x440', 'x480', 'x520', 'x560', 'x600',
'x640', 'x680', 'x720', 'x760', 'x800',
'x840', 'x880', 'x920', 'x960', 'x1000',
'x1040', 'x1080', 'x120', 'x1160', 'x1200',
'x1240', 'x1280', 'x1320', 'x1360', 'x1400',
'x1440', 'x1480', 'x1520', 'x1560', 'x1600',
'neg-x1', 'neg-x2', 'neg-x4', 'neg-x8', 'neg-x12', 'neg-x16', 'neg-x20', 'neg-x24', 'neg-x28', 'neg-x32', 'neg-x36',
'neg-x40', 'neg-x80', 'neg-x120', 'neg-x160', 'neg-x200',
'neg-x240', 'neg-x280', 'neg-x320', 'neg-x360', 'neg-x400',
'neg-x440', 'neg-x480', 'neg-x520', 'neg-x560', 'neg-x600',
'neg-x640', 'neg-x680', 'neg-x720', 'neg-x760', 'neg-x800',
'neg-x840', 'neg-x880', 'neg-x920', 'neg-x960', 'neg-x1000',
'neg-x1040', 'neg-x1080', 'neg-x120', 'neg-x1160', 'neg-x1200',
'neg-x1240', 'neg-x1280', 'neg-x1320', 'neg-x1360', 'neg-x1400',
'neg-x1440', 'neg-x1480', 'neg-x1520', 'neg-x1560', 'neg-x1600',
'auto',
]),
};
packages/fuselage/src/components/Box/Margins/stories.mdx
View file @ 95e30849
import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
import { Button, ButtonGroup, Margins } from '../../..';
import { Box, Button, ButtonGroup, Flex, Margins, Tile } from '../../..';
<Meta title='Box|Modifiers/Margins' parameters={{ jest: ['Margins/spec'] }} />
......@@ -14,7 +14,7 @@ Add margins to the wrapped component.
<Button>
Without margins
</Button>
<Margins all={32}>
<Margins all='x32'>
<Button>
With margins
</Button>
......@@ -30,3 +30,498 @@ Add margins to the wrapped component.
</Preview>
<Props of={Margins} />
### `all`
<Preview>
<Story name='all prop' decorators={[
(fn) => <Flex.Container alignItems='center'>
<Box>
<Margins all='x8'>
{fn()}
</Margins>
</Box>
</Flex.Container>
]}>
<>
<Flex.Container>
<Tile padding='none'>
<Margins all='x4'>
<Tile>x4</Tile>
</Margins>
</Tile>
</Flex.Container>
<Flex.Container>
<Tile padding='none'>
<Margins all='x8'>
<Tile>x8</Tile>
</Margins>
</Tile>
</Flex.Container>
<Flex.Container>
<Tile padding='none'>
<Margins all='x16'>
<Tile>x16</Tile>
</Margins>
</Tile>
</Flex.Container>
<Flex.Container>
<Tile padding='none'>
<Margins all='x24'>
<Tile>x24</Tile>
</Margins>
</Tile>
</Flex.Container>
<Flex.Container>
<Tile padding='none'>
<Margins all='x32'>
<Tile>x32</Tile>
</Margins>
</Tile>
</Flex.Container>
<Flex.Container>
<Tile padding='none'>
<Margins all='x40'>
<Tile>x40</Tile>
</Margins>
</Tile>
</Flex.Container>
</>
</Story>
</Preview>
### `block`
<Preview>
<Story name='block prop' decorators={[
(fn) => <Flex.Container alignItems='center'>
<Box>
<Margins all='x8'>
{fn()}
</Margins>
</Box>
</Flex.Container>
]}>
<>
<Flex.Container>
<Tile padding='none'>
<Margins block='x4'>
<Tile>x4</Tile>
</Margins>
</Tile>
</Flex.Container>
<Flex.Container>
<Tile padding='none'>
<Margins block='x8'>
<Tile>x8</Tile>
</Margins>
</Tile>
</Flex.Container>
<Flex.Container>
<Tile padding='none'>
<Margins block='x16'>
<Tile>x16</Tile>
</Margins>
</Tile>
</Flex.Container>
<Flex.Container>
<Tile padding='none'>
<Margins block='x24'>
<Tile>x24</Tile>
</Margins>
</Tile>
</Flex.Container>
<Flex.Container>
<Tile padding='none'>
<Margins block='x32'>
<Tile>x32</Tile>
</Margins>
</Tile>
</Flex.Container>
<Flex.Container>
<Tile padding='none'>
</