Skip to content

Commit f381c35

Browse files
veekaysveekays
committed
feat(utility-classes): add CSS helper classes
1 parent dc7e6b3 commit f381c35

File tree

12 files changed

+3118
-229
lines changed

12 files changed

+3118
-229
lines changed

‎core/components/css-utilities/Border/Border.story.tsx‎

Lines changed: 443 additions & 81 deletions
Large diffs are not rendered by default.

‎core/components/css-utilities/Display/Display.story.tsx‎

Lines changed: 304 additions & 49 deletions
Large diffs are not rendered by default.

‎core/components/css-utilities/Flex/Flex.story.tsx‎

Lines changed: 355 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,179 @@ export const flex = () => {
176176
className: 'order-last',
177177
properties: 'order: 6 ;',
178178
},
179+
/* New utility classes */
180+
{
181+
className: 'gap-0',
182+
properties: 'gap: 0 ;',
183+
},
184+
{
185+
className: 'gap-1',
186+
properties: 'gap: var(--spacing-2-5) ; /* 1px */',
187+
},
188+
{
189+
className: 'gap-2',
190+
properties: 'gap: var(--spacing-05) ; /* 2px */',
191+
},
192+
{
193+
className: 'gap-3',
194+
properties: 'gap: var(--spacing-10) ; /* 4px */',
195+
},
196+
{
197+
className: 'gap-4',
198+
properties: 'gap: var(--spacing-20) ; /* 8px */',
199+
},
200+
{
201+
className: 'gap-5',
202+
properties: 'gap: var(--spacing-60) ; /* 24px */',
203+
},
204+
{
205+
className: 'row-gap-0',
206+
properties: 'row-gap: 0 ;',
207+
},
208+
{
209+
className: 'row-gap-1',
210+
properties: 'row-gap: var(--spacing-2-5) ; /* 1px */',
211+
},
212+
{
213+
className: 'row-gap-2',
214+
properties: 'row-gap: var(--spacing-05) ; /* 2px */',
215+
},
216+
{
217+
className: 'row-gap-3',
218+
properties: 'row-gap: var(--spacing-10) ; /* 4px */',
219+
},
220+
{
221+
className: 'row-gap-4',
222+
properties: 'row-gap: var(--spacing-20) ; /* 8px */',
223+
},
224+
{
225+
className: 'row-gap-5',
226+
properties: 'row-gap: var(--spacing-60) ; /* 24px */',
227+
},
228+
{
229+
className: 'column-gap-0',
230+
properties: 'column-gap: 0 ;',
231+
},
232+
{
233+
className: 'column-gap-1',
234+
properties: 'column-gap: var(--spacing-2-5) ; /* 1px */',
235+
},
236+
{
237+
className: 'column-gap-2',
238+
properties: 'column-gap: var(--spacing-05) ; /* 2px */',
239+
},
240+
{
241+
className: 'column-gap-3',
242+
properties: 'column-gap: var(--spacing-10) ; /* 4px */',
243+
},
244+
{
245+
className: 'column-gap-4',
246+
properties: 'column-gap: var(--spacing-20) ; /* 8px */',
247+
},
248+
{
249+
className: 'column-gap-5',
250+
properties: 'column-gap: var(--spacing-60) ; /* 24px */',
251+
},
252+
{
253+
className: 'justify-items-start',
254+
properties: 'justify-items: start ;',
255+
},
256+
{
257+
className: 'justify-items-end',
258+
properties: 'justify-items: end ;',
259+
},
260+
{
261+
className: 'justify-items-center',
262+
properties: 'justify-items: center ;',
263+
},
264+
{
265+
className: 'justify-items-stretch',
266+
properties: 'justify-items: stretch ;',
267+
},
268+
{
269+
className: 'justify-self-auto',
270+
properties: 'justify-self: auto ;',
271+
},
272+
{
273+
className: 'justify-self-start',
274+
properties: 'justify-self: start ;',
275+
},
276+
{
277+
className: 'justify-self-end',
278+
properties: 'justify-self: end ;',
279+
},
280+
{
281+
className: 'justify-self-center',
282+
properties: 'justify-self: center ;',
283+
},
284+
{
285+
className: 'justify-self-stretch',
286+
properties: 'justify-self: stretch ;',
287+
},
288+
{
289+
className: 'place-content-center',
290+
properties: 'place-content: center ;',
291+
},
292+
{
293+
className: 'place-content-start',
294+
properties: 'place-content: start ;',
295+
},
296+
{
297+
className: 'place-content-end',
298+
properties: 'place-content: end ;',
299+
},
300+
{
301+
className: 'place-content-between',
302+
properties: 'place-content: space-between ;',
303+
},
304+
{
305+
className: 'place-content-around',
306+
properties: 'place-content: space-around ;',
307+
},
308+
{
309+
className: 'place-content-evenly',
310+
properties: 'place-content: space-evenly ;',
311+
},
312+
{
313+
className: 'place-content-stretch',
314+
properties: 'place-content: stretch ;',
315+
},
316+
{
317+
className: 'place-items-start',
318+
properties: 'place-items: start ;',
319+
},
320+
{
321+
className: 'place-items-end',
322+
properties: 'place-items: end ;',
323+
},
324+
{
325+
className: 'place-items-center',
326+
properties: 'place-items: center ;',
327+
},
328+
{
329+
className: 'place-items-stretch',
330+
properties: 'place-items: stretch ;',
331+
},
332+
{
333+
className: 'place-self-auto',
334+
properties: 'place-self: auto ;',
335+
},
336+
{
337+
className: 'place-self-start',
338+
properties: 'place-self: start ;',
339+
},
340+
{
341+
className: 'place-self-end',
342+
properties: 'place-self: end ;',
343+
},
344+
{
345+
className: 'place-self-center',
346+
properties: 'place-self: center ;',
347+
},
348+
{
349+
className: 'place-self-stretch',
350+
properties: 'place-self: stretch ;',
351+
},
179352
];
180353
return (
181354
<div>
@@ -185,12 +358,7 @@ export const flex = () => {
185358
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full
186359
suite of responsive flexbox utilities.
187360
</Text>
188-
<div
189-
style={{
190-
height: '350px',
191-
}}
192-
className="mt-5 mb-8"
193-
>
361+
<div className="mt-5 mb-8 h-12">
194362
<Card className="h-100">
195363
<Table
196364
data={data}
@@ -204,7 +372,7 @@ export const flex = () => {
204372
</Card>
205373
</div>
206374
<Heading size="m">Examples</Heading>
207-
<Paragraph>Here are some representative examples of these classes:</Paragraph>
375+
<Paragraph appearance="default">Here are some representative examples of these classes:</Paragraph>
208376
&nbsp;
209377
<Heading size="s">
210378
Use .flex-row to set a horizontal direction (the browser default), or .flex-row-reverse to start the horizontal
@@ -289,6 +457,186 @@ export const flex = () => {
289457
<br />
290458
</code>
291459
</div>
460+
&nbsp;
461+
<Heading size="s">Use .gap-* utilities to control the spacing between flex items.</Heading>
462+
&nbsp;
463+
<div className="d-flex gap-3 Utilities-example">
464+
<div className="p-2">Flex item with gap</div>
465+
<div className="p-2">Flex item with gap</div>
466+
<div className="p-2">Flex item with gap</div>
467+
</div>
468+
&nbsp;
469+
<div className="DocPage-codeBlock pb-5 pt-5 pl-5">
470+
<code>
471+
{'<div className="d-flex gap-3">'}
472+
<br />
473+
&nbsp; {'<div className="p-2">Flex item with gap</div>'}
474+
<br />
475+
&nbsp; {'<div className="p-2">Flex item with gap</div>'}
476+
<br />
477+
&nbsp; {'<div className="p-2">Flex item with gap</div>'}
478+
<br />
479+
{'</div>'}
480+
<br />
481+
</code>
482+
<div className="font-size-xs mt-2">{'/* gap-3 applies var(--spacing-10) which equals 4px */'}</div>
483+
</div>
484+
&nbsp;
485+
<Heading size="s">
486+
Use .row-gap-* and .column-gap-* utilities to control the spacing in different directions.
487+
</Heading>
488+
&nbsp;
489+
<div className="d-flex flex-wrap row-gap-3 column-gap-4 Utilities-example">
490+
<div className="p-2">Item with row and column gap</div>
491+
<div className="p-2">Item with row and column gap</div>
492+
<div className="p-2">Item with row and column gap</div>
493+
<div className="p-2">Item with row and column gap</div>
494+
<div className="p-2">Item with row and column gap</div>
495+
<div className="p-2">Item with row and column gap</div>
496+
</div>
497+
&nbsp;
498+
<div className="DocPage-codeBlock pb-5 pt-5 pl-5">
499+
<code>
500+
{'<div className="d-flex flex-wrap row-gap-3 column-gap-4">'}
501+
<br />
502+
&nbsp; {'<div className="p-2">Item with row and column gap</div>'}
503+
<br />
504+
&nbsp; {'<div className="p-2">Item with row and column gap</div>'}
505+
<br />
506+
&nbsp; {'<div className="p-2">Item with row and column gap</div>'}
507+
<br />
508+
&nbsp; {'<div className="p-2">Item with row and column gap</div>'}
509+
<br />
510+
&nbsp; {'<div className="p-2">Item with row and column gap</div>'}
511+
<br />
512+
&nbsp; {'<div className="p-2">Item with row and column gap</div>'}
513+
<br />
514+
{'</div>'}
515+
<br />
516+
</code>
517+
<div className="font-size-xs mt-2">
518+
{'/* row-gap-3 applies var(--spacing-10) which equals 4px */'}
519+
<br />
520+
{'/* column-gap-4 applies var(--spacing-20) which equals 8px */'}
521+
</div>
522+
</div>
523+
&nbsp;
524+
<Heading size="s">Use .justify-items-* utilities to align grid items along their inline axis.</Heading>
525+
&nbsp;
526+
<div className="d-grid justify-items-center Utilities-example grid-cols-3">
527+
<div className="p-2">Centered grid item</div>
528+
<div className="p-2">Centered grid item</div>
529+
<div className="p-2">Centered grid item</div>
530+
</div>
531+
&nbsp;
532+
<div className="DocPage-codeBlock pb-5 pt-5 pl-5">
533+
<code>
534+
{'<div className="d-grid justify-items-center grid-cols-3">'}
535+
<br />
536+
&nbsp; {'<div className="p-2">Centered grid item</div>'}
537+
<br />
538+
&nbsp; {'<div className="p-2">Centered grid item</div>'}
539+
<br />
540+
&nbsp; {'<div className="p-2">Centered grid item</div>'}
541+
<br />
542+
{'</div>'}
543+
<br />
544+
</code>
545+
</div>
546+
&nbsp;
547+
<Heading size="s">Use .justify-self-* utilities to align individual grid items along their inline axis.</Heading>
548+
&nbsp;
549+
<div className="d-grid Utilities-example grid-cols-3">
550+
<div className="p-2 justify-self-start">Start</div>
551+
<div className="p-2 justify-self-center">Center</div>
552+
<div className="p-2 justify-self-end">End</div>
553+
</div>
554+
&nbsp;
555+
<div className="DocPage-codeBlock pb-5 pt-5 pl-5">
556+
<code>
557+
{'<div className="d-grid grid-cols-3">'}
558+
<br />
559+
&nbsp; {'<div className="p-2 justify-self-start">Start</div>'}
560+
<br />
561+
&nbsp; {'<div className="p-2 justify-self-center">Center</div>'}
562+
<br />
563+
&nbsp; {'<div className="p-2 justify-self-end">End</div>'}
564+
<br />
565+
{'</div>'}
566+
<br />
567+
</code>
568+
</div>
569+
&nbsp;
570+
<Heading size="s">
571+
Use .place-content-* utilities as a shorthand for both align-content and justify-content.
572+
</Heading>
573+
&nbsp;
574+
<div className="d-flex flex-wrap place-content-center Utilities-example h-10">
575+
<div className="p-2">Centered content</div>
576+
<div className="p-2">Centered content</div>
577+
<div className="p-2">Centered content</div>
578+
</div>
579+
&nbsp;
580+
<div className="DocPage-codeBlock pb-5 pt-5 pl-5">
581+
<code>
582+
{'<div className="d-flex flex-wrap place-content-center h-10">'}
583+
<br />
584+
&nbsp; {'<div className="p-2">Centered content</div>'}
585+
<br />
586+
&nbsp; {'<div className="p-2">Centered content</div>'}
587+
<br />
588+
&nbsp; {'<div className="p-2">Centered content</div>'}
589+
<br />
590+
{'</div>'}
591+
<br />
592+
</code>
593+
</div>
594+
&nbsp;
595+
<Heading size="s">Use .place-items-* utilities as a shorthand for both align-items and justify-items.</Heading>
596+
&nbsp;
597+
<div className="d-grid place-items-center Utilities-example h-10 grid-cols-3">
598+
<div className="p-2">Centered item</div>
599+
<div className="p-2">Centered item</div>
600+
<div className="p-2">Centered item</div>
601+
</div>
602+
&nbsp;
603+
<div className="DocPage-codeBlock pb-5 pt-5 pl-5">
604+
<code>
605+
{'<div className="d-grid place-items-center h-10 grid-cols-3">'}
606+
<br />
607+
&nbsp; {'<div className="p-2">Centered item</div>'}
608+
<br />
609+
&nbsp; {'<div className="p-2">Centered item</div>'}
610+
<br />
611+
&nbsp; {'<div className="p-2">Centered item</div>'}
612+
<br />
613+
{'</div>'}
614+
<br />
615+
</code>
616+
</div>
617+
&nbsp;
618+
<Heading size="s">Use .place-self-* utilities as a shorthand for both align-self and justify-self.</Heading>
619+
&nbsp;
620+
<div className="d-grid Utilities-example h-10 grid-cols-3">
621+
<div className="p-2 place-self-start">Start</div>
622+
<div className="p-2 place-self-center">Center</div>
623+
<div className="p-2 place-self-end">End</div>
624+
</div>
625+
&nbsp;
626+
<div className="DocPage-codeBlock pb-5 pt-5 pl-5">
627+
<code>
628+
{'<div className="d-grid h-10 grid-cols-3">'}
629+
<br />
630+
&nbsp; {'<div className="p-2 place-self-start">Start</div>'}
631+
<br />
632+
&nbsp; {'<div className="p-2 place-self-center">Center</div>'}
633+
<br />
634+
&nbsp; {'<div className="p-2 place-self-end">End</div>'}
635+
<br />
636+
{'</div>'}
637+
<br />
638+
</code>
639+
</div>
292640
</div>
293641
);
294642
};

0 commit comments

Comments
 (0)