Skip to content

Commit

Permalink
fix: storybook local aliases; deprecated imports
Browse files Browse the repository at this point in the history
  • Loading branch information
castastrophe committed Mar 22, 2024
1 parent 7d35905 commit b41a4aa
Show file tree
Hide file tree
Showing 29 changed files with 222 additions and 377 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/build.yml
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ jobs:
## --- BUILD --- ##
- name: Build components & ui-icons
shell: bash
run: yarn builder tag:component,ui-icons
run: yarn ci

## --- UPLOAD (only ubuntu-latest at the moment) --- ##
- name: Upload compiled assets & NX performance profile
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/compare-results.yml
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,7 @@ jobs:
- name: Build
if: ${{ steps.download.outcome != 'success' }}
shell: bash
run: yarn builder tag:component,ui-icons
run: yarn ci

- name: Upload compiled assets
if: ${{ steps.download.outcome != 'success' }}
Expand Down
219 changes: 25 additions & 194 deletions .storybook/assets/base.css
Original file line number Diff line number Diff line change
@@ -1,204 +1,35 @@
/*!
* Copyright 2023 Adobe. All rights reserved.
*
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at <http://www.apache.org/licenses/LICENSE-2.0>
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/

body {
margin: 0;
font-size: 10px;
}

nav .spectrum-Site-logo {
margin-inline-end: var(--spectrum-global-dimension-size-200);
color: #fa0f00;
block-size: 32px;
}

.spectrum--large nav .spectrum-Site-logo {
block-size: 40px;
}

.docblock-argstable-head {
display: none;
}

/* .docblock-argstable-body {
display: grid;
grid-template-columns: minmax(25%, 200px) minmax(75%, 1fr);
} */

.docblock-argstable-body tr td {
letter-spacing: unset;
font-size: 11px;
color: rgb(34, 34, 34);
background-color: rgb(255, 255, 255);
}

.docblock-argstable-body td > span:has(select),
.docblock-argstable-body td textarea {
max-width: 280px !important;
}

#storybook-explorer-tree {
background-color: rgb(255, 255, 255) !important;
}
background-color: var(--spectrum-background-layer-2-color);
color: var(--spectrum-neutral-content-color-default);

#storybook-explorer-tree > div {
margin-inline: 0;
font-family: var(--spectrum-sans-font-family-stack);
font-style: var(--spectrum-default-font-style);
font-size: 16px;
}

button.sidebar-item {
font-weight: 700 !important;
}
.spectrum {
background-color: var(--spectrum-background-layer-1-color);

.sidebar-item {
color: rgb(34, 34, 34) !important;
font-weight: 400 !important;
font-size: 14px !important;
line-height: 1.4em !important;
height: 32px !important;
border-radius: 4px !important;
padding-inline-start: 24px !important;
padding-inline-end: 12px !important;
padding-block: 4px !important;
margin-block: 4px !important;
/* @todo: add back the text color and update VRTs */
/* color: var(--spectrum-neutral-content-color-default); */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
}

input,
textarea,
select {
border-radius: 4px !important;
}

#storybook-explorer-searchfield {
padding: 3px 12px 5px 35px !important;
}

input:focus,
textarea:focus,
select:focus,
#storybook-explorer-searchfield:focus {
border-color: rgb(2, 101, 220) !important;
box-shadow: rgb(2, 101, 220) 0 0 0 1px inset !important;
}

