Skip to content

Commit

Permalink
chore: migrate to storybook v7 (microsoft#32018)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dmytrokirpa
dmytrokirpa authored Aug 7, 2024
1 parent 6d615a3 commit ef15b5d
Show file tree
Hide file tree
Showing 495 changed files with 5,237 additions and 5,510 deletions.
156 changes: 94 additions & 62 deletions .storybook/docs-root.css
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,26 @@
#docs-root .sbdocs-content {
#storybook-docs .sbdocs-content {
font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
sans-serif;
max-width: 1200px;
}

#docs-root h1.sbdocs-title {
#storybook-docs h1.sbdocs-title {
font-family: inherit;
font-size: 44px;
line-height: 60px;
/* identical to box height, or 143% */
font-weight: 900;
letter-spacing: -0.04em;
color: #000000;
margin-top: 49px;
}

#docs-root details {
#storybook-docs details {
position: relative;
z-index: 99;
}

#docs-root .sbdocs-p {
#storybook-docs .sbdocs:not(.sbdocs-preview) p {
font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
sans-serif;
font-size: 18px;
Expand All @@ -28,28 +30,28 @@
margin-top: 24px;
}

#docs-root .sbdocs-wrapper {
#storybook-docs .sbdocs-wrapper {
background: white;
min-height: auto;
}

#docs-root .sbdocs-img.featured-image {
#storybook-docs .sbdocs-img.featured-image {
max-width: 100%;
margin: 48px 0;
display: block;
}

#docs-root .sbdocs-img {
#storybook-docs .sbdocs-img {
border-radius: 24px;
}

#docs-root .sbdocs-hr {
#storybook-docs .sbdocs:not(.sbdocs-preview) hr {
margin: 48px 0;
height: 0;
border-top: 1px solid #ebebeb;
}

#docs-root .sbdocs-h2 {
#storybook-docs .sbdocs h2 {
font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
sans-serif;
font-size: 24px;
Expand All @@ -62,12 +64,12 @@
padding: 48px 0 0 0;
}

#docs-root .sbdocs-h2 code {
#storybook-docs .sbdocs h2 code {
border-radius: 4px;
font-size: 20px;
}

#docs-root .sbdocs-h3 {
#storybook-docs .sbdocs-h3 {
font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
sans-serif;
font-size: 18px;
Expand All @@ -77,20 +79,20 @@
color: #000000;
}

#docs-root .sbdocs-h3 code {
#storybook-docs .sbdocs-h3 code {
border-radius: 3px;
font-size: 16px;
}

/* Only apply to H3s inside of stories which have a parent with an ID */
#docs-root [id] > .sbdocs-h3:before {
#storybook-docs [id] > .sbdocs-h3:before {
content: '';
display: block;
height: 40px;
margin: -40px 0 0;
}

#docs-root .sbdocs-li {
#storybook-docs .sbdocs:not(.sbdocs-preview) li {
font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
sans-serif;
font-size: 16px;
Expand All @@ -102,62 +104,66 @@
margin-top: 8px;
}

#docs-root .sbdocs-ul {
#storybook-docs .sbdocs:not(.sbdocs-preview) ul {
margin: 12px 0;
}

#docs-root .sbdocs-ul .sbdocs-li {
#storybook-docs .sbdocs-ul .sbdocs:not(.sbdocs-preview) li {
list-style: none;
position: relative;
}

#docs-root .sbdocs-ul .sbdocs-li::before {
#storybook-docs .sbdocs-ul .sbdocs-li::before {
position: absolute;
content: '•';
color: #8d8d8d;
top: 0;
left: -15px;
}

#docs-root .sbdocs-ol .sbdocs-li::marker {
#storybook-docs .sbdocs-ol .sbdocs-li::marker {
color: #8d8d8d;
}

#docs-root .sbdocs-preview {
#storybook-docs .sbdocs-preview {
border-radius: 16px;
background: var(--colorBrandBackgroundInverted, #fff);
padding: 0;
box-shadow: none;
border: 1px solid var(--colorNeutralStroke1, #e1dfdd);
}

#docs-root .innerZoomElementWrapper {
#storybook-docs .sbdocs .docs-story div[scale] {
height: auto !important;
}

#storybook-docs .innerZoomElementWrapper {
padding: 30px;
}

#docs-root .sbdocs-preview > .os-host {
#storybook-docs .sbdocs-preview > .os-host {
display: none;
}

#docs-root span + .sbdocs .docblock-argstable tbody tr td button {
#storybook-docs span + .sbdocs .docblock-argstable tbody tr td button {
color: #0078d4;
color: red;
}

#docs-root .docs-story + div {
#storybook-docs .docs-story + div {
background: #11100f;
}

#docs-root .sbdocs-content > div:last-child {
#storybook-docs .sbdocs-content > div:last-child {
margin-bottom: 96px;
}

#docs-root .docs-story > div {
#storybook-docs .docs-story > div {
padding: 0;
background: none;
}

#docs-root .docs-story > div:last-child {
#storybook-docs .docs-story > div:last-child {
right: 31px;
border-radius: 24px;
}
Expand All @@ -179,22 +185,46 @@
letter-spacing: -0.01em;
}

#docs-root a.sbdocs-a {
#storybook-docs a.sbdocs-a {
color: #0078d4;
text-decoration: underline;
}

/* Styles for Github-flawored Markdown tables */
#storybook-docs table:not(.docblock-argstable) {
margin: 16px 0px;
font-size: 14px;
line-height: 24px;
padding: 0;
border-collapse: collapse;
}
#storybook-docs table:not(.docblock-argstable) tr {
border-top: 1px solid rgba(0, 0, 0, 0.1);
}

#storybook-docs table:not(.docblock-argstable) th {
font-weight: bold;
color: rgb(51, 51, 51);
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 6px 13px;
}

