fix(UI Pattern): design review fixes

packages/ui-pattern-block/src/UIPatternBlock.tsx

@@ -10,9 +10,6 @@ import {
 } from '@frontify/guideline-blocks-settings';
 import { SandpackLayout, SandpackPreview, SandpackPreviewRef, SandpackProvider } from '@codesandbox/sandpack-react';
 
-import 'tailwindcss/tailwind.css';
-import '@frontify/guideline-blocks-settings/styles';
-
 import { Alignment, Height, type Settings, TextAlignment, sandpackThemeValues } from './types';
 import {
     DEFAULT_BLOCK_SETTINGS,
@@ -94,6 +91,7 @@ export const UIPatternBlock = ({ appBridge }: BlockProps): ReactElement => {
         npmDependencies,
         externalDependencies,
         resetFiles,
+        sandpackTheme,
     ];
 
     const onResetFiles = () => {
@@ -187,7 +185,11 @@ export const UIPatternBlock = ({ appBridge }: BlockProps): ReactElement => {
                         ...(hasBorder && getBorderStyles(borderStyle, borderWidth, borderColor)),
                         borderRadius,
                     }}
-                    className="tw-rounded tw-bg-white"
+                    className={joinClassNames([
+                        'tw-rounded tw-bg-white tw-overflow-hidden tw-group',
+                        // Used to hide border-bottom of last elements in component from also applying a border (eg. Accordion.tsx).
+                        hasBorder && 'bordered',
+                    ])}
                 >
                     <SandpackProvider
                         files={templateFiles}
@@ -201,10 +203,7 @@ export const UIPatternBlock = ({ appBridge }: BlockProps): ReactElement => {
                             externalResources: [cssToInject, ...parsedExternalDependencies],
                         }}
                     >
-                        <SandpackLayout
-                            style={{ borderTopRightRadius: borderRadius, borderTopLeftRadius: borderRadius }}
-                            className="tw-flex tw-flex-col"
-                        >
+                        <SandpackLayout className="tw-flex tw-flex-col">
                             {isResponsivePreviewOpen && (
                                 <ResponsivePreview onClose={() => setIsResponsivePreviewOpen(false)} />
                             )}
@@ -217,8 +216,6 @@ export const UIPatternBlock = ({ appBridge }: BlockProps): ReactElement => {
                                         ...getBackgroundColorStyles(backgroundColor),
                                         backgroundImage: 'none',
                                     }),
-                                    borderTopRightRadius: borderRadius,
-                                    borderTopLeftRadius: borderRadius,
                                 }}
                                 showRefreshButton={false}
                                 showOpenInCodeSandbox={false}

packages/ui-pattern-block/src/components/Accordion.tsx

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { FOCUS_VISIBLE_STYLE, IconCaretDown12 } from '@frontify/fondue';
+import { FOCUS_VISIBLE_STYLE_INSET, IconCaretDown12 } from '@frontify/fondue';
 import { joinClassNames } from '@frontify/guideline-blocks-settings';
 import { PropsWithChildren, ReactElement } from 'react';
 
