Merge pull request #22162 from storybookjs/fix/scope-sample-styles

CLI: Scope styles in sample components from the CLI templates
storybookjs · May 9, 2023 · 97ed646 · 97ed646
2 parents e421710 + 87e80bc
commit 97ed646
Show file tree

Hide file tree

Showing 44 changed files with 71 additions and 66 deletions.
diff --git a/code/frameworks/angular/template/cli/header.component.ts b/code/frameworks/angular/template/cli/header.component.ts
@@ -4,7 +4,7 @@ import type { User } from './User';
 @Component({
   selector: 'storybook-header',
   template: `<header>
-    <div class="wrapper">
+    <div class="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">

diff --git a/code/frameworks/angular/template/cli/page.component.ts b/code/frameworks/angular/template/cli/page.component.ts
@@ -10,7 +10,7 @@ import type { User } from './User';
       (onLogin)="doLogin()"
       (onCreateAccount)="doCreateAccount()"
     ></storybook-header>
-    <section>
+    <section class="storybook-page">
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a

diff --git a/code/frameworks/nextjs/template/cli/js/Header.jsx b/code/frameworks/nextjs/template/cli/js/Header.jsx
@@ -6,7 +6,7 @@ import './header.css';
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
   <header>
-    <div className="wrapper">
+    <div className="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">

diff --git a/code/frameworks/nextjs/template/cli/js/Page.jsx b/code/frameworks/nextjs/template/cli/js/Page.jsx
@@ -14,8 +14,7 @@ export const Page = () => {
         onLogout={() => setUser(undefined)}
         onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
-
-      <section>
+      <section className="storybook-page">
         <h2>Pages in Storybook</h2>
         <p>
           We recommend building UIs with a{' '}

diff --git a/code/frameworks/nextjs/template/cli/ts-3-8/Header.tsx b/code/frameworks/nextjs/template/cli/ts-3-8/Header.tsx
@@ -16,7 +16,7 @@ interface HeaderProps {
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
   <header>
-    <div className="wrapper">
+    <div className="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">

diff --git a/code/frameworks/nextjs/template/cli/ts-3-8/Page.tsx b/code/frameworks/nextjs/template/cli/ts-3-8/Page.tsx
@@ -19,7 +19,7 @@ export const Page: React.FC = () => {
         onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
 
-      <section>
+      <section className="storybook-page">
         <h2>Pages in Storybook</h2>
         <p>
           We recommend building UIs with a{' '}

diff --git a/code/frameworks/nextjs/template/cli/ts/Header.tsx b/code/frameworks/nextjs/template/cli/ts/Header.tsx
@@ -16,7 +16,7 @@ interface HeaderProps {
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
   <header>
-    <div className="wrapper">
+    <div className="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">

diff --git a/code/frameworks/nextjs/template/cli/ts/Page.tsx b/code/frameworks/nextjs/template/cli/ts/Page.tsx
@@ -19,7 +19,7 @@ export const Page: React.FC = () => {
         onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
 
-      <section>
+      <section className="storybook-page">
         <h2>Pages in Storybook</h2>
         <p>
           We recommend building UIs with a{' '}

diff --git a/code/lib/cli/rendererAssets/common/header.css b/code/lib/cli/rendererAssets/common/header.css
@@ -1,4 +1,4 @@
-.wrapper {
+.storybook-header {
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   padding: 15px 20px;
@@ -7,12 +7,12 @@
   justify-content: space-between;
 }
 
-svg {
+.storybook-header svg {
   display: inline-block;
   vertical-align: top;
 }
 
-h1 {
+.storybook-header h1 {
   font-weight: 700;
   font-size: 20px;
   line-height: 1;
@@ -21,11 +21,11 @@ h1 {
   vertical-align: top;
 }
 
-button + button {
+.storybook-header button + button {
   margin-left: 10px;
 }
 
-.welcome {
+.storybook-header .welcome {
   color: #333;
   font-size: 14px;
   margin-right: 10px;

diff --git a/code/lib/cli/rendererAssets/common/page.css b/code/lib/cli/rendererAssets/common/page.css
@@ -1,4 +1,4 @@
-section {
+.storybook-page {
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 24px;
@@ -8,7 +8,7 @@ section {
   color: #333;
 }
 
-section h2 {
+.storybook-page h2 {
   font-weight: 700;
   font-size: 32px;
   line-height: 1;
@@ -17,25 +17,25 @@ section h2 {
   vertical-align: top;
 }
 
-section p {
+.storybook-page p {
   margin: 1em 0;
 }
 
-section a {
+.storybook-page a {
   text-decoration: none;
   color: #1ea7fd;
 }
 
-section ul {
+.storybook-page ul {
   padding-left: 30px;
   margin: 1em 0;
 }
 
-section li {
+.storybook-page li {
   margin-bottom: 8px;
 }
 
-section .tip {
+.storybook-page .tip {
   display: inline-block;
   border-radius: 1em;
   font-size: 11px;
@@ -48,14 +48,14 @@ section .tip {
   vertical-align: top;
 }
 
-section .tip-wrapper {
+.storybook-page .tip-wrapper {
   font-size: 13px;
   line-height: 20px;
   margin-top: 40px;
   margin-bottom: 40px;
 }
 
-section .tip-wrapper svg {
+.storybook-page .tip-wrapper svg {
   display: inline-block;
   height: 12px;
   width: 12px;
@@ -64,6 +64,6 @@ section .tip-wrapper svg {
   margin-top: 3px;
 }
 
-section .tip-wrapper svg path {
+.storybook-page .tip-wrapper svg path {
   fill: #1ea7fd;
 }
diff --git a/code/renderers/html/template/cli/js/Header.js b/code/renderers/html/template/cli/js/Header.js
@@ -5,7 +5,7 @@ export const createHeader = ({ user, onLogout, onLogin, onCreateAccount }) => {
   const header = document.createElement('header');
 
   const wrapper = document.createElement('div');
-  wrapper.className = 'wrapper';
+  wrapper.className = 'storybook-header';
 
   const logo = `<div>
     <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">

diff --git a/code/renderers/html/template/cli/js/Page.js b/code/renderers/html/template/cli/js/Page.js
@@ -34,7 +34,7 @@ export const createPage = () => {
   article.appendChild(header);
 
   const section = `
-  <section>
+  <section class="storybook-page">
     <h2>Pages in Storybook</h2>
     <p>
       We recommend building UIs with a

diff --git a/code/renderers/html/template/cli/ts-3-8/Header.ts b/code/renderers/html/template/cli/ts-3-8/Header.ts
@@ -12,7 +12,7 @@ export const createHeader = ({ user, onLogout, onLogin, onCreateAccount }: Heade
   const header = document.createElement('header');
 
   const wrapper = document.createElement('div');
-  wrapper.className = 'wrapper';
+  wrapper.className = 'storybook-header';
 
   const logo = `<div>
     <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">

diff --git a/code/renderers/html/template/cli/ts-3-8/Page.ts b/code/renderers/html/template/cli/ts-3-8/Page.ts
@@ -38,7 +38,7 @@ export const createPage = () => {
   article.appendChild(header);
 
   const section = `
-  <section>
+  <section class="storybook-page">
     <h2>Pages in Storybook</h2>
     <p>
       We recommend building UIs with a

diff --git a/code/renderers/html/template/cli/ts-4-9/Header.ts b/code/renderers/html/template/cli/ts-4-9/Header.ts
@@ -12,7 +12,7 @@ export const createHeader = ({ user, onLogout, onLogin, onCreateAccount }: Heade
   const header = document.createElement('header');
 
   const wrapper = document.createElement('div');
-  wrapper.className = 'wrapper';
+  wrapper.className = 'storybook-header';
 
   const logo = `<div>
     <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">

diff --git a/code/renderers/html/template/cli/ts-4-9/Page.ts b/code/renderers/html/template/cli/ts-4-9/Page.ts
@@ -38,7 +38,7 @@ export const createPage = () => {
   article.appendChild(header);
 
   const section = `
-  <section>
+  <section class="storybook-page">
     <h2>Pages in Storybook</h2>
     <p>
       We recommend building UIs with a

diff --git a/code/renderers/preact/template/cli/Header.jsx b/code/renderers/preact/template/cli/Header.jsx
@@ -5,7 +5,7 @@ import './header.css';
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
   <header>
-    <div className="wrapper">
+    <div className="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">

diff --git a/code/renderers/preact/template/cli/Page.jsx b/code/renderers/preact/template/cli/Page.jsx
@@ -14,7 +14,7 @@ export const Page = () => {
         onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
 
-      <section>
+      <section className="storybook-page">
         <h2>Pages in Storybook</h2>
         <p>
           We recommend building UIs with a{' '}

diff --git a/code/renderers/react/template/cli/js/Header.jsx b/code/renderers/react/template/cli/js/Header.jsx
@@ -6,7 +6,7 @@ import './header.css';
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
   <header>
-    <div className="wrapper">
+    <div className="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">

diff --git a/code/renderers/react/template/cli/js/Page.jsx b/code/renderers/react/template/cli/js/Page.jsx
@@ -15,7 +15,7 @@ export const Page = () => {
         onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
 
-      <section>
+      <section className="storybook-page">
         <h2>Pages in Storybook</h2>
         <p>
           We recommend building UIs with a{' '}

diff --git a/code/renderers/react/template/cli/ts-3-8/Header.tsx b/code/renderers/react/template/cli/ts-3-8/Header.tsx
@@ -16,7 +16,7 @@ interface HeaderProps {
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
   <header>
-    <div className="wrapper">
+    <div className="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">

diff --git a/code/renderers/react/template/cli/ts-3-8/Page.tsx b/code/renderers/react/template/cli/ts-3-8/Page.tsx
@@ -19,7 +19,7 @@ export const Page: React.FC = () => {
         onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
 
-      <section>
+      <section className="storybook-page">
         <h2>Pages in Storybook</h2>
         <p>
           We recommend building UIs with a{' '}

diff --git a/code/renderers/react/template/cli/ts-4-9/Header.tsx b/code/renderers/react/template/cli/ts-4-9/Header.tsx
@@ -16,7 +16,7 @@ interface HeaderProps {
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
   <header>
-    <div className="wrapper">
+    <div className="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">

diff --git a/code/renderers/react/template/cli/ts-4-9/Page.tsx b/code/renderers/react/template/cli/ts-4-9/Page.tsx
@@ -19,7 +19,7 @@ export const Page: React.FC = () => {
         onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
 
-      <section>
+      <section className="storybook-page">
         <h2>Pages in Storybook</h2>
         <p>
           We recommend building UIs with a{' '}

diff --git a/code/renderers/svelte/template/cli/js/Header.svelte b/code/renderers/svelte/template/cli/js/Header.svelte
@@ -20,7 +20,7 @@
 </script>
 
 <header>
-  <div class="wrapper">
+  <div class="storybook-header">
     <div>
       <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
         <g fill="none" fill-rule="evenodd">

diff --git a/code/renderers/svelte/template/cli/js/Page.svelte b/code/renderers/svelte/template/cli/js/Page.svelte
@@ -13,7 +13,7 @@
     on:createAccount={() => (user = { name: 'Jane Doe' })}
   />
 
-  <section>
+  <section class="storybook-page">
     <h2>Pages in Storybook</h2>
     <p>
       We recommend building UIs with a

diff --git a/code/renderers/svelte/template/cli/ts-3-8/Header.svelte b/code/renderers/svelte/template/cli/ts-3-8/Header.svelte
@@ -20,7 +20,7 @@
 </script>
 
 <header>
-  <div class="wrapper">
+  <div class="storybook-header">
     <div>
       <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
         <g fill="none" fill-rule="evenodd">

diff --git a/code/renderers/svelte/template/cli/ts-3-8/Page.svelte b/code/renderers/svelte/template/cli/ts-3-8/Page.svelte
@@ -13,7 +13,7 @@
     on:createAccount={() => (user = { name: 'Jane Doe' })}
   />
 
-  <section>
+  <section class="storybook-page">
     <h2>Pages in Storybook</h2>
     <p>
       We recommend building UIs with a

diff --git a/code/renderers/svelte/template/cli/ts-4-9/Header.svelte b/code/renderers/svelte/template/cli/ts-4-9/Header.svelte
@@ -20,7 +20,7 @@
 </script>
 
 <header>
-  <div class="wrapper">
+  <div class="storybook-header">
     <div>
       <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
         <g fill="none" fill-rule="evenodd">

diff --git a/code/renderers/svelte/template/cli/ts-4-9/Page.svelte b/code/renderers/svelte/template/cli/ts-4-9/Page.svelte
@@ -13,7 +13,7 @@
     on:createAccount={() => (user = { name: 'Jane Doe' })}
   />
 
-  <section>
+  <section class="storybook-page">
     <h2>Pages in Storybook</h2>
     <p>
       We recommend building UIs with a

diff --git a/code/renderers/vue/template/cli/Header.vue b/code/renderers/vue/template/cli/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <header>
-    <div class="wrapper">
+    <div class="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fill-rule="evenodd">

diff --git a/code/renderers/vue/template/cli/Page.vue b/code/renderers/vue/template/cli/Page.vue
@@ -7,7 +7,7 @@
       @onCreateAccount="onCreateAccount"
     />
 
-    <section>
+    <section class="storybook-page">
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a

diff --git a/code/renderers/vue3/template/cli/js/Header.vue b/code/renderers/vue3/template/cli/js/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <header>
-    <div class="wrapper">
+    <div class="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fill-rule="evenodd">

diff --git a/code/renderers/vue3/template/cli/js/Page.vue b/code/renderers/vue3/template/cli/js/Page.vue
@@ -2,7 +2,7 @@
   <article>
     <my-header :user="user" @login="onLogin" @logout="onLogout" @createAccount="onCreateAccount" />
 
-    <section>
+    <section class="storybook-page">
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a