milestone/001 - core components #38
Merged
Conversation
This file contains 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
* 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>
* 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
* 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): CSS and Dependency imports * chore(tup-ui): minimize #13 diff * chore(core-components): minimize diff ie remove space
…ui into milestone/001--core-components
* 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
wesleyboar
approved these changes
Jul 25, 2022
There was a problem hiding this comment.
Commands run, in order, without error. UI uses core-styles.
Also, even though core-styles has it's dependencies within it, the root npm ci still installs them. Not our long-term desire, but that it works let's us hold off on moving them (until the problem—which I forgot—is fixed).
The sub-branch PRs and core-styles PRs are not required for this milestone.
wesleyboar
added a commit
to TACC/Core-Styles
that referenced
this pull request
Jul 25, 2022
TACC/tup-ui@a30002a TACC/tup-ui@24db51b TACC/tup-ui@141464f P.S. a30002a originates from TACC/tup-ui#38
wesleyboar
added a commit
to TACC/Core-Styles
that referenced
this pull request
Jul 25, 2022
TACC/tup-ui@a30002a TACC/tup-ui@24db51b TACC/tup-ui@141464f P.S. a30002a originates from TACC/tup-ui#38
wesleyboar
added a commit
to TACC/Core-Styles
that referenced
this pull request
Jul 25, 2022
TACC/tup-ui@a30002a TACC/tup-ui@24db51b TACC/tup-ui@141464f P.S. a30002a originates from TACC/tup-ui#38
wesleyboar
added a commit
to TACC/Core-Styles
that referenced
this pull request
Jul 25, 2022
wesleyboar
added a commit
to TACC/Core-Styles
that referenced
this pull request
Jul 25, 2022
wesleyboar
added a commit
to TACC/Core-Styles
that referenced
this pull request
Aug 16, 2022
* feat: fp-1499, core-styles pattern demo * feat: updates from tup-ui (except paths) TACC/tup-ui@a30002a TACC/tup-ui@24db51b TACC/tup-ui@141464f P.S. a30002a originates from TACC/tup-ui#38 * fix: fp-1726 allow int. + ext. global css * feat(core-styles): fp-1499 drop excess file affix No need for `-css` on build and test scripts. * feat(core-styles): fp-1499 tarball for TACC/Core-CMS#527 * feat(core-styles): fp-1726 c-button, a tag support * chore(core-styles): fp-1499 remove tarball * chore: fp-1499 add node version to readme * fix: fp-1499 no italics for pseuo-icons
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:
Core components, wrappers and ui-patterns
Related:
Changes:
Testing:
UI:
Notes: