diff --git a/src/components/CollapsableText/CollapsableText.stories.js b/src/components/CollapsableText/CollapsableText.stories.js index ab1440cfc..1e3272043 100644 --- a/src/components/CollapsableText/CollapsableText.stories.js +++ b/src/components/CollapsableText/CollapsableText.stories.js @@ -48,3 +48,11 @@ export const CustomComponents = () => ( ); + +export const AutoAlignToggleButton = () => ( +
+ + {loremIpsum} + +
+) \ No newline at end of file diff --git a/src/components/CollapsableText/CollapsableText.tsx b/src/components/CollapsableText/CollapsableText.tsx index 7edfdc81c..b850ccaf3 100644 --- a/src/components/CollapsableText/CollapsableText.tsx +++ b/src/components/CollapsableText/CollapsableText.tsx @@ -1,4 +1,5 @@ /* eslint-disable react/no-unused-prop-types */ +import classNames from 'classnames'; import React, { useState, useRef } from 'react'; import { useIntervalRef } from '../../hooks/useIntervalRef'; import Button from '../Button/Button'; @@ -23,6 +24,7 @@ export interface CollapsableTextProps { /** @deprecated maxLength has no effect. Use maxLines instead */ maxLength?: number; maxLines?: number; + autoAlignToggleButton?: boolean; } export default function CollapsableText({ @@ -31,6 +33,7 @@ export default function CollapsableText({ lessLabel = CollapsableText.defaultProps.lessLabel, moreLabel = CollapsableText.defaultProps.moreLabel, maxLines = CollapsableText.defaultProps.maxLines, + autoAlignToggleButton = CollapsableText.defaultProps.autoAlignToggleButton, }: CollapsableTextProps) { const [isCollapsed, setIsCollapsed] = useState(collapsed); const [hideToggle, setHideToggle] = useState(collapsed); @@ -54,12 +57,12 @@ export default function CollapsableText({ const textContainerStyle = isCollapsed ? getEllipsisStyle(maxLines) : undefined; return ( -
+
{children}
{!hideToggle && ( - )} @@ -72,4 +75,5 @@ CollapsableText.defaultProps = { lessLabel: 'Show Less', maxLines: 2, moreLabel: 'Show More', + autoAlignToggleButton: false };