feat: text overflow and text aligns

maxholman · Dec 11, 2022 · 09618cd · 09618cd
1 parent bac9e3f
commit 09618cd
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 4 deletions.
diff --git a/lib/core.css.ts b/lib/core.css.ts
@@ -1,6 +1,20 @@
-import { styleVariants } from '@vanilla-extract/css';
+import { style, StyleRule, styleVariants } from '@vanilla-extract/css';
 import { genericVars } from './design-system.css.js';
 
+export type TextAlign = 'start' | 'end' | 'center';
+
+export const textAlignVariants = styleVariants({
+  start: {
+    textAlign: 'start',
+  },
+  end: {
+    textAlign: 'end',
+  },
+  center: {
+    textAlign: 'center',
+  },
+});
+
 export const marginVariants = styleVariants(genericVars.space, (space) => [
   {
     margin: space,
@@ -45,3 +59,24 @@ export const paddingInlineVariants = styleVariants(
     },
   ],
 );
+
+export type TextOverflow = 'ellipsis' | 'clip';
+
+const textOverflowCssProps: Record<TextOverflow, StyleRule> = {
+  ellipsis: {
+    textOverflow: 'ellipsis',
+  },
+  clip: {
+    textOverflow: 'clip',
+  },
+};
+
+const textOverflowBase = style({
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+});
+
+export const textOverflowVariants = styleVariants(
+  textOverflowCssProps,
+  (value) => [textOverflowBase, value],
+);
diff --git a/lib/core.tsx b/lib/core.tsx
@@ -8,6 +8,10 @@ import {
   paddingBlockVariants,
   paddingInlineVariants,
   paddingVariants,
+  TextAlign,
+  textAlignVariants,
+  TextOverflow,
+  textOverflowVariants,
 } from './core.css.js';
 import { Align, alignItems } from './layout.css.js';
 import { Tooltip } from './tooltip.js';
@@ -32,6 +36,9 @@ export type BoxBasedComponentProps<T extends keyof ReactHTMLAttributesHacked> =
       paddingBlock?: Space | undefined;
       paddingInline?: Space | undefined;
       tooltip?: ReactNode;
+      textAlign?: TextAlign | undefined;
+      textOverflow?: TextOverflow | undefined;
+
       // rounded
     }
   >;
@@ -48,9 +55,11 @@ const BoxInner = <T extends keyof ReactHTMLAttributesHacked = 'div'>(
     padding,
     paddingBlock,
     paddingInline,
+    textAlign,
+    textOverflow,
     tooltip,
     ...props
-  }: BoxBasedComponentProps<T>,
+  }: PropsWithChildren<BoxBasedComponentProps<T>>,
   ref: React.ForwardedRef<ReactHTMLAttributesHacked[T]>,
 ) => {
   const el = createElement(
@@ -66,6 +75,8 @@ const BoxInner = <T extends keyof ReactHTMLAttributesHacked = 'div'>(
           padding && paddingVariants[padding],
           paddingBlock && paddingBlockVariants[paddingBlock],
           paddingInline && paddingInlineVariants[paddingInline],
+          textAlign && textAlignVariants[textAlign],
+          textOverflow && textOverflowVariants[textOverflow],
           className,
         ) || undefined,
       ref,

diff --git a/src/App.tsx b/src/App.tsx
@@ -40,7 +40,9 @@ export const App: FC = () => {
             <Grid>
               <Inline>
                 <FormInputRadioGroup name="color-scheme">
-                  <Heading level="3">Color Scheme</Heading>
+                  <Heading level="3" textOverflow="ellipsis">
+                    Color Scheme
+                  </Heading>
                   <FormInputRadio
                     // inline
                     label="auto"
@@ -63,7 +65,9 @@ export const App: FC = () => {
               </Inline>
               <Inline>
                 <FormInputRadioGroup name="contrast-scheme">
-                  <Heading level="3">Contrast Scheme</Heading>
+                  <Heading level="3" textOverflow="ellipsis">
+                    Contrast Scheme
+                  </Heading>
                   <FormInputRadio
                     // inline
                     label="auto"