task/TUP-280, 282, 283 -- UI patterns (fixes), CSS vars, styles by wesleyboar · Pull Request #14 · TACC/tup-ui

wesleyboar · 2022-06-18T14:36:27Z

Overview:

Reviewed #12 and fixed CSS i.e. made it look like Portal.

To Do

Do projects need to explicitly point to postcss config file to use it?

Changes:

~~See each commit message.~~ [Commit messages became too difficult to skim. No change list written.]

Testing:

nx build core-styles --skip-nx-cache
nx build core-components --skip-nx-cache
nx serve ui-patterns
Open "UI Patterns".
Really look around and click around.

UI:

1. Load from `src/lib/_imports/`: - Can't load core-styles from its `dist`. - I don't know why. - I do know `.gitignore` is not the problem.\* \* I tested disabling it's `dist` entry. 2. Add required CSS file from Portal: - Portal used `components/bootstrap.form.css`. - CMS did not, but CMS started Core Styles. - So Core Styles did not have `…/bootstrap.form.css`.

1. Fix the comment about dist in `.gitignore`. 2. Fix the path inaccuracy in `README`.

Tested only with: - `nx build core-components` - `nx serve ui-patterns`

Such a variable cannot be reduced: https://github.com/postcss/postcss-calc#usage Without reduction, i.e. if var stays, var definition must be preserved: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-properties#preserve If var preserved, then we may be unable to avoid duplicate vars: vitejs/vite#4448 (comment)

Patterns were recently added to portal: tertiary, active, loading. They had a couple active state bugs, which I also fixed: - wrong sample code in UI Pattern for Active button - class typo in Button.module.css

This should be done to all core-styles stylesheets. But that will have an uncertain effect on CMS. So for now, just make this work for core-components.

Mimicked by: TACC/Core-Portal#663

Just like I did earlier for core-components: 4c0bf2b.

This reverts commit d5bfc79. Since commit 4a873cb," Loading..." text is automatically hidden. - Reactstrap 9 and Bootstrap 5 use ".visually-hidden" class. - Rectstrap 8 and Bootstrap 4 uses ".sr-only" class. To avoid other unexpected bugs, I suggest same Bootstrap as CEPv2. Or… we reveal and fix any bugs (reference Bootstrap 4 → 5 migration).

Why `c-button` not `cortal.icon`? - This must be applied to the text and icon elements to work. Why not use inline-flex et cetera? - Because sibling buttons vertical alignment broken when I tried it. Inspiration: TACC/Core-Portal@307c54a

Style hyperlinks. Remove unused "wb-link" classes.

1. Message need not overwrite ".wb-link" (class dropped in 08ad3da). 2. Add an active state. \* \* Design does not care to distinguish link states.

Use same react-router-dom version as CEPv2 to make activeClassName work. - downgrade react-router-dom - use switch and component props

1. Remove unused class "nav-content". 2. Use anchor tag pseduo classes to overwrite "elements.css". 3. Add missing style for nav content. Depends on: e859114 (i.e. previous commit)

1. No "content" wrapper div. 2. Move "content" wrapper div styles to link. 3. Move text padding to icon. - Because the padding exists only because icon exists. - Required adding a Sidebar "icon" class. Builds off: 2243276 (i.e. previous commit)

wesleyboar · 2022-06-20T20:23:42Z

I pushed fixes for the issues I knew about when I opened the PR:

✓ wrong <Sidebar> styles — e859114, 2243276, 4a4d964
✓ wrong hyperlink color — 08ad3da, 4c60420
✓ wrong icon alignment and/or size in <Button> — bcff4da

…atterns--use-core-styles

apps/ui-patterns/src/app/App.tsx

jchuahtacc · 2022-06-20T21:16:10Z

