Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FP-1677: Update (Fix) Button Styles #654

Merged
merged 8 commits into from
Jun 3, 2022

Conversation

wesleyboar
Copy link
Member

@wesleyboar wesleyboar commented Jun 2, 2022

Overview:

Fix button component styles.

Related Jira tickets:

Summary of Changes:

  • Add tertiary button section in UI Patterns.
  • Show all button types loading state in UI Patterns.
  • Add tertiary button styles and prop.

UI Photos:

After Merge of main Since #639
types before busy during busy
Screen Shot 2022-06-02 at 17 43 45 Screen Shot 2022-06-02 at 17 44 00 Screen Shot 2022-06-02 at 17 44 04
Screen.Recording.2022-06-02.at.17.48.32.mov
Before Merge of main Since #639
types before busy during busy
FP-1677 Button Types FP-1677 Before Busy State FP-1677 During Busy State
FP-1677.mov

Testing Steps:

  1. Visit UI Patterns.
  2. Scroll to Buttons.
  3. Verify secondary button states matches "On Light Portal" in design.
  4. Verify tertiary button states matches secondary button states from FP-1491: Style _common Button React Component #598.
  5. Verify busy state ("Spinner over Button") is distinct for each button type.

@codecov
Copy link

codecov bot commented Jun 2, 2022

Codecov Report

Merging #654 (eacb697) into main (6040fa4) will not change coverage.
The diff coverage is 100.00%.

Impacted file tree graph

@@           Coverage Diff           @@
##             main     #654   +/-   ##
=======================================
  Coverage   67.79%   67.79%           
=======================================
  Files         426      426           
  Lines       13173    13173           
  Branches     2414     2414           
=======================================
  Hits         8930     8930           
  Misses       3951     3951           
  Partials      292      292           
Flag Coverage Δ
javascript 70.37% <100.00%> (ø)
unittests 65.74% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
...s/UIPatterns/UIPatternsButton/UIPatternsButton.jsx 0.00% <ø> (ø)
client/src/components/_common/Button/Button.jsx 65.30% <100.00%> (ø)

Copy link
Member

@rstijerina rstijerina left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

@wesleyboar
Copy link
Member Author

wesleyboar commented Jun 2, 2022

Merged main. Conflicts were easy enough to resolve. New states, tertiary (here) and active (main), were both added in same spot. New screenshots and video.

Copy link
Contributor

@edmondsgarrett edmondsgarrett left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! These buttons look great.

@wesleyboar wesleyboar merged commit 6014aed into main Jun 3, 2022
@wesleyboar wesleyboar deleted the bug/FP-1677-update-button-styles branch June 3, 2022 18:59
jchuahtacc pushed a commit to TACC/tup-ui that referenced this pull request Jun 8, 2022
* fix: clarify commands in README

From: jarosenb/core-nx-demo#1

* feat(wip): integrate TACC/Core-Styles

Status: no build output for lib/core-styles

* fix(wip): integrate TACC/Core-Styles

Status: build gives libs/core-styles/dist but no /dist/libs/core-styles

* fix: accurate, consistent core-styles/package.json

* fix: remove excess nx cwd option from core-styles

* Revert "fix: clarify commands in README"

This reverts commit fa9472a.

* fix(wip): core-styles + TypeScript (no conversion)

TypeScript is supported again without converting existing .js files.

Status: dist output appears usable (can npm ci & npm build inside it)
Problem: libs/core-styles/dist is not output to root dist

* docs: core-styles README and TODO headings

* fix: include & exclude correct core-styles assets

Status: dist output appears usable (can npm install & build inside it)

* docs: update outdated comment

* feat: remove SASS (core-components, generators)

CEPv2 barely uses SASS. It's only use is mixins and nesting.

There are ways to do both features that are on the web standards path.

Both features can be done with POstCSS
- mixins can be replaced by PostCSS `@extend`:
    TACC/Core-Portal#639
- there is a nesting plugin (I need to test it more)

* chore(version): v0.6.0-alpha

* docs(changelog): update TACC/Core-Styles links

* fix: README install commands

* chore(version): v0.6.0-alpha, package(-lock).json

* feat(core-styles): root build includes local build

* chore(core-styles): version bump dist css

* feat(core-styles): publish process & remove dist/

* chore(core-styles): version bump 0.6.0-alpha.1

* fix(core-styles): add missing file to package

path typo caused by neglect to update path upon file move

* chore(core-styles): version bump 0.6.0-alpha.2

* refactor(core-styles): move dependencies to root

change comments of core-styles dependencies

* fix(core-styles): remove outdated command

* chore(core-styles): formate:write (limited)

I can not accept all the things Prettier is doing to me CSS.

I must configure before I let Prettier take control.

* chore(core-styles): formate:write (html + one md)

Let prettier control HTML files. Also let in one README.md's changes.

* feat(core-styles): formate:write to ignore css

via .prettierignore

* feat(core-styles): formate:write on REAME.md's

* chore(core-styles): let npm order dependencies

* feat(core-styles): stylelint, config it recommends

* chore(core-styles): format:write

* fix(core-styles): restore deps root→core-styles

CMS breaks if this is done. CMS relies on Styles dependencies.

This is a known deficiency that I want to resolve.

* fix(core-styles): no format css if core-styles cwd

Ignore CSS when formatter is run within core-styles directory.

Without this css is only ignored if formatter is run from root.

* fix(core-styles): remove recommended lint rules

I will add these back when I need to automate linting.

Right now its just me, and this integration needs to be complete.

* fix(core-styles): remove recommended lint rules

I will add these back when I need to automate linting.

Right now its just me, and this integration needs to be complete.

* fix(core-styles): restore npm ci (cuz deps moved)

* feat(core-styles): update button from Core-Portal

- TACC/Core-Portal#631
- TACC/Core-Portal#654

* fix(core-styles): format write

* docs(README): module usage: fix typo, drop old opt

- Fix a mistake in require command.
- Drop outdated `fileExt` option.

Source: TACC/Core-Styles@660ce17
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.

None yet

3 participants