paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 34 Packages Projects Releases Wiki Activity

Remove Inline component

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-01-27 21:52:08 +00:00
parent d630996786
commit 33538594eb
13 changed files with 136 additions and 332 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/canon/src/components/Box/Box.stories.tsx
+13 -14
View File
@@ -18,7 +18,6 @@ import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Box } from './Box';
import { Flex } from '../Flex';
import { Inline } from '../Inline';
const meta = {
title: 'Components/Box',
@@ -81,8 +80,8 @@ const CardDisplay = ({ children }: { children?: React.ReactNode }) => {
export const Display: Story = {
render: args => (
<Flex align="center">
<Inline>
<Flex direction="column" align="center">
<Flex>
<Box display="block" {...args}>
<CardDisplay>Block</CardDisplay>
</Box>
@@ -92,7 +91,7 @@ export const Display: Story = {
<Box display="none" {...args}>
<CardDisplay>None</CardDisplay>
</Box>
</Inline>
</Flex>
<Box display={{ initial: 'block', md: 'inline' }} {...args}>
<CardDisplay>Responsive</CardDisplay>
</Box>
@@ -116,8 +115,8 @@ export const Padding: Story = {
},
},
render: args => (
<Flex align="center" gap="md">
<Inline alignY="center" gap="md">
<Flex direction="column" align="center" gap="4">
<Flex gap="4" align="center">
<Box p="3" style={styleInsideBox}>
<Box {...args}>Padding</Box>
</Box>
@@ -127,8 +126,8 @@ export const Padding: Story = {
<Box py="3" style={styleInsideBox}>
<Box {...args}>Padding Y</Box>
</Box>
</Inline>
<Inline alignY="center" gap="md">
</Flex>
<Flex gap="4" align="center">
<Box pt="3" style={styleInsideBox}>
<Box {...args}>Padding Top</Box>
</Box>
@@ -141,7 +140,7 @@ export const Padding: Story = {
<Box pl="3" style={styleInsideBox}>
<Box {...args}>Padding Left</Box>
</Box>
</Inline>
</Flex>
</Flex>
),
};
@@ -156,8 +155,8 @@ export const Margin: Story = {
},
},
render: args => (
<Flex align="center" gap="md">
<Inline alignY="center" gap="md">
<Flex direction="column" align="center" gap="4">
<Flex align="center" gap="4">
<Box style={styleInsideBox}>
<Box m="3" {...args}>
Margin
@@ -173,8 +172,8 @@ export const Margin: Story = {
Margin Y
</Box>
</Box>
</Inline>
<Inline alignY="center" gap="md">
</Flex>
<Flex align="center" gap="4">
<Box style={styleInsideBox}>
<Box mt="3" {...args}>
Margin Top
@@ -195,7 +194,7 @@ export const Margin: Story = {
Margin Left
</Box>
</Box>
</Inline>
</Flex>
</Flex>
),
};
packages/canon/src/components/Button/Button.stories.tsx
+10 -11
View File
@@ -17,7 +17,6 @@
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';
import { Inline } from '../Inline';
import { Flex } from '../Flex';
import { Text } from '../Text';
import { ButtonProps } from './types';
@@ -51,7 +50,7 @@ export const Variants: Story = {
},
},
render: () => (
<Inline alignY="center">
<Flex align="center">
<Button iconStart="cloud" variant="primary">
Button
</Button>
@@ -61,7 +60,7 @@ export const Variants: Story = {
<Button iconStart="cloud" variant="tertiary">
Button
</Button>
</Inline>
</Flex>
),
};
@@ -70,10 +69,10 @@ export const Sizes: Story = {
children: 'Button',
},
render: () => (
<Inline alignY="center">
<Flex align="center">
<Button size="medium">Medium</Button>
<Button size="small">Small</Button>
</Inline>
</Flex>
),
};
@@ -82,11 +81,11 @@ export const WithIcons: Story = {
children: 'Button',
},
render: args => (
<Inline alignY="center">
<Flex align="center">
<Button {...args} iconStart="cloud" />
<Button {...args} iconEnd="chevronRight" />
<Button {...args} iconStart="cloud" iconEnd="chevronRight" />
</Inline>
</Flex>
),
};
@@ -132,12 +131,12 @@ export const Playground: Story = {
children: 'Button',
},
render: () => (
<Flex>
<Flex direction="column">
{variants.map(variant => (
<Flex key={variant}>
<Flex direction="column" key={variant}>
<Text>{variant}</Text>
{['small', 'medium'].map(size => (
<Inline alignY="center" key={size}>
<Flex align="center" key={size}>
<Button
iconStart="cloud"
variant={variant as ButtonProps['variant']}
@@ -161,7 +160,7 @@ export const Playground: Story = {
>
Button
</Button>
</Inline>
</Flex>
))}
</Flex>
))}
packages/canon/src/components/Checkbox/Checkbox.stories.tsx
+4 -5
View File
@@ -17,7 +17,6 @@
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Checkbox } from './Checkbox';
import { Inline } from '../Inline';
import { Flex } from '../Flex';
import { Text } from '../Text';
@@ -40,12 +39,12 @@ export const Default: Story = {
export const AllVariants: Story = {
render: () => (
<Inline alignY="center">
<Flex align="center">
<Checkbox />
<Checkbox checked />
<Checkbox label="Checkbox" />
<Checkbox label="Checkbox" checked />
</Inline>
</Flex>
),
};
@@ -53,12 +52,12 @@ export const Playground: Story = {
render: () => (
<Flex>
<Text>All variants</Text>
<Inline alignY="center">
<Flex align="center">
<Checkbox />
<Checkbox checked />
<Checkbox label="Checkbox" />
<Checkbox label="Checkbox" checked />
</Inline>
</Flex>
</Flex>
),
};
packages/canon/src/components/Flex/Flex.props.ts
+8
View File
@@ -23,6 +23,7 @@ const directionValues = [
'row-reverse',
'column-reverse',
] as const;
const justifyValues = ['start', 'center', 'end', 'between'] as const;
/** @public */
const flexPropDefs = {
@@ -38,9 +39,16 @@ const flexPropDefs = {
values: directionValues,
responsive: true,
},
justify: {
type: 'enum',
className: 'cu-jc',
values: justifyValues,
responsive: true,
},
} satisfies {
align: PropDef<(typeof alignValues)[number]>;
direction: PropDef<(typeof directionValues)[number]>;
justify: PropDef<(typeof justifyValues)[number]>;
};
/** @public */
packages/canon/src/components/Flex/types.ts
+1
View File
@@ -23,6 +23,7 @@ export interface FlexProps extends SpaceProps {
children: React.ReactNode;
gap?: GapProps['gap'];
align?: FlexOwnProps['align'];
justify?: FlexOwnProps['justify'];
direction?: FlexOwnProps['direction'];
className?: string;
style?: React.CSSProperties;
packages/canon/src/components/Heading/Heading.stories.tsx
+1
View File
@@ -19,6 +19,7 @@ import type { Meta, StoryObj } from '@storybook/react';
import { Heading } from './Heading';
import { Flex } from '../Flex';
import { Text } from '../Text';
const meta = {
title: 'Components/Heading',
component: Heading,
packages/canon/src/components/Inline/Inline.stories.tsx
-136
View File
@@ -1,136 +0,0 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Inline } from './Inline';
import { Box } from '../Box/Box';
const meta = {
title: 'Components/Inline',
component: Inline,
argTypes: {
align: {
control: 'inline-radio',
options: ['left', 'center', 'right'],
},
alignY: {
control: 'inline-radio',
options: ['top', 'center', 'bottom'],
},
children: {
control: false,
},
as: {
control: false,
},
className: {
control: 'text',
},
},
args: {
children: 'hello world',
},
} satisfies Meta<typeof Inline>;
export default meta;
type Story = StoryObj<typeof meta>;
const fakeBlockList = [
{ width: 45, height: 60 },
{ width: 150, height: 75 },
{ width: 80, height: 50 },
{ width: 120, height: 70 },
{ width: 95, height: 65 },
{ width: 80, height: 32 },
{ width: 130, height: 60 },
{ width: 100, height: 80 },
{ width: 140, height: 45 },
{ width: 85, height: 70 },
{ width: 125, height: 50 },
];
const FakeBox = ({
width = 120,
height = 80,
}: {
width?: number;
height?: number;
}) => (
<Box
style={{
background: '#eaf2fd',
borderRadius: '4px',
boxShadow: '0 0 0 1px #2563eb',
width,
height,
backgroundImage:
'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")',
}}
/>
);
export const Default: Story = {
render: () => (
<Inline>
{fakeBlockList.map((block, index) => (
<FakeBox key={index} width={block.width} height={block.height} />
))}
</Inline>
),
};
export const AlignLeft: Story = {
args: {
align: 'left',
},
};
export const AlignCenter: Story = {
args: {
align: 'center',
},
};
export const AlignRight: Story = {
args: {
align: 'right',
},
};
export const VerticalAlignTop: Story = {
args: {
alignY: 'top',
},
};
export const VerticalAlignCenter: Story = {
args: {
alignY: 'center',
},
};
export const VerticalAlignBottom: Story = {
args: {
alignY: 'bottom',
},
};
export const LargeGap: Story = {
args: {
gap: 'xl',
},
};
packages/canon/src/components/Inline/Inline.tsx
-85
View File
@@ -1,85 +0,0 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { createElement, forwardRef } from 'react';
import type { InlineProps } from './types';
import { getClassNames } from '../../utils/getClassNames';
import { JustifyContent, Breakpoint, AlignItems } from '../../types';
import clsx from 'clsx';
// Function to map align values
const mapAlignValue = (value?: InlineProps['align']) => {
if (typeof value === 'string') {
let returnedValue: JustifyContent = 'stretch';
if (value === 'left') returnedValue = 'start';
if (value === 'center') returnedValue = 'center';
if (value === 'right') returnedValue = 'end';
return returnedValue;
} else if (typeof value === 'object') {
const returnedValue: Partial<Record<Breakpoint, JustifyContent>> = {};
for (const [key, val] of Object.entries(value)) {
returnedValue[key as Breakpoint] = mapAlignValue(val) as JustifyContent;
}
return returnedValue;
}
return 'stretch';
};
const mapAlignYValue = (value?: InlineProps['alignY']) => {
if (typeof value === 'string') {
let returnedValue: AlignItems = 'stretch';
if (value === 'top') returnedValue = 'start';
if (value === 'center') returnedValue = 'center';
if (value === 'bottom') returnedValue = 'end';
return returnedValue;
} else if (typeof value === 'object') {
const returnedValue: Partial<Record<Breakpoint, AlignItems>> = {};
for (const [key, val] of Object.entries(value)) {
returnedValue[key as Breakpoint] = mapAlignYValue(val) as AlignItems;
}
return returnedValue;
}
return 'stretch';
};
/** @public */
export const Inline = forwardRef<HTMLElement, InlineProps>((props, ref) => {
const {
as = 'div',
children,
align = 'left',
alignY = 'top',
gap = 'xs',
className,
style,
...restProps
} = props;
// Generate utility class names
const utilityClassNames = getClassNames({
gap,
alignItems: mapAlignYValue(alignY),
justifyContent: mapAlignValue(align),
...restProps,
});
return createElement(as, {
ref,
className: clsx('canon-Inline', utilityClassNames, className),
style,
children,
});
});
packages/canon/src/components/Inline/index.ts
-17
View File
@@ -1,17 +0,0 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export { Inline } from './Inline';
export type { InlineProps } from './types';
packages/canon/src/components/Inline/styles.css
-20
View File
@@ -1,20 +0,0 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.canon-Inline {
display: flex;
flex-wrap: wrap;
}
packages/canon/src/components/Inline/types.ts
-41
View File
@@ -1,41 +0,0 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import type {
SpaceProps,
UtilityProps,
AsProps,
Breakpoint,
} from '../../types';
/** @public */
export interface InlineProps extends SpaceProps {
children: React.ReactNode;
as?: AsProps;
gap?: UtilityProps['gap'];
align?:
| 'left'
| 'center'
| 'right'
| Partial<Record<Breakpoint, 'left' | 'center' | 'right'>>;
alignY?:
| 'top'
| 'center'
| 'bottom'
| Partial<Record<Breakpoint, 'top' | 'center' | 'bottom'>>;
className?: string;
style?: React.CSSProperties;
}
packages/canon/src/components/Input/Input.stories.tsx
+3 -3
View File
@@ -17,7 +17,7 @@
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Input } from './Input';
import { Inline } from '../Inline';
import { Flex } from '../Flex';
const meta = {
title: 'Components/Input',
@@ -33,9 +33,9 @@ export const Primary: Story = {
export const Sizes: Story = {
render: () => (
<Inline>
<Flex>
<Input size="sm" />
<Input size="md" />
</Inline>
</Flex>
),
};
packages/canon/src/css/utilities/flex.css
+96
View File
@@ -14,6 +14,22 @@
align-items: stretch;
}
.cu-jc-start {
justify-content: start;
}
.cu-jc-center {
justify-content: center;
}
.cu-jc-end {
justify-content: end;
}
.cu-jc-between {
justify-content: space-between;
}
.cu-fd-row {
flex-direction: row;
}
@@ -48,6 +64,22 @@
align-items: stretch;
}
.xs\:cu-jc-start {
justify-content: start;
}
.xs\:cu-jc-center {
justify-content: center;
}
.xs\:cu-jc-end {
justify-content: end;
}
.xs\:cu-jc-between {
justify-content: space-between;
}
.xs\:cu-fd-row {
flex-direction: row;
}
@@ -83,6 +115,22 @@
align-items: stretch;
}
.sm\:cu-jc-start {
justify-content: start;
}
.sm\:cu-jc-center {
justify-content: center;
}
.sm\:cu-jc-end {
justify-content: end;
}
.sm\:cu-jc-between {
justify-content: space-between;
}
.sm\:cu-fd-row {
flex-direction: row;
}
@@ -118,6 +166,22 @@
align-items: stretch;
}
.md\:cu-jc-start {
justify-content: start;
}
.md\:cu-jc-center {
justify-content: center;
}
.md\:cu-jc-end {
justify-content: end;
}
.md\:cu-jc-between {
justify-content: space-between;
}
.md\:cu-fd-row {
flex-direction: row;
}
@@ -153,6 +217,22 @@
align-items: stretch;
}
.lg\:cu-jc-start {
justify-content: start;
}
.lg\:cu-jc-center {
justify-content: center;
}
.lg\:cu-jc-end {
justify-content: end;
}
.lg\:cu-jc-between {
justify-content: space-between;
}
.lg\:cu-fd-row {
flex-direction: row;
}
@@ -188,6 +268,22 @@
align-items: stretch;
}
.xl\:cu-jc-start {
justify-content: start;
}
.xl\:cu-jc-center {
justify-content: center;
}
.xl\:cu-jc-end {
justify-content: end;
}
.xl\:cu-jc-between {
justify-content: space-between;
}
.xl\:cu-fd-row {
flex-direction: row;
}