Skip to content

Commit

Permalink
[Storybook] Configure Aphrodite to Not Append !important to Styles (#…
Browse files Browse the repository at this point in the history 
…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
  • Loading branch information
@mark-fitzgerald
mark-fitzgerald authored Feb 5, 2025
1 parent b07f293 commit b44c8cb
Show file tree
Hide file tree
Showing 8 changed files with 155 additions and 160 deletions.
7 changes: 7 additions & 0 deletions .changeset/dry-turtles-leave.md
View file
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
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,25 @@ 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",

Expand Down Expand Up @@ -53,6 +72,7 @@ const config: StorybookConfig = {
},
// Fix from: https://github.com/storybookjs/storybook/issues/25256#issuecomment-1866441206
assetsInclude: ["/sb-preview/runtime.js"],
plugins: [...viteConfig.plugins, lessWrapper],
});
},
staticDirs: ["../static"],
Expand Down
4 changes: 4 additions & 0 deletions dev/vite.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
},
Expand Down
15 changes: 5 additions & 10 deletions packages/perseus/src/widgets/group/__snapshots__/group.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
Loading

0 comments on commit b44c8cb

Please sign in to comment.