Task/fp 1499 core-styles demo #45
Closed
Conversation
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
root:
1. installed fractal
- but no NX command for it yet
core-styles:
1. configured fractal
2. documented pattern library
3. custom preview template (loads per-pattern assets)
4. authored button pattern
* chore(core-styles): version up to 0.6.0-beta * docs(core-styles): readme, related repos & usage - remove callout that only cms uses this - add portal to related repo * fix(core-styles): small button a bit more vert pad Mimics: TACC/Core-Styles#30 * fix(tup-ui): load CSS from correct path (#6) * fix(tup-ui): load CSS from correct path * chore(tup-ui): format:write * fix(tup-ui): more CSS path fixes * Fix pipeline by building dist/core-components * Fix pipeline by building dist/core-styles Co-authored-by: Joon-Yee Chuah <jchuah@tacc.utexas.edu> * docs(core-styles): fix misleading typo in README * fix(core-styles): disabled link: no bkgd color (#11) Mimics: TACC/Core-Portal#659 * chore(core-styles): add missing const * chore(core-styles): update local build steps These steps were based on Core-Styles in its own repo, where it had tags from which `git describe` could produce a build ID. No tags in new repo, so simpler default build step, and do not mention `git describe`. * docs(core-styles): clean up publish steps * docs(core-styles): npx nx format:write * fix(core-styles): s-system-specs unset figure css * fix(core-styles): no figure css, only .figure css 1. Remove elements/figure.css because raw figures expect no styling. 2. Move extended elements/figure styles into our Bootstrap .figure CSS. I should have never added the figure styles for all raw elements. * Revert "fix(core-styles): s-system-specs unset figure css" This reverts commit c3109ad. * fix(core-styles): remove unwanted sample html css The c-callout pattern sample html has margin-inline that is unset via snippet on dev.cms, a snippet which says its "undo" of that style be comitted. This is the requested commit. * chore(core-styles): v0.6.0-beta.1 * fix(core-styles): remove unnecssary step The npm publish process runs build step. * fix(core-styles): fp-1666, section banner overflow (#19) * fix(core-styles): remove unnecssary step The npm publish process runs build step. * fix(core-styles): fp-1666, section banner overflow - Do NOT hide section overflow by overlapping adjacent sections. - DO hide section overflow using clear CSS with minimal side effects. Fixes: https://jira.tacc.utexas.edu/browse/FP-1666 * chore(core-styles): v0.6.0-beta.2 * fix(core-styles): changelog urls for v0.6.0 tags * Core styles/v0.6.0 fp 1665 excess space above footer (#20) * chore: <main>, margin not pad. & accurate selector 1. The <main> tag should use margin, not padding. - margin lets us use margin collapsing - padding is tricky to collapse 2. The <main> tag deserves a more specific selector, because: - multiple ARE allowed - it is allowed to exist NOT JUST as direct child of <body> For: https://jira.tacc.utexas.edu/browse/FP-1665 * feat: drop .o-site for simple sticky footer trick 1. Make footer sticky in a simpler way. 2. Delete o-site styles and sample markup. For: https://jira.tacc.utexas.edu/browse/FP-1665 * fix: hide extra space, last light section ↔ footer - Use var for section vert. padding, so we can subtract by it later. - Subtract end-of-page light section pad. to reduce extra visual space. For: https://jira.tacc.utexas.edu/browse/FP-1665 * chore(core-styles): v0.6.0-beta.3 * fix: wrong selector for <main> from c3a7c6e For: https://jira.tacc.utexas.edu/browse/FP-1665 * fix: missing section style in 57ca7ac Hide margin for light sections AND dark sections, not just light ones. Because, .o-section.html states: > […] a dark Section will visually merge with the Footer. When dark section margin NOT removed, it did NOT merge with footer. For: https://jira.tacc.utexas.edu/browse/FP-1665 * chore(core-styles): restore o-site with idea code DesignSafe copied and changed o-site. Their o-site is simpler. I add it but comment it out so that beta.3 is still just a bug fix. Example Usage: https://www.designsafe-ci.org/rw/use-cases/ * chore(core-styles): v0.6.0 Co-authored-by: Joon-Yee Chuah <jchuah@tacc.utexas.edu>
* fix(core-styles): missing css vars from portal * chore(core-styles): improve color vars comment
These not in package root may be why require.resovle fails in CMS. Source: nodejs/node#29549 (comment)
This reverts commit 4337429.
Do not use CLI internally. I hope this fixes local dev error via: - npm workspaces - commander The errors: - run `npm ci` from workspace root, wrong version of commander installed - run "npm ci -w=… =w=…", then build:demo, commander is not found
The bin/*.js should build using main.js, not src/bin/build.js.
- Allow global styles and scripts to load per pattern. - Remove CMS color settings.
Previous selector was (I think): 1. too specific 2. unnecessarily distinct This allows CMS to successfully (and still simply) unset max-width.
Offer more options when loading pattern styles in Fractal:
- styles
- internal
- global
- local
- external
- global
- local
Offer more options when loading pattern styles in Fractal.
Before:
- styles
- internal
- external
After:
- styles
- internal
- global
- local
- external
- global
- local
BREAKING CHANGE: Our API for styles context in Fractal patterns has changed.
…p-ui into task/fp-1499-cms-pattern-library
This can be easily added back in if it becomes a useful feature.
Load base components stylsheet unless new setting shouldSkipBase is set.
Debatable. - If we host it, no need to include it. - If we don't host it, maybe include it. I think we should host it.
No need for `-css` on build and test scripts.
wesleyboar
changed the title
1 task
1 task
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Overview
Add
npm startcommand to demo core-styles patterns (using Fractal).This demo lets us prove CSS modules work before a client* uses them.
* Clients are core-components, Core-CMS, Core-Portal, and future external parties.
Related
Changes
buildscript intobuild:cssandbuild:demoTesting
npm cicd libs/core-stylesnpm run start/apps/ui-patternsfor the same pattern.* —* See screenshots in "UI" section.
† The CMS (or any client) can apply its styles atop the core-styles demo.
UI