libs/core-components/src/lib/DropdownSelector/DropdownSelector.module.css

 .container {
  /* Load select-css after Bootstrap overrides, because Bootstrap is like our "base" */
-  composes: form-control from '../../../styles/components/bootstrap.form.css';
+  composes: form-control from '@tacc/core-styles/src/lib/_imports/components/bootstrap.form.css';


Should this be from /src/lib/_imports or from /dist? It appears inconsistently in other places.

Yes, thanks.

I updated this (components) instance in 9acd951.

I updated all other instances (settings) in c237a15.

I did not update the final (tools) instance.¹

Footnotes

I did import from src/ in SectionContent.layouts.module.css because the dist/ version of the import has no content (because (a) those tools/media-queries are not available in native CSS yet, and (b) core-styles does not yet export source css to dist/ files that would be empty). ↩

The straggling use of src/ is a known bother. I will use PostCSS for src/ files until I see another way.

Maybe, if source css cannot be compiled, then I just add it to dist not compiled. Not really "dist" then, is it? Well, I am dist-ributing it, so it fits in dist... but I should distinguish that it is source... maybe I name such files dist/.../thing.src.css or dist/../thing.pcss (.pcss is a standard). Hrm… I think I like this!

@jchuahtacc, thoughts?

It should definitely be compiled if it's going out as dist, much in the same way that our distributed libraries for core-components go out as one umd file. It would also be nice to output one css file (i've seen an option somewhere where either vite or postcss outputs one file).

package.json

.postcssrc.yml

