Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CLI: Scope styles in sample components from the CLI templates #22162

Merged
merged 8 commits into from May 9, 2023
Merged

CLI: Scope styles in sample components from the CLI templates #22162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
078e3cf
Scope Header.css
Amerlander Oct 11, 2022
1ae534c
Scope page.css
Amerlander Oct 11, 2022
95e96d9
fix css class assignment in react-like CLI templates
yannbf Oct 11, 2022
ca3144e
add storybook-header to angular template component
yannbf Oct 12, 2022
ecbcad7
remove unnecessary wrapper css class
yannbf Apr 19, 2023
a39d226
Merge branch 'next' into fix/scope-sample-styles
JReinhold Apr 27, 2023
c5bf981
Merge branch 'next' into fix/scope-sample-styles
yannbf May 8, 2023
87e80bc
update classes in more templates
yannbf May 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion code/frameworks/angular/template/cli/header.component.ts
View file
Open in desktop
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/angular/template/cli/page.component.ts
View file
Open in desktop
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/nextjs/template/cli/js/Header.jsx
View file
Open in desktop
Expand Up @@ -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">
Expand Down
3 changes: 1 addition & 2 deletions code/frameworks/nextjs/template/cli/js/Page.jsx
View file
Open in desktop
Expand Up @@ -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{' '}
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/nextjs/template/cli/ts-3-8/Header.tsx
View file
Open in desktop
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/nextjs/template/cli/ts-3-8/Page.tsx
View file
Open in desktop
Expand Up @@ -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{' '}
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/nextjs/template/cli/ts/Header.tsx
View file
Open in desktop
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/nextjs/template/cli/ts/Page.tsx
View file
Open in desktop
Expand Up @@ -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{' '}
Expand Down
10 changes: 5 additions & 5 deletions code/lib/cli/rendererAssets/common/header.css
View file
Open in desktop
@@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down
20 changes: 10 additions & 10 deletions code/lib/cli/rendererAssets/common/page.css
View file
Open in desktop
@@ -1,4 +1,4 @@
section {
.storybook-page {
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 24px;
Expand All @@ -8,7 +8,7 @@ section {
color: #333;
}

section h2 {
.storybook-page h2 {
font-weight: 700;
font-size: 32px;
line-height: 1;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -64,6 +64,6 @@ section .tip-wrapper svg {
margin-top: 3px;
}

section .tip-wrapper svg path {
.storybook-page .tip-wrapper svg path {
fill: #1ea7fd;
}
2 changes: 1 addition & 1 deletion code/renderers/html/template/cli/js/Header.js
View file
Open in desktop
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/html/template/cli/js/Page.js
View file
Open in desktop
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/html/template/cli/ts-3-8/Header.ts
View file
Open in desktop
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/html/template/cli/ts-3-8/Page.ts
View file
Open in desktop
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/html/template/cli/ts-4-9/Header.ts
View file
Open in desktop
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/html/template/cli/ts-4-9/Page.ts
View file
Open in desktop
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/preact/template/cli/Header.jsx
View file
Open in desktop
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/preact/template/cli/Page.jsx
View file
Open in desktop
Expand Up @@ -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{' '}
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/react/template/cli/js/Header.jsx
View file
Open in desktop
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/react/template/cli/js/Page.jsx
View file
Open in desktop
Expand Up @@ -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{' '}
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/react/template/cli/ts-3-8/Header.tsx
View file
Open in desktop
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/react/template/cli/ts-3-8/Page.tsx
View file
Open in desktop
Expand Up @@ -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{' '}
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/react/template/cli/ts-4-9/Header.tsx
View file
Open in desktop
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/react/template/cli/ts-4-9/Page.tsx
View file
Open in desktop
Expand Up @@ -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{' '}
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/svelte/template/cli/js/Header.svelte
View file
Open in desktop
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/svelte/template/cli/js/Page.svelte
View file
Open in desktop
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/svelte/template/cli/ts-3-8/Header.svelte
View file
Open in desktop
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/svelte/template/cli/ts-3-8/Page.svelte
View file
Open in desktop
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/svelte/template/cli/ts-4-9/Header.svelte
View file
Open in desktop
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/svelte/template/cli/ts-4-9/Page.svelte
View file
Open in desktop
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/vue/template/cli/Header.vue
View file
Open in desktop
@@ -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">
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/vue/template/cli/Page.vue
View file
Open in desktop
Expand Up @@ -7,7 +7,7 @@
@onCreateAccount="onCreateAccount"
/>

<section>
<section class="storybook-page">
<h2>Pages in Storybook</h2>
<p>
We recommend building UIs with a
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/vue3/template/cli/js/Header.vue
View file
Open in desktop
@@ -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">
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/vue3/template/cli/js/Page.vue
View file
Open in desktop
Expand Up @@ -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
Expand Down