diff --git a/packages/canon/src/components/Stack/Stack.props.ts b/packages/canon/src/components/Stack/Stack.props.ts index 5cc7300c5d..3d3a4e220a 100644 --- a/packages/canon/src/components/Stack/Stack.props.ts +++ b/packages/canon/src/components/Stack/Stack.props.ts @@ -17,6 +17,12 @@ import type { PropDef, GetPropDefTypes } from '../../props/prop-def'; const alignValues = ['start', 'center', 'end', 'baseline', 'stretch'] as const; +const directionValues = [ + 'row', + 'column', + 'row-reverse', + 'column-reverse', +] as const; /** @public */ const stackPropDefs = { @@ -25,10 +31,16 @@ const stackPropDefs = { className: 'cu-align', values: alignValues, responsive: true, - default: 'stretch', + }, + direction: { + type: 'enum', + className: 'cu-fd', + values: directionValues, + responsive: true, }, } satisfies { align: PropDef<(typeof alignValues)[number]>; + direction: PropDef<(typeof directionValues)[number]>; }; /** @public */ diff --git a/packages/canon/src/components/Stack/Stack.stories.tsx b/packages/canon/src/components/Stack/Stack.stories.tsx index 0b02849a91..06a2f74565 100644 --- a/packages/canon/src/components/Stack/Stack.stories.tsx +++ b/packages/canon/src/components/Stack/Stack.stories.tsx @@ -65,6 +65,20 @@ export const Default: Story = { }, }; +export const ColumnDirection: Story = { + args: { + direction: 'column', + children: [, , ], + }, +}; + +export const RowDirection: Story = { + args: { + direction: 'row', + children: [, , ], + }, +}; + export const AlignLeft: Story = { render: () => ( diff --git a/packages/canon/src/components/Stack/styles.css b/packages/canon/src/components/Stack/styles.css index 18886e3229..dc8fdd392f 100644 --- a/packages/canon/src/components/Stack/styles.css +++ b/packages/canon/src/components/Stack/styles.css @@ -16,5 +16,4 @@ .canon-Stack { display: flex; - flex-direction: column; } diff --git a/packages/canon/src/components/Stack/types.ts b/packages/canon/src/components/Stack/types.ts index 267845c48a..2ef2299060 100644 --- a/packages/canon/src/components/Stack/types.ts +++ b/packages/canon/src/components/Stack/types.ts @@ -23,6 +23,7 @@ export interface StackProps extends SpaceProps { children: React.ReactNode; gap?: GapProps['gap']; align?: StackOwnProps['align']; + direction?: StackOwnProps['direction']; className?: string; style?: React.CSSProperties; } diff --git a/packages/canon/src/css/components.css b/packages/canon/src/css/components.css index b84ce7702b..39f77847c5 100644 --- a/packages/canon/src/css/components.css +++ b/packages/canon/src/css/components.css @@ -18,7 +18,6 @@ @import '../components/Box/styles.css'; @import '../components/Button/styles.css'; @import '../components/Stack/styles.css'; -@import '../components/Inline/styles.css'; @import '../components/Grid/styles.css'; @import '../components/Container/styles.css'; @import '../components/Icon/styles.css'; diff --git a/packages/canon/src/css/utilities.css b/packages/canon/src/css/utilities.css index aa7136fb94..226e30722b 100644 --- a/packages/canon/src/css/utilities.css +++ b/packages/canon/src/css/utilities.css @@ -14,24 +14,6 @@ * limitations under the License. */ -/* Default utilities */ -@import './utilities/xs.css'; - -/* Min 640px */ -@import './utilities/sm.css'; - -/* Min 768px */ -@import './utilities/md.css'; - -/* Min 1024px */ -@import './utilities/lg.css'; - -/* Min 1280px */ -@import './utilities/xl.css'; - -/* Min 1536px */ -@import './utilities/2xl.css'; - /* Padding */ @import './utilities/p.css'; @import './utilities/pl.css'; diff --git a/packages/canon/src/css/utilities/2xl.css b/packages/canon/src/css/utilities/2xl.css deleted file mode 100644 index 5c152fb86f..0000000000 --- a/packages/canon/src/css/utilities/2xl.css +++ /dev/null @@ -1,164 +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. - */ - -@layer utilities { - @media (min-width: 1536px) { - .cu-2xl-block { - display: block; - } - - .cu-2xl-border-base { - border-color: var(--canon-border); - border-width: 1px; - border-style: solid; - } - - .cu-2xl-border-error { - border-color: var(--canon-border-danger); - border-width: 1px; - border-style: solid; - } - - .cu-2xl-border-none { - border-color: transparent; - border-width: 0; - } - - .cu-2xl-border-selected { - border-color: var(--canon-border-focus); - border-width: 1px; - border-style: solid; - } - - .cu-2xl-border-warning { - border-color: var(--canon-border-warning); - border-width: 1px; - border-style: solid; - } - - .cu-2xl-flex { - display: flex; - } - - .cu-2xl-flex-col { - flex-direction: column; - } - - .cu-2xl-flex-nowrap { - flex-wrap: nowrap; - } - - .cu-2xl-flex-row { - flex-direction: row; - } - - .cu-2xl-flex-wrap { - flex-wrap: wrap; - } - - .cu-2xl-flex-wrap-reverse { - flex-wrap: wrap-reverse; - } - - .cu-2xl-hidden { - display: none; - } - - .cu-2xl-inline { - display: inline; - } - - .cu-2xl-inline-block { - display: inline-block; - } - - .cu-2xl-items-center { - align-items: center; - } - - .cu-2xl-items-end { - align-items: flex-end; - } - - .cu-2xl-items-start { - align-items: flex-start; - } - - .cu-2xl-items-stretch { - align-items: stretch; - } - - .cu-2xl-justify-around { - justify-content: space-around; - } - - .cu-2xl-justify-between { - justify-content: space-between; - } - - .cu-2xl-justify-center { - justify-content: center; - } - - .cu-2xl-justify-end { - justify-content: flex-end; - } - - .cu-2xl-justify-start { - justify-content: flex-start; - } - - .cu-2xl-justify-stretch { - justify-content: stretch; - } - - .cu-2xl-rounded-2xl { - border-radius: var(--canon-radius-full); - } - - .cu-2xl-rounded-2xs { - border-radius: var(--canon-radius-1); - } - - .cu-2xl-rounded-lg { - border-radius: var(--canon-radius-5); - } - - .cu-2xl-rounded-md { - border-radius: var(--canon-radius-4); - } - - .cu-2xl-rounded-none { - border-radius: 0; - } - - .cu-2xl-rounded-sm { - border-radius: var(--canon-radius-3); - } - - .cu-2xl-rounded-xl { - border-radius: var(--canon-radius-6); - } - - .cu-2xl-rounded-xs { - border-radius: var(--canon-radius-2); - } - - .cu-2xl-wrap-reverse { - flex-wrap: wrap-reverse; - } - } -} diff --git a/packages/canon/src/css/utilities/flex.css b/packages/canon/src/css/utilities/flex.css index 209334c23d..fb69f57aee 100644 --- a/packages/canon/src/css/utilities/flex.css +++ b/packages/canon/src/css/utilities/flex.css @@ -10,6 +10,26 @@ align-items: end; } +.cu-align-stretch { + align-items: stretch; +} + +.cu-fd-row { + flex-direction: row; +} + +.cu-fd-column { + flex-direction: column; +} + +.cu-fd-row-reverse { + flex-direction: row-reverse; +} + +.cu-fd-column-reverse { + flex-direction: column-reverse; +} + /* Breakpoint xs */ @media (min-width: 640px) { .xs\:cu-align-start { @@ -23,6 +43,26 @@ .xs\:cu-align-end { align-items: end; } + + .xs\:cu-align-stretch { + align-items: stretch; + } + + .xs\:cu-fd-row { + flex-direction: row; + } + + .xs\:cu-fd-column { + flex-direction: column; + } + + .xs\:cu-fd-row-reverse { + flex-direction: row-reverse; + } + + .xs\:cu-fd-column-reverse { + flex-direction: column-reverse; + } } /* Breakpoint sm */ @@ -38,6 +78,26 @@ .sm\:cu-align-end { align-items: end; } + + .sm\:cu-align-stretch { + align-items: stretch; + } + + .sm\:cu-fd-row { + flex-direction: row; + } + + .sm\:cu-fd-column { + flex-direction: column; + } + + .sm\:cu-fd-row-reverse { + flex-direction: row-reverse; + } + + .sm\:cu-fd-column-reverse { + flex-direction: column-reverse; + } } /* Breakpoint md */ @@ -53,6 +113,26 @@ .md\:cu-align-end { align-items: end; } + + .md\:cu-align-stretch { + align-items: stretch; + } + + .md\:cu-fd-row { + flex-direction: row; + } + + .md\:cu-fd-column { + flex-direction: column; + } + + .md\:cu-fd-row-reverse { + flex-direction: row-reverse; + } + + .md\:cu-fd-column-reverse { + flex-direction: column-reverse; + } } /* Breakpoint lg */ @@ -68,6 +148,26 @@ .lg\:cu-align-end { align-items: end; } + + .lg\:cu-align-stretch { + align-items: stretch; + } + + .lg\:cu-fd-row { + flex-direction: row; + } + + .lg\:cu-fd-column { + flex-direction: column; + } + + .lg\:cu-fd-row-reverse { + flex-direction: row-reverse; + } + + .lg\:cu-fd-column-reverse { + flex-direction: column-reverse; + } } /* Breakpoint xl */ @@ -83,4 +183,24 @@ .xl\:cu-align-end { align-items: end; } + + .xl\:cu-align-stretch { + align-items: stretch; + } + + .xl\:cu-fd-row { + flex-direction: row; + } + + .xl\:cu-fd-column { + flex-direction: column; + } + + .xl\:cu-fd-row-reverse { + flex-direction: row-reverse; + } + + .xl\:cu-fd-column-reverse { + flex-direction: column-reverse; + } } diff --git a/packages/canon/src/css/utilities/lg.css b/packages/canon/src/css/utilities/lg.css deleted file mode 100644 index 179b4a83b2..0000000000 --- a/packages/canon/src/css/utilities/lg.css +++ /dev/null @@ -1,164 +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. - */ - -@layer utilities { - @media (min-width: 1024px) { - .cu-lg-block { - display: block; - } - - .cu-lg-border-base { - border-color: var(--canon-border); - border-width: 1px; - border-style: solid; - } - - .cu-lg-border-error { - border-color: var(--canon-border-danger); - border-width: 1px; - border-style: solid; - } - - .cu-lg-border-none { - border-color: transparent; - border-width: 0; - } - - .cu-lg-border-selected { - border-color: var(--canon-border-focus); - border-width: 1px; - border-style: solid; - } - - .cu-lg-border-warning { - border-color: var(--canon-border-warning); - border-width: 1px; - border-style: solid; - } - - .cu-lg-flex { - display: flex; - } - - .cu-lg-flex-col { - flex-direction: column; - } - - .cu-lg-flex-nowrap { - flex-wrap: nowrap; - } - - .cu-lg-flex-row { - flex-direction: row; - } - - .cu-lg-flex-wrap { - flex-wrap: wrap; - } - - .cu-lg-flex-wrap-reverse { - flex-wrap: wrap-reverse; - } - - .cu-lg-hidden { - display: none; - } - - .cu-lg-inline { - display: inline; - } - - .cu-lg-inline-block { - display: inline-block; - } - - .cu-lg-items-center { - align-items: center; - } - - .cu-lg-items-end { - align-items: flex-end; - } - - .cu-lg-items-start { - align-items: flex-start; - } - - .cu-lg-items-stretch { - align-items: stretch; - } - - .cu-lg-justify-around { - justify-content: space-around; - } - - .cu-lg-justify-between { - justify-content: space-between; - } - - .cu-lg-justify-center { - justify-content: center; - } - - .cu-lg-justify-end { - justify-content: flex-end; - } - - .cu-lg-justify-start { - justify-content: flex-start; - } - - .cu-lg-justify-stretch { - justify-content: stretch; - } - - .cu-lg-rounded-2xl { - border-radius: var(--canon-radius-full); - } - - .cu-lg-rounded-2xs { - border-radius: var(--canon-radius-1); - } - - .cu-lg-rounded-lg { - border-radius: var(--canon-radius-5); - } - - .cu-lg-rounded-md { - border-radius: var(--canon-radius-4); - } - - .cu-lg-rounded-none { - border-radius: 0; - } - - .cu-lg-rounded-sm { - border-radius: var(--canon-radius-3); - } - - .cu-lg-rounded-xl { - border-radius: var(--canon-radius-6); - } - - .cu-lg-rounded-xs { - border-radius: var(--canon-radius-2); - } - - .cu-lg-wrap-reverse { - flex-wrap: wrap-reverse; - } - } -} diff --git a/packages/canon/src/css/utilities/md.css b/packages/canon/src/css/utilities/md.css deleted file mode 100644 index 2cf50dc137..0000000000 --- a/packages/canon/src/css/utilities/md.css +++ /dev/null @@ -1,164 +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. - */ - -@layer utilities { - @media (min-width: 768px) { - .cu-md-block { - display: block; - } - - .cu-md-border-base { - border-color: var(--canon-border); - border-width: 1px; - border-style: solid; - } - - .cu-md-border-error { - border-color: var(--canon-border-danger); - border-width: 1px; - border-style: solid; - } - - .cu-md-border-none { - border-color: transparent; - border-width: 0; - } - - .cu-md-border-selected { - border-color: var(--canon-border-focus); - border-width: 1px; - border-style: solid; - } - - .cu-md-border-warning { - border-color: var(--canon-border-warning); - border-width: 1px; - border-style: solid; - } - - .cu-md-flex { - display: flex; - } - - .cu-md-flex-col { - flex-direction: column; - } - - .cu-md-flex-nowrap { - flex-wrap: nowrap; - } - - .cu-md-flex-row { - flex-direction: row; - } - - .cu-md-flex-wrap { - flex-wrap: wrap; - } - - .cu-md-flex-wrap-reverse { - flex-wrap: wrap-reverse; - } - - .cu-md-hidden { - display: none; - } - - .cu-md-inline { - display: inline; - } - - .cu-md-inline-block { - display: inline-block; - } - - .cu-md-items-center { - align-items: center; - } - - .cu-md-items-end { - align-items: flex-end; - } - - .cu-md-items-start { - align-items: flex-start; - } - - .cu-md-items-stretch { - align-items: stretch; - } - - .cu-md-justify-around { - justify-content: space-around; - } - - .cu-md-justify-between { - justify-content: space-between; - } - - .cu-md-justify-center { - justify-content: center; - } - - .cu-md-justify-end { - justify-content: flex-end; - } - - .cu-md-justify-start { - justify-content: flex-start; - } - - .cu-md-justify-stretch { - justify-content: stretch; - } - - .cu-md-rounded-2xl { - border-radius: var(--canon-radius-full); - } - - .cu-md-rounded-2xs { - border-radius: var(--canon-radius-1); - } - - .cu-md-rounded-lg { - border-radius: var(--canon-radius-5); - } - - .cu-md-rounded-md { - border-radius: var(--canon-radius-4); - } - - .cu-md-rounded-none { - border-radius: 0; - } - - .cu-md-rounded-sm { - border-radius: var(--canon-radius-3); - } - - .cu-md-rounded-xl { - border-radius: var(--canon-radius-6); - } - - .cu-md-rounded-xs { - border-radius: var(--canon-radius-2); - } - - .cu-md-wrap-reverse { - flex-wrap: wrap-reverse; - } - } -} diff --git a/packages/canon/src/css/utilities/xl.css b/packages/canon/src/css/utilities/xl.css deleted file mode 100644 index 0efa83e034..0000000000 --- a/packages/canon/src/css/utilities/xl.css +++ /dev/null @@ -1,164 +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. - */ - -@layer utilities { - @media (min-width: 1280px) { - .cu-xl-block { - display: block; - } - - .cu-xl-border-base { - border-color: var(--canon-border); - border-width: 1px; - border-style: solid; - } - - .cu-xl-border-error { - border-color: var(--canon-border-danger); - border-width: 1px; - border-style: solid; - } - - .cu-xl-border-none { - border-color: transparent; - border-width: 0; - } - - .cu-xl-border-selected { - border-color: var(--canon-border-focus); - border-width: 1px; - border-style: solid; - } - - .cu-xl-border-warning { - border-color: var(--canon-border-warning); - border-width: 1px; - border-style: solid; - } - - .cu-xl-flex { - display: flex; - } - - .cu-xl-flex-col { - flex-direction: column; - } - - .cu-xl-flex-nowrap { - flex-wrap: nowrap; - } - - .cu-xl-flex-row { - flex-direction: row; - } - - .cu-xl-flex-wrap { - flex-wrap: wrap; - } - - .cu-xl-flex-wrap-reverse { - flex-wrap: wrap-reverse; - } - - .cu-xl-hidden { - display: none; - } - - .cu-xl-inline { - display: inline; - } - - .cu-xl-inline-block { - display: inline-block; - } - - .cu-xl-items-center { - align-items: center; - } - - .cu-xl-items-end { - align-items: flex-end; - } - - .cu-xl-items-start { - align-items: flex-start; - } - - .cu-xl-items-stretch { - align-items: stretch; - } - - .cu-xl-justify-around { - justify-content: space-around; - } - - .cu-xl-justify-between { - justify-content: space-between; - } - - .cu-xl-justify-center { - justify-content: center; - } - - .cu-xl-justify-end { - justify-content: flex-end; - } - - .cu-xl-justify-start { - justify-content: flex-start; - } - - .cu-xl-justify-stretch { - justify-content: stretch; - } - - .cu-xl-rounded-2xl { - border-radius: var(--canon-radius-full); - } - - .cu-xl-rounded-2xs { - border-radius: var(--canon-radius-1); - } - - .cu-xl-rounded-lg { - border-radius: var(--canon-radius-5); - } - - .cu-xl-rounded-md { - border-radius: var(--canon-radius-4); - } - - .cu-xl-rounded-none { - border-radius: 0; - } - - .cu-xl-rounded-sm { - border-radius: var(--canon-radius-3); - } - - .cu-xl-rounded-xl { - border-radius: var(--canon-radius-6); - } - - .cu-xl-rounded-xs { - border-radius: var(--canon-radius-2); - } - - .cu-xl-wrap-reverse { - flex-wrap: wrap-reverse; - } - } -} diff --git a/packages/canon/src/index.ts b/packages/canon/src/index.ts index bfe796ff47..3b88ada0ce 100644 --- a/packages/canon/src/index.ts +++ b/packages/canon/src/index.ts @@ -27,7 +27,6 @@ export * from './contexts/canon'; export * from './components/Box'; export * from './components/Grid'; export * from './components/Stack'; -export * from './components/Inline'; export * from './components/Container'; export * from './components/Text'; export * from './components/Heading';