Skip to content

Commit b44c8cb

Browse files
mark-fitzgeraldmark-fitzgerald
authored
[Storybook] Configure Aphrodite to Not Append !important to Styles (#2107)
## Summary: Aphrodite appends `!important` to all styling, by default. This is cumbersome for debugging and for writing appropriately defined rulesets. This configuration change causes Aphrodite to NOT append `!important`. This change is limited to our dev environments (i.e. Storybook). Webapp has already implemented this, and handles Perseus styling accordingly. Additionally, this change uncovered a bug that causes an incorrect option to display as blue instead of red. The styling logic was refactored to account for the removal of `!important` and to clarify how styling is applied based upon the widget options. Issue: LEMS-2227 ## Test plan: 1. Open Storybook locally. 2. Inspect any widget with the browser inspect tool. 3. Note the significant lack of `!important` suffixes. ## Test plan for bugfix: 1. Open Storybook locally. 2. Navigate to Perseus > Widgets > Radio > Choice > [Review Mode](http://localhost:6006/?path=/story/perseus-widgets-radio-choice--review-mode) 3. Note that the third item ("Incorrect (selected)") is red, and not blue. Author: mark-fitzgerald Reviewers: jeremywiebe, catandthemachines, mark-fitzgerald Required Reviewers: Approved By: jeremywiebe, catandthemachines Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x) Pull Request URL: #2107
1 parent b07f293 commit b44c8cb

File tree

8 files changed

+155
-160
lines changed

8 files changed

+155
-160
lines changed

‎.changeset/dry-turtles-leave.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@khanacademy/perseus-dev-ui": patch
3+
"@khanacademy/perseus": patch
4+
---
5+
6+
[Storybook] Configure Aphrodite to Not Append !important to Styles
7+
[Radio] Bugfix - Incorrect choice showing as blue instead of red

‎.storybook/main.ts

+20
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,25 @@ import {mergeConfig} from "vite";
33

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

6+
// This is a temporary plugin option to mimic what is in PROD in regard to cascade layers.
7+
// Perseus LESS files are wrapped in the 'shared' layer in Webapp.
8+
// To get the same ordering of precedence in Storybook, the imported LESS files need to be wrapped accordingly.
9+
// Once the LESS files have cascade layers included (LEMS-2801),
10+
// then the following plugin option should be removed.
11+
const lessWrapper = {
12+
name: "wrap-less-in-layer",
13+
transform: (code: string, pathname: string) => {
14+
if (pathname.endsWith(".less")) {
15+
const layerStatements =
16+
"@layer reset, shared, legacy;\n@layer shared";
17+
return {
18+
code: `${layerStatements} { ${code} }`,
19+
map: null,
20+
};
21+
}
22+
},
23+
};
24+
625
const config: StorybookConfig = {
726
framework: "@storybook/react-vite",
827

@@ -53,6 +72,7 @@ const config: StorybookConfig = {
5372
},
5473
// Fix from: https://github.com/storybookjs/storybook/issues/25256#issuecomment-1866441206
5574
assetsInclude: ["/sb-preview/runtime.js"],
75+
plugins: [...viteConfig.plugins, lessWrapper],
5676
});
5777
},
5878
staticDirs: ["../static"],

‎dev/vite.config.ts

+4
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@ export default defineConfig({
2727
hubble: resolve(__dirname, "../vendor/hubble/hubble.js"),
2828
raphael: resolve(__dirname, "../vendor/raphael/raphael.js"),
2929
jsdiff: resolve(__dirname, "../vendor/jsdiff/jsdiff.js"),
30+
aphrodite: resolve(
31+
__dirname,
32+
"../node_modules/aphrodite/no-important",
33+
),
3034
...packageAliases,
3135
},
3236
},

‎packages/perseus/src/widgets/group/__snapshots__/group.test.tsx.snap

+5-10
Original file line numberDiff line numberDiff line change
@@ -189,10 +189,9 @@ exports[`group widget should snapshot: initial render 1`] = `
189189
style="border-color: transparent; border-radius: 50%;"
190190
>
191191
<div
192-
class="circle_1w6i3h1"
192+
class="choiceBase_1p49anc-o_O-singleSelectShape_skffv-o_O-choiceHasLetter_jjjjws-o_O-choiceIsUnchecked_7sq9ra-o_O-uncheckedColors_7womui"
193193
data-is-radio-icon="true"
194194
data-testid="choice-icon__library-choice-icon"
195-
style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
196195
>
197196
<div
198197
class="innerWrapper_177sg8x"
@@ -303,10 +302,9 @@ exports[`group widget should snapshot: initial render 1`] = `
303302
style="border-color: transparent; border-radius: 50%;"
304303
>
305304
<div
306-
class="circle_1w6i3h1"
305+
class="choiceBase_1p49anc-o_O-singleSelectShape_skffv-o_O-choiceHasLetter_jjjjws-o_O-choiceIsUnchecked_7sq9ra-o_O-uncheckedColors_7womui"
307306
data-is-radio-icon="true"
308307
data-testid="choice-icon__library-choice-icon"
309-
style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
310308
>
311309
<div
312310
class="innerWrapper_177sg8x"
@@ -417,10 +415,9 @@ exports[`group widget should snapshot: initial render 1`] = `
417415
style="border-color: transparent; border-radius: 50%;"
418416
>
419417
<div
420-
class="circle_1w6i3h1"
418+
class="choiceBase_1p49anc-o_O-singleSelectShape_skffv-o_O-choiceHasLetter_jjjjws-o_O-choiceIsUnchecked_7sq9ra-o_O-uncheckedColors_7womui"
421419
data-is-radio-icon="true"
422420
data-testid="choice-icon__library-choice-icon"
423-
style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
424421
>
425422
<div
426423
class="innerWrapper_177sg8x"
@@ -531,10 +528,9 @@ exports[`group widget should snapshot: initial render 1`] = `
531528
style="border-color: transparent; border-radius: 50%;"
532529
>
533530
<div
534-
class="circle_1w6i3h1"
531+
class="choiceBase_1p49anc-o_O-singleSelectShape_skffv-o_O-choiceHasLetter_jjjjws-o_O-choiceIsUnchecked_7sq9ra-o_O-uncheckedColors_7womui"
535532
data-is-radio-icon="true"
536533
data-testid="choice-icon__library-choice-icon"
537-
style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
538534
>
539535
<div
540536
class="innerWrapper_177sg8x"
@@ -645,10 +641,9 @@ exports[`group widget should snapshot: initial render 1`] = `
645641
style="border-color: transparent; border-radius: 50%;"
646642
>
647643
<div
648-
class="circle_1w6i3h1"
644+
class="choiceBase_1p49anc-o_O-singleSelectShape_skffv-o_O-choiceHasLetter_jjjjws-o_O-choiceIsUnchecked_7sq9ra-o_O-uncheckedColors_7womui"
649645
data-is-radio-icon="true"
650646
data-testid="choice-icon__library-choice-icon"
651-
style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
652647
>
653648
<div
654649
class="innerWrapper_177sg8x"

0 commit comments

Comments
 (0)