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 && (
-