* task/TUP-272 - core components fixup (#7) * feat(core-components): copy & polish from cepv2 These comp…s: - were copied from cepv2 - were made more modular - have react-based dependencies Not cepv2 comp…s were copied, because some are not easy to make modular. Comp…s were copied May 4, 2022. Some have since changed in CEPv2, e.g.: - Button - Paginator - (maybe) Message * feat(comp…s): cepv2 update but w/ new styles paths Source: TACC/Core-Portal#639 * feat(comp…s): 2nd cepv2 update (no path updates) * feat(comp…s): cepv2 update: button tests, unmerged Source: TACC/Core-Portal#640 * fix(comp…s): fix core-styles paths (libs → lib) * feat(comp…s): update all paths to core-styles src Some of these may be able to use dist... I haven't checked yet. * feat(comp…s): fix paths that can use styles dist One of the paths is still src/lib/_imports. CMS has this problem often. To use src/lib/_imports instead of dist, see TUP-274. * fix(styles): all src/lib imports to use rel. paths Avoid users needing resolution paths specific to core-styles hierarchy. * fix(styles): src/lib rel. paths need no _imports/ Hotfix previous commit: aab21ba "fix(styles): all src/lib imports to use rel. paths" * fix(tup-ui): load CSS from correct path * Convert Button and dependencies to TS * Add reactstrap global * Replace temporary Message component to exports * Use Button from core-components in tup-ui * Added babel-plugin-postcss for core-components * Formatting * linting * Formatting * Task/tup 272 core components vite (#8) * Vite library build for core-components * Icon allows react node children * Add testing-library/react * Fix tests * Fix test * Formatting * vite output directory * clean tup-ui on build Co-authored-by: Wesley Bomar <wbomar@tacc.utexas.edu> * task/TUP-280 -- UI patterns (#12) * Add UI-Patterns app * Section exports from core-components * DescriptionList * Messages * Paginator * Pill * Dropdown selector * Same tsconfig settings in tup-ui * Show more * Section and Infinite Scroll Table * Add components for Sidebar (disabled) * Add react-router-dom v6 * Sidebar * Formatting and linting * linting for core-components * task/TUP-280, 282, 283 -- UI patterns (fixes), CSS vars, styles (#14) * Add UI-Patterns app * Section exports from core-components * DescriptionList * Messages * Paginator * Pill * Dropdown selector * Same tsconfig settings in tup-ui * Show more * Section and Infinite Scroll Table * Add components for Sidebar (disabled) * Add react-router-dom v6 * Sidebar * Formatting and linting * linting for core-components * fix(core-components): import failures 1. Load from `src/lib/_imports/`: - Can't load core-styles from its `dist`. - I don't know why. - I do know `.gitignore` is not the problem.\* \* I tested disabling it's `dist` entry. 2. Add required CSS file from Portal: - Portal used `components/bootstrap.form.css`. - CMS did not, but CMS started Core Styles. - So Core Styles did not have `…/bootstrap.form.css`. * fix(core-styles): dist ignore comment, README typo 1. Fix the comment about dist in `.gitignore`. 2. Fix the path inaccuracy in `README`. * fix(core-components): css syntax & missing values * feat: postcss config & deps Tested only with: - `nx build core-components` - `nx serve ui-patterns` * fix(core-components): do not use scss * docs(core-styles): css lint & syntax highlight * fix(core-styles): missing css vars from portal * fix(core-components): explicitely import css vars * fix(core-components): no css var within calc() Such a variable cannot be reduced: https://github.com/postcss/postcss-calc#usage Without reduction, i.e. if var stays, var definition must be preserved: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-properties#preserve If var preserved, then we may be unable to avoid duplicate vars: vitejs/vite#4448 (comment) * fix(ui-patterns): add missing button patterns Patterns were recently added to portal: tertiary, active, loading. They had a couple active state bugs, which I also fixed: - wrong sample code in UI Pattern for Active button - class typo in Button.module.css * fix(core-styles): explicit var import for patterns This should be done to all core-styles stylesheets. But that will have an uncertain effect on CMS. So for now, just make this work for core-components. * fix:(ui-patterns): show actual class name passed Mimicked by: TACC/Core-Portal#663 * fix(core-styles): add missing font family vars * fix(ui-patterns): explicit var import for patterns Just like I did earlier for core-components: 4c0bf2b. * chore(ui-patterns): do not import unused styles * chore(tup-ui): do not import unused styles * docs(ui-patterns): link to ITCSS organization doc * docs(tup-ui): link to ITCSS organization doc * feat(core-styles): add o-fixed-header-table * feat(core-components): use o-fixed-header-table Use o-fixed-header-table for InfiniteScrollTable via core-styles. * feat(core-styles): cortal icons * fix(core-components): icon styles, font, props * fix(ui-patterns): missing space between buttons * feat(core-styles): components/bootstrap.modal.css * feat: install bootstrap ^4.6.0 * fix(ui-patterns): global css (inc. bootstrap) also, re-document (simpler, broader) index.css * fix(core-components): hide Spinner Loading... text * fix(core-components): do not use Reactstrap Button * fix(core-components): (wip) tsx button prop limits Restrict combinations of button props type and size. Works only in file. Does not work in practice: - Use <Button> with bad props in Button.tsx, VS Code complains. - Use <Button> with bad props in UIPatternsButton.tsx, VS Code ignores. Also, removed related test cases, cuz TypeScript prevents need, right? * fix(core-styles): auto width for size-less buttons Set a default width for buttons that: - have no width - have no size - are not links This resolves ac5dcf8 having removed default size. * fix(core-components): mostly no use native button - Do not use native button for typical buttons. - The close button for Messages is atypical. * fix(core-components): ShowMore Button type This was not completely converted from Reactstrap to Core Component. * fix(ui-patterns): nx format:write * fix(core-components): nx format:write * fix(core-styles): nx format:write * fix: match reactstrap version to bootstrap version * Revert "fix(core-components): hide Spinner Loading... text" This reverts commit d5bfc79. Since commit 4a873cb," Loading..." text is automatically hidden. - Reactstrap 9 and Bootstrap 5 use ".visually-hidden" class. - Rectstrap 8 and Bootstrap 4 uses ".sr-only" class. To avoid other unexpected bugs, I suggest same Bootstrap as CEPv2. Or… we reveal and fix any bugs (reference Bootstrap 4 → 5 migration). * fix(core-styles): vertically align button content Why `c-button` not `cortal.icon`? - This must be applied to the text and icon elements to work. Why not use inline-flex et cetera? - Because sibling buttons vertical alignment broken when I tried it. Inspiration: TACC/Core-Portal@307c54a * fix(tup-ui): style links, no use wb-link Style hyperlinks. Remove unused "wb-link" classes. * fix(core-components): message no override .wb-link 1. Message need not overwrite ".wb-link" (class dropped in 08ad3da). 2. Add an active state. \* \* Design does not care to distinguish link states. * fix(ui-patterns): activeClassN… react-r…-dom ver. Use same react-router-dom version as CEPv2 to make activeClassName work. - downgrade react-router-dom - use switch and component props * fix(core-components): Sidebar styles 1. Remove unused class "nav-content". 2. Use anchor tag pseduo classes to overwrite "elements.css". 3. Add missing style for nav content. Depends on: e859114 (i.e. previous commit) * feat(core-components): simpler Sidebar styles 1. No "content" wrapper div. 2. Move "content" wrapper div styles to link. 3. Move text padding to icon. - Because the padding exists only because icon exists. - Required adding a Sidebar "icon" class. Builds off: 2243276 (i.e. previous commit) * chore(ui-patterns): nx format:write * chore(core-comp…s): load form css at dist not src * chore(core-comp…s): load css settings from dist Co-authored-by: Joon-Yee Chuah <jchuah@tacc.utexas.edu> * fix(core-components): missing dependency, dependency alternative (#13) * fix(core-components): CSS and Dependency imports * chore(tup-ui): minimize #13 diff * chore(core-components): minimize diff ie remove space * task/TUP - 284 -- core wrappers (#15) * Port tapis-ui/_wrappers * UIPatternsComplexWizard * Fix components to switch rather than route * Field array of field arrays step * Simple wizard * Formatting and linting * Fix wizard continue * Fix complex wizards value loading * Clarity on initialvalues vs defaultvalues in simple wizard * Formatting * Fix unit tests * fix collapse icon * Replace ErrorMessage component with formtext * Fix config files * Formatting * Add validation to wizards * Bump react-router-dom to v6.3.0 * Version bump reactstrap * navlink active classname Co-authored-by: Wesley Bomar <wbomar@tacc.utexas.edu> Co-authored-by: Wesley B <62723358+wesleyboar@users.noreply.github.com>

jchuahtacc and others added 30 commits June 16, 2022 08:57

Add UI-Patterns app

7864424

Section exports from core-components

57fe503

DescriptionList

e04d6a2

Messages

ff7b43d

Paginator

a0ce921

Pill

c37e8ee

Dropdown selector

bf399b8

Same tsconfig settings in tup-ui

2edf41d

Show more

a1b2cbf

Section and Infinite Scroll Table

740aa25

Add components for Sidebar (disabled)

5d01f40

Add react-router-dom v6

30c8b8f

Sidebar

97ff9ec

Formatting and linting

60fb1c0

linting for core-components

7ffacb8

fix(core-styles): dist ignore comment, README typo

d745c80

1. Fix the comment about dist in `.gitignore`. 2. Fix the path inaccuracy in `README`.

fix(core-components): css syntax & missing values

6da9adb

feat: postcss config & deps

4f4571a

Tested only with: - `nx build core-components` - `nx serve ui-patterns`

fix(core-components): do not use scss

6212446

docs(core-styles): css lint & syntax highlight

e7f4358

fix(core-styles): missing css vars from portal

c5454ba

fix(core-components): explicitely import css vars

35e4766

fix(ui-patterns): add missing button patterns

1b6d9a8

Patterns were recently added to portal: tertiary, active, loading. They had a couple active state bugs, which I also fixed: - wrong sample code in UI Pattern for Active button - class typo in Button.module.css

fix(core-styles): explicit var import for patterns

4c0bf2b

This should be done to all core-styles stylesheets. But that will have an uncertain effect on CMS. So for now, just make this work for core-components.

fix:(ui-patterns): show actual class name passed

6c12b65

Mimicked by: TACC/Core-Portal#663

fix(core-styles): add missing font family vars

6ba0eeb

fix(ui-patterns): explicit var import for patterns

e8ebc77

Just like I did earlier for core-components: 4c0bf2b.

chore(ui-patterns): do not import unused styles

b8186cb

wesleyboar added 7 commits June 20, 2022 10:26

fix(tup-ui): style links, no use wb-link

08ad3da

Style hyperlinks. Remove unused "wb-link" classes.

fix(core-components): message no override .wb-link

4c60420

1. Message need not overwrite ".wb-link" (class dropped in 08ad3da). 2. Add an active state. \* \* Design does not care to distinguish link states.

fix(ui-patterns): activeClassN… react-r…-dom ver.

e859114

Use same react-router-dom version as CEPv2 to make activeClassName work. - downgrade react-router-dom - use switch and component props

fix(core-components): Sidebar styles

2243276

1. Remove unused class "nav-content". 2. Use anchor tag pseduo classes to overwrite "elements.css". 3. Add missing style for nav content. Depends on: e859114 (i.e. previous commit)

wesleyboar changed the title ~~Task/tup 280 UI patterns use core styles~~ task/TUP-280, TUP-282, TUP-283 -- UI patterns, CSS vars, use core styles Jun 20, 2022

wesleyboar changed the title ~~task/TUP-280, TUP-282, TUP-283 -- UI patterns, CSS vars, use core styles~~ task/TUP-280, 282, 283 -- UI patterns, CSS vars, use core styles Jun 20, 2022

wesleyboar changed the title ~~task/TUP-280, 282, 283 -- UI patterns, CSS vars, use core styles~~ task/TUP-280, 282, 283 -- UI patterns, CSS vars, use styles Jun 20, 2022

wesleyboar changed the title ~~task/TUP-280, 282, 283 -- UI patterns, CSS vars, use styles~~ task/TUP-280, 282, 283 -- UI patterns (fixes), CSS vars, styles Jun 20, 2022

chore(ui-patterns): nx format:write

4472fa6

Base automatically changed from task/TUP-280--ui-patterns to milestone/001--core-components June 20, 2022 20:43

wesleyboar marked this pull request as draft June 20, 2022 20:46

Merge branch 'milestone/001--core-components' into task/TUP-280--ui-p…

3367c87

…atterns--use-core-styles

jchuahtacc reviewed Jun 20, 2022

View reviewed changes

wesleyboar marked this pull request as ready for review June 20, 2022 21:35

wesleyboar added 2 commits June 20, 2022 16:43

chore(core-comp…s): load form css at dist not src

9acd951

chore(core-comp…s): load css settings from dist

c237a15

wesleyboar requested a review from jchuahtacc June 21, 2022 19:30

jchuahtacc approved these changes Jun 21, 2022

View reviewed changes

.postcssrc.yml Show resolved Hide resolved

jchuahtacc merged commit bf53fe8 into milestone/001--core-components Jun 22, 2022

jchuahtacc deleted the task/TUP-280--ui-patterns--use-core-styles branch June 22, 2022 19:32

wesleyboar mentioned this pull request Jun 22, 2022

feat(core-styles): extend root postcss config #16

Closed

5 tasks

wesleyboar added core-styles labels Aug 16, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

task/TUP-280, 282, 283 -- UI patterns (fixes), CSS vars, styles#14

task/TUP-280, 282, 283 -- UI patterns (fixes), CSS vars, styles#14
jchuahtacc merged 62 commits intomilestone/001--core-componentsfrom
task/TUP-280--ui-patterns--use-core-styles

wesleyboar commented Jun 18, 2022 •

edited

Loading

Uh oh!

wesleyboar commented Jun 20, 2022 •

edited

Loading

Uh oh!

Uh oh!

jchuahtacc Jun 20, 2022

Uh oh!

wesleyboar Jun 20, 2022 •

edited

Loading

Uh oh!

wesleyboar Jun 23, 2022 •

edited

Loading

Uh oh!

jchuahtacc Jun 27, 2022

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

wesleyboar commented Jun 18, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview:

Related:

Changes:

Testing:

UI:

Uh oh!

wesleyboar commented Jun 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

jchuahtacc Jun 20, 2022

Choose a reason for hiding this comment

Uh oh!

wesleyboar Jun 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Footnotes

Uh oh!

wesleyboar Jun 23, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jchuahtacc Jun 27, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

wesleyboar commented Jun 18, 2022 •

edited

Loading

wesleyboar commented Jun 20, 2022 •

edited

Loading

wesleyboar Jun 20, 2022 •

edited

Loading

wesleyboar Jun 23, 2022 •

edited

Loading