From 8f1a1d9823f636c5ef19aa1aeb0917d8ccbb76ea Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 27 Jan 2025 16:59:31 +0000 Subject: [PATCH] Update Box other props Signed-off-by: Charles de Dreuille --- .../canon/src/components/Box/Box.props.ts | 2 +- .../canon/src/components/Box/Box.stories.tsx | 63 +++++--- packages/canon/src/components/Box/types.ts | 4 - packages/canon/src/css/utilities.css | 12 ++ packages/canon/src/css/utilities/display.css | 110 ++++++++++++++ packages/canon/src/css/utilities/height.css | 86 +++++++++++ packages/canon/src/css/utilities/position.css | 134 ++++++++++++++++++ packages/canon/src/css/utilities/width.css | 86 +++++++++++ packages/canon/src/props/height.props.ts | 2 +- packages/canon/src/props/margin.props.ts | 2 +- packages/canon/src/props/position.props.ts | 90 ------------ packages/canon/src/props/width.props.ts | 2 +- 12 files changed, 473 insertions(+), 120 deletions(-) create mode 100644 packages/canon/src/css/utilities/display.css create mode 100644 packages/canon/src/css/utilities/height.css create mode 100644 packages/canon/src/css/utilities/position.css create mode 100644 packages/canon/src/css/utilities/width.css diff --git a/packages/canon/src/components/Box/Box.props.ts b/packages/canon/src/components/Box/Box.props.ts index af444adbf8..68e011ad93 100644 --- a/packages/canon/src/components/Box/Box.props.ts +++ b/packages/canon/src/components/Box/Box.props.ts @@ -41,7 +41,7 @@ const boxPropDefs = { */ display: { type: 'enum', - className: 'rt-r-display', + className: 'cu-display', values: displayValues, responsive: true, }, diff --git a/packages/canon/src/components/Box/Box.stories.tsx b/packages/canon/src/components/Box/Box.stories.tsx index aaa19105cc..c7fc341bf4 100644 --- a/packages/canon/src/components/Box/Box.stories.tsx +++ b/packages/canon/src/components/Box/Box.stories.tsx @@ -37,45 +37,64 @@ const meta = { export default meta; type Story = StoryObj; +const Card = () => { + return ( +
+ ); +}; + 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: , + display: 'inline', }, }; +const CardDisplay = ({ children }: { children?: React.ReactNode }) => { + return ( +
+ {children} +
+ ); +}; + export const Display: Story = { - args: { - style: { - ...Default.args?.style, - width: 'auto', - height: 'auto', - padding: '8px', - }, - }, render: args => ( - Block + Block - Inline + Inline - None + None - Responsive + Responsive ), diff --git a/packages/canon/src/components/Box/types.ts b/packages/canon/src/components/Box/types.ts index dcab30cd22..6105de0a97 100644 --- a/packages/canon/src/components/Box/types.ts +++ b/packages/canon/src/components/Box/types.ts @@ -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; diff --git a/packages/canon/src/css/utilities.css b/packages/canon/src/css/utilities.css index b935a95ae0..81e862d7e1 100644 --- a/packages/canon/src/css/utilities.css +++ b/packages/canon/src/css/utilities.css @@ -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'; diff --git a/packages/canon/src/css/utilities/display.css b/packages/canon/src/css/utilities/display.css new file mode 100644 index 0000000000..8c353730ca --- /dev/null +++ b/packages/canon/src/css/utilities/display.css @@ -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; + } +} diff --git a/packages/canon/src/css/utilities/height.css b/packages/canon/src/css/utilities/height.css new file mode 100644 index 0000000000..130dfc5020 --- /dev/null +++ b/packages/canon/src/css/utilities/height.css @@ -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); + } +} diff --git a/packages/canon/src/css/utilities/position.css b/packages/canon/src/css/utilities/position.css new file mode 100644 index 0000000000..764ada623b --- /dev/null +++ b/packages/canon/src/css/utilities/position.css @@ -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; + } +} diff --git a/packages/canon/src/css/utilities/width.css b/packages/canon/src/css/utilities/width.css new file mode 100644 index 0000000000..f4f10c9416 --- /dev/null +++ b/packages/canon/src/css/utilities/width.css @@ -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); + } +} diff --git a/packages/canon/src/props/height.props.ts b/packages/canon/src/props/height.props.ts index 337a91001e..a4c2c3f87f 100644 --- a/packages/canon/src/props/height.props.ts +++ b/packages/canon/src/props/height.props.ts @@ -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 = { /** diff --git a/packages/canon/src/props/margin.props.ts b/packages/canon/src/props/margin.props.ts index 15d8a8fc2b..69baf08ab7 100644 --- a/packages/canon/src/props/margin.props.ts +++ b/packages/canon/src/props/margin.props.ts @@ -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[]) => ({ diff --git a/packages/canon/src/props/position.props.ts b/packages/canon/src/props/position.props.ts index 248141221e..7c7e0b3b28 100644 --- a/packages/canon/src/props/position.props.ts +++ b/packages/canon/src/props/position.props.ts @@ -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 diff --git a/packages/canon/src/props/width.props.ts b/packages/canon/src/props/width.props.ts index bb1d92249b..2f549012f7 100644 --- a/packages/canon/src/props/width.props.ts +++ b/packages/canon/src/props/width.props.ts @@ -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 = { /**