#storybook-docs table:not(.docblock-argstable) td {
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 6px 13px;
}

/* */
/* Args Table */
/* */

#docs-root .docblock-argstable tbody {
#storybook-docs .docblock-argstable tbody {
box-shadow: none;
border-left: none;
border-right: none;
}

#docs-root .docblock-argstable-head th {
#storybook-docs .docblock-argstable-head th {
letter-spacing: -0.01em;
color: black;
font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
Expand All @@ -204,30 +234,30 @@
font-weight: 600;
}

#docs-root thead.docblock-argstable-head {
#storybook-docs thead.docblock-argstable-head {
border-bottom: 1px solid #edebe9;
}

#docs-root .docblock-argstable-body > tr > td:nth-child(4) {
#storybook-docs .docblock-argstable-body > tr > td:nth-child(4) {
display: none;
}

#docs-root .docblock-argstable-head > tr > th:nth-child(4) {
#storybook-docs .docblock-argstable-head > tr > th:nth-child(4) {
display: none;
}

#docs-root .docblock-argstable tbody tr {
#storybook-docs .docblock-argstable tbody tr {
border: none;
}

#docs-root table.docblock-argstable tbody.docblock-argstable-body td,
#docs-root .docblock-argstable th {
#storybook-docs table.docblock-argstable tbody.docblock-argstable-body td,
#storybook-docs .docblock-argstable th {
padding-top: 12px;
padding-bottom: 12px;
padding-left: 16px;
}

#docs-root .docblock-argstable tbody tr td:nth-child(1) span {
#storybook-docs .docblock-argstable tbody tr td:nth-child(1) span {
font-weight: normal;
font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
sans-serif;
Expand All @@ -237,20 +267,20 @@
color: #616161;
}

#docs-root .docblock-argstable tbody tr td {
#storybook-docs .docblock-argstable tbody tr td {
vertical-align: top;
}

#docs-root .docblock-argstable-body > tr > td > div > div > button {
#storybook-docs .docblock-argstable-body > tr > td > div > div > button {
color: #0078d4;
line-height: 21px;
}

#docs-root code,
#docs-root .docblock-argstable tbody tr td:nth-child(3) > div > span,
#docs-root .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(2) span,
#docs-root .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(1) > div > span,
#docs-root .css-16d4d7t {
#storybook-docs code,
#storybook-docs .docblock-argstable tbody tr td:nth-child(3) > div > span,
#storybook-docs .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(2) span,
#storybook-docs .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(1) > div > span,
#storybook-docs .css-16d4d7t {
font-family: 'Cascadia Code', Menlo, 'Courier New', Courier, monospace;
font-style: normal;
font-weight: normal;
Expand All @@ -261,14 +291,14 @@
-webkit-box-decoration-break: clone;
}

#docs-root code.sbdocs-code,
#docs-root .sbdocs-p code,
#docs-root .sbdocs-li code,
#docs-root .docblock-argstable code,
#docs-root .docblock-argstable tbody tr td:nth-child(3) > div > span,
#docs-root .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(2) span,
#docs-root .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(1) > div > span,
#docs-root .css-16d4d7t {
#storybook-docs code.sbdocs-code,
#storybook-docs .sbdocs-p code,
#storybook-docs .sbdocs-li code,
#storybook-docs .docblock-argstable code,
#storybook-docs .docblock-argstable tbody tr td:nth-child(3) > div > span,
#storybook-docs .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(2) span,
#storybook-docs .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(1) > div > span,
#storybook-docs .css-16d4d7t {
font-size: 14px;
background: #f0f0f0;
border-radius: 4px;
Expand All @@ -279,11 +309,11 @@
line-height: 1.5;
}

#docs-root .docblock-argstable code {
#storybook-docs .docblock-argstable code {
white-space: normal;
}

#docs-root code {
#storybook-docs code {
padding: 0.1em 0.2em;
display: inline-block;
background-color: rgba(17, 16, 15, 0.1);
Expand All @@ -294,26 +324,26 @@
width: auto !important;
}

#docs-root .sbdocs-preview .prismjs {
#storybook-docs .sbdocs-preview .prismjs {
overflow: hidden;
}

#docs-root .os-content .prismjs * {
#storybook-docs .os-content .prismjs * {
font-family: 'Cascadia Code', Menlo, 'Courier New', Courier, monospace;
font-size: 14px;
line-height: 1.4em;
}

#docs-root .sbdocs-preview .prismjs code {
#storybook-docs .sbdocs-preview .prismjs code {
color: white;
background: #11100f;
margin: 0;
overflow-x: auto;
}

#docs-root .docblock-argstable-body td > div > p,
#docs-root .docblock-argstable-body > tr > td:nth-child(2) p,
#docs-root .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(1) > span {
#storybook-docs .docblock-argstable-body td > div > p,
#storybook-docs .docblock-argstable-body > tr > td:nth-child(2) p,
#storybook-docs .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(1) > span {
font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
sans-serif;
font-size: 16px;
Expand All @@ -322,15 +352,15 @@
letter-spacing: -0.01em;
}

#docs-root .docblock-argstable tr > :nth-child(1) {
#storybook-docs .docblock-argstable tr > :nth-child(1) {
width: 4%;
}

#docs-root .docblock-argstable tr > :nth-child(2) {
#storybook-docs .docblock-argstable tr > :nth-child(2) {
width: 100%;
}

#docs-root .os-padding {
#storybook-docs .os-padding {
z-index: 0;
}

Expand Down Expand Up @@ -380,6 +410,8 @@
}

body,
body h1,
body h2,
body p,
body ul,
body ul li {
Expand Down
Loading

0 comments on commit ef15b5d

Please sign in to comment.