diff --git a/.changeset/config.json b/.changeset/config.json index 6e61746429..5a7d6018da 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -7,6 +7,7 @@ } ], "ignore": [ + "@contentful/f36-workbench", "@contentful/f36-navlist", "@contentful/f36-website" ], @@ -53,4 +54,4 @@ "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": { "onlyUpdatePeerDependentsWhenOutOfRange": true } -} \ No newline at end of file +} diff --git a/package-lock.json b/package-lock.json index 1aff410bb1..9b60cdd46b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38521,7 +38521,7 @@ }, "packages/components/workbench": { "name": "@contentful/f36-workbench", - "version": "4.21.0", + "version": "4.22.0-beta.5", "license": "MIT", "dependencies": { "@contentful/f36-button": "^4.21.4", @@ -42106,20 +42106,6 @@ "wait-on": "^6.0.0" } }, - "packages/website/node_modules/@contentful/f36-navlist": { - "version": "4.1.0-alpha.0", - "resolved": "https://registry.npmjs.org/@contentful/f36-navlist/-/f36-navlist-4.1.0-alpha.0.tgz", - "integrity": "sha512-WhDyhD6yVpT5QrXWBtuNMvfLRbVLFejdswhx/1jXYyEuLvEIMEs4KQ6QTdEkdhmqIED45ndFs1MD+Wwxc0Vl2A==", - "dependencies": { - "@contentful/f36-core": "^4.0.0", - "@contentful/f36-tokens": "^4.0.0", - "emotion": "^10.0.17" - }, - "peerDependencies": { - "react": ">=16.8", - "react-dom": ">=16.8" - } - }, "packages/website/node_modules/@mdx-js/loader": { "version": "2.1.5", "license": "MIT", @@ -47965,15 +47951,6 @@ "wait-on": "^6.0.0" }, "dependencies": { - "@contentful/f36-navlist": { - "version": "https://registry.npmjs.org/@contentful/f36-navlist/-/f36-navlist-4.1.0-alpha.0.tgz", - "integrity": "sha512-WhDyhD6yVpT5QrXWBtuNMvfLRbVLFejdswhx/1jXYyEuLvEIMEs4KQ6QTdEkdhmqIED45ndFs1MD+Wwxc0Vl2A==", - "requires": { - "@contentful/f36-core": "^4.0.0", - "@contentful/f36-tokens": "^4.0.0", - "emotion": "^10.0.17" - } - }, "@mdx-js/loader": { "version": "2.1.5", "requires": { @@ -48379,7 +48356,7 @@ "@emotion/memoize": "0.7.4", "@emotion/unitless": "0.7.5", "@emotion/utils": "0.11.3", - "csstype": "^2.5.7" + "csstype": "3.1.1" } }, "@emotion/sheet": { @@ -50513,7 +50490,7 @@ "ts-dedent": "^2.0.0", "url-loader": "^4.1.1", "util-deprecate": "^1.0.2", - "webpack": "4", + "webpack": "5", "webpack-dev-middleware": "^3.7.3", "webpack-filter-warnings-plugin": "^1.2.1", "webpack-hot-middleware": "^2.25.1", @@ -50683,7 +50660,7 @@ "telejson": "^6.0.8", "ts-dedent": "^2.0.0", "util-deprecate": "^1.0.2", - "webpack": "4" + "webpack": "5" }, "dependencies": { "cosmiconfig": { @@ -51971,7 +51948,7 @@ "ts-dedent": "^2.0.0", "util-deprecate": "^1.0.2", "watchpack": "^2.2.0", - "webpack": "4", + "webpack": "5", "ws": "^8.2.3", "x-default-browser": "^0.4.0" }, @@ -52176,7 +52153,7 @@ "telejson": "^6.0.8", "ts-dedent": "^2.0.0", "util-deprecate": "^1.0.2", - "webpack": "4" + "webpack": "5" } }, "@storybook/core-events": { @@ -52377,7 +52354,7 @@ "ts-dedent": "^2.0.0", "url-loader": "^4.1.1", "util-deprecate": "^1.0.2", - "webpack": "4", + "webpack": "5", "webpack-dev-middleware": "^3.7.3", "webpack-virtual-modules": "^0.2.2" }, @@ -52582,7 +52559,7 @@ "telejson": "^6.0.8", "ts-dedent": "^2.0.0", "util-deprecate": "^1.0.2", - "webpack": "4" + "webpack": "5" } }, "@storybook/core-events": { @@ -53421,7 +53398,7 @@ "telejson": "^6.0.8", "ts-dedent": "^2.0.0", "util-deprecate": "^1.0.2", - "webpack": "4" + "webpack": "5" } }, "@storybook/node-logger": { diff --git a/packages/components/workbench/package.json b/packages/components/workbench/package.json index 81bf2d3daf..6d4405a0ad 100644 --- a/packages/components/workbench/package.json +++ b/packages/components/workbench/package.json @@ -1,6 +1,6 @@ { "name": "@contentful/f36-workbench", - "version": "4.21.0", + "version": "4.22.0-beta.5", "description": "Forma 36: Workbench component", "scripts": { "build": "tsup" diff --git a/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts b/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts index bf60cef310..a5eea009c3 100644 --- a/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts +++ b/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts @@ -1,46 +1,56 @@ import { css } from 'emotion'; import tokens from '@contentful/f36-tokens'; -export const getWorkbenchHeaderStyles = (hasBackButton = false) => ({ +export const getWorkbenchHeaderStyles = () => ({ workbenchHeader: css([ { display: 'flex', alignItems: 'center', flexShrink: 0, width: '100%', - height: '70px', - padding: `0 ${tokens.spacingL}`, - borderBottom: `1px solid ${tokens.gray300}`, + height: '56px', + padding: `${tokens.spacingM} ${tokens.spacingS}`, + borderBottom: `1px solid ${tokens.gray200}`, backgroundColor: tokens.gray100, zIndex: tokens.zIndexWorkbenchHeader, boxSizing: 'border-box', }, - hasBackButton && { paddingLeft: 0 }, ]), flexGrow: css({ flexGrow: 1, }), + title: css({ + color: tokens.gray900, + }), description: css({ - color: tokens.gray700, + color: tokens.gray500, textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden', flexGrow: 1, }), - backButton: css({ - borderRight: `1px solid ${tokens.gray200}`, - marginRight: tokens.spacingM, - borderRadius: 0, - height: '100%', - '& svg': { - fill: tokens.gray400, - }, - '&:focus': { - boxShadow: `inset ${tokens.glowPrimary}`, - }, - // This overwrite is necessary because the transparent button hover and the workbench header have the same bg color - '&:hover': { + separator: css({ + height: tokens.spacingXl, + position: 'relative', + width: tokens.spacingXs, + + '&::after': { backgroundColor: tokens.gray200, + content: '""', + display: 'block', + height: '16px', + position: 'absolute', + left: '50%', + top: '50%', + width: '1px', + transform: 'translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 18deg)', }, }), + minWidthZero: css({ + minWidth: '0', + }), + icon: css({ + display: 'flex', + flexShrink: 0, + }), }); diff --git a/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.tsx b/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.tsx index 1705b0c301..69a6bdc07a 100644 --- a/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.tsx +++ b/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.tsx @@ -4,10 +4,10 @@ import React, { type ReactNode, } from 'react'; import { cx } from 'emotion'; -import { Box, type CommonProps } from '@contentful/f36-core'; -import { Heading, Paragraph } from '@contentful/f36-typography'; +import { Flex, type CommonProps } from '@contentful/f36-core'; +import { Paragraph, Subheading } from '@contentful/f36-typography'; import type { IconComponent } from '@contentful/f36-icon'; -import { ChevronLeftIcon } from '@contentful/f36-icons'; +import { ArrowBackwardIcon } from '@contentful/f36-icons'; import { IconButton } from '@contentful/f36-button'; import { getWorkbenchHeaderStyles } from './WorkbenchHeader.styles'; @@ -35,7 +35,7 @@ export const WorkbenchHeader = ({ testId = 'cf-ui-workbench-header', }: WorkbenchHeaderProps) => { const hasBackButton = Boolean(onBack); - const styles = getWorkbenchHeaderStyles(hasBackButton); + const styles = getWorkbenchHeaderStyles(); const iconComponent = Icon === undefined ? null : isValidElement(Icon) ? Icon : ; @@ -47,6 +47,7 @@ export const WorkbenchHeader = ({ {description} @@ -66,29 +67,36 @@ export const WorkbenchHeader = ({ aria-label="Back" testId="workbench-back-btn" variant="transparent" - className={styles.backButton} onClick={() => onBack()} - icon={} + size="small" + icon={} /> )} - {Icon && ( - - {iconComponent} - - )} - - {typeof title === 'string' ? ( - + {hasBackButton &&
} + - {title} - - ) : ( - title - )} + {Icon && {iconComponent}} + + {typeof title === 'string' ? ( + + {title} + + ) : ( + title + )} + + {description && renderDescription(description)} diff --git a/packages/components/workbench/stories/Workbench.stories.tsx b/packages/components/workbench/stories/Workbench.stories.tsx index 391bf5946f..155a619f0b 100644 --- a/packages/components/workbench/stories/Workbench.stories.tsx +++ b/packages/components/workbench/stories/Workbench.stories.tsx @@ -302,7 +302,7 @@ export const HeaderOverview = () => { title={ Page title{' '} - + } /> @@ -315,7 +315,7 @@ export const HeaderOverview = () => { } + description={} />