Skip to content

Commit 22780ee

Browse files
minheqminheq
committed
feat(layout): remove spacing component
1 parent f87cfda commit 22780ee

18 files changed

Lines changed: 86 additions & 233 deletions

File tree

‎src/components/Alert/Alert.mdx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ menu: Components
55

66
import { Playground, Props } from 'docz';
77
import { Alert } from './Alert';
8-
import { Spacing } from '../Layout';
8+
import { Box } from '../Layout';
99

1010
# Alert
1111

@@ -28,18 +28,18 @@ import { Spacing } from '../Layout';
2828
### Variants
2929

3030
<Playground>
31-
<Spacing paddingVertical={2}>
31+
<Box paddingVertical={16}>
3232
<Alert title="Info" description="Message" />
33-
</Spacing>
34-
<Spacing paddingVertical={2}>
33+
</Box>
34+
<Box paddingVertical={16}>
3535
<Alert intent="success" title="Success" description="Message" />
36-
</Spacing>
37-
<Spacing paddingVertical={2}>
36+
</Box>
37+
<Box paddingVertical={16}>
3838
<Alert intent="warning" title="Warning" description="Message" />
39-
</Spacing>
40-
<Spacing paddingVertical={2}>
39+
</Box>
40+
<Box paddingVertical={16}>
4141
<Alert intent="danger" title="Danger" description="Message" />
42-
</Spacing>
42+
</Box>
4343
</Playground>
4444

4545
### Props

‎src/components/Alert/Alert.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { Intent } from '../../constants/Intent';
66
import { Icon } from '../../icons';
77
import { Theme, useTheme } from '../../theme';
88
import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
9-
import { Spacing } from '../Layout';
9+
import { Box } from '../Layout';
1010
import { Text } from '../Typography';
1111
import { AlertStyles, GetAlertStyles, getAlertStyles } from './Alert.styles';
1212