.sidebar-item svg {
/* Hide the SVG elements that only include references */
svg:has(symbol):not(:has(use)) {
display: none;
color: rgb(34, 34, 34) !important;
}

[role="main"]
> div
> div:first-child
.os-content
> div
> :is(div, div > div:has(a)) {
gap: 4px;
}

[role="main"] > div > div:first-child .os-content > div > div > div:has(a) {
display: flex;
}

/* [role="main"] > div > div:first-child .os-content > div > div > div:not(:has(a)) button */
[role="main"]
> div
> div:first-child
.os-content
> div
> div
:is(button, a:not(:has(button))) {
min-inline-size: 32px;
border-radius: 4px;

padding-inline: 11px;
padding-block: 4px;
margin: 0;

/* background-color: transparent !important; */
border-color: transparent !important;
color: rgb(34, 34, 34) !important;
font-weight: 300;

transition: background 130ms ease-out, border-color 130ms ease-out,
color 130ms ease-out, box-shadow 130ms ease-out;

line-height: 1.3;
}

[role="main"] > div > div:first-child .os-content > div > div > * {
margin-top: 0 !important;
}

[role="main"] > div > div:first-child .os-content > div > div > div > a {
display: flex;
align-items: flex-end;
justify-content: flex-end;
}

/* .os-content > div > div > div > a > button {
height: 100%;
} */

/* Indicates a button with a dropdown menu */
[role="main"]
> div
> div:first-child
.os-content
> div
> div
> div:not(:has(a))
button {
position: relative;
background-color: rgb(253, 253, 253) !important;
border: 1px solid rgb(144, 144, 144) !important;
}

/* Indicates a button with a dropdown menu */
/* [role="main"] > div > div:first-child .os-content > div > div :is(button,a:not(:has(button)),span) */
[role="main"]
> div
> div:first-child
.os-content
> div
> div
> div:not(:has(a))
button::after {
content: "◢";
position: absolute;
bottom: -3px;
right: -1px;
display: inline-block;
transform: scale(0.5);
color: rgb(177, 177, 177);
}

[role="main"]
> div
> div:first-child
.os-content
> div
> div
> div:not(:has(a))
button:hover {
background-color: rgb(242, 242, 242) !important;
}

[role="main"] > div > div:first-child .os-content > div > div > * {
margin-inline: 0 !important;
}

[role="main"]
> div
> div:first-child
.os-content
> div
> div
:is(button, a:not(:has(button)), span) {
height: 32px;
}

[role="main"]
> div
> div:first-child
.os-content
> div
> div
:is(button:hover, a:hover:not(:has(button))) {
background-color: rgb(230, 230, 230) !important;
}
93 changes: 75 additions & 18 deletions .storybook/assets/index.css
Original file line number Diff line number Diff line change
@@ -1,23 +1,69 @@
/*!
* Copyright 2023 Adobe. All rights reserved.
*
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at <http://www.apache.org/licenses/LICENSE-2.0>
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/

body {
font-family: var(--spectrum-sans-font-family-stack);
background-color: var(
--spectrum-alias-background-color-default,
var(--spectrum-global-color-gray-100)
);
color: var(
--spectrum-alias-text-color-default,
var(--spectrum-global-color-gray-900)
);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
--spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro",
-apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu,
"Trebuchet MS", "Lucida Grande", sans-serif;
--spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro",
-apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu,
"Trebuchet MS", "Lucida Grande", sans-serif;

--spectrum-font-family: var(--spectrum-sans-font-family-stack);
--spectrum-font-style: var(--spectrum-default-font-style);
--spectrum-font-size: var(--spectrum-font-size-100);

margin: 0;
background-color: var(--spectrum-background-layer-2-color);

/* @todo: add back the text color and update VRTs */
/* color: var(--spectrum-neutral-content-color-default); */

font-family: var(--spectrum-font-family);
font-style: var(--spectrum-font-style);
font-size: var(--spectrum-font-size);
}

body:lang(ar) {
font-family: var(--spectrum-font-family-ar);
}

body:lang(he) {
font-family: var(--spectrum-font-family-he);
}

/* Hide the SVG elements that only include references */
svg:has(symbol):not(:has(use)) {
display: none;
}

.sidebar-header > div:has(img, a) {
margin-right: 8px;
margin-inline-end: 8px;
}

.sidebar-header > div img {
height: auto;
width: 100%;
block-size: auto;
inline-size: 100%;
}

nav .spectrum-Site-logo {
margin-inline-end: 16px;
color: #fa0f00;
block-size: 32px;
}

.spectrum--large nav .spectrum-Site-logo {
block-size: 40px;
}

.docblock-argstable-body tr td {
Expand All @@ -29,10 +75,7 @@ body {

.docblock-argstable-body td > span:has(select),
.docblock-argstable-body td textarea {
max-width: var(
--spectrum-alias-single-line-width,
var(--spectrum-global-dimension-size-2400)
) !important;
max-inline-size: 192px !important;
}

#storybook-explorer-searchfield {
Expand All @@ -43,8 +86,22 @@ button.sidebar-item {
font-weight: 700;
}

button[data-action="collapse-root"] {
font-family: var(--spectrum-sans-font-family-stack);
font-style: var(--spectrum-detail-sans-serif-font-style);
font-weight: var(--spectrum-detail-sans-serif-font-weight);
font-size: var(--spectrum-detail-size-m);
margin-block-start: 0;
margin-block-end: 0;

color: var(--spectrum-detail-color);

line-height: var(--spectrum-detail-line-height);
letter-spacing: var(--spectrum-detail-letter-spacing);
text-transform: uppercase;
}

.sidebar-item {
/* height: 32px !important; */
padding-block: 4px;
}

Expand Down
Loading

0 comments on commit b41a4aa

Please sign in to comment.