Merge pull request #554 from prezly/feature/care-4611-updates-to-edit…

…or-block-setting-overlays [CARE-4611] Feature - Tweak various element menus
prezly · Jul 16, 2024 · bb968f5 · bb968f5
2 parents ae07001 + e30669d
commit bb968f5
Show file tree

Hide file tree

Showing 18 changed files with 172 additions and 145 deletions.
diff --git a/packages/slate-editor/src/components/Button/Button.module.scss b/packages/slate-editor/src/components/Button/Button.module.scss
@@ -10,17 +10,13 @@
     cursor: pointer;
     text-decoration: none;
     font-weight: 600;
-    font-size: $font-size-smaller;
+    font-size: $font-size-small;
     color: inherit;
     box-sizing: border-box;
     margin: 0;
     border: $border-size solid transparent;
     padding: $spacing-1 - $border-size;
 
-    &--clear-faded {
-        opacity: 0.5;
-    }
-
     &:not(&.disabled, &:disabled) {
         &:hover,
         &:focus-visible {
@@ -130,8 +126,23 @@
         border-radius: 6px;
     }
 
-    &--noPadding {
+    &--tiny {
         padding: 0;
+        font-size: $font-size-smaller;
+
+        .icon-wrapper {
+            width: $spacing-1-5;
+            height: $spacing-1-5;
+        }
+    }
+
+    &--small {
+        padding: $spacing-half;
+
+        .icon-wrapper {
+            width: $spacing-1-5;
+            height: $spacing-1-5;
+        }
     }
 }
 
@@ -140,8 +151,8 @@
 }
 
 .icon-wrapper {
-    width: $spacing-1-5;
-    height: $spacing-1-5;
+    width: $spacing-2;
+    height: $spacing-2;
     color: inherit;
     opacity: 0.8;
 }
