Prevented button card from overflowing when width exceeds editor (#1164)

Ref https://linear.app/tryghost/issue/DES-160/button-card-in-editor-has-no-max-width
TryGhost · Mar 7, 2024 · 985ab8d · 985ab8d
1 parent fc425d6
commit 985ab8d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/packages/koenig-lexical/src/components/ui/Button.jsx b/packages/koenig-lexical/src/components/ui/Button.jsx
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import clsx from 'clsx';
 
-export function Button({color, dataTestId, href, size, width, rounded, value, placeholder, type = 'button', disabled = false, target, ...other}) {
+export function Button({color, dataTestId, href, size, width, rounded, shrink, value, placeholder, type = 'button', disabled = false, target, ...other}) {
     const Tag = href ? 'a' : 'button';
     const props = {
         type: href ? null : type,
@@ -15,7 +15,8 @@ export function Button({color, dataTestId, href, size, width, rounded, value, pl
     return (
         <Tag
             className={clsx(
-                'not-kg-prose cursor-pointe inline-block shrink-0 text-center font-sans font-medium',
+                'not-kg-prose inline-block grow cursor-pointer text-center font-sans font-medium',
+                (!shrink && 'shrink-0'), // This is for dynamic buttons that need to wrap onto a new line if width exceeds editor width, such as the ButtonCard
                 width === 'regular' || 'w-full',
                 rounded && 'rounded',
                 value ? 'opacity-100' : 'opacity-50',
@@ -31,9 +32,9 @@ export function Button({color, dataTestId, href, size, width, rounded, value, pl
             <span
                 className={clsx(
                     'block',
-                    size === 'small' && 'h-10 px-5 text-md leading-[4rem] md:h-10',
-                    size === 'medium' && 'h-11 px-5 text-[1.6rem] leading-[4.4rem]',
-                    size === 'large' && 'h-12 px-6 text-lg leading-[4.8rem]'
+                    size === 'small' && 'px-5 py-[1rem] text-md leading-[1.4]',
+                    size === 'medium' && 'px-5 py-2 text-[1.6rem]',
+                    size === 'large' && 'px-6 py-3 text-lg leading-[1.35]'
                 )}
                 data-testid={`${dataTestId}-span`}
             >
@@ -60,6 +61,7 @@ Button.defaultProps = {
     size: 'small',
     width: 'regular',
     rounded: true,
+    shrink: false,
     value: '',
     placeholder: 'Add button text',
     disabled: false

diff --git a/packages/koenig-lexical/src/components/ui/cards/ButtonCard.jsx b/packages/koenig-lexical/src/components/ui/cards/ButtonCard.jsx
@@ -34,8 +34,8 @@ export function ButtonCard({
     return (
         <>
             <div className="inline-block w-full">
-                <div className={`my-3 flex h-10 items-center ${isEditing || buttonUrl ? 'opacity-100' : 'opacity-50'} ${alignment === 'left' ? 'justify-start' : 'justify-center'} `} data-testid="button-card">
-                    <Button dataTestId="button-card-btn" href={buttonUrl} placeholder={buttonPlaceholder} value={buttonText} />
+                <div className={`my-3 flex items-center ${isEditing || buttonUrl ? 'opacity-100' : 'opacity-50'} ${alignment === 'left' ? 'justify-start' : 'justify-center'} `} data-testid="button-card">
+                    <Button dataTestId="button-card-btn" href={buttonUrl} placeholder={buttonPlaceholder} shrink={true} value={buttonText} />
                 </div>
             </div>
             <ReadOnlyOverlay />