From ff133f51986c208d93204eccc47c0bf2f3542a9a Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Thu, 23 Feb 2023 16:08:21 +1100 Subject: [PATCH 1/4] Revert "Drop `ignoreSsrWarning` workaround" This reverts commit ca86e9d3900a342d48a624d8584bd57f544ad0d5. --- .../src/components/ArgsTable/ArgsTable.tsx | 16 ++++++++-------- code/ui/blocks/src/components/Source.tsx | 4 ++-- code/ui/components/src/spaced/Spaced.tsx | 6 +++--- code/ui/components/src/tabs/tabs.tsx | 5 ++++- 4 files changed, 17 insertions(+), 14 deletions(-) diff --git a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx index c4ffeb0d8c2b..b30084ff5021 100644 --- a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx +++ b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx @@ -1,7 +1,7 @@ import type { FC } from 'react'; import React from 'react'; import pickBy from 'lodash/pickBy.js'; -import { styled } from '@storybook/theming'; +import { styled, ignoreSsrWarning } from '@storybook/theming'; import { opacify, transparentize, darken, lighten } from 'polished'; import { includeConditionalArg } from '@storybook/csf'; import { once } from '@storybook/client-logger'; @@ -112,20 +112,20 @@ export const TableWrapper = styled.table<{ marginLeft: inAddonPanel ? 0 : 1, marginRight: inAddonPanel ? 0 : 1, - [`tr:first-child`]: { - [`td:first-child, th:first-child`]: { + [`tr:first-child${ignoreSsrWarning}`]: { + [`td:first-child${ignoreSsrWarning}, th:first-child${ignoreSsrWarning}`]: { borderTopLeftRadius: inAddonPanel ? 0 : theme.appBorderRadius, }, - [`td:last-child, th:last-child`]: { + [`td:last-child${ignoreSsrWarning}, th:last-child${ignoreSsrWarning}`]: { borderTopRightRadius: inAddonPanel ? 0 : theme.appBorderRadius, }, }, - [`tr:last-child`]: { - [`td:first-child, th:first-child`]: { + [`tr:last-child${ignoreSsrWarning}`]: { + [`td:first-child${ignoreSsrWarning}, th:first-child${ignoreSsrWarning}`]: { borderBottomLeftRadius: inAddonPanel ? 0 : theme.appBorderRadius, }, - [`td:last-child, th:last-child`]: { + [`td:last-child${ignoreSsrWarning}, th:last-child${ignoreSsrWarning}`]: { borderBottomRightRadius: inAddonPanel ? 0 : theme.appBorderRadius, }, }, @@ -173,7 +173,7 @@ export const TableWrapper = styled.table<{ : lighten(0.05, theme.background.content), } : { - [`&:not(:first-child)`]: { + [`&:not(:first-child${ignoreSsrWarning})`]: { borderTopWidth: 1, borderTopStyle: 'solid', borderTopColor: diff --git a/code/ui/blocks/src/components/Source.tsx b/code/ui/blocks/src/components/Source.tsx index 94d3df6b9ef9..4d72f2f45aed 100644 --- a/code/ui/blocks/src/components/Source.tsx +++ b/code/ui/blocks/src/components/Source.tsx @@ -1,6 +1,6 @@ import type { ComponentProps, FunctionComponent } from 'react'; import React from 'react'; -import { styled, ThemeProvider, convert, themes } from '@storybook/theming'; +import { styled, ThemeProvider, convert, themes, ignoreSsrWarning } from '@storybook/theming'; import { SyntaxHighlighter } from '@storybook/components'; import { EmptyBlock } from './EmptyBlock'; @@ -69,7 +69,7 @@ const SourceSkeletonPlaceholder = styled.div(({ theme }) => ({ marginTop: 1, width: '60%', - [`&:first-child`]: { + [`&:first-child${ignoreSsrWarning}`]: { margin: 0, }, })); diff --git a/code/ui/components/src/spaced/Spaced.tsx b/code/ui/components/src/spaced/Spaced.tsx index 2fdb767fed08..52f0ecf9d7c1 100644 --- a/code/ui/components/src/spaced/Spaced.tsx +++ b/code/ui/components/src/spaced/Spaced.tsx @@ -1,6 +1,6 @@ import type { FC } from 'react'; import React from 'react'; -import { styled } from '@storybook/theming'; +import { styled, ignoreSsrWarning } from '@storybook/theming'; const toNumber = (input: any) => (typeof input === 'number' ? input : Number(input)); @@ -20,7 +20,7 @@ const Container = styled.div( marginLeft: col * theme.layoutMargin, verticalAlign: 'inherit', }, - [`& > *:first-child`]: { + [`& > *:first-child${ignoreSsrWarning}`]: { marginLeft: 0, }, } @@ -28,7 +28,7 @@ const Container = styled.div( '& > *': { marginTop: row * theme.layoutMargin, }, - [`& > *:first-child`]: { + [`& > *:first-child${ignoreSsrWarning}`]: { marginTop: 0, }, }, diff --git a/code/ui/components/src/tabs/tabs.tsx b/code/ui/components/src/tabs/tabs.tsx index 284725a759fd..d34b5e1fdca0 100644 --- a/code/ui/components/src/tabs/tabs.tsx +++ b/code/ui/components/src/tabs/tabs.tsx @@ -10,6 +10,9 @@ import type { ChildrenList } from './tabs.helpers'; import { childrenToList, VisuallyHidden } from './tabs.helpers'; import { useList } from './tabs.hooks'; +const ignoreSsrWarning = + '/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */'; + export interface WrapperProps { bordered?: boolean; absolute?: boolean; @@ -84,7 +87,7 @@ const Content = styled.div( bottom: 0 + (bordered ? 1 : 0), top: 40 + (bordered ? 1 : 0), overflow: 'auto', - [`& > *:first-child`]: { + [`& > *:first-child${ignoreSsrWarning}`]: { position: 'absolute', left: 0 + (bordered ? 1 : 0), right: 0 + (bordered ? 1 : 0), From 4c946dbeb1754394439a80a36cfeb880c9f6517c Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Thu, 23 Feb 2023 16:16:29 +1100 Subject: [PATCH 2/4] Revert "Turn off Emotion's warnings about potentially unsafe pseudo-selectors in SSR" This reverts commit 03c5026744a4988fdc3623c1494d6efe58ef786d. --- code/ui/manager/src/index.tsx | 29 ++++++++++------------------- 1 file changed, 10 insertions(+), 19 deletions(-) diff --git a/code/ui/manager/src/index.tsx b/code/ui/manager/src/index.tsx index 0660ababc796..9f843d0069e5 100644 --- a/code/ui/manager/src/index.tsx +++ b/code/ui/manager/src/index.tsx @@ -6,21 +6,14 @@ import ReactDOM from 'react-dom'; import { Location, LocationProvider, useNavigate } from '@storybook/router'; import { Provider as ManagerProvider } from '@storybook/manager-api'; import type { Combo } from '@storybook/manager-api'; -import { - ThemeProvider, - ensure as ensureTheme, - CacheProvider, - createCache, -} from '@storybook/theming'; +import { ThemeProvider, ensure as ensureTheme } from '@storybook/theming'; + import { HelmetProvider } from 'react-helmet-async'; import App from './app'; import Provider from './provider'; -const emotionCache = createCache({ key: 'sto' }); -emotionCache.compat = true; - // @ts-expect-error (Converted from ts-ignore) ThemeProvider.displayName = 'ThemeProvider'; // @ts-expect-error (Converted from ts-ignore) @@ -59,16 +52,14 @@ const Main: FC<{ provider: Provider }> = ({ provider }) => { : !state.previewInitialized; return ( - - - - - + + + ); }} From 75557224c467dddf4beb16d047dfbaf36236ab45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Wed, 5 Apr 2023 12:24:02 +0200 Subject: [PATCH 3/4] Fixed comment placement --- code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx index bb0b3c14bee8..c4d5cf0f6a2a 100644 --- a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx +++ b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx @@ -152,7 +152,7 @@ export const TableWrapper = styled.table<{ : lighten(0.05, theme.background.content), } : { - [`&:not(:first-child${ignoreSsrWarning})`]: { + [`&:not(:first-child)${ignoreSsrWarning}`]: { borderTopWidth: 1, borderTopStyle: 'solid', borderTopColor: From 6f60a544a066c328431195cf2f58dc0892100de1 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Wed, 5 Apr 2023 21:43:44 +1000 Subject: [PATCH 4/4] Fix bad merge in `ArgsTable`. The relevant code was already removed on `next` in https://github.com/storybookjs/storybook/commit/5892ea4b15c448f5fe180e4e293eaea55196a257 --- .../src/components/ArgsTable/ArgsTable.tsx | 49 ++----------------- 1 file changed, 4 insertions(+), 45 deletions(-) diff --git a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx index c4d5cf0f6a2a..a54dc89d95f5 100644 --- a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx +++ b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx @@ -1,8 +1,8 @@ import type { FC } from 'react'; import React from 'react'; import pickBy from 'lodash/pickBy.js'; -import { styled, ignoreSsrWarning } from '@storybook/theming'; -import { transparentize, darken, lighten } from 'polished'; +import { styled } from '@storybook/theming'; +import { transparentize } from 'polished'; import { includeConditionalArg } from '@storybook/csf'; import { once } from '@storybook/client-logger'; import { IconButton, Icons, Link, ResetWrapper } from '@storybook/components'; @@ -107,24 +107,6 @@ export const TableWrapper = styled.table<{ marginLeft: inAddonPanel ? 0 : 1, marginRight: inAddonPanel ? 0 : 1, - [`tr:first-child${ignoreSsrWarning}`]: { - [`td:first-child${ignoreSsrWarning}, th:first-child${ignoreSsrWarning}`]: { - borderTopLeftRadius: inAddonPanel ? 0 : theme.appBorderRadius, - }, - [`td:last-child${ignoreSsrWarning}, th:last-child${ignoreSsrWarning}`]: { - borderTopRightRadius: inAddonPanel ? 0 : theme.appBorderRadius, - }, - }, - - [`tr:last-child${ignoreSsrWarning}`]: { - [`td:first-child${ignoreSsrWarning}, th:first-child${ignoreSsrWarning}`]: { - borderBottomLeftRadius: inAddonPanel ? 0 : theme.appBorderRadius, - }, - [`td:last-child${ignoreSsrWarning}, th:last-child${ignoreSsrWarning}`]: { - borderBottomRightRadius: inAddonPanel ? 0 : theme.appBorderRadius, - }, - }, - tbody: { // Safari doesn't love shadows on tbody so we need to use a shadow filter. In order to do this, // the table cells all need to be solid so they have a background color applied. @@ -139,31 +121,8 @@ export const TableWrapper = styled.table<{ : `drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.20))`, }), - tr: { - background: 'transparent', - overflow: 'hidden', - ...(inAddonPanel - ? { - borderTopWidth: 1, - borderTopStyle: 'solid', - borderTopColor: - theme.base === 'light' - ? darken(0.1, theme.background.content) - : lighten(0.05, theme.background.content), - } - : { - [`&:not(:first-child)${ignoreSsrWarning}`]: { - borderTopWidth: 1, - borderTopStyle: 'solid', - borderTopColor: - theme.base === 'light' - ? darken(0.1, theme.background.content) - : lighten(0.05, theme.background.content), - }, - }), - }, - - td: { + '> tr > *': { + // For filter to work properly, the table cells all need to be opaque. background: theme.background.content, borderTop: `1px solid ${theme.appBorderColor}`, },