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

Renaming components + improve layout components

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2024-11-26 22:23:17 +00:00
parent 912d1ce411
commit 267278582f
26 changed files with 274 additions and 736 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/canon/package.json
+1 -1
View File
@@ -33,7 +33,7 @@
"lint": "backstage-cli package lint",
"prepack": "backstage-cli package prepack",
"postpack": "backstage-cli package postpack",
"storybook": "storybook dev -p 6006",
"start": "storybook dev -p 6006",
"test": "backstage-cli package test"
},
"dependencies": {
packages/canon/report.api.md
+1 -480
View File
@@ -13,12 +13,7 @@ import { ReactNode } from 'react';
import { ResponsiveArray } from '@vanilla-extract/sprinkles';
// @public (undocumented)
export const Box: ({
as,
className,
style,
...props
}: BoxProps) => ReactElement<
export const Box: (props: BoxProps) => ReactElement<
{
className: string;
style: CSSProperties | undefined;
@@ -943,240 +938,6 @@ export const boxSprinkles: ((
| undefined
)
| ResponsiveArray<2 | 1 | 3 | 4 | 5 | 6, 'nowrap' | 'wrap' | null>;
padding?:
| (
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| {
xs?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
sm?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
md?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
lg?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
xl?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
'2xl'?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
}
| undefined
)
| ResponsiveArray<
2 | 1 | 3 | 4 | 5 | 6,
'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null
>;
paddingX?:
| (
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| {
xs?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
sm?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
md?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
lg?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
xl?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
'2xl'?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
}
| undefined
)
| ResponsiveArray<
2 | 1 | 3 | 4 | 5 | 6,
'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null
>;
paddingY?:
| (
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| {
xs?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
sm?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
md?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
lg?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
xl?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
'2xl'?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
}
| undefined
)
| ResponsiveArray<
2 | 1 | 3 | 4 | 5 | 6,
'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null
>;
p?:
| (
| 'none'
@@ -1723,240 +1484,6 @@ export const boxSprinkles: ((
2 | 1 | 3 | 4 | 5 | 6,
'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null
>;
margin?:
| (
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| {
xs?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
sm?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
md?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
lg?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
xl?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
'2xl'?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
}
| undefined
)
| ResponsiveArray<
2 | 1 | 3 | 4 | 5 | 6,
'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null
>;
marginX?:
| (
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| {
xs?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
sm?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
md?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
lg?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
xl?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
'2xl'?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
}
| undefined
)
| ResponsiveArray<
2 | 1 | 3 | 4 | 5 | 6,
'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null
>;
marginY?:
| (
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| {
xs?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
sm?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
md?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
lg?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
xl?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
'2xl'?:
| 'none'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxs'
| 'xxl'
| undefined;
}
| undefined
)
| ResponsiveArray<
2 | 1 | 3 | 4 | 5 | 6,
'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null
>;
m?:
| (
| 'none'
@@ -2547,12 +2074,10 @@ export const boxSprinkles: ((
| 'flexWrap'
| 'gap'
| 'justifyContent'
| 'margin'
| 'marginBottom'
| 'marginLeft'
| 'marginRight'
| 'marginTop'
| 'padding'
| 'paddingBottom'
| 'paddingLeft'
| 'paddingRight'
@@ -2571,10 +2096,6 @@ export const boxSprinkles: ((
| 'pl'
| 'px'
| 'py'
| 'marginX'
| 'marginY'
| 'paddingX'
| 'paddingY'
>;
};
packages/canon/src/components/Box/docs/spacing-table.tsx
+71
View File
@@ -0,0 +1,71 @@
/*
* 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 * as Table from '../../../../docs/components';
import { Chip } from '../../../../docs/components';
import { listResponsiveValues } from '../../../utils/list-values';
import { responsiveProperties } from '../sprinkles.css';
console.log(responsiveProperties.styles);
export const SpacingTable = () => {
return (
<Table.Root>
<Table.Header>
<Table.HeaderRow>
<Table.HeaderCell>Prop</Table.HeaderCell>
<Table.HeaderCell>Type</Table.HeaderCell>
</Table.HeaderRow>
</Table.Header>
<Table.Body>
{Object.keys(responsiveProperties.styles)
.filter(n =>
[
'padding',
'paddingX',
'paddingY',
'paddingLeft',
'paddingRight',
'paddingTop',
'paddingBottom',
'margin',
'marginX',
'marginY',
'marginLeft',
'marginRight',
'marginTop',
'marginBottom',
].includes(n),
)
.map(n => (
<Table.Row key={n}>
<Table.Cell>
<Chip head>{n}</Chip>
</Table.Cell>
<Table.Cell>
{listResponsiveValues(
'paddingTop' as keyof typeof responsiveProperties.styles,
).map(value => (
<Chip key={value}>{value}</Chip>
))}
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
);
};
packages/canon/src/components/Inline/index.ts
+16
View File
@@ -0,0 +1,16 @@
/*
* 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';
packages/canon/src/components/Stack/index.ts
+16
View File
@@ -0,0 +1,16 @@
/*
* 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 { Stack } from './Stack';
packages/canon/src/components/Stack/sprinkles.css.ts
+86
View File
@@ -0,0 +1,86 @@
/*
* 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 { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';
import { breakpoints, space } from '../Box/properties';
import { colorProperties } from '../Box/sprinkles.css';
const responsiveProperties = defineProperties({
conditions: breakpoints,
defaultCondition: 'xs',
properties: {
flexDirection: ['row', 'column'],
justifyContent: [
'stretch',
'flex-start',
'center',
'flex-end',
'space-around',
'space-between',
],
alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],
borderRadius: {
none: 0,
small: '4px',
medium: '8px',
full: '9999px',
},
boxShadow: {
small: 'var(--canon-box-shadow-small)',
medium: 'var(--canon-box-shadow-medium)',
large: 'var(--canon-box-shadow-large)',
},
border: {
none: 'none',
thin: '1px solid var(--canon-outline)',
error: '1px solid var(--canon-error)',
},
display: ['none', 'flex', 'block', 'inline'],
paddingTop: space,
paddingBottom: space,
paddingLeft: space,
paddingRight: space,
marginTop: space,
marginBottom: space,
marginLeft: space,
marginRight: space,
gap: space,
flexWrap: ['wrap', 'nowrap'],
},
shorthands: {
p: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],
pt: ['paddingTop'],
pr: ['paddingRight'],
pb: ['paddingBottom'],
pl: ['paddingLeft'],
px: ['paddingLeft', 'paddingRight'],
py: ['paddingTop', 'paddingBottom'],
m: ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'],
mt: ['marginTop'],
mr: ['marginRight'],
mb: ['marginBottom'],
ml: ['marginLeft'],
mx: ['marginLeft', 'marginRight'],
my: ['marginTop', 'marginBottom'],
direction: ['flexDirection'],
items: ['alignItems'],
justify: ['justifyContent'],
},
});
export const sprinkles = createSprinkles(responsiveProperties, colorProperties);
// It's a good idea to export the Sprinkles type too
export type Sprinkles = Parameters<typeof sprinkles>[0];
packages/canon/src/components/box/box.mdx
+7 -134
View File
@@ -1,14 +1,15 @@
import { Canvas, Meta, Unstyled } from '@storybook/blocks';
import * as BoxStories from './box.stories';
import * as BoxStories from './Box.stories';
import { Chip } from '../../../docs/components/chip';
import * as Table from '../../../docs/components/table';
import { Box } from './box';
import { Stack } from '../stack/stack';
import { Box } from './Box';
import { Stack } from '../Stack';
import { Title, Text } from '../../../docs/components';
import { Padding } from './docs/padding';
import { listResponsiveValues, listColorValues } from '../../utils/list-values';
import { responsiveProperties } from './sprinkles.css';
import { PropsTable } from './docs/props-table';
import { SpacingTable } from './docs/spacing-table';
<Meta of={BoxStories} />
@@ -29,137 +30,9 @@ import { PropsTable } from './docs/props-table';
predefined spacing tokens. We would recommend to use padding over margin to
avoid collapsing margins but both are available.
</Text>
<Padding />
<Table.Root>
<Table.Header>
<Table.HeaderRow>
<Table.HeaderCell>Prop</Table.HeaderCell>
<Table.HeaderCell>Type</Table.HeaderCell>
<Table.HeaderCell>Default</Table.HeaderCell>
</Table.HeaderRow>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell>
<Chip head>padding</Chip>
<Chip head>p</Chip>
</Table.Cell>
<Table.Cell>
<Chip>number</Chip>
</Table.Cell>
<Table.Cell>
<Chip>0</Chip>
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>paddingX</Chip>
<Chip head>px</Chip>
</Table.Cell>
<Table.Cell>
<Chip>number</Chip>
</Table.Cell>
<Table.Cell>
<Chip>0</Chip>
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>paddingY</Chip>
<Chip head>py</Chip>
</Table.Cell>
<Table.Cell>
<Chip>number</Chip>
</Table.Cell>
<Table.Cell>
<Chip>0</Chip>
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>paddingLeft</Chip>
<Chip head>pl</Chip>
</Table.Cell>
<Table.Cell>
<Chip>number</Chip>
</Table.Cell>
<Table.Cell>
<Chip>0</Chip>
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>paddingRight</Chip>
<Chip head>pr</Chip>
</Table.Cell>
<Table.Cell>
<Chip>number</Chip>
</Table.Cell>
<Table.Cell>
<Chip>0</Chip>
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>margin</Chip>
<Chip head>m</Chip>
</Table.Cell>
<Table.Cell>
<Chip>number</Chip>
</Table.Cell>
<Table.Cell>
<Chip>0</Chip>
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>marginX</Chip>
<Chip head>mx</Chip>
</Table.Cell>
<Table.Cell>
<Chip>number</Chip>
</Table.Cell>
<Table.Cell>
<Chip>0</Chip>
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>marginY</Chip>
<Chip head>my</Chip>
</Table.Cell>
<Table.Cell>
<Chip>number</Chip>
</Table.Cell>
<Table.Cell>
<Chip>0</Chip>
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>marginLeft</Chip>
<Chip head>ml</Chip>
</Table.Cell>
<Table.Cell>
<Chip>number</Chip>
</Table.Cell>
<Table.Cell>
<Chip>0</Chip>
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>marginRight</Chip>
<Chip head>mr</Chip>
</Table.Cell>
<Table.Cell>
<Chip>number</Chip>
</Table.Cell>
<Table.Cell>
<Chip>0</Chip>
</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>
<SpacingTable />
</Unstyled>
packages/canon/src/components/box/box.stories.tsx
+36 -54
View File
@@ -16,63 +16,45 @@
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Box } from './box';
import { Box } from './Box';
import { listResponsiveValues } from '../../utils/list-values';
import { responsiveProperties, colorProperties } from './sprinkles.css';
const argTypesResponsive = Object.keys(responsiveProperties.styles)
.filter(
n =>
![
'm',
'mb',
'ml',
'mr',
'mt',
'mx',
'my',
'p',
'pb',
'pl',
'pr',
'pt',
'px',
'py',
].includes(n),
)
.reduce<Record<string, any>>((acc, n) => {
if (
[
'margin',
'marginBottom',
'marginLeft',
'marginRight',
'marginTop',
'marginX',
'marginY',
'padding',
'paddingBottom',
'paddingLeft',
'paddingRight',
'paddingTop',
'paddingX',
'paddingY',
].includes(n)
) {
acc[n] = {
control: 'select',
options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
};
} else {
acc[n] = {
control: 'select',
options: listResponsiveValues(
n as keyof typeof responsiveProperties.styles,
),
};
}
return acc;
}, {});
const argTypesResponsive = Object.keys(responsiveProperties.styles).reduce<
Record<string, any>
>((acc, n) => {
if (
[
'margin',
'marginBottom',
'marginLeft',
'marginRight',
'marginTop',
'marginX',
'marginY',
'padding',
'paddingBottom',
'paddingLeft',
'paddingRight',
'paddingTop',
'paddingX',
'paddingY',
].includes(n)
) {
acc[n] = {
control: 'select',
options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
};
} else {
acc[n] = {
control: 'select',
options: listResponsiveValues(
n as keyof typeof responsiveProperties.styles,
),
};
}
return acc;
}, {});
const argTypesColor = Object.keys(colorProperties.styles).reduce<
Record<string, any>
packages/canon/src/components/box/box.tsx
+3 -2
View File
@@ -32,12 +32,13 @@ export type BoxProps = Parameters<typeof boxSprinkles>[0] &
};
/** @public */
export const Box = ({ as = 'div', className, style, ...props }: BoxProps) => {
export const Box = (props: BoxProps) => {
const { as = 'div', className, style, ...rest } = props;
const boxSprinklesProps: Record<string, unknown> = {};
const nativeProps: Record<string, unknown> = {};
// Split props between sprinkles and native HTML props
Object.entries(props).forEach(([key, value]) => {
Object.entries(rest).forEach(([key, value]) => {
if (value === undefined) return;
if (
packages/canon/src/components/box/docs/padding.tsx
+14 -14
View File
@@ -15,14 +15,14 @@
*/
import React from 'react';
import { Stack } from '../../stack/stack';
import { Inline } from '../../inline/inline';
import { Box } from '../box';
import { Stack } from '../../Stack';
import { Inline } from '../../Inline';
import { Box } from '../Box';
const FakeBox = ({ children }: { children: string }) => (
<Box
px="md"
py="sm"
paddingX="md"
paddingY="sm"
borderRadius="small"
style={{ background: '#1f47ff', color: 'white' }}
>
@@ -35,16 +35,16 @@ export const Padding = () => {
<Stack
align="center"
borderRadius="small"
mb="md"
marginBottom="md"
gap="xl"
py="xl"
paddingY="xl"
style={{ border: '1px solid #e7e7e7' }}
>
<Inline align="center" gap="xl">
<Stack
align="center"
borderRadius="small"
p="md"
padding="md"
style={{ background: '#c4cafb', color: 'white' }}
>
<FakeBox>padding</FakeBox>
@@ -52,7 +52,7 @@ export const Padding = () => {
<Stack
align="center"
borderRadius="small"
px="md"
paddingX="md"
style={{ background: '#c4cafb', color: 'white' }}
>
<FakeBox>paddingX</FakeBox>
@@ -60,7 +60,7 @@ export const Padding = () => {
<Stack
align="center"
borderRadius="small"
py="md"
paddingY="md"
style={{ background: '#c4cafb', color: 'white' }}
>
<FakeBox>paddingY</FakeBox>
@@ -70,7 +70,7 @@ export const Padding = () => {
<Stack
align="center"
borderRadius="small"
pt="md"
paddingTop="md"
style={{ background: '#c4cafb', color: 'white' }}
>
<FakeBox>paddingTop</FakeBox>
@@ -78,7 +78,7 @@ export const Padding = () => {
<Stack
align="center"
borderRadius="small"
pb="md"
paddingBottom="md"
style={{ background: '#c4cafb', color: 'white' }}
>
<FakeBox>paddingBottom</FakeBox>
@@ -86,7 +86,7 @@ export const Padding = () => {
<Stack
align="center"
borderRadius="small"
pl="md"
paddingLeft="md"
style={{ background: '#c4cafb', color: 'white' }}
>
<FakeBox>paddingLeft</FakeBox>
@@ -94,7 +94,7 @@ export const Padding = () => {
<Stack
align="center"
borderRadius="small"
pr="md"
paddingRight="md"
style={{ background: '#c4cafb', color: 'white' }}
>
<FakeBox>paddingRight</FakeBox>
packages/canon/src/components/box/docs/props-table.tsx
-14
View File
@@ -41,13 +41,6 @@ export const PropsTable = () => {
'paddingRight',
'paddingTop',
'paddingBottom',
'p',
'px',
'py',
'pl',
'pr',
'pt',
'pb',
'margin',
'marginX',
'marginY',
@@ -55,13 +48,6 @@ export const PropsTable = () => {
'marginRight',
'marginTop',
'marginBottom',
'm',
'mx',
'my',
'ml',
'mr',
'mt',
'mb',
].includes(n),
)
.map(n => (
packages/canon/src/components/box/index.tsx
+2 -2
View File
@@ -13,6 +13,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export { Box } from './box';
export type { BoxProps } from './box';
export { Box } from './Box';
export type { BoxProps } from './Box';
export { boxSprinkles } from './sprinkles.css';
packages/canon/src/components/box/sprinkles.css.ts
-14
View File
@@ -70,23 +70,9 @@ export const responsiveProperties = defineProperties({
padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],
paddingX: ['paddingLeft', 'paddingRight'],
paddingY: ['paddingTop', 'paddingBottom'],
p: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],
pt: ['paddingTop'],
pr: ['paddingRight'],
pb: ['paddingBottom'],
pl: ['paddingLeft'],
px: ['paddingLeft', 'paddingRight'],
py: ['paddingTop', 'paddingBottom'],
margin: ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'],
marginX: ['marginLeft', 'marginRight'],
marginY: ['marginTop', 'marginBottom'],
m: ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'],
mt: ['marginTop'],
mr: ['marginRight'],
mb: ['marginBottom'],
ml: ['marginLeft'],
mx: ['marginLeft', 'marginRight'],
my: ['marginTop', 'marginBottom'],
},
});
packages/canon/src/components/button/button.stories.tsx
+2 -2
View File
@@ -16,8 +16,8 @@
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './button';
import { Box } from '../box/box';
import { Button } from './Button';
import { Box } from '../Box/Box';
const meta = {
title: 'Components/Button',
packages/canon/src/components/button/button.tsx
+3 -3
View File
@@ -16,9 +16,9 @@
import React from 'react';
import { button } from './button.css';
import { Box } from '../box/box';
import { Icon } from '../icon/icon';
import { IconNames } from '../icon/context';
import { Box } from '../Box/Box';
import { Icon } from '../Icon/Icon';
import { IconNames } from '../Icon/context';
/**
* Properties for {@link Button}
packages/canon/src/components/button/index.tsx
+2 -2
View File
@@ -13,5 +13,5 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export { Button } from './button';
export type { ButtonProps } from './button';
export { Button } from './Button';
export type { ButtonProps } from './Button';
packages/canon/src/components/icon/icon.stories.tsx
+1 -1
View File
@@ -16,7 +16,7 @@
import React from 'react';
import { Meta, StoryObj } from '@storybook/react';
import { Icon } from './icon';
import { Icon } from './Icon';
import { IconProvider } from './context';
import * as LucideIcons from 'lucide-react';
packages/canon/src/components/icon/index.tsx
+1 -1
View File
@@ -14,6 +14,6 @@
* limitations under the License.
*/
export * from './icon';
export * from './Icon';
export { IconProvider } from './context';
export type { IconNames } from './context';
packages/canon/src/components/inline/inline.stories.tsx
+2 -2
View File
@@ -16,8 +16,8 @@
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Inline } from './inline';
import { Box } from '../box/box';
import { Inline } from './Inline';
import { Box } from '../Box/Box';
const meta = {
title: 'Components/Inline',
packages/canon/src/components/inline/inline.tsx
+1 -1
View File
@@ -15,7 +15,7 @@
*/
import React from 'react';
import { Box, BoxProps } from '../box/box';
import { Box, BoxProps } from '../Box/Box';
import { alignToFlexAlign } from '../../utils/align';
export const validInlineComponents = [
packages/canon/src/components/stack/stack.stories.tsx
+2 -2
View File
@@ -16,8 +16,8 @@
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Stack } from './stack';
import { Box } from '../box/box';
import { Stack } from './Stack';
import { Box } from '../Box/Box';
const meta = {
title: 'Components/Stack',
packages/canon/src/components/stack/stack.tsx
+1 -1
View File
@@ -15,7 +15,7 @@
*/
import React from 'react';
import { Box, BoxProps } from '../box/box';
import { Box, BoxProps } from '../Box/Box';
import { alignToFlexAlign } from '../../utils/align';
const validStackComponents = [
packages/canon/src/index.ts
+3 -3
View File
@@ -20,6 +20,6 @@
* @packageDocumentation
*/
export * from './components/button';
export * from './components/box';
export * from './components/icon';
export * from './components/Button';
export * from './components/Box';
export * from './components/Icon';
packages/canon/src/theme/styles.css
+1 -1
View File
@@ -22,4 +22,4 @@
@import './theme.css';
/* Components */
@import '../components/button/styles.css';
@import '../components/Button/styles.css';
packages/canon/src/utils/align.ts
+1 -1
View File
@@ -17,7 +17,7 @@
import {
type OptionalResponsiveValue,
mapResponsiveValue,
} from '../components/box/sprinkles.css';
} from '../components/Box/sprinkles.css';
export type Align = 'left' | 'center' | 'right';
export type AlignY = 'top' | 'center' | 'bottom';
packages/canon/src/utils/list-values.ts
+1 -1
View File
@@ -17,7 +17,7 @@
import {
responsiveProperties,
colorProperties,
} from '../components/box/sprinkles.css';
} from '../components/Box/sprinkles.css';
export const listResponsiveValues = (
value: keyof typeof responsiveProperties.styles,