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.

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

[Storybook] Configure Aphrodite to Not Append !important to Styles #2107

Merged
merged 21 commits into from
Feb 5, 2025
Merged
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
e49d6d6
docs(changeset): [Storybook] Configure Aphrodite to Not Append !impor…
Jan 14, 2025
698506a
Add alias to vite config file to ensure that Aphrodite doesn't append…
Jan 14, 2025
908d55b
Remove unnecessary import statement.
Jan 14, 2025
9c2bed1
Update Storybook's configuration of Vite to wrap cascade layers aroun…
Jan 17, 2025
1acacc2
Merge branch 'main' into LEMS-2227-adjust-aphrodite-to-not-use-important
Jan 17, 2025
4a233c9
Prettier.
Jan 17, 2025
8f8b6e1
Notes regarding dynamic styling
Jan 21, 2025
e735556
Adjust cross-out line to be better positioned.
Jan 24, 2025
5da033d
Remove refactored code.
Jan 25, 2025
eb6816e
docs(changeset): [Storybook] Configure Aphrodite to Not Append !impor…
Jan 25, 2025
977a002
Merge branch 'main' into LEMS-2227-adjust-aphrodite-to-not-use-important
Jan 25, 2025
62396f8
Remove older changeset file.
Jan 25, 2025
8eaeb12
Update unit tests and snapshots.
Jan 25, 2025
b8e20bc
Update snapshots
Jan 27, 2025
8756b0f
[LEMS-2227-adjust-aphrodite-to-not-use-important] Merge branch 'main'…
mark-fitzgerald Jan 27, 2025
b047e3c
[LEMS-2227-adjust-aphrodite-to-not-use-important] Merge branch 'main'…
mark-fitzgerald Jan 29, 2025
960e11d
[LEMS-2227-adjust-aphrodite-to-not-use-important] Merge branch 'main'…
mark-fitzgerald Jan 30, 2025
ba8bb5a
[LEMS-2227-adjust-aphrodite-to-not-use-important] Adding console mess…
mark-fitzgerald Jan 30, 2025
387b30d
[LEMS-2227-adjust-aphrodite-to-not-use-important] Merge branch 'main'…
mark-fitzgerald Feb 3, 2025
ba439ee
[LEMS-2227-adjust-aphrodite-to-not-use-important] Adjust color for pr…
mark-fitzgerald Feb 3, 2025
4f0f8cf
[LEMS-2227-adjust-aphrodite-to-not-use-important] Merge branch 'main'…
mark-fitzgerald Feb 5, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/dry-turtles-leave.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@khanacademy/perseus-dev-ui": patch
"@khanacademy/perseus": patch
---

[Storybook] Configure Aphrodite to Not Append !important to Styles
[Radio] Bugfix - Incorrect choice showing as blue instead of red
20 changes: 20 additions & 0 deletions .storybook/main.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,27 @@
import viteConfig from "../dev/vite.config";

Check warning on line 1 in .storybook/main.ts

GitHub Actions / Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x)

File ignored by default.
import {mergeConfig} from "vite";

import type {StorybookConfig} from "@storybook/react-vite";

// This is a temporary plugin option to mimic what is in PROD in regard to cascade layers.
// Perseus LESS files are wrapped in the 'shared' layer in Webapp.
// To get the same ordering of precedence in Storybook, the imported LESS files need to be wrapped accordingly.
// Once the LESS files have cascade layers included (LEMS-2801),
// then the following plugin option should be removed.
const lessWrapper = {
name: "wrap-less-in-layer",
transform: (code: string, pathname: string) => {
if (pathname.endsWith(".less")) {
const layerStatements =
"@layer reset, shared, legacy;\n@layer shared";
return {
code: `${layerStatements} { ${code} }`,
map: null,
};
}
},
};

const config: StorybookConfig = {
framework: "@storybook/react-vite",

@@ -53,6 +72,7 @@
},
// Fix from: https://github.com/storybookjs/storybook/issues/25256#issuecomment-1866441206
assetsInclude: ["/sb-preview/runtime.js"],
plugins: [...viteConfig.plugins, lessWrapper],
});
},
staticDirs: ["../static"],
4 changes: 4 additions & 0 deletions dev/vite.config.ts
Original file line number Diff line number Diff line change
@@ -27,6 +27,10 @@ export default defineConfig({
hubble: resolve(__dirname, "../vendor/hubble/hubble.js"),
raphael: resolve(__dirname, "../vendor/raphael/raphael.js"),
jsdiff: resolve(__dirname, "../vendor/jsdiff/jsdiff.js"),
aphrodite: resolve(
__dirname,
"../node_modules/aphrodite/no-important",
),
...packageAliases,
},
},
Original file line number Diff line number Diff line change
@@ -189,10 +189,9 @@ exports[`group widget should snapshot: initial render 1`] = `
style="border-color: transparent; border-radius: 50%;"
>
<div
class="circle_1w6i3h1"
class="choiceBase_1p49anc-o_O-singleSelectShape_skffv-o_O-choiceHasLetter_jjjjws-o_O-choiceIsUnchecked_7sq9ra-o_O-uncheckedColors_7womui"
data-is-radio-icon="true"
data-testid="choice-icon__library-choice-icon"
style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
>
<div
class="innerWrapper_177sg8x"
@@ -303,10 +302,9 @@ exports[`group widget should snapshot: initial render 1`] = `
style="border-color: transparent; border-radius: 50%;"
>
<div
class="circle_1w6i3h1"
class="choiceBase_1p49anc-o_O-singleSelectShape_skffv-o_O-choiceHasLetter_jjjjws-o_O-choiceIsUnchecked_7sq9ra-o_O-uncheckedColors_7womui"
data-is-radio-icon="true"
data-testid="choice-icon__library-choice-icon"
style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
>
<div
class="innerWrapper_177sg8x"
@@ -417,10 +415,9 @@ exports[`group widget should snapshot: initial render 1`] = `
style="border-color: transparent; border-radius: 50%;"
>
<div
class="circle_1w6i3h1"
class="choiceBase_1p49anc-o_O-singleSelectShape_skffv-o_O-choiceHasLetter_jjjjws-o_O-choiceIsUnchecked_7sq9ra-o_O-uncheckedColors_7womui"
data-is-radio-icon="true"
data-testid="choice-icon__library-choice-icon"
style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
>
<div
class="innerWrapper_177sg8x"
@@ -531,10 +528,9 @@ exports[`group widget should snapshot: initial render 1`] = `
style="border-color: transparent; border-radius: 50%;"
>
<div
class="circle_1w6i3h1"
class="choiceBase_1p49anc-o_O-singleSelectShape_skffv-o_O-choiceHasLetter_jjjjws-o_O-choiceIsUnchecked_7sq9ra-o_O-uncheckedColors_7womui"
data-is-radio-icon="true"
data-testid="choice-icon__library-choice-icon"
style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
>
<div
class="innerWrapper_177sg8x"
@@ -645,10 +641,9 @@ exports[`group widget should snapshot: initial render 1`] = `
style="border-color: transparent; border-radius: 50%;"
>
<div
class="circle_1w6i3h1"
class="choiceBase_1p49anc-o_O-singleSelectShape_skffv-o_O-choiceHasLetter_jjjjws-o_O-choiceIsUnchecked_7sq9ra-o_O-uncheckedColors_7womui"
data-is-radio-icon="true"
data-testid="choice-icon__library-choice-icon"
style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
>
<div
class="innerWrapper_177sg8x"
Loading