diff --git a/.changeset/rare-mayflies-shake.md b/.changeset/rare-mayflies-shake.md new file mode 100644 index 00000000..5fa1dee1 --- /dev/null +++ b/.changeset/rare-mayflies-shake.md @@ -0,0 +1,5 @@ +--- +"@telegraph/tag": patch +--- + +max width wrapping for tag diff --git a/packages/tag/src/Tag/Tag.tsx b/packages/tag/src/Tag/Tag.tsx index 356cbd73..c8afe5f5 100644 --- a/packages/tag/src/Tag/Tag.tsx +++ b/packages/tag/src/Tag/Tag.tsx @@ -68,6 +68,8 @@ type TextProps = Omit< const Text = ({ as = "span" as T, + maxW = "40", + style, ...props }: TextProps) => { const context = React.useContext(TagContext); @@ -78,6 +80,13 @@ const Text = ({ color={COLOR.Text[context.variant][context.color]} weight="medium" mr={SPACING.Text[context.size]} + maxW={maxW} + style={{ + whiteSpace: "nowrap", + textOverflow: "ellipsis", + overflow: "hidden", + ...style, + }} {...props} /> ); @@ -201,6 +210,7 @@ const Icon = ({ type DefaultProps = PolymorphicProps & TgphComponentProps> & { icon?: React.ComponentProps; + textProps?: React.ComponentProps; onRemove?: () => void; } & ( // Optionally allow textToCopy only when onCopy is defined | { @@ -221,13 +231,16 @@ const Default = ({ onRemove, onCopy, textToCopy, + textProps = { maxW: "40" }, children, ...props }: DefaultProps) => { return ( {icon && } - {children} + + {children} + {onRemove && (