From 9fe2214380ff240b036b25ac1a90d89c4c6a09d6 Mon Sep 17 00:00:00 2001 From: Renato Massao Yonamine Date: Wed, 19 Apr 2023 10:44:24 +0200 Subject: [PATCH 01/16] feat: update workbench header styles --- .../WorkbenchHeader/WorkbenchHeader.styles.ts | 36 +++++------ .../src/WorkbenchHeader/WorkbenchHeader.tsx | 60 ++++++++++--------- 2 files changed, 47 insertions(+), 49 deletions(-) diff --git a/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts b/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts index bf60cef310..d7adeb8495 100644 --- a/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts +++ b/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts @@ -1,46 +1,40 @@ 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}`, + height: '56px', + padding: `${tokens.spacingM} ${tokens.spacingXs}`, borderBottom: `1px solid ${tokens.gray300}`, - backgroundColor: tokens.gray100, + backgroundColor: tokens.colorWhite, 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': { - backgroundColor: tokens.gray200, - }, + separator: css({ + backgroundColor: tokens.gray200, + height: '16px', + width: '1px', + display: 'inline', + transform: 'rotate3d(0, 0, 1, 18deg)', + margin: `0 ${tokens.spacing2Xs}`, }), }); diff --git a/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.tsx b/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.tsx index 1705b0c301..b810c260ca 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} @@ -62,33 +63,36 @@ export const WorkbenchHeader = ({ data-test-id={testId} > {hasBackButton && ( - onBack()} - icon={} - /> + <> + onBack()} + size="small" + icon={} + /> +
+ )} - {Icon && ( - - {iconComponent} - - )} + + {Icon && iconComponent} - {typeof title === 'string' ? ( - - {title} - - ) : ( - title - )} + {typeof title === 'string' ? ( + + {title} + + ) : ( + title + )} + {description && renderDescription(description)} From d6616bef683c458d3af06e7da08be426b24d061b Mon Sep 17 00:00:00 2001 From: Renato Massao Yonamine Date: Wed, 19 Apr 2023 10:58:37 +0200 Subject: [PATCH 02/16] feat: update border bottom color --- .../workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts b/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts index d7adeb8495..c866836324 100644 --- a/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts +++ b/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts @@ -10,7 +10,7 @@ export const getWorkbenchHeaderStyles = () => ({ width: '100%', height: '56px', padding: `${tokens.spacingM} ${tokens.spacingXs}`, - borderBottom: `1px solid ${tokens.gray300}`, + borderBottom: `1px solid ${tokens.gray200}`, backgroundColor: tokens.colorWhite, zIndex: tokens.zIndexWorkbenchHeader, boxSizing: 'border-box', From 50a63cf7344d222131fca8a964bc9421c6b4cecc Mon Sep 17 00:00:00 2001 From: Renato Massao Yonamine Date: Wed, 19 Apr 2023 15:25:51 +0200 Subject: [PATCH 03/16] refactor: use small arrow backward icon for back button --- .../workbench/src/WorkbenchHeader/WorkbenchHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.tsx b/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.tsx index b810c260ca..3fbe267f35 100644 --- a/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.tsx +++ b/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.tsx @@ -70,7 +70,7 @@ export const WorkbenchHeader = ({ variant="transparent" onClick={() => onBack()} size="small" - icon={} + icon={} />
From e648592082ab9dc1ef2fba9317e6a9f8f70dd75b Mon Sep 17 00:00:00 2001 From: Renato Massao Yonamine Date: Wed, 19 Apr 2023 15:26:30 +0200 Subject: [PATCH 04/16] refactor: update stories to use tiny icon size --- packages/components/workbench/stories/Workbench.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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={} /> From 91ae77b85182d8c756afef6b0abc4487f55391b5 Mon Sep 17 00:00:00 2001 From: Renato Massao Yonamine Date: Fri, 21 Apr 2023 12:00:49 +0200 Subject: [PATCH 05/16] feat: update workbench header styling --- .../WorkbenchHeader/WorkbenchHeader.styles.ts | 22 +++++++--- .../src/WorkbenchHeader/WorkbenchHeader.tsx | 41 +++++++++---------- 2 files changed, 36 insertions(+), 27 deletions(-) diff --git a/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts b/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts index c866836324..c913840716 100644 --- a/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts +++ b/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts @@ -30,11 +30,21 @@ export const getWorkbenchHeaderStyles = () => ({ flexGrow: 1, }), separator: css({ - backgroundColor: tokens.gray200, - height: '16px', - width: '1px', - display: 'inline', - transform: 'rotate3d(0, 0, 1, 18deg)', - margin: `0 ${tokens.spacing2Xs}`, + height: tokens.spacingXl, + marginLeft: `-${tokens.spacingXs}`, + 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)', + }, }), }); diff --git a/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.tsx b/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.tsx index 3fbe267f35..0999581b14 100644 --- a/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.tsx +++ b/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.tsx @@ -63,35 +63,34 @@ export const WorkbenchHeader = ({ data-test-id={testId} > {hasBackButton && ( - <> - onBack()} - size="small" - icon={} - /> -
- + onBack()} + size="small" + icon={} + /> )} - {Icon && iconComponent} + {hasBackButton &&
} + + {Icon && iconComponent} - {typeof title === 'string' ? ( - - {title} - - ) : ( - title - )} + {typeof title === 'string' ? ( + + {title} + + ) : ( + title + )} + {description && renderDescription(description)} From b90b0237962d122ceb082017276ed30897c99bf5 Mon Sep 17 00:00:00 2001 From: Renato Massao Yonamine Date: Fri, 21 Apr 2023 12:04:27 +0200 Subject: [PATCH 06/16] chore: make workbench beta release --- .changeset/config.json | 7 +++++-- packages/components/workbench/package.json | 2 +- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/.changeset/config.json b/.changeset/config.json index 57313d972d..0cef325c54 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -6,7 +6,10 @@ "repo": "contentful/forma-36" } ], - "ignore": ["@contentful/f36-website"], + "ignore": [ + "@contentful/f36-workbench", + "@contentful/f36-website" + ], "commit": false, "fixed": [ [ @@ -49,4 +52,4 @@ "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": { "onlyUpdatePeerDependentsWhenOutOfRange": true } -} +} \ No newline at end of file diff --git a/packages/components/workbench/package.json b/packages/components/workbench/package.json index 81bf2d3daf..283e8e39c9 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.0", "description": "Forma 36: Workbench component", "scripts": { "build": "tsup" From daf1d8d59c49ae6d932f637e7ad58dceef9495b2 Mon Sep 17 00:00:00 2001 From: Renato Massao Yonamine Date: Fri, 21 Apr 2023 14:12:43 +0200 Subject: [PATCH 07/16] chore: bump beta version of workbench --- packages/components/workbench/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/workbench/package.json b/packages/components/workbench/package.json index 283e8e39c9..b10a31cb73 100644 --- a/packages/components/workbench/package.json +++ b/packages/components/workbench/package.json @@ -1,6 +1,6 @@ { "name": "@contentful/f36-workbench", - "version": "4.22.0-beta.0", + "version": "4.22.0-beta.1", "description": "Forma 36: Workbench component", "scripts": { "build": "tsup" From 7ee7c27fc49febd46e7b3ca0916e2fba89457246 Mon Sep 17 00:00:00 2001 From: Renato Massao Yonamine Date: Fri, 21 Apr 2023 14:18:17 +0200 Subject: [PATCH 08/16] feat: update padding on workbench header --- .../workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts b/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts index c913840716..1d72e50f5f 100644 --- a/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts +++ b/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts @@ -9,7 +9,7 @@ export const getWorkbenchHeaderStyles = () => ({ flexShrink: 0, width: '100%', height: '56px', - padding: `${tokens.spacingM} ${tokens.spacingXs}`, + padding: `${tokens.spacingM} ${tokens.spacingS}`, borderBottom: `1px solid ${tokens.gray200}`, backgroundColor: tokens.colorWhite, zIndex: tokens.zIndexWorkbenchHeader, From a99768440939ba484de9fbb7810571cd58464814 Mon Sep 17 00:00:00 2001 From: Renato Massao Yonamine Date: Fri, 21 Apr 2023 14:19:24 +0200 Subject: [PATCH 09/16] chore: bump beta version of workbench --- packages/components/workbench/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/workbench/package.json b/packages/components/workbench/package.json index b10a31cb73..71e0ca0faf 100644 --- a/packages/components/workbench/package.json +++ b/packages/components/workbench/package.json @@ -1,6 +1,6 @@ { "name": "@contentful/f36-workbench", - "version": "4.22.0-beta.1", + "version": "4.22.0-beta.2", "description": "Forma 36: Workbench component", "scripts": { "build": "tsup" From aba6c624f650d3e73d04b3f7f6239e6ad23cedfb Mon Sep 17 00:00:00 2001 From: Moe Shaaban Date: Tue, 25 Apr 2023 19:33:26 +0200 Subject: [PATCH 10/16] fix: workbench back button and separator spacing --- .../workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts | 1 - .../workbench/src/WorkbenchHeader/WorkbenchHeader.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts b/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts index 1d72e50f5f..220a399557 100644 --- a/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts +++ b/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts @@ -31,7 +31,6 @@ export const getWorkbenchHeaderStyles = () => ({ }), separator: css({ height: tokens.spacingXl, - marginLeft: `-${tokens.spacingXs}`, position: 'relative', width: tokens.spacingXs, diff --git a/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.tsx b/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.tsx index 0999581b14..c4e1d9dcbd 100644 --- a/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.tsx +++ b/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.tsx @@ -75,7 +75,7 @@ export const WorkbenchHeader = ({ From 1ba8ce1d122d6831faa05534e3e12b2fbfb9c60a Mon Sep 17 00:00:00 2001 From: Moe Shaaban Date: Wed, 26 Apr 2023 14:22:37 +0200 Subject: [PATCH 11/16] chore: bump workbench version --- package-lock.json | 526 ++++++++++----------- packages/components/workbench/package.json | 2 +- 2 files changed, 264 insertions(+), 264 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2d7a23e8f0..b0d9a7997b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -87,7 +87,7 @@ "webpack": "5" }, "engines": { - "node": ">=14.18.0", + "node": ">=18.0.0", "npm": ">=8.3.0", "yarn": "Please use npm" } @@ -37684,14 +37684,14 @@ }, "packages/components/accordion": { "name": "@contentful/f36-accordion", - "version": "4.33.0", + "version": "4.35.0", "license": "MIT", "dependencies": { - "@contentful/f36-collapse": "^4.33.0", - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-collapse": "^4.35.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-icons": "^4.23.2", "@contentful/f36-tokens": "^4.0.1", - "@contentful/f36-typography": "^4.33.0", + "@contentful/f36-typography": "^4.35.0", "emotion": "^10.0.17" }, "peerDependencies": { @@ -37701,14 +37701,14 @@ }, "packages/components/asset": { "name": "@contentful/f36-asset", - "version": "4.33.0", + "version": "4.35.0", "license": "MIT", "dependencies": { - "@contentful/f36-core": "^4.33.0", - "@contentful/f36-icon": "^4.33.0", + "@contentful/f36-core": "^4.35.0", + "@contentful/f36-icon": "^4.35.0", "@contentful/f36-icons": "^4.23.2", "@contentful/f36-tokens": "^4.0.1", - "@contentful/f36-typography": "^4.33.0", + "@contentful/f36-typography": "^4.35.0", "emotion": "^10.0.17" }, "peerDependencies": { @@ -37718,17 +37718,17 @@ }, "packages/components/autocomplete": { "name": "@contentful/f36-autocomplete", - "version": "4.33.0", + "version": "4.35.0", "license": "MIT", "dependencies": { - "@contentful/f36-button": "^4.33.0", - "@contentful/f36-core": "^4.33.0", - "@contentful/f36-forms": "^4.33.0", + "@contentful/f36-button": "^4.35.0", + "@contentful/f36-core": "^4.35.0", + "@contentful/f36-forms": "^4.35.0", "@contentful/f36-icons": "^4.23.2", - "@contentful/f36-popover": "^4.33.0", - "@contentful/f36-skeleton": "^4.33.0", + "@contentful/f36-popover": "^4.35.0", + "@contentful/f36-skeleton": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", - "@contentful/f36-typography": "^4.33.0", + "@contentful/f36-typography": "^4.35.0", "@contentful/f36-utils": "^4.23.2", "downshift": "^6.1.12", "emotion": "^10.0.17" @@ -37740,15 +37740,15 @@ }, "packages/components/badge": { "name": "@contentful/f36-badge", - "version": "4.33.0", + "version": "4.35.0", "license": "MIT", "dependencies": { - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", "emotion": "^10.0.17" }, "devDependencies": { - "@contentful/f36-typography": "^4.33.0" + "@contentful/f36-typography": "^4.35.0" }, "peerDependencies": { "react": ">=16.8", @@ -37757,16 +37757,16 @@ }, "packages/components/button": { "name": "@contentful/f36-button", - "version": "4.33.0", + "version": "4.35.0", "license": "MIT", "dependencies": { - "@contentful/f36-core": "^4.33.0", - "@contentful/f36-spinner": "^4.33.0", + "@contentful/f36-core": "^4.35.0", + "@contentful/f36-spinner": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", "emotion": "^10.0.17" }, "devDependencies": { - "@contentful/f36-icon": "^4.33.0", + "@contentful/f36-icon": "^4.35.0", "@contentful/f36-icons": "^4.23.2" }, "peerDependencies": { @@ -37776,21 +37776,21 @@ }, "packages/components/card": { "name": "@contentful/f36-card", - "version": "4.33.0", + "version": "4.35.0", "license": "MIT", "dependencies": { - "@contentful/f36-asset": "^4.33.0", - "@contentful/f36-badge": "^4.33.0", - "@contentful/f36-button": "^4.33.0", - "@contentful/f36-core": "^4.33.0", - "@contentful/f36-drag-handle": "^4.33.0", - "@contentful/f36-icon": "^4.33.0", + "@contentful/f36-asset": "^4.35.0", + "@contentful/f36-badge": "^4.35.0", + "@contentful/f36-button": "^4.35.0", + "@contentful/f36-core": "^4.35.0", + "@contentful/f36-drag-handle": "^4.35.0", + "@contentful/f36-icon": "^4.35.0", "@contentful/f36-icons": "^4.23.2", - "@contentful/f36-menu": "^4.33.0", - "@contentful/f36-skeleton": "^4.33.0", + "@contentful/f36-menu": "^4.35.0", + "@contentful/f36-skeleton": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", - "@contentful/f36-tooltip": "^4.33.0", - "@contentful/f36-typography": "^4.33.0", + "@contentful/f36-tooltip": "^4.35.0", + "@contentful/f36-typography": "^4.35.0", "emotion": "^10.0.17", "truncate": "^3.0.0" }, @@ -37804,10 +37804,10 @@ }, "packages/components/collapse": { "name": "@contentful/f36-collapse", - "version": "4.33.0", + "version": "4.35.0", "license": "MIT", "dependencies": { - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", "emotion": "^10.0.17" }, @@ -37818,14 +37818,14 @@ }, "packages/components/copybutton": { "name": "@contentful/f36-copybutton", - "version": "4.33.0", + "version": "4.35.0", "license": "MIT", "dependencies": { - "@contentful/f36-button": "^4.33.0", - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-button": "^4.35.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-icons": "^4.23.2", "@contentful/f36-tokens": "^4.0.1", - "@contentful/f36-tooltip": "^4.33.0", + "@contentful/f36-tooltip": "^4.35.0", "emotion": "^10.0.17" }, "peerDependencies": { @@ -37835,16 +37835,16 @@ }, "packages/components/datepicker": { "name": "@contentful/f36-datepicker", - "version": "4.33.0", + "version": "4.35.0", "license": "MIT", "dependencies": { - "@contentful/f36-button": "^4.33.0", - "@contentful/f36-core": "^4.33.0", - "@contentful/f36-forms": "^4.33.0", + "@contentful/f36-button": "^4.35.0", + "@contentful/f36-core": "^4.35.0", + "@contentful/f36-forms": "^4.35.0", "@contentful/f36-icons": "^4.23.2", - "@contentful/f36-popover": "^4.33.0", + "@contentful/f36-popover": "^4.35.0", "@contentful/f36-tokens": "^4.0.0", - "@contentful/f36-typography": "^4.33.0", + "@contentful/f36-typography": "^4.35.0", "date-fns": "^2.28.0", "emotion": "^10.0.17", "react-day-picker": "^8.3.5", @@ -37869,10 +37869,10 @@ }, "packages/components/datetime": { "name": "@contentful/f36-datetime", - "version": "4.33.0", + "version": "4.35.0", "license": "MIT", "dependencies": { - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", "dayjs": "^1.11.5", "emotion": "^10.0.17" @@ -37884,10 +37884,10 @@ }, "packages/components/drag-handle": { "name": "@contentful/f36-drag-handle", - "version": "4.33.0", + "version": "4.35.0", "license": "MIT", "dependencies": { - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-icons": "^4.23.2", "@contentful/f36-tokens": "^4.0.1", "emotion": "^10.0.17" @@ -37899,19 +37899,19 @@ }, "packages/components/entity-list": { "name": "@contentful/f36-entity-list", - "version": "4.33.0", + "version": "4.35.0", "license": "MIT", "dependencies": { - "@contentful/f36-badge": "^4.33.0", - "@contentful/f36-button": "^4.33.0", - "@contentful/f36-core": "^4.33.0", - "@contentful/f36-drag-handle": "^4.33.0", - "@contentful/f36-icon": "^4.33.0", + "@contentful/f36-badge": "^4.35.0", + "@contentful/f36-button": "^4.35.0", + "@contentful/f36-core": "^4.35.0", + "@contentful/f36-drag-handle": "^4.35.0", + "@contentful/f36-icon": "^4.35.0", "@contentful/f36-icons": "^4.23.2", - "@contentful/f36-menu": "^4.33.0", - "@contentful/f36-skeleton": "^4.33.0", + "@contentful/f36-menu": "^4.35.0", + "@contentful/f36-skeleton": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", - "@contentful/f36-typography": "^4.33.0", + "@contentful/f36-typography": "^4.35.0", "emotion": "^10.0.17" }, "peerDependencies": { @@ -37921,13 +37921,13 @@ }, "packages/components/forms": { "name": "@contentful/f36-forms", - "version": "4.33.0", + "version": "4.35.0", "license": "MIT", "dependencies": { - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-icons": "^4.23.2", "@contentful/f36-tokens": "^4.0.1", - "@contentful/f36-typography": "^4.33.0", + "@contentful/f36-typography": "^4.35.0", "emotion": "^10.0.17" }, "devDependencies": { @@ -37941,10 +37941,10 @@ }, "packages/components/icon": { "name": "@contentful/f36-icon", - "version": "4.33.0", + "version": "4.35.0", "license": "MIT", "dependencies": { - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", "emotion": "^10.0.17" }, @@ -37972,10 +37972,10 @@ }, "packages/components/list": { "name": "@contentful/f36-list", - "version": "4.33.0", + "version": "4.35.0", "license": "MIT", "dependencies": { - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", "emotion": "^10.0.17" }, @@ -37985,14 +37985,14 @@ }, "packages/components/menu": { "name": "@contentful/f36-menu", - "version": "4.33.0", + "version": "4.35.0", "license": "MIT", "dependencies": { - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-icons": "^4.23.2", - "@contentful/f36-popover": "^4.33.0", + "@contentful/f36-popover": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", - "@contentful/f36-typography": "^4.33.0", + "@contentful/f36-typography": "^4.35.0", "@contentful/f36-utils": "^4.23.2", "emotion": "^10.0.17" }, @@ -38003,14 +38003,14 @@ }, "packages/components/modal": { "name": "@contentful/f36-modal", - "version": "4.33.0", + "version": "4.35.0", "license": "MIT", "dependencies": { - "@contentful/f36-button": "^4.33.0", - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-button": "^4.35.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-icons": "^4.23.2", "@contentful/f36-tokens": "^4.0.1", - "@contentful/f36-typography": "^4.33.0", + "@contentful/f36-typography": "^4.35.0", "@types/react-modal": "^3.13.1", "emotion": "^10.0.17", "react-modal": "^3.16.1" @@ -38082,15 +38082,15 @@ }, "packages/components/note": { "name": "@contentful/f36-note", - "version": "4.33.0", + "version": "4.35.0", "license": "MIT", "dependencies": { - "@contentful/f36-button": "^4.33.0", - "@contentful/f36-core": "^4.33.0", - "@contentful/f36-icon": "^4.33.0", + "@contentful/f36-button": "^4.35.0", + "@contentful/f36-core": "^4.35.0", + "@contentful/f36-icon": "^4.35.0", "@contentful/f36-icons": "^4.23.2", "@contentful/f36-tokens": "^4.0.1", - "@contentful/f36-typography": "^4.33.0", + "@contentful/f36-typography": "^4.35.0", "emotion": "^10.0.17" }, "devDependencies": { @@ -38135,15 +38135,15 @@ }, "packages/components/notification": { "name": "@contentful/f36-notification", - "version": "4.33.0", + "version": "4.35.0", "license": "MIT", "dependencies": { - "@contentful/f36-button": "^4.33.0", - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-button": "^4.35.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-icons": "^4.23.2", - "@contentful/f36-text-link": "^4.33.0", + "@contentful/f36-text-link": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", - "@contentful/f36-typography": "^4.33.0", + "@contentful/f36-typography": "^4.35.0", "@swc/helpers": "^0.4.14", "emotion": "^10.0.17", "react-animate-height": "^3.0.4" @@ -38163,15 +38163,15 @@ }, "packages/components/pagination": { "name": "@contentful/f36-pagination", - "version": "4.33.0", + "version": "4.35.0", "license": "MIT", "dependencies": { - "@contentful/f36-button": "^4.33.0", - "@contentful/f36-core": "^4.33.0", - "@contentful/f36-forms": "^4.33.0", + "@contentful/f36-button": "^4.35.0", + "@contentful/f36-core": "^4.35.0", + "@contentful/f36-forms": "^4.35.0", "@contentful/f36-icons": "^4.23.2", "@contentful/f36-tokens": "^4.0.0", - "@contentful/f36-typography": "^4.33.0", + "@contentful/f36-typography": "^4.35.0", "emotion": "^10.0.17" }, "peerDependencies": { @@ -38180,14 +38180,14 @@ }, "packages/components/pill": { "name": "@contentful/f36-pill", - "version": "4.33.0", + "version": "4.35.0", "license": "MIT", "dependencies": { - "@contentful/f36-button": "^4.33.0", - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-button": "^4.35.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-icons": "^4.23.2", "@contentful/f36-tokens": "^4.0.1", - "@contentful/f36-tooltip": "^4.33.0", + "@contentful/f36-tooltip": "^4.35.0", "emotion": "^10.0.17" }, "devDependencies": { @@ -38200,10 +38200,10 @@ }, "packages/components/popover": { "name": "@contentful/f36-popover", - "version": "4.33.0", + "version": "4.35.0", "license": "MIT", "dependencies": { - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", "@contentful/f36-utils": "^4.23.2", "@popperjs/core": "^2.11.5", @@ -38216,11 +38216,11 @@ }, "packages/components/skeleton": { "name": "@contentful/f36-skeleton", - "version": "4.33.0", + "version": "4.35.0", "license": "MIT", "dependencies": { - "@contentful/f36-core": "^4.33.0", - "@contentful/f36-table": "^4.33.0", + "@contentful/f36-core": "^4.35.0", + "@contentful/f36-table": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", "emotion": "^10.0.17" }, @@ -38231,15 +38231,15 @@ }, "packages/components/spinner": { "name": "@contentful/f36-spinner", - "version": "4.33.0", + "version": "4.35.0", "license": "MIT", "dependencies": { - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", "emotion": "^10.0.17" }, "devDependencies": { - "@contentful/f36-typography": "^4.33.0" + "@contentful/f36-typography": "^4.35.0" }, "peerDependencies": { "react": ">=16.8" @@ -38247,13 +38247,13 @@ }, "packages/components/table": { "name": "@contentful/f36-table", - "version": "4.33.0", + "version": "4.35.0", "license": "MIT", "dependencies": { - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-icons": "^4.25.0", "@contentful/f36-tokens": "^4.0.1", - "@contentful/f36-typography": "^4.33.0", + "@contentful/f36-typography": "^4.35.0", "emotion": "^10.0.17" }, "peerDependencies": { @@ -38278,10 +38278,10 @@ }, "packages/components/tabs": { "name": "@contentful/f36-tabs", - "version": "4.33.0", + "version": "4.35.0", "license": "MIT", "dependencies": { - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", "@radix-ui/react-tabs": "^1.0.1", "emotion": "^10.0.17" @@ -38429,10 +38429,10 @@ }, "packages/components/text-link": { "name": "@contentful/f36-text-link", - "version": "4.33.0", + "version": "4.35.0", "license": "MIT", "dependencies": { - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", "emotion": "^10.0.17" }, @@ -38442,10 +38442,10 @@ }, "packages/components/tooltip": { "name": "@contentful/f36-tooltip", - "version": "4.33.0", + "version": "4.35.0", "license": "MIT", "dependencies": { - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", "@contentful/f36-utils": "^4.23.2", "@popperjs/core": "^2.11.5", @@ -38460,10 +38460,10 @@ }, "packages/components/typography": { "name": "@contentful/f36-typography", - "version": "4.33.0", + "version": "4.35.0", "license": "MIT", "dependencies": { - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", "emotion": "^10.0.17" }, @@ -38485,7 +38485,7 @@ }, "packages/components/workbench": { "name": "@contentful/f36-workbench", - "version": "4.21.0", + "version": "4.22.0-beta.3", "license": "MIT", "dependencies": { "@contentful/f36-button": "^4.21.4", @@ -38503,7 +38503,7 @@ }, "packages/core": { "name": "@contentful/f36-core", - "version": "4.33.0", + "version": "4.35.0", "license": "MIT", "dependencies": { "@contentful/f36-tokens": "^4.0.1", @@ -38789,41 +38789,41 @@ }, "packages/forma-36-react-components": { "name": "@contentful/f36-components", - "version": "4.33.0", - "license": "MIT", - "dependencies": { - "@contentful/f36-accordion": "^4.33.0", - "@contentful/f36-asset": "^4.33.0", - "@contentful/f36-autocomplete": "^4.33.0", - "@contentful/f36-badge": "^4.33.0", - "@contentful/f36-button": "^4.33.0", - "@contentful/f36-card": "^4.33.0", - "@contentful/f36-collapse": "^4.33.0", - "@contentful/f36-copybutton": "^4.33.0", - "@contentful/f36-core": "^4.33.0", - "@contentful/f36-datepicker": "^4.33.0", - "@contentful/f36-datetime": "^4.33.0", - "@contentful/f36-drag-handle": "^4.33.0", - "@contentful/f36-entity-list": "^4.33.0", - "@contentful/f36-forms": "^4.33.0", - "@contentful/f36-icon": "^4.33.0", + "version": "4.35.0", + "license": "MIT", + "dependencies": { + "@contentful/f36-accordion": "^4.35.0", + "@contentful/f36-asset": "^4.35.0", + "@contentful/f36-autocomplete": "^4.35.0", + "@contentful/f36-badge": "^4.35.0", + "@contentful/f36-button": "^4.35.0", + "@contentful/f36-card": "^4.35.0", + "@contentful/f36-collapse": "^4.35.0", + "@contentful/f36-copybutton": "^4.35.0", + "@contentful/f36-core": "^4.35.0", + "@contentful/f36-datepicker": "^4.35.0", + "@contentful/f36-datetime": "^4.35.0", + "@contentful/f36-drag-handle": "^4.35.0", + "@contentful/f36-entity-list": "^4.35.0", + "@contentful/f36-forms": "^4.35.0", + "@contentful/f36-icon": "^4.35.0", "@contentful/f36-icons": "^4.23.2", - "@contentful/f36-list": "^4.33.0", - "@contentful/f36-menu": "^4.33.0", - "@contentful/f36-modal": "^4.33.0", - "@contentful/f36-note": "^4.33.0", - "@contentful/f36-notification": "^4.33.0", - "@contentful/f36-pagination": "^4.33.0", - "@contentful/f36-pill": "^4.33.0", - "@contentful/f36-popover": "^4.33.0", - "@contentful/f36-skeleton": "^4.33.0", - "@contentful/f36-spinner": "^4.33.0", - "@contentful/f36-table": "^4.33.0", - "@contentful/f36-tabs": "^4.33.0", - "@contentful/f36-text-link": "^4.33.0", + "@contentful/f36-list": "^4.35.0", + "@contentful/f36-menu": "^4.35.0", + "@contentful/f36-modal": "^4.35.0", + "@contentful/f36-note": "^4.35.0", + "@contentful/f36-notification": "^4.35.0", + "@contentful/f36-pagination": "^4.35.0", + "@contentful/f36-pill": "^4.35.0", + "@contentful/f36-popover": "^4.35.0", + "@contentful/f36-skeleton": "^4.35.0", + "@contentful/f36-spinner": "^4.35.0", + "@contentful/f36-table": "^4.35.0", + "@contentful/f36-tabs": "^4.35.0", + "@contentful/f36-text-link": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", - "@contentful/f36-tooltip": "^4.33.0", - "@contentful/f36-typography": "^4.33.0", + "@contentful/f36-tooltip": "^4.35.0", + "@contentful/f36-typography": "^4.35.0", "@contentful/f36-utils": "^4.23.2", "@types/react": "16.14.22", "@types/react-dom": "16.9.14" @@ -42087,9 +42087,9 @@ "version": "1.0.0", "dependencies": { "@codesandbox/sandpack-react": "^1.17.0", - "@contentful/f36-components": "^4.33.0", + "@contentful/f36-components": "^4.35.0", "@contentful/f36-docs-utils": "^4.0.2", - "@contentful/f36-icon": "^4.33.0", + "@contentful/f36-icon": "^4.35.0", "@contentful/f36-icons": "^4.25.0", "@contentful/f36-multiselect": "^4.20.11", "@contentful/f36-tokens": "^4.0.0", @@ -44972,36 +44972,36 @@ "@contentful/f36-accordion": { "version": "file:packages/components/accordion", "requires": { - "@contentful/f36-collapse": "^4.33.0", - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-collapse": "^4.35.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-icons": "^4.23.2", "@contentful/f36-tokens": "^4.0.1", - "@contentful/f36-typography": "^4.33.0", + "@contentful/f36-typography": "^4.35.0", "emotion": "^10.0.17" } }, "@contentful/f36-asset": { "version": "file:packages/components/asset", "requires": { - "@contentful/f36-core": "^4.33.0", - "@contentful/f36-icon": "^4.33.0", + "@contentful/f36-core": "^4.35.0", + "@contentful/f36-icon": "^4.35.0", "@contentful/f36-icons": "^4.23.2", "@contentful/f36-tokens": "^4.0.1", - "@contentful/f36-typography": "^4.33.0", + "@contentful/f36-typography": "^4.35.0", "emotion": "^10.0.17" } }, "@contentful/f36-autocomplete": { "version": "file:packages/components/autocomplete", "requires": { - "@contentful/f36-button": "^4.33.0", - "@contentful/f36-core": "^4.33.0", - "@contentful/f36-forms": "^4.33.0", + "@contentful/f36-button": "^4.35.0", + "@contentful/f36-core": "^4.35.0", + "@contentful/f36-forms": "^4.35.0", "@contentful/f36-icons": "^4.23.2", - "@contentful/f36-popover": "^4.33.0", - "@contentful/f36-skeleton": "^4.33.0", + "@contentful/f36-popover": "^4.35.0", + "@contentful/f36-skeleton": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", - "@contentful/f36-typography": "^4.33.0", + "@contentful/f36-typography": "^4.35.0", "@contentful/f36-utils": "^4.23.2", "downshift": "^6.1.12", "emotion": "^10.0.17" @@ -45010,19 +45010,19 @@ "@contentful/f36-badge": { "version": "file:packages/components/badge", "requires": { - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", - "@contentful/f36-typography": "^4.33.0", + "@contentful/f36-typography": "^4.35.0", "emotion": "^10.0.17" } }, "@contentful/f36-button": { "version": "file:packages/components/button", "requires": { - "@contentful/f36-core": "^4.33.0", - "@contentful/f36-icon": "^4.33.0", + "@contentful/f36-core": "^4.35.0", + "@contentful/f36-icon": "^4.35.0", "@contentful/f36-icons": "^4.23.2", - "@contentful/f36-spinner": "^4.33.0", + "@contentful/f36-spinner": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", "emotion": "^10.0.17" } @@ -45030,18 +45030,18 @@ "@contentful/f36-card": { "version": "file:packages/components/card", "requires": { - "@contentful/f36-asset": "^4.33.0", - "@contentful/f36-badge": "^4.33.0", - "@contentful/f36-button": "^4.33.0", - "@contentful/f36-core": "^4.33.0", - "@contentful/f36-drag-handle": "^4.33.0", - "@contentful/f36-icon": "^4.33.0", + "@contentful/f36-asset": "^4.35.0", + "@contentful/f36-badge": "^4.35.0", + "@contentful/f36-button": "^4.35.0", + "@contentful/f36-core": "^4.35.0", + "@contentful/f36-drag-handle": "^4.35.0", + "@contentful/f36-icon": "^4.35.0", "@contentful/f36-icons": "^4.23.2", - "@contentful/f36-menu": "^4.33.0", - "@contentful/f36-skeleton": "^4.33.0", + "@contentful/f36-menu": "^4.35.0", + "@contentful/f36-skeleton": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", - "@contentful/f36-tooltip": "^4.33.0", - "@contentful/f36-typography": "^4.33.0", + "@contentful/f36-tooltip": "^4.35.0", + "@contentful/f36-typography": "^4.35.0", "array-move": "^4.0.0", "emotion": "^10.0.17", "truncate": "^3.0.0" @@ -45199,7 +45199,7 @@ "@contentful/f36-collapse": { "version": "file:packages/components/collapse", "requires": { - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", "emotion": "^10.0.17" } @@ -45207,38 +45207,38 @@ "@contentful/f36-components": { "version": "file:packages/forma-36-react-components", "requires": { - "@contentful/f36-accordion": "^4.33.0", - "@contentful/f36-asset": "^4.33.0", - "@contentful/f36-autocomplete": "^4.33.0", - "@contentful/f36-badge": "^4.33.0", - "@contentful/f36-button": "^4.33.0", - "@contentful/f36-card": "^4.33.0", - "@contentful/f36-collapse": "^4.33.0", - "@contentful/f36-copybutton": "^4.33.0", - "@contentful/f36-core": "^4.33.0", - "@contentful/f36-datepicker": "^4.33.0", - "@contentful/f36-datetime": "^4.33.0", - "@contentful/f36-drag-handle": "^4.33.0", - "@contentful/f36-entity-list": "^4.33.0", - "@contentful/f36-forms": "^4.33.0", - "@contentful/f36-icon": "^4.33.0", + "@contentful/f36-accordion": "^4.35.0", + "@contentful/f36-asset": "^4.35.0", + "@contentful/f36-autocomplete": "^4.35.0", + "@contentful/f36-badge": "^4.35.0", + "@contentful/f36-button": "^4.35.0", + "@contentful/f36-card": "^4.35.0", + "@contentful/f36-collapse": "^4.35.0", + "@contentful/f36-copybutton": "^4.35.0", + "@contentful/f36-core": "^4.35.0", + "@contentful/f36-datepicker": "^4.35.0", + "@contentful/f36-datetime": "^4.35.0", + "@contentful/f36-drag-handle": "^4.35.0", + "@contentful/f36-entity-list": "^4.35.0", + "@contentful/f36-forms": "^4.35.0", + "@contentful/f36-icon": "^4.35.0", "@contentful/f36-icons": "^4.23.2", - "@contentful/f36-list": "^4.33.0", - "@contentful/f36-menu": "^4.33.0", - "@contentful/f36-modal": "^4.33.0", - "@contentful/f36-note": "^4.33.0", - "@contentful/f36-notification": "^4.33.0", - "@contentful/f36-pagination": "^4.33.0", - "@contentful/f36-pill": "^4.33.0", - "@contentful/f36-popover": "^4.33.0", - "@contentful/f36-skeleton": "^4.33.0", - "@contentful/f36-spinner": "^4.33.0", - "@contentful/f36-table": "^4.33.0", - "@contentful/f36-tabs": "^4.33.0", - "@contentful/f36-text-link": "^4.33.0", + "@contentful/f36-list": "^4.35.0", + "@contentful/f36-menu": "^4.35.0", + "@contentful/f36-modal": "^4.35.0", + "@contentful/f36-note": "^4.35.0", + "@contentful/f36-notification": "^4.35.0", + "@contentful/f36-pagination": "^4.35.0", + "@contentful/f36-pill": "^4.35.0", + "@contentful/f36-popover": "^4.35.0", + "@contentful/f36-skeleton": "^4.35.0", + "@contentful/f36-spinner": "^4.35.0", + "@contentful/f36-table": "^4.35.0", + "@contentful/f36-tabs": "^4.35.0", + "@contentful/f36-text-link": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", - "@contentful/f36-tooltip": "^4.33.0", - "@contentful/f36-typography": "^4.33.0", + "@contentful/f36-tooltip": "^4.35.0", + "@contentful/f36-typography": "^4.35.0", "@contentful/f36-utils": "^4.23.2", "@types/react": "16.14.22", "@types/react-dom": "16.9.14", @@ -47445,11 +47445,11 @@ "@contentful/f36-copybutton": { "version": "file:packages/components/copybutton", "requires": { - "@contentful/f36-button": "^4.33.0", - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-button": "^4.35.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-icons": "^4.23.2", "@contentful/f36-tokens": "^4.0.1", - "@contentful/f36-tooltip": "^4.33.0", + "@contentful/f36-tooltip": "^4.35.0", "emotion": "^10.0.17" } }, @@ -47477,13 +47477,13 @@ "@contentful/f36-datepicker": { "version": "file:packages/components/datepicker", "requires": { - "@contentful/f36-button": "^4.33.0", - "@contentful/f36-core": "^4.33.0", - "@contentful/f36-forms": "^4.33.0", + "@contentful/f36-button": "^4.35.0", + "@contentful/f36-core": "^4.35.0", + "@contentful/f36-forms": "^4.35.0", "@contentful/f36-icons": "^4.23.2", - "@contentful/f36-popover": "^4.33.0", + "@contentful/f36-popover": "^4.35.0", "@contentful/f36-tokens": "^4.0.0", - "@contentful/f36-typography": "^4.33.0", + "@contentful/f36-typography": "^4.35.0", "date-fns": "^2.28.0", "emotion": "^10.0.17", "react-day-picker": "^8.3.5", @@ -47499,7 +47499,7 @@ "@contentful/f36-datetime": { "version": "file:packages/components/datetime", "requires": { - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", "dayjs": "^1.11.5", "emotion": "^10.0.17" @@ -47517,7 +47517,7 @@ "@contentful/f36-drag-handle": { "version": "file:packages/components/drag-handle", "requires": { - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-icons": "^4.23.2", "@contentful/f36-tokens": "^4.0.1", "emotion": "^10.0.17" @@ -47526,26 +47526,26 @@ "@contentful/f36-entity-list": { "version": "file:packages/components/entity-list", "requires": { - "@contentful/f36-badge": "^4.33.0", - "@contentful/f36-button": "^4.33.0", - "@contentful/f36-core": "^4.33.0", - "@contentful/f36-drag-handle": "^4.33.0", - "@contentful/f36-icon": "^4.33.0", + "@contentful/f36-badge": "^4.35.0", + "@contentful/f36-button": "^4.35.0", + "@contentful/f36-core": "^4.35.0", + "@contentful/f36-drag-handle": "^4.35.0", + "@contentful/f36-icon": "^4.35.0", "@contentful/f36-icons": "^4.23.2", - "@contentful/f36-menu": "^4.33.0", - "@contentful/f36-skeleton": "^4.33.0", + "@contentful/f36-menu": "^4.35.0", + "@contentful/f36-skeleton": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", - "@contentful/f36-typography": "^4.33.0", + "@contentful/f36-typography": "^4.35.0", "emotion": "^10.0.17" } }, "@contentful/f36-forms": { "version": "file:packages/components/forms", "requires": { - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-icons": "^4.23.2", "@contentful/f36-tokens": "^4.0.1", - "@contentful/f36-typography": "^4.33.0", + "@contentful/f36-typography": "^4.35.0", "emotion": "^10.0.17", "formik": "^2.2.9", "react-hook-form": "^7.15.0" @@ -47554,7 +47554,7 @@ "@contentful/f36-icon": { "version": "file:packages/components/icon", "requires": { - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", "emotion": "^10.0.17", "react-icons": "^4.4.0" @@ -47572,7 +47572,7 @@ "@contentful/f36-list": { "version": "file:packages/components/list", "requires": { - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", "emotion": "^10.0.17" } @@ -47580,11 +47580,11 @@ "@contentful/f36-menu": { "version": "file:packages/components/menu", "requires": { - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-icons": "^4.23.2", - "@contentful/f36-popover": "^4.33.0", + "@contentful/f36-popover": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", - "@contentful/f36-typography": "^4.33.0", + "@contentful/f36-typography": "^4.35.0", "@contentful/f36-utils": "^4.23.2", "emotion": "^10.0.17" } @@ -47592,11 +47592,11 @@ "@contentful/f36-modal": { "version": "file:packages/components/modal", "requires": { - "@contentful/f36-button": "^4.33.0", - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-button": "^4.35.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-icons": "^4.23.2", "@contentful/f36-tokens": "^4.0.1", - "@contentful/f36-typography": "^4.33.0", + "@contentful/f36-typography": "^4.35.0", "@types/react-modal": "^3.13.1", "emotion": "^10.0.17", "react-modal": "^3.16.1" @@ -47650,12 +47650,12 @@ "@contentful/f36-note": { "version": "file:packages/components/note", "requires": { - "@contentful/f36-button": "^4.33.0", - "@contentful/f36-core": "^4.33.0", - "@contentful/f36-icon": "^4.33.0", + "@contentful/f36-button": "^4.35.0", + "@contentful/f36-core": "^4.35.0", + "@contentful/f36-icon": "^4.35.0", "@contentful/f36-icons": "^4.23.2", "@contentful/f36-tokens": "^4.0.1", - "@contentful/f36-typography": "^4.33.0", + "@contentful/f36-typography": "^4.35.0", "@emotion/serialize": "^1.1.1", "emotion": "^10.0.17" }, @@ -47692,12 +47692,12 @@ "@contentful/f36-notification": { "version": "file:packages/components/notification", "requires": { - "@contentful/f36-button": "^4.33.0", - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-button": "^4.35.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-icons": "^4.23.2", - "@contentful/f36-text-link": "^4.33.0", + "@contentful/f36-text-link": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", - "@contentful/f36-typography": "^4.33.0", + "@contentful/f36-typography": "^4.35.0", "@swc/helpers": "^0.4.14", "emotion": "^10.0.17", "react-animate-height": "^3.0.4" @@ -47716,23 +47716,23 @@ "@contentful/f36-pagination": { "version": "file:packages/components/pagination", "requires": { - "@contentful/f36-button": "^4.33.0", - "@contentful/f36-core": "^4.33.0", - "@contentful/f36-forms": "^4.33.0", + "@contentful/f36-button": "^4.35.0", + "@contentful/f36-core": "^4.35.0", + "@contentful/f36-forms": "^4.35.0", "@contentful/f36-icons": "^4.23.2", "@contentful/f36-tokens": "^4.0.0", - "@contentful/f36-typography": "^4.33.0", + "@contentful/f36-typography": "^4.35.0", "emotion": "^10.0.17" } }, "@contentful/f36-pill": { "version": "file:packages/components/pill", "requires": { - "@contentful/f36-button": "^4.33.0", - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-button": "^4.35.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-icons": "^4.23.2", "@contentful/f36-tokens": "^4.0.1", - "@contentful/f36-tooltip": "^4.33.0", + "@contentful/f36-tooltip": "^4.35.0", "array-move": "^4.0.0", "emotion": "^10.0.17" } @@ -47740,7 +47740,7 @@ "@contentful/f36-popover": { "version": "file:packages/components/popover", "requires": { - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", "@contentful/f36-utils": "^4.23.2", "@popperjs/core": "^2.11.5", @@ -47751,8 +47751,8 @@ "@contentful/f36-skeleton": { "version": "file:packages/components/skeleton", "requires": { - "@contentful/f36-core": "^4.33.0", - "@contentful/f36-table": "^4.33.0", + "@contentful/f36-core": "^4.35.0", + "@contentful/f36-table": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", "emotion": "^10.0.17" } @@ -47760,19 +47760,19 @@ "@contentful/f36-spinner": { "version": "file:packages/components/spinner", "requires": { - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", - "@contentful/f36-typography": "^4.33.0", + "@contentful/f36-typography": "^4.35.0", "emotion": "^10.0.17" } }, "@contentful/f36-table": { "version": "file:packages/components/table", "requires": { - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-icons": "^4.25.0", "@contentful/f36-tokens": "^4.0.1", - "@contentful/f36-typography": "^4.33.0", + "@contentful/f36-typography": "^4.35.0", "emotion": "^10.0.17" }, "dependencies": { @@ -47792,7 +47792,7 @@ "@contentful/f36-tabs": { "version": "file:packages/components/tabs", "requires": { - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", "@radix-ui/react-tabs": "^1.0.1", "emotion": "^10.0.17" @@ -47894,7 +47894,7 @@ "@contentful/f36-text-link": { "version": "file:packages/components/text-link", "requires": { - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", "emotion": "^10.0.17" } @@ -47938,7 +47938,7 @@ "@contentful/f36-tooltip": { "version": "file:packages/components/tooltip", "requires": { - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", "@contentful/f36-utils": "^4.23.2", "@popperjs/core": "^2.11.5", @@ -47950,7 +47950,7 @@ "@contentful/f36-typography": { "version": "file:packages/components/typography", "requires": { - "@contentful/f36-core": "^4.33.0", + "@contentful/f36-core": "^4.35.0", "@contentful/f36-tokens": "^4.0.1", "emotion": "^10.0.17" } @@ -47965,9 +47965,9 @@ "version": "file:packages/website", "requires": { "@codesandbox/sandpack-react": "^1.17.0", - "@contentful/f36-components": "^4.33.0", + "@contentful/f36-components": "^4.35.0", "@contentful/f36-docs-utils": "^4.0.2", - "@contentful/f36-icon": "^4.33.0", + "@contentful/f36-icon": "^4.35.0", "@contentful/f36-icons": "^4.25.0", "@contentful/f36-multiselect": "^4.20.11", "@contentful/f36-tokens": "^4.0.0", diff --git a/packages/components/workbench/package.json b/packages/components/workbench/package.json index 71e0ca0faf..5549e5631e 100644 --- a/packages/components/workbench/package.json +++ b/packages/components/workbench/package.json @@ -1,6 +1,6 @@ { "name": "@contentful/f36-workbench", - "version": "4.22.0-beta.2", + "version": "4.22.0-beta.3", "description": "Forma 36: Workbench component", "scripts": { "build": "tsup" From 5046f7562018355f8146e7df3e205b1566c030f8 Mon Sep 17 00:00:00 2001 From: bgutsol Date: Tue, 9 May 2023 15:16:51 +0200 Subject: [PATCH 12/16] chore: return gray background for workbench header --- .../workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts b/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts index 220a399557..cea658abe9 100644 --- a/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts +++ b/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts @@ -11,7 +11,7 @@ export const getWorkbenchHeaderStyles = () => ({ height: '56px', padding: `${tokens.spacingM} ${tokens.spacingS}`, borderBottom: `1px solid ${tokens.gray200}`, - backgroundColor: tokens.colorWhite, + backgroundColor: tokens.gray100, zIndex: tokens.zIndexWorkbenchHeader, boxSizing: 'border-box', }, From df66e64200b20dd9aa5358edc15db234cf5c4cd6 Mon Sep 17 00:00:00 2001 From: bgutsol Date: Tue, 9 May 2023 15:17:31 +0200 Subject: [PATCH 13/16] chore: bump Workbench beta version --- packages/components/workbench/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/workbench/package.json b/packages/components/workbench/package.json index 5549e5631e..d8be2d61af 100644 --- a/packages/components/workbench/package.json +++ b/packages/components/workbench/package.json @@ -1,6 +1,6 @@ { "name": "@contentful/f36-workbench", - "version": "4.22.0-beta.3", + "version": "4.22.0-beta.4", "description": "Forma 36: Workbench component", "scripts": { "build": "tsup" From aa5d61cdcca367e9ae82281260ad857b8d43d49b Mon Sep 17 00:00:00 2001 From: Sofia Margariti Date: Thu, 6 Jul 2023 13:51:32 +0100 Subject: [PATCH 14/16] fix: workbench header overflow Set min-width: 0 for workbench header flexboxes --- package-lock.json | 41 ++++--------------- packages/components/workbench/package.json | 2 +- .../WorkbenchHeader/WorkbenchHeader.styles.ts | 6 +++ .../src/WorkbenchHeader/WorkbenchHeader.tsx | 9 +++- 4 files changed, 23 insertions(+), 35 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9e0cf0c885..9b60cdd46b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38521,7 +38521,7 @@ }, "packages/components/workbench": { "name": "@contentful/f36-workbench", - "version": "4.22.0-beta.3", + "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 d8be2d61af..6d4405a0ad 100644 --- a/packages/components/workbench/package.json +++ b/packages/components/workbench/package.json @@ -1,6 +1,6 @@ { "name": "@contentful/f36-workbench", - "version": "4.22.0-beta.4", + "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 cea658abe9..d8c904fc6a 100644 --- a/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts +++ b/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts @@ -46,4 +46,10 @@ export const getWorkbenchHeaderStyles = () => ({ transform: 'translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 18deg)', }, }), + minWidthZero: css({ + minWidth: '0', + }), + icon: css({ + flexShrink: 0, + }), }); diff --git a/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.tsx b/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.tsx index c4e1d9dcbd..85b6611ac4 100644 --- a/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.tsx +++ b/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.tsx @@ -78,10 +78,15 @@ export const WorkbenchHeader = ({ gap="spacingS" flexGrow={!description ? '1' : '0'} marginRight="spacingS" + className={styles.minWidthZero} > {hasBackButton &&
} - - {Icon && iconComponent} + + {Icon && iconComponent} {typeof title === 'string' ? ( From 3c26f53f7c255b0348d0fa1666c9726d79b9917e Mon Sep 17 00:00:00 2001 From: Sofia Margariti Date: Thu, 6 Jul 2023 19:40:27 +0100 Subject: [PATCH 15/16] Update packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.tsx Co-authored-by: Bohdan Hutsol --- .../workbench/src/WorkbenchHeader/WorkbenchHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.tsx b/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.tsx index 85b6611ac4..4c844ad7f3 100644 --- a/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.tsx +++ b/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.tsx @@ -86,7 +86,7 @@ export const WorkbenchHeader = ({ gap="spacingXs" className={styles.minWidthZero} > - {Icon && iconComponent} + {Icon && iconComponent} {typeof title === 'string' ? ( From 09fac19ca5451f92d0ec26a514808d1b3a13c450 Mon Sep 17 00:00:00 2001 From: Sofia Margariti Date: Fri, 7 Jul 2023 09:17:07 +0100 Subject: [PATCH 16/16] fix: add icon wrapper only when icon is present --- .../workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts | 1 + .../workbench/src/WorkbenchHeader/WorkbenchHeader.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts b/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts index d8c904fc6a..a5eea009c3 100644 --- a/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts +++ b/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts @@ -50,6 +50,7 @@ export const getWorkbenchHeaderStyles = () => ({ 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 4c844ad7f3..69a6bdc07a 100644 --- a/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.tsx +++ b/packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.tsx @@ -86,7 +86,7 @@ export const WorkbenchHeader = ({ gap="spacingXs" className={styles.minWidthZero} > - {Icon && iconComponent} + {Icon && {iconComponent}} {typeof title === 'string' ? (