@@ -19,13 +19,16 @@ export const Accordion = ({
     borderRadius,
 }: PropsWithChildren<Props>): ReactElement => {
     return (
-        <div data-test-id="dependency-accordion" className="tw-border-b tw-border-b-line last:tw-border-b-0">
+        <div
+            data-test-id="dependency-accordion"
+            className="tw-border-b tw-border-b-line group-[.bordered]:last:tw-border-b-0"
+        >
             <button
                 aria-expanded={isOpen}
                 className={joinClassNames([
                     'tw-relative focus:tw-z-20 tw-text-s tw-gap-2 tw-w-[calc(100%-32px)] tw-text-text-weak tw-box-content tw-bg-white tw-h-10 tw-px-4 tw-flex tw-items-center',
                     isOpen && 'tw-border-b tw-border-b-line',
-                    FOCUS_VISIBLE_STYLE,
+                    FOCUS_VISIBLE_STYLE_INSET,
                 ])}
                 style={{
                     borderBottomLeftRadius: !isOpen ? borderRadius : undefined,

packages/ui-pattern-block/src/components/Toolbar.tsx

@@ -63,7 +63,8 @@ export const Toolbar = ({
         <div
             data-test-id="ui-pattern-files-toolbar"
             className={joinClassNames([
-                'tw-flex tw-justify-between tw-box-content tw-items-center tw-h-10  tw-px-2 tw-bg-white tw-border-t tw-border-b tw-border-line',
+                'tw-flex tw-justify-between tw-box-content tw-items-center tw-h-10  tw-px-2 tw-bg-white tw-border-t tw-border-line',
+                !isEditorCollapsed && 'tw-border-b',
             ])}
         >
             <div className="tw-flex tw-h-full">
@@ -87,7 +88,7 @@ export const Toolbar = ({
             <div className="tw-flex tw-items-center tw-gap-3 tw-h-full">
                 <div className="tw-flex tw-gap-0.5 tw-items-center">
                     {showSandboxLink && (
-                        <UnstyledOpenInCodeSandboxButton>
+                        <UnstyledOpenInCodeSandboxButton tabIndex={-1}>
                             <ToolbarButton icon={<IconSandBox />} tooltip="Open in CodeSandbox" />
                         </UnstyledOpenInCodeSandboxButton>
                     )}

packages/ui-pattern-block/src/helpers/style.ts

@@ -2,16 +2,24 @@
 
 import { Radius, getBackgroundColorStyles } from '@frontify/guideline-blocks-settings';
 import { Height, Padding, heightValues, paddingValues, radiusValues } from '../types';
-import { type Color, FOCUS_VISIBLE_STYLE } from '@frontify/fondue';
+import { type Color } from '@frontify/fondue';
+
+/* The internal CodeMirror component covers the box-shadow inset styles applied by fondue.
+    To make them visible they are applied to a psuedo element instead. This way they also don't overflow
+    the UI Pattern container which has border radius and "overflow: hidden". */
+
+const FOCUS_VISIBLE_INSET_AFTER =
+    'focus-visible:after:tw-ring-inset focus:tw-z-20 focus-visible:after:tw-absolute focus-visible:after:tw-top-0 focus-visible:after:tw-left-0 focus-visible:after:tw-right-0 focus-visible:after:tw-bottom-0 focus-visible:after:tw-ring-4 focus-visible:after:tw-ring-blue focus-visible:after:tw-ring-offset-2 focus-visible:after:tw-outline-none';
 
 export const EDITOR_CLASSES = {
     'sp-layout': 'tw-gap-0 tw-border-none tw-rounded-none !tw-overflow-visible',
-    'sp-code-editor': 'tw-border-b tw-border-line !tw-overflow-visible',
+    'sp-wrapper': 'tw-border-b tw-border-line group-[.bordered]:last:tw-border-b-0',
+    'sp-editor': 'tw-min-h-[52px] tw-box-content',
     'sp-preview': '!tw-flex-[unset]',
     'sp-preview-container': 'tw-h-full tw-bg-[inherit]',
     'sp-preview-iframe': 'tw-min-h-0 tw-flex-[unset]',
     'sp-loading': 'tw-bg-[inherit]',
-    'sp-cm': `${FOCUS_VISIBLE_STYLE} tw-relative focus:tw-z-20`,
+    'sp-cm': `tw-relative ${FOCUS_VISIBLE_INSET_AFTER}`,
 };
 
 export const getPaddingStyle = (hasCustomPadding: boolean, paddingValue: string, paddingChoice: Padding) => {

packages/ui-pattern-block/src/index.ts

@@ -4,6 +4,10 @@ import { UIPatternBlock } from './UIPatternBlock';
 import { settings } from './settings';
 import { defineBlock } from '@frontify/guideline-blocks-settings';
 
+import 'tailwindcss/tailwind.css';
+import '@frontify/guideline-blocks-settings/styles';
+import '@frontify/fondue/style';
+
 export default defineBlock({
     block: UIPatternBlock,
     settings,

packages/ui-pattern-block/src/settings.ts

@@ -78,6 +78,19 @@ export const settings = defineSettings({
                 },
             ],
         },
+        {
+            id: 'uiPatternBasicsLinks',
+            type: 'sectionHeading',
+            label: 'Links',
+            blocks: [
+                {
+                    id: 'showSandboxLink',
+                    type: 'switch',
+                    defaultValue: false,
+                    label: 'Show sandbox link',
+                },
+            ],
+        },
         {
             id: 'uiPatternBasicsSnippet',
             type: 'sectionHeading',
@@ -106,15 +119,27 @@ export const settings = defineSettings({
             ],
         },
         {
-            id: 'uiPatternBasicsLinks',
+            id: 'uiPatternDependencies',
             type: 'sectionHeading',
-            label: 'Links',
+            label: 'Dependencies',
             blocks: [
                 {
-                    id: 'showSandboxLink',
+                    id: 'showNpmDependencies',
                     type: 'switch',
                     defaultValue: false,
-                    label: 'Show sandbox link',
+                    label: 'Show NPM dependencies',
+                },
+                {
+                    id: 'showExternalDependencies',
+                    type: 'switch',
+                    defaultValue: false,
+                    label: 'Show external dependencies',
+                },
+                {
+                    id: 'shouldCollapseDependenciesByDefault',
+                    type: 'switch',
+                    defaultValue: false,
+                    label: 'Collapse by default',
                 },
             ],
         },
@@ -253,53 +278,18 @@ export const settings = defineSettings({
                 },
             ],
         },
-        {
-            id: 'uiPatternDependencies',
-            type: 'sectionHeading',
-            label: 'Dependencies',
-            blocks: [
-                {
-                    id: 'showNpmDependencies',
-                    type: 'switch',
-                    defaultValue: true,
-                    label: 'Show NPM dependencies',
-                },
-                {
-                    id: 'showExternalDependencies',
-                    type: 'switch',
-                    defaultValue: true,
-                    label: 'Show external dependencies',
-                },
-                {
-                    id: 'shouldCollapseDependenciesByDefault',
-                    type: 'switch',
-                    defaultValue: true,
-                    label: 'Collapse by default',
-                },
-            ],
-        },
     ],
     style: [
         {
             id: 'uiPreviewSection',
             type: 'sectionHeading',
-            blocks: [
-                getBackgroundSettings({ defaultColor: BACKGROUND_COLOR_DEFAULT_VALUE }),
-                getBorderSettings({ defaultColor: BORDER_COLOR_DEFAULT_VALUE, defaultValue: true }),
-                getBorderRadiusSettings({ defaultRadius: Radius.Medium }),
-            ],
-        },
-        {
-            id: 'uiSnippetSection',
-            type: 'sectionHeading',
-            label: 'Snippet',
             blocks: [
                 {
                     id: 'sandpackTheme',
                     type: 'dropdown',
                     defaultValue: SandpackTheme.GithubLight,
                     size: 'small',
-                    label: 'Color scheme',
+                    label: 'Snippet color scheme',
                     choices: [
                         {
                             value: SandpackTheme.Dark,
@@ -357,6 +347,9 @@ export const settings = defineSettings({
                         },
                     ],
                 },
+                getBackgroundSettings({ defaultColor: BACKGROUND_COLOR_DEFAULT_VALUE, label: 'Pattern background' }),
+                getBorderSettings({ defaultColor: BORDER_COLOR_DEFAULT_VALUE, defaultValue: true }),
+                getBorderRadiusSettings({ defaultRadius: Radius.Medium }),
             ],
         },
     ],