Addon-docs: Fix style bleeding

code/addons/docs/src/DocsRenderer.tsx

@@ -22,9 +22,6 @@ export class DocsRenderer<TRenderer extends Renderer> {
       element: HTMLElement,
       callback: () => void
     ): void => {
-      // Use a random key to force the container to re-render each time we call `renderDocs`
-      //   TODO: do we still need this? It was needed for angular (legacy) inline rendering:
-      //   https://github.com/storybookjs/storybook/pull/16149
       const components = {
         ...defaultComponents,
         ...docsParameter?.components,
@@ -33,7 +30,7 @@ export class DocsRenderer<TRenderer extends Renderer> {
       import('@mdx-js/react').then(({ MDXProvider }) => {
         ReactDOM.render(
           <MDXProvider components={components}>
-            <Docs key={Math.random()} context={context} docsParameter={docsParameter} />
+            <Docs context={context} docsParameter={docsParameter} />
           </MDXProvider>,
           element,
           callback

code/ui/.storybook/preview.tsx

@@ -18,7 +18,7 @@ import type { Channel } from '@storybook/channels';
 
 import { DocsContext } from '@storybook/blocks';
 
-import { DocsContent, DocsWrapper } from '../blocks/src/components';
+import { DocsPageWrapper } from '../blocks/src/components';
 
 const { document } = global;
 
@@ -150,11 +150,9 @@ export const decorators = [
    * Activated with parameters.docsStyles = true
    */ (Story, { parameters: { docsStyles } }) =>
     docsStyles ? (
-      <DocsWrapper className="sbdocs sbdocs-wrapper">
-        <DocsContent className="sbdocs sbdocs-content">
-          <Story />
-        </DocsContent>
-      </DocsWrapper>
+      <DocsPageWrapper>
+        <Story />
+      </DocsPageWrapper>
     ) : (
       <Story />
     ),

code/ui/blocks/src/blocks/DocsContainer.tsx

@@ -4,7 +4,7 @@ import { global } from '@storybook/global';
 import type { ThemeVars } from '@storybook/theming';
 import { ThemeProvider, ensure as ensureTheme } from '@storybook/theming';
 import type { Renderer } from '@storybook/types';
-import { DocsWrapper, DocsContent } from '../components';
+import { DocsPageWrapper } from '../components';
 import type { DocsContextProps } from './DocsContext';
 import { DocsContext } from './DocsContext';
 import { SourceContainer } from './SourceContainer';
@@ -45,9 +45,7 @@ export const DocsContainer: FunctionComponent<DocsContainerProps> = ({
     <DocsContext.Provider value={context}>
       <SourceContainer channel={context.channel}>
         <ThemeProvider theme={ensureTheme(theme)}>
-          <DocsWrapper className="sbdocs sbdocs-wrapper">
-            <DocsContent className="sbdocs sbdocs-content">{children}</DocsContent>
-          </DocsWrapper>
+          <DocsPageWrapper>{children}</DocsPageWrapper>
         </ThemeProvider>
       </SourceContainer>
     </DocsContext.Provider>

code/ui/blocks/src/blocks/Subtitle.tsx

@@ -14,5 +14,5 @@ export const Subtitle: FunctionComponent<SubtitleProps> = ({ children }) => {
   if (!text) {
     text = parameters?.componentSubtitle;
   }
-  return text ? <PureSubtitle className="sbdocs-subtitle">{text}</PureSubtitle> : null;
+  return text ? <PureSubtitle className="sbdocs-subtitle sb-unstyled">{text}</PureSubtitle> : null;
 };

code/ui/blocks/src/blocks/Title.tsx

@@ -21,5 +21,5 @@ export const Title: FunctionComponent<TitleProps> = ({ children }) => {
   if (!text) {
     text = extractTitle(context.storyById().title);
   }
-  return text ? <PureTitle className="sbdocs-title">{text}</PureTitle> : null;
+  return text ? <PureTitle className="sbdocs-title sb-unstyled">{text}</PureTitle> : null;
 };

code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx

@@ -423,7 +423,7 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
       <TableWrapper
         aria-hidden={isLoading}
         {...{ compact, inAddonPanel, isLoading }}
-        className="docblock-argstable"
+        className="docblock-argstable sb-unstyled"
       >
         <thead className="docblock-argstable-head">
           <tr>

code/ui/blocks/src/components/ColorPalette.tsx

@@ -202,7 +202,7 @@ interface ColorPaletteProps {
  */
 export const ColorPalette: FunctionComponent<ColorPaletteProps> = ({ children, ...props }) => (
   <ResetWrapper>
-    <List {...props} className="docblock-colorpalette">
+    <List {...props} className="docblock-colorpalette sb-unstyled">
       <ListHeading>
         <ListName>Name</ListName>
         <ListSwatches>Swatches</ListSwatches>

code/ui/blocks/src/components/DocsPage.tsx

@@ -7,40 +7,22 @@ import React from 'react';
 
 /**
  * This selector styles all raw elements inside the DocsPage like this example with a `<div/>`:
- * :where(div:not(.sb-unstyled, .sbdocs-preview... :where(.sb-unstyled, .sbdocs-preview...) div))
+ * :where(div:not(.sb-unstyled, .sb-anchor, .sb-unstyled div, .sb-unstyled div))
  *
- * 1. first ':where': ensures this has a specificity of 0, making it easy to override.
- * 2. 'div:not(...)': selects all div elements that are not...
- * 3. '.sb-unstyled, .sbdocs-preview...': any of the elements we don't want to style
- * 3. ':where(.sb-unstyled, .sbdocs-preview...) div': or are descendants of an .sb-unstyled or .sbdocs-preview, etc. It is a shorthand for '.sb-unstyled div, sbdocs-preview div...'
- * 4. .sb-unstyled is an escape hatch that allows the user to opt-out of the default styles
- *    by wrapping their content in an element with this class: <Unstyled />
- * 5. the other UNSTYLED_SELECTORS are elements we don't want the styles to bleed into, like canvas, story and source blocks.
+ * 1. ':where': ensures this has a specificity of 0, making it easier to override.
+ * 3. 'div:not(...)': selects all div elements that are not...
+ * 4. '.sb-anchor': Ensures anchors are not styled, which would have led to inheritable styles bleeding all the way down to stories
+ * 5. '.sb-unstyled, .sb-unstyled div': any element with sb-unstyled class, or descendants thereof
+ * 6. .sb-unstyled is an escape hatch that allows the user to opt-out of the default styles
+ *    by wrapping their content in an element with the 'sb-unstyled' class or the <Unstyled /> block.
+ *
+ * Most Storybook doc blocks has the sb-unstyled class to opt-out of the default styles.
  */
-const UNSTYLED_SELECTORS = [
-  '.sb-unstyled',
-  '.sbdocs-preview',
-  '.sbdocs-pre',
-  '.sb-story',
-  '.docblock-source',
-  '.docblock-argstable',
-  '.sbdocs-title',
-  '.sbdocs-subtitle',
-  '.docblock-icongallery',
-  '.docblock-emptyblock',
-  '.docblock-typeset',
-  '.docblock-colorpalette',
-].join(', ');
 const toGlobalSelector = (element: string): string =>
-  `& :where(${element}:not(${UNSTYLED_SELECTORS}, :where(${UNSTYLED_SELECTORS}) ${element}))`;
+  `& :where(${element}:not(.sb-anchor, .sb-unstyled, .sb-unstyled ${element}))`;
 
 const breakpoint = 600;
 
-export interface DocsPageProps {
-  title: string;
-  subtitle?: string;
-}
-
 export const Title = styled.h1(withReset, ({ theme }) => ({
   color: theme.color.defaultText,
   fontSize: theme.typography.size.m3,
@@ -455,7 +437,7 @@ interface DocsPageWrapperProps {
 }
 
 export const DocsPageWrapper: FC<DocsPageWrapperProps> = ({ children }) => (
-  <DocsWrapper>
-    <DocsContent>{children}</DocsContent>
+  <DocsWrapper className="sbdocs sbdocs-wrapper">
+    <DocsContent className="sbdocs sbdocs-content">{children}</DocsContent>
   </DocsWrapper>
 );

code/ui/blocks/src/components/EmptyBlock.tsx

@@ -17,4 +17,6 @@ const Wrapper = styled.div(withReset, ({ theme }) => ({
   fontSize: theme.typography.size.s2,
 }));
 
-export const EmptyBlock = (props: any) => <Wrapper {...props} className="docblock-emptyblock" />;
+export const EmptyBlock = (props: any) => (
+  <Wrapper {...props} className="docblock-emptyblock sb-unstyled" />
+);

code/ui/blocks/src/components/IconGallery.tsx

@@ -68,7 +68,7 @@ interface IconGalleryProps {
  */
 export const IconGallery: FunctionComponent<IconGalleryProps> = ({ children, ...props }) => (
   <ResetWrapper>
-    <List {...props} className="docblock-icongallery">
+    <List {...props} className="docblock-icongallery sb-unstyled">
       {children}
     </List>
   </ResetWrapper>

code/ui/blocks/src/components/Preview.tsx

@@ -193,7 +193,7 @@ export const Preview: FC<PreviewProps> = ({
   const [expanded, setExpanded] = useState(isExpanded);
   const { source, actionItem } = getSource(withSource, expanded, setExpanded);
   const [scale, setScale] = useState(1);
-  const previewClasses = [className].concat(['sbdocs', 'sbdocs-preview']);
+  const previewClasses = [className].concat(['sbdocs', 'sbdocs-preview', 'sb-unstyled']);
 
   const defaultActionItems = withSource ? [actionItem] : [];
   const [additionalActionItems, setAdditionalActionItems] = useState(

code/ui/blocks/src/components/Source.tsx

@@ -108,7 +108,7 @@ const Source: FunctionComponent<SourceProps> = ({
       copyable
       format={format}
       language={language}
-      className="docblock-source"
+      className="docblock-source sb-unstyled"
       {...rest}
     >
       {code}

code/ui/blocks/src/components/Story.tsx

@@ -105,7 +105,7 @@ const Story: FunctionComponent<StoryProps> = (props) => {
   const { inline } = props;
 
   return (
-    <div id={storyBlockIdFromId(props)} className="sb-story">
+    <div id={storyBlockIdFromId(props)} className="sb-story sb-unstyled">
       {inline ? (
         <InlineStory {...(props as InlineStoryProps)} />
       ) : (

code/ui/blocks/src/components/Typeset.tsx

@@ -51,7 +51,7 @@ export const Typeset: FC<TypesetProps> = ({
   sampleText,
   ...props
 }) => (
-  <Wrapper {...props} className="docblock-typeset">
+  <Wrapper {...props} className="docblock-typeset sb-unstyled">
     {fontSizes.map((size) => (
       <TypeSpecimen key={size}>
         <Label>{size}</Label>