Skip to content

Conversation

@wesleyboar
Copy link
Member

@wesleyboar wesleyboar commented Jul 12, 2022

Overview

Add core-styles demo using Fractal.

This supports testing Core-CMS UI patterns, not just UI patterns used by Core-Components.

Related

Changes

  • chore: .gitignore output
  • [failed] chore: .prettierignore .hbs
  • [extra] feat: convert CLI scripts to tiny Node scripts
  • doc: fractal usage hints
  • doc: demo homepage
  • doc: configure fractal
  • doc: customize fractal theme
  • feat: split build script into build:css and build:demo
  • feat: support loading different kinds of stylesheets in demo
  • feat: change c-button demo code from KSS to Fractal
  • feat: install Fractal dependencies in root

Testing

  1. npm ci
  2. cd libs/core-styles
  3. npm run start
  4. UI of patterns in demo match Portal UI for the same pattern.﹡
  5. (bonus) Test CMS UI Demo at task/FP-1499: CMS pattern library Core-CMS#512 .†

﹡ See screenshots in "UI" section.
† The CMS (or any client) can apply its styles atop the core-styles demo.

UI

primary secondary tertiary small
core-styles primary core-styles secondary core-styles tertiary core-styles small

wesleyboar and others added 21 commits July 10, 2022 12:39
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)
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.
@wesleyboar wesleyboar force-pushed the task/fp-1499-cms-pattern-library branch from 89c55bf to 176449e Compare July 12, 2022 14:51
@wesleyboar wesleyboar marked this pull request as ready for review July 18, 2022 22:21
@wesleyboar wesleyboar changed the base branch from main to milestone/001--core-components July 25, 2022 14:49
@wesleyboar wesleyboar changed the base branch from milestone/001--core-components to main July 25, 2022 14:49
@wesleyboar
Copy link
Member Author

If this stops working, suspect a30002a.

@wesleyboar
Copy link
Member Author

Paused. FP-1737 will change the fate of this PR.

@wesleyboar wesleyboar marked this pull request as draft July 28, 2022 22:36
@wesleyboar
Copy link
Member Author

Closed in favor of #45.

@wesleyboar wesleyboar closed this Jul 29, 2022
@wesleyboar wesleyboar deleted the task/fp-1499-cms-pattern-library branch July 29, 2022 17:28
@wesleyboar wesleyboar restored the task/fp-1499-cms-pattern-library branch July 29, 2022 19:58
@wesleyboar
Copy link
Member Author

Closed (still) but now in favor of TACC/Core-Styles#34.

@wesleyboar wesleyboar reopened this Jul 29, 2022
@wesleyboar wesleyboar closed this Jul 29, 2022
@wesleyboar wesleyboar deleted the task/fp-1499-cms-pattern-library branch July 29, 2022 21:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants