feat: add vertical prop to Space

BREAKING CHANGE: remove direction prop from Space
mll-lab · Apr 19, 2024 · fd98bbc · fd98bbc
1 parent b84d7f6
commit fd98bbc
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 21 deletions.
diff --git a/src/Fields/index.stories.tsx b/src/Fields/index.stories.tsx
@@ -242,7 +242,7 @@ function TextAreaStory() {
   const textAreaRequiredRef = useRef<TextAreaRef>(null);
   const textAreaStyledRef = useRef<TextAreaRef>(null);
   return (
-    <Space direction="horizontal">
+    <Space>
       <TextAreaField
         name="text_area"
         control={control}

diff --git a/src/Provider/index.stories.tsx b/src/Provider/index.stories.tsx
@@ -154,7 +154,7 @@ export const PropsHavePriority: Story<Theme> = function PropsHavePriority(
         fontSize: args.fontSize,
       }}
     >
-      <Space direction="vertical" size="middle">
+      <Space vertical size="middle">
         <Typography.Paragraph>
           Props get passed directly to the components and have priority.
         </Typography.Paragraph>
@@ -167,7 +167,7 @@ export const PropsHavePriority: Story<Theme> = function PropsHavePriority(
 
 function SupportedComponents() {
   return (
-    <Space direction="vertical">
+    <Space vertical>
       <CreateButton />
       <Table columns={TABLE_COLUMNS} dataSource={TABLE_DATA} />
       <Radio.Group

diff --git a/src/Space/index.stories.tsx b/src/Space/index.stories.tsx
@@ -30,33 +30,33 @@ export const Default: Story<SpaceProps> = function Default(args) {
 
 export const Block: Story<SpaceProps> = function Block(args) {
   return (
-    <Space direction="vertical" block>
+    <Space vertical block>
       <Card title="Vertical space without block">
-        <Space {...args} direction="vertical">
+        <Space {...args} vertical>
           <Button block>Button1</Button>
           <Button block>Button2</Button>
         </Space>
       </Card>
       <Card title="Vertical space with block">
-        <Space {...args} direction="vertical" block>
+        <Space {...args} vertical block>
           <Button block>Button1</Button>
           <Button block>Button2</Button>
         </Space>
       </Card>
       <Card title="Vertical space with block and align='center'">
-        <Space {...args} direction="vertical" block align="center">
+        <Space {...args} vertical block align="center">
           <Button block>Button1</Button>
           <Button block>Button2</Button>
         </Space>
       </Card>
       <Card title="Horizontal space without block">
-        <Space {...args} direction="horizontal">
+        <Space {...args}>
           <Button block>Button1</Button>
           <Button block>Button2</Button>
         </Space>
       </Card>
       <Card title="Horizontal space with block (no difference because not horizontally centered)">
-        <Space {...args} direction="horizontal" block>
+        <Space {...args} vertical={false} block>
           <Button block>Button1</Button>
           <Button block>Button2</Button>
         </Space>

diff --git a/src/Space/index.tsx b/src/Space/index.tsx
@@ -4,24 +4,25 @@ import styled, { css } from 'styled-components';
 
 export { SpaceSize } from 'antd/lib/space';
 
-export type SpaceProps = AntdSpaceProps & {
+export type SpaceProps = Omit<AntdSpaceProps, 'direction'> & {
   block?: boolean;
+  vertical?: boolean;
 };
 
-const TRANSIENT_PROPS: Array<string> = ['block'] satisfies Array<
+const TRANSIENT_PROPS: Array<string> = ['block', 'vertical'] satisfies Array<
   keyof SpaceProps
 >;
 
-export const Space: React.FC<SpaceProps> = styled(AntdSpace).withConfig({
-  shouldForwardProp: (prop) => !TRANSIENT_PROPS.includes(prop),
-})`
+export const Space: React.FC<SpaceProps> = styled(AntdSpace)
+  .withConfig({
+    shouldForwardProp: (prop) => !TRANSIENT_PROPS.includes(prop),
+  })
+  .attrs<SpaceProps>((props) => ({
+    direction: props.vertical ? 'vertical' : 'horizontal',
+  }))`
   ${(props: SpaceProps) =>
     props.block &&
     css`
       display: flex;
     `};
 `;
-
-export function VSpace(props: SpaceProps) {
-  return <Space direction="vertical" {...props} />;
-}
diff --git a/src/UserDetailsPopover/UserDetails.tsx b/src/UserDetailsPopover/UserDetails.tsx
@@ -28,7 +28,7 @@ export function UserDetails({ user }: UserDetailsProps) {
   const fullName = joinNonEmpty([firstname, lastname], ' ');
   const showFullName = !inactive && fullName;
   return (
-    <Space direction="vertical" size={SPACE}>
+    <Space vertical size={SPACE}>
       <Row gutter={GUTTER} align="middle">
         <Col flex="0 1 min-content">
           <UserAvatar username={acronym} />

diff --git a/src/UserDetailsPopover/index.stories.tsx b/src/UserDetailsPopover/index.stories.tsx
@@ -33,7 +33,7 @@ export const Default: Story = function Link(args) {
   const [visible, setVisible] = useState(false);
   return (
     <Space
-      direction="vertical"
+      vertical
       align="center"
       style={{
         marginLeft: 100,
@@ -80,7 +80,7 @@ export const WithCustomChildren: Story = function Link(args) {
 
   return (
     <Space
-      direction="vertical"
+      vertical
       align="center"
       style={{
         marginLeft: 100,