Demo: Pattern B — full DS CSS + thin dsr.css (Tabs fixed) - #6
Closed
flacoman91 wants to merge 5 commits into
Closed
Conversation
Load index.css only and add a Tabs example so reviewers can compare Pattern A vs Pattern B demos for the thin dsr.css export.
Load full Design System CSS only — Tabs miss DSR-only .tablist chrome, which is why Pattern B apps need the thin dsr.css export.
Same full DS CSS stack as the broken demo, plus @cfpb/design-system-react/dsr.css for DSR-only tab chrome without loading the fat index.css.
Contributor
|
3 tasks
flacoman91
changed the title
This was referenced Jul 28, 2026
flacoman91
added a commit
to cfpb/design-system-react
that referenced
this pull request
Jul 29, 2026
…terns (#630) ## Summary - Add a thin companion stylesheet export `@cfpb/design-system-react/dsr.css` for **Pattern B** apps that already load full Design System CSS and must not also load fat `index.css` (duplicate DS rules + fonts). - Expand the Pattern A `ds-components.ts` barrel so `index.css` covers more React-backed DS modules (list, button-group, expandables, search-input, hero, text-introduction, …). - Document Pattern A vs Pattern B clearly in the README (what to import, what not to combine). - Keep inactive Tabs on `isLink` / `a-btn--link` so dotted-underline link chrome stays correct while tab styles live in `tab.scss` / `dsr.css`. ## Why Existing CFPB apps already ship full `@cfpb/cfpb-design-system` CSS. They cannot safely import DSR `index.css` without duplicating buttons, forms, fonts, etc. Tabs (and other React-only overrides) live in DSR, not in the Design System package — so Pattern B had no clean CSS entry until `dsr.css`. ## What changed | Area | Change | | --- | --- | | `package.json` exports | Add `./dsr.css` → `dist/dsr.css` | | Build | Second Vite build (`vite.dsr-css.config.ts`) + cleanup stub script | | `dsr-styles.ts` | DSR-authored styles only (Tabs + React overrides); no fonts / no DS molecules | | `ds-components.ts` | Broader Pattern A coverage for `index.css` | | README | Pattern A / Pattern B / do-not-combine guidance | | Tabs | Restore `Button isLink` on inactive tabs for correct link styling | ## Consumer demos (`dsr-test`) | Demo | Shows | | --- | --- | | [dsr-test#7](cfpb/dsr-test#7) Pattern A | `index.css` only — Tabs OK | | [dsr-test#8](cfpb/dsr-test#8) Pattern B broken | Full DS CSS, **no** `dsr.css` — Tabs incomplete | | [dsr-test#6](cfpb/dsr-test#6) Pattern B fixed | Full DS CSS + `dsr.css` — Tabs fixed | Previews: - https://cfpb.github.io/dsr-test/pr-previews/pr-7/ - https://cfpb.github.io/dsr-test/pr-previews/pr-8/ - https://cfpb.github.io/dsr-test/pr-previews/pr-6/ ## Usage **Pattern A (new React apps):** ```ts import '@cfpb/design-system-react/index.css' ``` **Pattern B (existing DS apps):** ```ts import '@cfpb/design-system-react/dsr.css' // Do not also import '@cfpb/design-system-react/index.css' ``` ## Test plan - [ ] `yarn build` produces both `dist/index.css` and `dist/dsr.css` (no leftover `dsr-styles-entry.js`) - [ ] Storybook Tabs: inactive = dotted link; active = gray chip - [ ] Pattern A demo (#7): Tabs / buttons / slug look correct from `index.css` alone - [ ] Pattern B broken demo (#8): Buttons OK; Tabs missing DSR chrome - [ ] Pattern B fixed demo (#6): Tabs match Pattern A; no `index.css` import - [ ] Confirm README “do not combine” table matches the intended consumer guidance
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Consumer demo for Pattern B done right against
rad-dsr-css-cleanup(DSR #630).Existing CFPB-style app: full Design System CSS + thin companion stylesheet for DSR-only rules (Tabs). Does not import
@cfpb/design-system-react/index.css(would duplicate DS + fonts).base.scssalso pins--font-stack-branded(DS defaults that token toinitial→system-uiwithout the pin).DSR pin:
fd60109a7onrad-dsr-css-cleanup.Sibling demos
demo/dsr-css-pattern-aindex.cssonlydemo/dsr-css-pattern-b-brokendsr.css— Tabs brokendemo/dsr-css-pattern-b)dsr.css— Tabs fixedWhat to look for
index.csson top of DSPreview
https://cfpb.github.io/dsr-test/pr-previews/pr-6/
Test plan
index.cssis not imported