diff --git a/packages/slate-editor/src/components/Button/Button.stories.tsx b/packages/slate-editor/src/components/Button/Button.stories.tsx
@@ -79,10 +79,6 @@ export function Variants() {
                 <Button round>Round</Button>
             </div>
 
-            <div>
-                <Button variant="clear-faded">Clear-faded Round</Button>
-            </div>
-
             <div>
                 <Button variant="underlined">Underlined</Button>
             </div>

diff --git a/packages/slate-editor/src/components/Button/Button.tsx b/packages/slate-editor/src/components/Button/Button.tsx
@@ -6,13 +6,13 @@ import { HStack } from '#components';
 import styles from './Button.module.scss';
 
 interface ButtonBaseProps {
-    variant?: 'primary' | 'secondary' | 'clear' | 'clear-faded' | 'underlined';
+    variant?: 'primary' | 'secondary' | 'clear' | 'underlined';
     icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
     iconPosition?: 'left' | 'right';
     fullWidth?: boolean;
     round?: boolean;
-    noPadding?: boolean;
     disabled?: boolean;
+    size?: 'tiny' | 'small' | 'medium';
 }
 
 interface AsButtonProps extends ButtonBaseProps, React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -32,9 +32,9 @@ export function Button({
     fullWidth,
     type,
     round,
-    noPadding,
     disabled,
     children,
+    size,
     ...attributes
 }: React.PropsWithChildren<ButtonProps>) {
     const Component = type === 'link' ? 'a' : 'button';
@@ -54,14 +54,14 @@ export function Button({
                   }
                 : attributes.onClick,
             className: classNames(attributes.className, styles.button, {
-                [styles['button--clear']]: variant === 'clear' || variant === 'clear-faded',
-                [styles['button--clear-faded']]: variant === 'clear-faded',
+                [styles['button--clear']]: variant === 'clear',
                 [styles['button--primary']]: variant === 'primary',
                 [styles['button--secondary']]: variant === 'secondary',
                 [styles['button--underlined']]: variant === 'underlined',
                 [styles['button--full-width']]: fullWidth,
                 [styles['button--round']]: round,
-                [styles['button--noPadding']]: noPadding,
+                [styles['button--tiny']]: size === 'tiny',
+                [styles['button--small']]: size === 'small',
                 [styles['disabled']]: disabled,
             }),
             type: type !== 'link' ? type : undefined,

diff --git a/packages/slate-editor/src/components/Toolbox/Caption.tsx b/packages/slate-editor/src/components/Toolbox/Caption.tsx
@@ -1,7 +1,21 @@
+import classNames from 'classnames';
 import * as React from 'react';
 
 import styles from './Toolbox.module.scss';
 
-export function Caption(props: React.PropsWithChildren<Record<string, unknown>>) {
-    return <span className={styles.caption}>{props.children}</span>;
+type Props = {
+    children: React.ReactNode;
+    withFullOpacity?: boolean;
+};
+
+export function Caption({ children, withFullOpacity = false }: Props) {
+    return (
+        <span
+            className={classNames(styles.caption, {
+                [styles['caption--full-opacity']]: withFullOpacity,
+            })}
+        >
+            {children}
+        </span>
+    );
 }
diff --git a/packages/slate-editor/src/components/Toolbox/Header.tsx b/packages/slate-editor/src/components/Toolbox/Header.tsx
@@ -14,10 +14,16 @@ interface HeaderProps {
 export function Header(props: React.PropsWithChildren<HeaderProps>) {
     return (
         <div className={styles.header}>
-            <Caption>{props.children}</Caption>
+            <Caption withFullOpacity>{props.children}</Caption>
 
             {props.withCloseButton && (
-                <Button variant="clear" icon={Cross} onClick={props.onCloseClick} round />
+                <Button
+                    variant="clear"
+                    icon={Cross}
+                    onClick={props.onCloseClick}
+                    round
+                    size="small"
+                />
             )}
         </div>
     );

diff --git a/packages/slate-editor/src/components/Toolbox/Toolbox.module.scss b/packages/slate-editor/src/components/Toolbox/Toolbox.module.scss
@@ -5,15 +5,18 @@
     font-size: $font-size-small;
     font-weight: 600;
     opacity: 0.9;
+
+    &--full-opacity {
+        opacity: 1;
+    }
 }
 
 .header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     overflow: hidden;
-    padding: $spacing-1-5 $spacing-1;
-    padding-left: $spacing-2;
+    padding: $spacing-2;
     color: $white;
 }
 

diff --git a/packages/slate-editor/src/components/Toolbox/Toolbox.stories.tsx b/packages/slate-editor/src/components/Toolbox/Toolbox.stories.tsx
@@ -87,8 +87,8 @@ export function WebBookmark() {
                 </Toolbox.Section>
 
                 <Toolbox.Footer>
-                    <Button variant="clear-faded" icon={Delete} fullWidth>
-                        Remove web bookmark
+                    <Button variant="clear" icon={Delete} fullWidth>
+                        Remove
                     </Button>
                 </Toolbox.Footer>
             </Toolbox.Panel>
@@ -263,8 +263,8 @@ export function GallerySettings() {
                 </Toolbox.Section>
 
                 <Toolbox.Footer>
-                    <Button variant="clear-faded" icon={Delete} fullWidth>
-                        Remove gallery
+                    <Button variant="clear" icon={Delete} fullWidth>
+                        Remove
                     </Button>
                 </Toolbox.Footer>
             </Toolbox.Panel>
@@ -295,8 +295,8 @@ export function AttachmentSettings() {
                 </Toolbox.Section>
 
                 <Toolbox.Footer>
-                    <Button variant="clear-faded" icon={Delete} fullWidth>
-                        Remove attachment
+                    <Button variant="clear" icon={Delete} fullWidth>
+                        Remove
                     </Button>
                 </Toolbox.Footer>
             </Toolbox.Panel>
@@ -370,8 +370,8 @@ export function CoverageCard() {
                 </Toolbox.Section>
 
                 <Toolbox.Footer>
-                    <Button variant="clear-faded" icon={Delete} fullWidth>
-                        Remove web bookmark
+                    <Button variant="clear" icon={Delete} fullWidth>
+                        Remove
                     </Button>
                 </Toolbox.Footer>
             </Toolbox.Panel>
@@ -477,8 +477,8 @@ export function ImageSettings() {
                 </Toolbox.Section>
 
                 <Toolbox.Footer>
-                    <Button variant="clear-faded" icon={Delete} fullWidth>
-                        Remove image
+                    <Button variant="clear" icon={Delete} fullWidth>
+                        Remove
                     </Button>
                 </Toolbox.Footer>
             </Toolbox.Panel>

diff --git a/packages/slate-editor/src/extensions/embed/components/EmbedMenu.tsx b/packages/slate-editor/src/extensions/embed/components/EmbedMenu.tsx
@@ -90,20 +90,6 @@ export function EmbedMenu({
         <>
             <Toolbox.Header>Embed settings</Toolbox.Header>
 
-            <Toolbox.Section noPadding>
-                <Button
-                    type="link"
-                    href={url}
-                    target="_blank"
-                    rel="noreferrer"
-                    icon={ExternalLink}
-                    iconPosition="right"
-                    fullWidth
-                >
-                    View
-                </Button>
-            </Toolbox.Section>
-
             {info.length > 0 && (
                 <Toolbox.Section>
                     <InfoText.Structured className={styles.Info}>{info}</InfoText.Structured>
@@ -135,9 +121,23 @@ export function EmbedMenu({
                 </Toolbox.Section>
             )}
 
+            <Toolbox.Section noPadding>
+                <Button
+                    type="link"
+                    href={url}
+                    target="_blank"
+                    rel="noreferrer"
+                    icon={ExternalLink}
+                    iconPosition="right"
+                    fullWidth
+                >
+                    View embed
+                </Button>
+            </Toolbox.Section>
+
             <Toolbox.Footer>
-                <Button variant="clear-faded" icon={Delete} fullWidth onClick={onRemove}>
-                    Remove embed
+                <Button variant="clear" icon={Delete} fullWidth onClick={onRemove}>
+                    Remove
                 </Button>
             </Toolbox.Footer>
         </>

diff --git a/packages/slate-editor/src/extensions/file-attachment/components/FileAttachmentMenu.tsx b/packages/slate-editor/src/extensions/file-attachment/components/FileAttachmentMenu.tsx
@@ -81,6 +81,7 @@ export function FileAttachmentMenu({ element, onEdited, onRemoved }: Props) {
                         variant="primary"
                         fullWidth
                         round
+                        size="small"
                         onClick={handleUpdate}
                         disabled={!isFilenameValid}
                     >
@@ -90,8 +91,8 @@ export function FileAttachmentMenu({ element, onEdited, onRemoved }: Props) {
             </Toolbox.Section>
 
             <Toolbox.Footer>
-                <Button variant="clear-faded" icon={Delete} fullWidth onClick={handleRemove}>
-                    Remove attachment
+                <Button variant="clear" icon={Delete} fullWidth onClick={handleRemove}>
+                    Remove
                 </Button>
             </Toolbox.Footer>
         </Toolbox.Panel>

diff --git a/packages/slate-editor/src/extensions/galleries/components/GalleryMenu.tsx b/packages/slate-editor/src/extensions/galleries/components/GalleryMenu.tsx
@@ -3,7 +3,7 @@ import { GalleryImageSize, GalleryLayout, GalleryPadding } from '@prezly/slate-t
 import React from 'react';
 
 import type { OptionsGroupOption } from '#components';
-import { Button, ButtonGroup, InfoText, OptionsGroup, Toolbox } from '#components';
+import { Button, ButtonGroup, OptionsGroup, Toolbox } from '#components';
 import {
     Add,
     Delete,
@@ -109,12 +109,6 @@ export function GalleryMenu({
                 </ButtonGroup>
             </Toolbox.Section>
 
-            <Toolbox.Section>
-                <InfoText>
-                    Reorder, delete, crop and set image captions in the main image grid.
-                </InfoText>
-            </Toolbox.Section>
-
             {withLayoutOptions && (
                 <Toolbox.Section caption="Gallery width">
                     <OptionsGroup<GalleryLayout>
@@ -146,8 +140,8 @@ export function GalleryMenu({
             </Toolbox.Section>
 
             <Toolbox.Footer>
-                <Button variant="clear-faded" icon={Delete} fullWidth onClick={onDelete}>
-                    Remove gallery
+                <Button variant="clear" icon={Delete} fullWidth onClick={onDelete}>
+                    Remove
                 </Button>
             </Toolbox.Footer>
         </>

diff --git a/packages/slate-editor/src/extensions/image/components/ImageMenu.tsx b/packages/slate-editor/src/extensions/image/components/ImageMenu.tsx
@@ -162,7 +162,7 @@ export function ImageMenu({
             </Toolbox.Section>
 
             {withLayoutOptions && (
-                <Toolbox.Section caption="Image size">
+                <Toolbox.Section caption="Size">
                     <OptionsGroup
                         name="layout"
                         options={IMAGE_LAYOUT_OPTIONS}
@@ -177,7 +177,7 @@ export function ImageMenu({
             )}
 
             {withSizeOptions && (
-                <Toolbox.Section caption="Image size">
+                <Toolbox.Section caption="Size">
                     <OptionsGroup
                         name="width"
                         options={getAvailableSizeOptions(withSizeOptions)}
@@ -190,7 +190,7 @@ export function ImageMenu({
             )}
 
             {withAlignmentOptions && (
-                <Toolbox.Section caption="Image alignment" paddingBottom="3">
+                <Toolbox.Section caption="Alignment" paddingBottom="3">
                     <OptionsGroup
                         disabled={value.layout !== ImageLayout.CONTAINED}
                         name="align"
@@ -231,8 +231,8 @@ export function ImageMenu({
             </Toolbox.Section>
 
             <Toolbox.Footer>
-                <Button variant="clear-faded" icon={Delete} fullWidth onClick={onRemove}>
-                    Remove image
+                <Button variant="clear" icon={Delete} fullWidth onClick={onRemove}>
+                    Remove
                 </Button>
             </Toolbox.Footer>
         </>

diff --git a/packages/slate-editor/src/extensions/inline-contacts/components/InlineContactMenu.tsx b/packages/slate-editor/src/extensions/inline-contacts/components/InlineContactMenu.tsx
@@ -37,8 +37,8 @@ function EditButton(props: { onClick: () => void }) {
 
 function RemoveButton(props: { onClick: () => void }) {
     return (
-        <Button variant="clear-faded" icon={Delete} fullWidth onClick={props.onClick}>
-            Remove contact
+        <Button variant="clear" icon={Delete} fullWidth onClick={props.onClick}>
+            Remove
         </Button>
     );
 }
diff --git a/packages/slate-editor/src/extensions/press-contacts/components/PressContactMenu.tsx b/packages/slate-editor/src/extensions/press-contacts/components/PressContactMenu.tsx
@@ -61,7 +61,7 @@ export function PressContactMenu({ element, onChangeLayout, onRemove, onToggleAv
 
 function RemoveButton(props: { onClick: () => void }) {
     return (
-        <Button variant="clear-faded" icon={Delete} fullWidth onClick={props.onClick}>
+        <Button variant="clear" icon={Delete} fullWidth onClick={props.onClick}>
             Remove
         </Button>
     );
-Original file line number
+Diff line change
@@ Expand Up / @@ -79,10 +79,6 @@ export function Variants() { @@
                     <Button round>Round</Button>
                 </div>
-                <div>
-                    <Button variant="clear-faded">Clear-faded Round</Button>
-                </div>
                 <div>
                     <Button variant="underlined">Underlined</Button>
                 </div>
@@ Expand Down @@