Added TextOverflow component.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-basics",
-  "version": "0.119.0",
+  "version": "0.120.0",
   "description": "Everyday components for React",
   "license": "MIT",
   "repository": {

src/components/common/Text.module.css

@@ -21,9 +21,3 @@
 .size-xs {
   font-size: var(--font-size-xs);
 }
-
-.overflow {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}

src/components/common/Text.tsx

@@ -1,23 +1,22 @@
+import { ElementType } from 'react';
 import { CommonProps } from 'components/types';
 import classNames from 'classnames';
 // eslint-disable-next-line css-modules/no-unused-class
 import styles from './Text.module.css';
 
 export interface TextProps extends CommonProps {
+  as?: ElementType;
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-  overflow?: boolean;
 }
 
 export function Text(props: TextProps) {
-  const { className, children, size = '', overflow = false, ...domProps } = props;
+  const { className, children, as = 'span', size = '', ...domProps } = props;
+  const Tag = as;
 
   return (
-    <span
-      {...domProps}
-      className={classNames(className, styles[`size-${size}`], { [styles.overflow]: overflow })}
-    >
+    <Tag {...domProps} className={classNames(className, styles[`size-${size}`])}>
       {children}
-    </span>
+    </Tag>
   );
 }
 

src/components/common/TextOverflow.module.css

@@ -0,0 +1,11 @@
+.wrapper {
+  flex: 1 1 100%;
+  min-width: 0;
+}
+
+.overflow {
+  display: block;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}

src/components/common/TextOverflow.tsx

@@ -0,0 +1,20 @@
+import { ElementType } from 'react';
+import classNames from 'classnames';
+import { CommonProps } from 'components/types';
+import styles from './TextOverflow.module.css';
+
+export interface TextOverflowProps extends CommonProps {
+  as?: ElementType;
+}
+
+export function TextOverflow(props: TextOverflowProps) {
+  const { children, className, ...domProps } = props;
+
+  return (
+    <div {...domProps} className={classNames(styles.wrapper, className)}>
+      <div className={styles.overflow}>{children}</div>
+    </div>
+  );
+}
+
+export default TextOverflow;

src/index.ts

@@ -2,6 +2,7 @@
 export * from 'components/common/Icon';
 export * from 'components/common/Item';
 export * from 'components/common/Text';
+export * from 'components/common/TextOverflow';
 export * from 'components/context/ReactBasicsProvider';
 export * from 'components/form/ActionForm';
 export * from 'components/form/Form';

src/stories/Text.stories.tsx

@@ -27,7 +27,13 @@ const Template: StoryFn<typeof Text> = args => {
 
 export const Basic = makeStory(Template, {
   args: {
-    value: 'value',
     children: 'Text',
   },
 });
+
+export const Overflow = makeStory(Template, {
+  args: {
+    children: 'This is long text that should be cut off.',
+    overflow: true,
+  },
+});

src/stories/TextOverflow.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import { TextOverflow, Text } from '../index';
+import { makeStory } from './utils';
+
+export default {
+  title: 'Common/TextOverflow',
+  component: TextOverflow,
+} as Meta<typeof TextOverflow>;
+
+const Template: StoryFn<typeof Text> = args => {
+  return (
+    <div style={{ width: 140 }}>
+      <TextOverflow>
+        <Text {...args} />
+      </TextOverflow>
+    </div>
+  );
+};
+
+export const Basic = makeStory(Template, {
+  args: {
+    value: 'value',
+    children: 'This is long text that should be cut off.',
+  },
+});