@@ -70,9 +70,9 @@ export const Alert = (props: AlertProps) => {
7070
return (
7171
<View style={containerStyle} testID={testID}>
7272
{icon || (
73-
<Spacing paddingRight={2} justifyContent="center">
73+
<Box paddingRight={16} justifyContent="center">
7474
{resolveIcon(intent, theme)}
75-
</Spacing>
75+
</Box>
7676
)}
7777
{component || (
7878
<View style={bodyStyle}>
@@ -82,9 +82,9 @@ export const Alert = (props: AlertProps) => {
8282
)}
8383
{isCloseable && (
8484
<TouchableOpacity onPress={onClose}>
85-
<Spacing paddingLeft={2}>
85+
<Box paddingLeft={16}>
8686
<Icon name="x" size={24} color={theme.colors.text.default} />
87-
</Spacing>
87+
</Box>
8888
</TouchableOpacity>
8989
)}
9090
</View>

‎src/components/Button/Button.mdx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ menu: Components
55

66
import { Playground, Props } from 'docz';
77
import { Button } from './Button';
8-
import { Box, Spacing } from '../Layout';
8+
import { Box } from '../Layout';
99

1010
# Button
1111

@@ -37,19 +37,19 @@ import { Box, Spacing } from '../Layout';
3737

3838
<Playground>
3939
<Box flexDirection="row">
40-
<Spacing paddingRight={2} height={30} justifyContent="space-between">
40+
<Box paddingRight={16} height={240} justifyContent="space-between">
4141
<Button color="default" title="Default" />
4242
<Button color="default" appearance="outline" title="Default" />
4343
<Button color="default" appearance="minimal" title="Default" />
4444
<Button color="default" appearance="primary" title="Default" isLoading />
45-
</Spacing>
46-
<Spacing paddingRight={2} height={30} justifyContent="space-between">
45+
</Box>
46+
<Box paddingRight={16} height={240} justifyContent="space-between">
4747
<Button color="primary" title="Primary" />
4848
<Button color="primary" appearance="outline" title="Primary" />
4949
<Button color="primary" appearance="minimal" title="Primary" />
5050
<Button color="primary" appearance="primary" title="Primary" isLoading />
51-
</Spacing>
52-
<Spacing paddingRight={2} height={30} justifyContent="space-between">
51+
</Box>
52+
<Box paddingRight={16} height={240} justifyContent="space-between">
5353
<Button color="secondary" title="Secondary" />
5454
<Button color="secondary" appearance="outline" title="Secondary" />
5555
<Button color="secondary" appearance="minimal" title="Secondary" />
@@ -59,13 +59,13 @@ import { Box, Spacing } from '../Layout';
5959
title="Secondary"
6060
isLoading
6161
/>
62-
</Spacing>
63-
<Spacing paddingRight={2} height={30} justifyContent="space-between">
62+
</Box>
63+
<Box paddingRight={16} height={240} justifyContent="space-between">
6464
<Button color="danger" title="Danger" />
6565
<Button color="danger" appearance="outline" title="Danger" />
6666
<Button color="danger" appearance="minimal" title="Danger" />
6767
<Button color="danger" appearance="primary" title="Danger" isLoading />
68-
</Spacing>
68+
</Box>
6969
</Box>
7070
</Playground>
7171

‎src/components/Button/Button.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { DeepPartial } from 'ts-essentials';
1010

1111
import { useTheme } from '../../theme';
1212
import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
13-
import { Spacing } from '../Layout';
13+
import { Box } from '../Layout';
1414
import { LoadingDots } from '../Loading';
1515
import { Text } from '../Typography';
1616
import {
@@ -165,14 +165,11 @@ export const Button = (props: ButtonProps) => {
165165
}}
166166
>
167167
{iconBefore}
168-
<Spacing
169-
paddingLeft={iconBefore ? 1 : 0}
170-
paddingRight={iconAfter ? 1 : 0}
171-
>
168+
<Box paddingLeft={iconBefore ? 8 : 0} paddingRight={iconAfter ? 8 : 0}>
172169
{/*
173170
// @ts-ignore */}
174171
<ButtonContent {...props} textStyle={textStyle} />
175-
</Spacing>
172+
</Box>
176173
{iconAfter}
177174
</View>
178175
</TouchableHighlight>

‎src/components/Checkbox/LabeledCheckbox.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react';
22

33
import { TextColor, TextSize } from '../../theme/ThemeInterface';
44
import { Checkbox, CheckboxProps } from '../Checkbox/Checkbox';
5-
import { Box, Spacing } from '../Layout';
5+
import { Box } from '../Layout';
66
import { Text } from '../Typography';
77

88
export interface LabeledCheckboxProps extends CheckboxProps {
@@ -26,9 +26,9 @@ export const LabeledCheckbox = (props: LabeledCheckboxProps) => {
2626
{label}
2727
</Text>
2828
)}
29-
<Spacing paddingHorizontal={1}>
29+
<Box paddingHorizontal={8}>
3030
<Checkbox {...restProps} />
31-
</Spacing>
31+
</Box>
3232
{position === 'right' && (
3333
<Text size={size} color={color}>
3434
{label}

‎src/components/Counter/Counter.mdx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ menu: Components
66
import { Counter as CounterContainer } from 'react-powerplug';
77
import { Playground, Props } from 'docz';
88
import { Counter } from '.';
9-
import { Spacing } from '../Layout';
109

1110
# Counter
1211

‎src/components/Counter/Counter.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { DeepPartial } from 'ts-essentials';
55
import { Icon } from '../../icons';
66
import { useTheme } from '../../theme';
77
import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
8-
import { Spacing } from '../Layout';
8+
import { Box } from '../Layout';
99
import { Text } from '../Typography';
1010
import {
1111
CounterStyles,
@@ -53,7 +53,7 @@ export const Counter = (props: CounterProps) => {
5353

5454
return (
5555
<View style={containerStyle}>
56-
<Spacing paddingRight={2}>
56+
<Box paddingRight={16}>
5757
<TouchableOpacity
5858
activeOpacity={0.7}
5959
style={{
@@ -73,13 +73,13 @@ export const Counter = (props: CounterProps) => {
7373
}
7474
/>
7575
</TouchableOpacity>
76-
</Spacing>
76+
</Box>
7777
{component || (
7878
<View style={countStyle}>
7979
<Text getStyles={() => ({ textStyle })}>{`${count}`}</Text>
8080
</View>
8181
)}
82-
<Spacing paddingLeft={2}>
82+
<Box paddingLeft={16}>
8383
<TouchableOpacity
8484
activeOpacity={0.7}
8585
style={{
@@ -99,7 +99,7 @@ export const Counter = (props: CounterProps) => {
9999
}
100100
/>
101101
</TouchableOpacity>
102-
</Spacing>
102+
</Box>
103103
</View>
104104
);
105105
};

‎src/components/Dialog/Dialog.mdx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { Playground, Props } from 'docz';
1010
import { Icon } from '../../icons';
1111
import { Dialog } from '.';
1212
import { Button } from '../Button';
13-
import { Box, Spacing } from '../Layout';
13+
import { Box } from '../Layout';
1414
import { Text, Heading } from '../Typography';
1515

1616
# Dialog
@@ -25,8 +25,8 @@ Dialog has no predefined styling and handlers. The content, header and footer is
2525
<Box>
2626
<Dialog
2727
header={
28-
<Spacing
29-
padding={2}
28+
<Box
29+
padding={16}
3030
flexDirection="row"
3131
justifyContent="space-between"
3232
alignItems="center"
@@ -35,19 +35,19 @@ Dialog has no predefined styling and handlers. The content, header and footer is
3535
<TouchableOpacity onPress={toggle}>
3636
<Icon name="x" size={24} />
3737
</TouchableOpacity>
38-
</Spacing>
38+
</Box>
3939
}
4040
footer={
41-
<Spacing padding={2} flexDirection="row" justifyContent="flex-end">
41+
<Box padding={16} flexDirection="row" justifyContent="flex-end">
4242
<Button appearance="minimal" onPress={toggle} title="Cancel" />
43-
<Spacing paddingLeft={2}>
43+
<Box paddingLeft={16}>
4444
<Button
4545
color="primary"
4646
onPress={() => console.log('Button clicked')}
4747
title="Accept"
4848
/>
49-
</Spacing>
50-
</Spacing>
49+
</Box>
50+
</Box>
5151
}
5252
isVisible={on}
5353
onRequestClose={toggle}

‎src/components/Drawer/Drawer.mdx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { Toggle } from 'react-powerplug';
88

99
import { Drawer } from '.';
1010
import { Button } from '../Button';
11-
import { Box, Spacing } from '../Layout';
11+
import { Box } from '../Layout';
1212
import { Text } from '../Typography';
1313

1414
# Drawer
@@ -32,7 +32,7 @@ import { Text } from '../Typography';
3232
containerStyle: {},
3333
})}
3434
>
35-
<Spacing padding={3}>
35+
<Box padding={24}>
3636
<Box elevation={1} backgroundColor="white" borderRadius={4}>
3737
{[
3838
{
@@ -58,10 +58,10 @@ import { Text } from '../Typography';
5858
<Button key={option.title} appearance="minimal" {...option} />
5959
))}
6060
</Box>
61-
<Spacing paddingTop={3}>
61+
<Box paddingTop={24}>
6262
<Button onPress={toggle} title="Close" />
63-
</Spacing>
64-
</Spacing>
63+
</Box>
64+
</Box>
6565
</Drawer>
6666
</>
6767
)}

‎src/components/Inputs/PhoneNumberInput.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { Playground, Props } from 'docz';
77
import { State } from 'react-powerplug';
88

99
import { Heading } from '../Typography';
10-
import { Spacing } from '../Layout';
10+
import { Box } from '../Layout';
1111

1212
import { PhoneNumberInput } from './PhoneNumberInput';
1313

@@ -22,9 +22,9 @@ Appends a button to select country code
2222
{({ state, setState }) => (
2323
<PhoneNumberInput
2424
header={
25-
<Spacing marginVertical={3} paddingHorizontal={2}>
25+
<Box marginVertical={24} paddingHorizontal={16}>
2626
<Heading size="xxxlarge">Select your country</Heading>
27-
</Spacing>
27+
</Box>
2828
}
2929
onChangeCountryCode={countryCode => setState({ countryCode })}
3030
onChangePhoneNumber={phoneNumber => setState({ phoneNumber })}

0 commit comments

Comments
 (0)