Aligned settings panel styles with Admin-X design system (#1373)

* Aligned settings panel styles with Admin-X design system

REF PLG-187
- Updated settings panel styles as groundwork for adding visibility settings to the settings panel.

* Fixed tests

REF PLG-187

* Updated dark mode styles

REF PLG-187

* Moved HTML card visibility settings to the SettingsPanel

REF PLG-206
- Moved HTML card visibility settings to the SettingsPanel
- Added TabView component
- Removed VisibilityDropdown component

* Updated label typography for settings panel

REF PLG-187

* Reduced spacing between settings panel elements

REF PLG-187

* Updated settings panel typography

REF PLG-187

* Updated settings panel and tab view styling

REF PLG-187

* Refactored SettingsPanel to use TabView

REF PLG-206

* Updated settings panel and tab view

REF PLG-206

* Updated e2e tests for visibility settings

* Fixed e2e tests for visibility settings

* Fixed e2e tests

* Fix paste behaviour test

* Fixed HTML card test

* Fixed HTML card test

* Updated paste behaviour test to match new HTML card structure

packages/koenig-lexical/src/components/DesignSandbox.jsx

@@ -222,7 +222,7 @@ const DesignSandbox = () => {
 
     function CardMenuSection({label, ...props}) {
         return (
-            <div className="mb-2 flex shrink-0 flex-col justify-center px-4 pt-3 text-xs font-medium uppercase tracking-[.06rem] text-grey" style={{minWidth: 'calc(100% - 3.2rem)'}} {...props}>
+            <div className="mb-2 flex shrink-0 flex-col justify-center px-4 pt-3 text-2xs font-medium uppercase tracking-[.06rem] text-grey" style={{minWidth: 'calc(100% - 3.2rem)'}} {...props}>
                 {label}
             </div>
         );
@@ -236,7 +236,7 @@ const DesignSandbox = () => {
                 </div>
                 <div className="flex flex-col">
                     <div className="m-0 ml-4 truncate text-[1.3rem] font-normal leading-[1.333em] tracking-[.02rem] text-grey-900">{label}</div>
-                    <div className="m-0 ml-4 truncate text-xs font-normal leading-[1.333em] tracking-[.02rem] text-grey">{desc}</div>
+                    <div className="m-0 ml-4 truncate text-2xs font-normal leading-[1.333em] tracking-[.02rem] text-grey">{desc}</div>
                 </div>
             </div>
         );

packages/koenig-lexical/src/components/ui/BackgroundImagePicker.jsx

@@ -64,7 +64,7 @@ export function BackgroundImagePicker({onFileChange,
                                             </div>
                                         </>
                                         :
-                                        <button className="group flex h-[120px] w-full cursor-pointer flex-col items-center justify-center rounded-md border border-dashed border-grey-300 bg-grey-50 dark:border-grey-800 dark:bg-grey-900" type="button" onClick={openFilePicker}>
+                                        <button className="group flex h-[120px] w-full cursor-pointer flex-col items-center justify-center rounded-md border border-grey-100 bg-grey-50 dark:border-grey-800 dark:bg-grey-900" type="button" onClick={openFilePicker}>
                                             <FileUploadIcon className="size-5 fill-grey-700 stroke-[3px] transition-all ease-linear group-hover:scale-105" />
                                             <span className="px-1 text-[1.35rem] font-medium text-grey-700">Click to upload background image</span>
                                         </button>

packages/koenig-lexical/src/components/ui/ButtonGroup.jsx

@@ -7,7 +7,7 @@ import {usePreviousFocus} from '../../hooks/usePreviousFocus';
 export function ButtonGroup({buttons = [], selectedName, onClick}) {
     return (
         <div className="flex">
-            <ul className="flex items-center justify-evenly rounded-lg bg-grey-100 font-sans text-md font-normal text-white dark:bg-black">
+            <ul className="flex items-center justify-evenly gap-[.6rem] rounded-lg font-sans text-md font-normal text-white">
                 {buttons.map(({label, name, Icon, dataTestId}) => (
                     <IconButton
                         key={`${name}-${label}`}
@@ -33,13 +33,13 @@ export function IconButton({dataTestId, onClick, label, name, selectedName, Icon
         <li className="mb-0">
             <button
                 aria-label={label}
-                className={`group relative m-[3px] flex h-7 w-8 cursor-pointer items-center justify-center ${isActive ? 'rounded-md bg-white text-black shadow-sm dark:bg-grey-900 dark:text-white' : 'text-grey-700 dark:text-white' } ${Icon || 'text-[1.3rem] font-bold'}`}
+                className={`group relative flex h-7 w-8 cursor-pointer items-center justify-center rounded-lg hover:bg-grey-150 dark:hover:bg-grey-900 ${isActive ? 'bg-grey-150 text-green-600 dark:bg-grey-900 dark:text-white' : 'text-black dark:text-white' } ${Icon || 'text-[1.3rem] font-bold'}`}
                 data-testid={dataTestId}
                 type="button"
                 onClick={handleClick}
                 onMouseDown={handleMousedown}
             >
-                {Icon ? <Icon className="size-4 stroke-2 text-black dark:text-white" /> : label}
+                {Icon ? <Icon className="size-4 stroke-2" /> : label}
                 {(Icon && label) && <Tooltip label={label} />}
             </button>
         </li>

packages/koenig-lexical/src/components/ui/CardVisibilityMessage.jsx

@@ -4,7 +4,7 @@ export function CardVisibilityMessage({message}) {
     }
 
     return (
-        <div className="py-[.6rem] font-sans text-xs font-semibold uppercase leading-8 tracking-normal text-grey dark:text-grey-800" data-testid="visibility-message">
+        <div className="py-[.6rem] font-sans text-2xs font-semibold uppercase leading-8 tracking-normal text-grey dark:text-grey-800" data-testid="visibility-message">
             {message}
         </div>
     );

packages/koenig-lexical/src/components/ui/ColorOptionButtons.jsx

@@ -44,7 +44,7 @@ export function ColorButton({onClick, label, name, color, selectedName}) {
                 onMouseDown={handleMousedown}
             >
                 <span
-                    className={`${color} size-5 rounded-full border-2 border-black/5`}
+                    className={`${color} size-5 rounded-full border border-black/5`}
                 ></span>
             </button>
         </li>

packages/koenig-lexical/src/components/ui/ColorPicker.jsx

@@ -3,7 +3,6 @@ import React, {Fragment, useCallback, useEffect, useRef} from 'react';
 import clsx from 'clsx';
 import {Button} from './Button';
 import {HexColorInput, HexColorPicker} from 'react-colorful';
-import {INPUT_CLASSES} from './Input';
 import {getAccentColor} from '../../utils/getAccentColor';
 
 export function ColorPicker({value, eyedropper, hasTransparentOption, onChange}) {
@@ -79,7 +78,7 @@ export function ColorPicker({value, eyedropper, hasTransparentOption, onChange})
         <div className="mt-2" onMouseDown={stopPropagation} onTouchStart={stopPropagation}>
             <HexColorPicker color={hexValue || '#ffffff'} onChange={onChange} onMouseDown={startUsingColorPicker} onTouchStart={startUsingColorPicker} />
             <div className="mt-3 flex gap-2">
-                <div ref={inputWrapperRef} className={`relative flex w-full items-center ${INPUT_CLASSES}`} onClick={focusHexInputOnClick}>
+                <div ref={inputWrapperRef} className={`relative flex w-full items-center rounded-lg border border-grey-100 bg-grey-100 px-3 py-1.5 font-sans text-sm font-normal text-grey-900 transition-colors placeholder:text-grey-500 focus-within:border-green focus-within:bg-white focus-within:shadow-[0_0_0_2px_rgba(48,207,67,.25)] focus-within:outline-none dark:border-transparent dark:bg-grey-900 dark:text-white dark:selection:bg-grey-800 dark:placeholder:text-grey-700 dark:focus-within:border-green dark:hover:bg-grey-925 dark:focus:bg-grey-925`} onClick={focusHexInputOnClick}>
                     <span className='ml-1 mr-2 text-grey-700'>#</span>
                     <HexColorInput aria-label="Color value" className='z-50 w-full bg-transparent' color={hexValue} onChange={onChange} />
                     {eyedropper && !!window.EyeDropper && (

packages/koenig-lexical/src/components/ui/Dropdown.jsx

@@ -19,8 +19,8 @@ function Item({item, selected, onChange}) {
     };
 
     return (
-        <li key={item.name} className={`${selectionClass} !mb-1 hover:bg-grey-100 dark:hover:bg-grey-950`}>
-            <button className="size-full cursor-pointer px-3 py-1 text-left dark:text-white" data-test-value={item.name} type="button" onMouseDownCapture={event => handleOptionMouseDown(event, item.name)}>{item.label}</button>
+        <li key={item.name} className={`${selectionClass} m-0 hover:bg-grey-100 dark:hover:bg-grey-950`}>
+            <button className="size-full cursor-pointer px-3 py-[7px] text-left dark:text-white" data-test-value={item.name} type="button" onMouseDownCapture={event => handleOptionMouseDown(event, item.name)}>{item.label}</button>
         </li>
     );
 }
@@ -66,15 +66,15 @@ export function Dropdown({value, menu, onChange, dataTestId}) {
     return (
         <div className={`relative ${zIndex} font-sans text-sm font-normal`} data-testid={dataTestId}>
             <button
-                className={`relative w-full cursor-pointer border border-grey-300 px-3 py-2 text-left font-sans font-normal text-grey-900 focus-visible:outline-none dark:border-grey-900 dark:bg-grey-900 dark:text-white dark:placeholder:text-grey-800 ${open ? 'rounded-t-md' : 'rounded-md'}`}
+                className="relative h-9 w-full cursor-pointer rounded-lg border border-grey-150 bg-grey-150 px-3 py-1 pr-5 text-left font-sans font-normal leading-[1.5] text-grey-900 hover:border-grey-100 hover:bg-grey-100 focus-visible:outline-none dark:border-grey-900 dark:bg-grey-900 dark:text-white dark:placeholder:text-grey-800 md:h-[38px] md:py-2"
                 data-testid={`${dataTestId}-value`}
                 type="button"
                 onBlur={handleBlur}
                 onClick={handleOpen}
                 onMouseDownCapture={preventLoseFocus}
             >
                 {trigger}
-                <ArrowIcon className={`absolute right-2 top-4 size-2 text-grey-600 ${open && 'rotate-180'}`} />
+                <ArrowIcon className={`absolute right-3 top-[1.5rem] size-2 text-grey-900 ${open && 'rotate-180'}`} />
             </button>
             {open && (
                 <DropdownContainer>

packages/koenig-lexical/src/components/ui/DropdownContainer.jsx

@@ -11,9 +11,9 @@ import debounce from 'lodash/debounce';
  */
 export function DropdownContainer({
     dataTestId,
-    className = 'z-[-1] max-h-[30vh] w-full overflow-y-auto border border-grey-200 bg-white py-1 shadow dark:border-grey-800 dark:bg-grey-900',
-    placementTopClass = 'top-[2px] -translate-y-full rounded-t-md border-b-0',
-    placementBottomClass = 'mt-[-2px] rounded-b-md border-t-0',
+    className = 'z-[-1] max-h-[30vh] w-full overflow-y-auto bg-white shadow rounded-lg dark:border-grey-800 dark:bg-grey-900',
+    placementTopClass = '-top-0.5 -translate-y-full',
+    placementBottomClass = 'mt-0.5',
     children,
     ...props
 }) {

packages/koenig-lexical/src/components/ui/Input.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export const INPUT_CLASSES = 'rounded-md border border-grey-300 py-2 px-3 font-sans text-sm font-normal text-grey-900 focus:border-green focus:shadow-insetgreen focus-visible:outline-none dark:border-grey-900 dark:bg-grey-900 dark:text-white dark:placeholder:text-grey-700 dark:selection:bg-grey-800';
+export const INPUT_CLASSES = 'h-9 rounded-lg border border-grey-100 bg-grey-100 dark:bg-grey-900 dark:border-transparent dark:focus:border-green dark:hover:bg-grey-925 dark:focus:bg-grey-925 transition-colors px-3 py-1.5 font-sans text-sm font-normal text-grey-900 focus:border-green focus:bg-white focus:shadow-[0_0_0_2px_rgba(48,207,67,.25)] focus-visible:outline-none dark:text-white dark:selection:bg-grey-800 placeholder:text-grey-500 md:h-[38px] md:py-2 dark:placeholder:text-grey-700';
 
 export function Input({autoFocus, className, dataTestId, value, onChange, ...props}) {
     const inputRef = React.useRef(null);

packages/koenig-lexical/src/components/ui/MediaPlaceholder.jsx

@@ -44,14 +44,14 @@ export function MediaPlaceholder({
             className="not-kg-prose size-full" {...props}
             data-testid={dataTestId}
         >
-            <div className={`relative flex h-full items-center justify-center border bg-grey-50 dark:bg-grey-950 ${size === 'xsmall' ? 'before:pb-[12.5%]' : 'before:pb-[62.5%]'} ${borderStyle === 'dashed' ? 'rounded-md border-dashed border-grey/40' : 'border-grey/20 dark:border-grey/10'}`}>
+            <div className={`relative flex h-full items-center justify-center border bg-grey-50 ${size === 'xsmall' ? 'before:pb-[12.5%] dark:bg-grey-900' : 'before:pb-[62.5%] dark:bg-grey-950'} ${borderStyle === 'rounded' ? 'rounded-lg border-grey/20 dark:border-transparent' : 'border-grey/20 dark:border-grey/10'}`}>
                 {isDraggedOver ?
                     <CardText text={`Drop ${multiple ? '\'em' : 'it'} like it's hot 🔥`} /> :
                     <>
                         <button className={`group flex cursor-pointer select-none items-center justify-center ${size === 'xsmall' ? 'p-4' : 'flex-col p-20'}`} name="placeholder-button" type="button" onClick={filePicker}>
                             {(size === 'xsmall' && errors.length > 0) ||
                                 <>
-                                    <Icon className={`shrink-0 opacity-80 transition-all ease-linear hover:scale-105 group-hover:opacity-100 ${size === 'large' ? 'size-20 text-grey' : size === 'small' ? 'size-14 text-grey' : size === 'xsmall' ? 'size-6 text-grey-700' : 'size-16 text-grey'} ${(size === 'xsmall') && desc ? 'mr-3' : ''}`} />
+                                    <Icon className={`shrink-0 opacity-80 transition-all ease-linear hover:scale-105 group-hover:opacity-100 ${size === 'large' ? 'size-20 text-grey' : size === 'small' ? 'size-14 text-grey' : size === 'xsmall' ? 'size-5 text-grey-700' : 'size-16 text-grey'} ${(size === 'xsmall') && desc ? 'mr-3' : ''}`} />
                                     <p className={`flex min-w-[auto] !font-sans !text-sm !font-normal text-grey-700 opacity-80 transition-all group-hover:opacity-100 ${size === 'xsmall' ? '!mt-0' : '!mt-4'}`}>{desc}</p>
                                 </>
                             }
@@ -74,9 +74,9 @@ MediaPlaceholder.propTypes = {
     icon: PropTypes.oneOf(['image', 'gallery', 'video', 'audio', 'file', 'product']),
     desc: PropTypes.string,
     size: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large']),
-    borderStyle: PropTypes.oneOf(['solid', 'dashed'])
+    borderStyle: PropTypes.oneOf(['squared', 'rounded'])
 };
 
 MediaPlaceholder.defaultProps = {
-    borderStyle: 'solid'
+    borderStyle: 'squared'
 };

packages/koenig-lexical/src/components/ui/MediaPlaceholder.stories.jsx

@@ -15,7 +15,7 @@ const story = {
             control: {type: 'select'}
         },
         borderStyle: {
-            options: ['solid', 'dashed'],
+            options: ['squared', 'rounded'],
             control: {type: 'radio'}
         }
     },
@@ -38,54 +38,54 @@ Image.args = {
     icon: 'image',
     desc: 'Click to select an image',
     size: 'medium',
-    borderStyle: 'solid'
+    borderStyle: 'squared'
 };
 
 export const Gallery = Template.bind({});
 Gallery.args = {
     icon: 'gallery',
     desc: 'Click to select up to 9 images',
     size: 'large',
-    borderStyle: 'solid'
+    borderStyle: 'squared'
 };
 
 export const Video = Template.bind({});
 Video.args = {
     icon: 'video',
     desc: 'Click to select a video',
     size: 'medium',
-    borderStyle: 'solid'
+    borderStyle: 'squared'
 };
 
 export const Audio = Template.bind({});
 Audio.args = {
     icon: 'audio',
     desc: 'Click to upload an audio file',
     size: 'xsmall',
-    borderStyle: 'solid'
+    borderStyle: 'squared'
 };
 
 export const File = Template.bind({});
 File.args = {
     icon: 'file',
     desc: 'Click to upload a file',
     size: 'xsmall',
-    borderStyle: 'solid'
+    borderStyle: 'squared'
 };
 
 export const Product = Template.bind({});
 Product.args = {
     icon: 'product',
     desc: 'Click to upload a product image',
     size: 'small',
-    borderStyle: 'solid'
+    borderStyle: 'squared'
 };
 
 export const Error = Template.bind({});
 Error.args = {
     icon: 'video',
     desc: 'Click to select a video',
     size: 'medium',
-    borderStyle: 'solid',
+    borderStyle: 'squared',
     errors: [{message: 'The file type you uploaded is not supported. Please use .MP4, .WEBM, .OGV'}]
 };