feat(CollapsableText): add autoAlignToggleButton prop to CollapsableText

appfolio · May 9, 2024 · 6d53b0e · 6d53b0e
1 parent 3cf8acd
commit 6d53b0e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/components/CollapsableText/CollapsableText.stories.js b/src/components/CollapsableText/CollapsableText.stories.js
@@ -48,3 +48,11 @@ export const CustomComponents = () => (
     </CollapsableText>
   </div>
 );
+
+export const AutoAlignToggleButton = () => (
+  <div>
+    <CollapsableText autoAlignToggleButton>
+      {loremIpsum}
+    </CollapsableText>
+  </div>
+)
diff --git 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 (
-    <div className="d-inline-flex flex-column align-items-start mw-100">
+    <div className="d-inline-flex bg-sm-primary flex-column align-items-start mw-100">
       <div ref={checkSizeRef} style={textContainerStyle}>
         {children}
       </div>
       {!hideToggle && (
-        <Button color="link" onClick={() => setIsCollapsed((c) => !c)}>
+        <Button color="link" className={classNames({ "align-self-center align-self-sm-auto": autoAlignToggleButton })} onClick={() => setIsCollapsed((c) => !c)}>
           {isCollapsed ? moreLabel : lessLabel}
         </Button>
       )}
@@ -72,4 +75,5 @@ CollapsableText.defaultProps = {
   lessLabel: 'Show Less',
   maxLines: 2,
   moreLabel: 'Show More',
+  autoAlignToggleButton: false
 };