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

Update Box other props

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-01-27 16:59:31 +00:00
parent 722a1a953c
commit 8f1a1d9823
12 changed files with 473 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/canon/src/components/Box/Box.props.ts
+1 -1
View File
@@ -41,7 +41,7 @@ const boxPropDefs = {
*/
display: {
type: 'enum',
className: 'rt-r-display',
className: 'cu-display',
values: displayValues,
responsive: true,
},
packages/canon/src/components/Box/Box.stories.tsx
+41 -22
View File
@@ -37,45 +37,64 @@ const meta = {
export default meta;
type Story = StoryObj<typeof meta>;
const Card = () => {
return (
<div
style={{
width: '64px',
height: '64px',
background: '#eaf2fd',
borderRadius: '4px',
border: '1px solid #2563eb',
color: '#2563eb',
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 = {
args: {
style: {
width: '64px',
height: '64px',
background: '#eaf2fd',
borderRadius: '4px',
border: '1px solid #2563eb',
color: '#2563eb',
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")',
},
children: <Card />,
display: 'inline',
},
};
const CardDisplay = ({ children }: { children?: React.ReactNode }) => {
return (
<div
style={{
padding: '8px',
background: '#eaf2fd',
borderRadius: '4px',
border: '1px solid #2563eb',
color: '#2563eb',
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")',
}}
>
{children}
</div>
);
};
export const Display: Story = {
args: {
style: {
...Default.args?.style,
width: 'auto',
height: 'auto',
padding: '8px',
},
},
render: args => (
<Stack align="center">
<Inline>
<Box display="block" {...args}>
Block
<CardDisplay>Block</CardDisplay>
</Box>
<Box display="inline" {...args}>
Inline
<CardDisplay>Inline</CardDisplay>
</Box>
<Box display="none" {...args}>
None
<CardDisplay>None</CardDisplay>
</Box>
</Inline>
<Box display={{ initial: 'block', md: 'inline' }} {...args}>
Responsive
<CardDisplay>Responsive</CardDisplay>
</Box>
</Stack>
),
packages/canon/src/components/Box/types.ts
-4
View File
@@ -31,10 +31,6 @@ export interface BoxProps extends SpaceProps {
minHeight?: HeightProps['minHeight'];
maxHeight?: HeightProps['maxHeight'];
position?: PositionProps['position'];
top?: PositionProps['top'];
left?: PositionProps['left'];
right?: PositionProps['right'];
bottom?: PositionProps['bottom'];
children?: React.ReactNode;
className?: string;
style?: React.CSSProperties;
packages/canon/src/css/utilities.css
+12
View File
@@ -49,3 +49,15 @@
@import './utilities/mb.css';
@import './utilities/my.css';
@import './utilities/mx.css';
/* Display */
@import './utilities/display.css';
/* Width */
@import './utilities/width.css';
/* Height */
@import './utilities/height.css';
/* Position */
@import './utilities/position.css';
packages/canon/src/css/utilities/display.css
+110
View File
@@ -0,0 +1,110 @@
.cu-display-none {
display: none;
}
.cu-display-inline {
display: inline;
}
.cu-display-inline-block {
display: inline-block;
}
.cu-display-block {
display: block;
}
/* Breakpoint xs */
@media (min-width: 640px) {
.xs\:cu-display-none {
display: none;
}
.xs\:cu-display-inline {
display: inline;
}
.xs\:cu-display-inline-block {
display: inline-block;
}
.xs\:cu-display-block {
display: block;
}
}
/* Breakpoint sm */
@media (min-width: 768px) {
.sm\:cu-display-none {
display: none;
}
.sm\:cu-display-inline {
display: inline;
}
.sm\:cu-display-inline-block {
display: inline-block;
}
.sm\:cu-display-block {
display: block;
}
}
/* Breakpoint md */
@media (min-width: 1024px) {
.md\:cu-display-none {
display: none;
}
.md\:cu-display-inline {
display: inline;
}
.md\:cu-display-inline-block {
display: inline-block;
}
.md\:cu-display-block {
display: block;
}
}
/* Breakpoint lg */
@media (min-width: 1280px) {
.lg\:cu-display-none {
display: none;
}
.lg\:cu-display-inline {
display: inline;
}
.lg\:cu-display-inline-block {
display: inline-block;
}
.lg\:cu-display-block {
display: block;
}
}
/* Breakpoint xl */
@media (min-width: 1536px) {
.xl\:cu-display-none {
display: none;
}
.xl\:cu-display-inline {
display: inline;
}
.xl\:cu-display-inline-block {
display: inline-block;
}
.xl\:cu-display-block {
display: block;
}
}
packages/canon/src/css/utilities/height.css
+86
View File
@@ -0,0 +1,86 @@
.cu-h {
height: var(--height);
}
.cu-min-h {
min-height: var(--min-height);
}
.cu-max-h {
max-height: var(--max-height);
}
/* Breakpoint xs */
@media (min-width: 640px) {
.xs\:cu-h {
height: var(--height);
}
.xs\:cu-min-h {
min-height: var(--min-height);
}
.xs\:cu-max-h {
max-height: var(--max-height);
}
}
/* Breakpoint sm */
@media (min-width: 768px) {
.sm\:cu-h {
height: var(--height);
}
.sm\:cu-min-h {
min-height: var(--min-height);
}
.sm\:cu-max-h {
max-height: var(--max-height);
}
}
/* Breakpoint md */
@media (min-width: 1024px) {
.md\:cu-h {
height: var(--height);
}
.md\:cu-min-h {
min-height: var(--min-height);
}
.md\:cu-max-h {
max-height: var(--max-height);
}
}
/* Breakpoint lg */
@media (min-width: 1280px) {
.lg\:cu-h {
height: var(--height);
}
.lg\:cu-min-h {
min-height: var(--min-height);
}
.lg\:cu-max-h {
max-height: var(--max-height);
}
}
/* Breakpoint xl */
@media (min-width: 1536px) {
.xl\:cu-h {
height: var(--height);
}
.xl\:cu-min-h {
min-height: var(--min-height);
}
.xl\:cu-max-h {
max-height: var(--max-height);
}
}
packages/canon/src/css/utilities/position.css
+134
View File
@@ -0,0 +1,134 @@
.cu-position-absolute {
position: absolute;
}
.cu-position-fixed {
position: fixed;
}
.cu-position-sticky {
position: sticky;
}
.cu-position-relative {
position: relative;
}
.cu-position-static {
position: static;
}
/* Breakpoint xs */
@media (min-width: 640px) {
.xs\:cu-position-absolute {
position: absolute;
}
.xs\:cu-position-fixed {
position: fixed;
}
.xs\:cu-position-sticky {
position: sticky;
}
.xs\:cu-position-relative {
position: relative;
}
.xs\:cu-position-static {
position: static;
}
}
/* Breakpoint sm */
@media (min-width: 768px) {
.sm\:cu-position-absolute {
position: absolute;
}
.sm\:cu-position-fixed {
position: fixed;
}
.sm\:cu-position-sticky {
position: sticky;
}
.sm\:cu-position-relative {
position: relative;
}
.sm\:cu-position-static {
position: static;
}
}
/* Breakpoint md */
@media (min-width: 1024px) {
.md\:cu-position-absolute {
position: absolute;
}
.md\:cu-position-fixed {
position: fixed;
}
.md\:cu-position-sticky {
position: sticky;
}
.md\:cu-position-relative {
position: relative;
}
.md\:cu-position-static {
position: static;
}
}
/* Breakpoint lg */
@media (min-width: 1280px) {
.lg\:cu-position-absolute {
position: absolute;
}
.lg\:cu-position-fixed {
position: fixed;
}
.lg\:cu-position-sticky {
position: sticky;
}
.lg\:cu-position-relative {
position: relative;
}
.lg\:cu-position-static {
position: static;
}
}
/* Breakpoint xl */
@media (min-width: 1536px) {
.xl\:cu-position-absolute {
position: absolute;
}
.xl\:cu-position-fixed {
position: fixed;
}
.xl\:cu-position-sticky {
position: sticky;
}
.xl\:cu-position-relative {
position: relative;
}
.xl\:cu-position-static {
position: static;
}
}
packages/canon/src/css/utilities/width.css
+86
View File
@@ -0,0 +1,86 @@
.cu-w {
width: var(--width);
}
.cu-min-w {
min-width: var(--min-width);
}
.cu-max-w {
max-width: var(--max-width);
}
/* Breakpoint xs */
@media (min-width: 640px) {
.xs\:cu-w {
width: var(--width);
}
.xs\:cu-min-w {
min-width: var(--min-width);
}
.xs\:cu-max-w {
max-width: var(--max-width);
}
}
/* Breakpoint sm */
@media (min-width: 768px) {
.sm\:cu-w {
width: var(--width);
}
.sm\:cu-min-w {
min-width: var(--min-width);
}
.sm\:cu-max-w {
max-width: var(--max-width);
}
}
/* Breakpoint md */
@media (min-width: 1024px) {
.md\:cu-w {
width: var(--width);
}
.md\:cu-min-w {
min-width: var(--min-width);
}
.md\:cu-max-w {
max-width: var(--max-width);
}
}
/* Breakpoint lg */
@media (min-width: 1280px) {
.lg\:cu-w {
width: var(--width);
}
.lg\:cu-min-w {
min-width: var(--min-width);
}
.lg\:cu-max-w {
max-width: var(--max-width);
}
}
/* Breakpoint xl */
@media (min-width: 1536px) {
.xl\:cu-w {
width: var(--width);
}
.xl\:cu-min-w {
min-width: var(--min-width);
}
.xl\:cu-max-w {
max-width: var(--max-width);
}
}
packages/canon/src/props/height.props.ts
+1 -1
View File
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import type { PropDef, GetPropDefTypes } from './prop-def.js';
import type { PropDef, GetPropDefTypes } from './prop-def';
const heightPropDefs = {
/**
packages/canon/src/props/margin.props.ts
+1 -1
View File
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import type { PropDef, GetPropDefTypes } from './prop-def.js';
import type { PropDef, GetPropDefTypes } from './prop-def';
const marginPropDefs = (spacingValues: string[]) =>
({
packages/canon/src/props/position.props.ts
-90
View File
@@ -23,28 +23,6 @@ const positionValues = [
'sticky',
] as const;
const positionEdgeValues = [
'0',
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
'-1',
'-2',
'-3',
'-4',
'-5',
'-6',
'-7',
'-8',
'-9',
] as const;
const positionPropDefs = {
/**
* Sets the CSS **position** property.
@@ -75,76 +53,8 @@ const positionPropDefs = {
* @link
* https://developer.mozilla.org/en-US/docs/Web/CSS/top
*/
top: {
type: 'enum | string',
className: 'cu-top',
customProperties: ['--top'],
values: positionEdgeValues,
responsive: true,
},
/**
* Sets the CSS **right** property.
* Supports space scale values, CSS strings, and responsive objects.
*
* @example
* right="4"
* right="100px"
* right={{ sm: '0', lg: '50%' }}
*
* @link
* https://developer.mozilla.org/en-US/docs/Web/CSS/right
*/
right: {
type: 'enum | string',
className: 'cu-right',
customProperties: ['--right'],
values: positionEdgeValues,
responsive: true,
},
/**
* Sets the CSS **bottom** property.
* Supports space scale values, CSS strings, and responsive objects.
*
* @example
* bottom="4"
* bottom="100px"
* bottom={{ sm: '0', lg: '50%' }}
*
* @link
* https://developer.mozilla.org/en-US/docs/Web/CSS/bottom
*/
bottom: {
type: 'enum | string',
className: 'cu-bottom',
customProperties: ['--bottom'],
values: positionEdgeValues,
responsive: true,
},
/**
* Sets the CSS **left** property.
* Supports space scale values, CSS strings, and responsive objects.
*
* @example
* left="4"
* left="100px"
* left={{ sm: '0', lg: '50%' }}
*
* @link
* https://developer.mozilla.org/en-US/docs/Web/CSS/left
*/
left: {
type: 'enum | string',
className: 'cu-left',
customProperties: ['--left'],
values: positionEdgeValues,
responsive: true,
},
} satisfies {
position: PropDef<(typeof positionValues)[number]>;
top: PropDef<(typeof positionEdgeValues)[number]>;
right: PropDef<(typeof positionEdgeValues)[number]>;
bottom: PropDef<(typeof positionEdgeValues)[number]>;
left: PropDef<(typeof positionEdgeValues)[number]>;
};
// Use all of the imported prop defs to ensure that JSDoc works
packages/canon/src/props/width.props.ts
+1 -1
View File
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import type { GetPropDefTypes, PropDef } from './prop-def.js';
import type { GetPropDefTypes, PropDef } from './prop-def';
const widthPropDefs = {
/**