fix(css): fp-1791 button auto width & django cms form button tweak #560

wesleyboar · 2022-10-28T22:46:51Z

Overview

Buttons should be automatic width by default.
Fix button font size, given Core Styles update.
More specific selector for Django CMS form button styles.

Changes

Load auto width for buttons from Core Styles.
Use accurate font-size variable.
Add [type="submit"] because not every button is primary.
Add .form-button because it should appear in a search.

Testing

Pages:

Steps:

Submit button is brown.
All form buttons are as wide as their text content (plus padding).
All form buttons widths are not resolved by a snippet's code.

UI

Buttons	Snippet ^{code commented out}

- Add `[type="submit"]` because not every button is primary. - Add `.form-button` because it should appear in a search.

TACC/Core-CMS#560

TACC/Core-Styles#49

Previous image was missing commit that loaded fix from core-styles. TACC/Core-CMS#560

Cuz #531 did not test button size.

TACC/Core-CMS#560

TACC/Core-Styles@98cdc10 This APCD testing on #560 did NOT use this, BUT that is okay, BEACUSE this code change would not affect render. CMS sets button font size explicitely (i.e. overrides this removed code).

wesleyboar

Notes for reviewers.

wesleyboar · 2022-10-31T14:35:54Z

taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.forms.css

-.button-wrapper button {
+.form-button,
+.button-wrapper button[type="submit"] {
  @extend .c-button;
  @extend .c-button--primary;
 }


Explanation. More specific selectors. (Judge my logic, please.)

Background. I want TACC form component classes, but APCD switched to manual forms faster than I could create styles for them, so we are re-using Django CMS form plugin classes.

Reasons.
I assume¹ devs will:

use .form-button for submit button, with or without .button-wrapper, so style as primary.

use .button-wrapper for one or more buttons, so only a submit button should be primary.

Footnotes

I should document² these instead of assume usage. Even if I make TACC form component, these styles still exist for Django CMS form plugin forms. ↩

So far, the documentation I have is CMS form creation guides. I could document Django CMS form styles during FP-1828. ↩

wesleyboar · 2022-10-31T14:40:57Z

taccsite_cms/static/site_cms/css/src/_imports/components/c-button.css

-  font-size: var(--global-font-size--medium);
+  font-size: var(--global-font-size--small);


Explanation. I had guessed the wrong font size when I first set up these untested CMS-specific c-button styles. [It had been untested], even though CMS has buttons, because the first CMS button was not a .c-button, it was a Django CMS form¹ button².

Footnotes

taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.forms.css ↩

The first c-button came when "+ Add …" and "– Remove" buttons were added to APCD "Request to Submit" form. ↩

wesleyboar · 2022-10-31T14:41:59Z

package.json

-    "@tacc/core-styles": "^0.9.0",
+    "@tacc/core-styles": "github:TACC/Core-Styles#fix/fp-1791-automatic-button-width",


See https://github.com/TACC/Core-Styles/pull/49/files.

rstijerina

Makes sense, LGTM

fix(css): fp-1791 more specific button selectors

11cbb97

- Add `[type="submit"]` because not every button is primary. - Add `.form-button` because it should appear in a search.

wesleyboar mentioned this pull request Oct 28, 2022

fix(c-button): fp-1791 auto width by default TACC/Core-Styles#49

Merged

wesleyboar changed the title ~~fix(css): fp-1791 more specific django cms form button selectors~~ fix(css): fp-1791 tacc button auto width & django cms form button specificity Oct 28, 2022

wesleyboar changed the title ~~fix(css): fp-1791 tacc button auto width & django cms form button specificity~~ fix(css): fp-1791 core button auto width & django cms form button tweak Oct 28, 2022

wesleyboar changed the title ~~fix(css): fp-1791 core button auto width & django cms form button tweak~~ fix(css): fp-1791 button auto width & django cms form button tweak Oct 28, 2022

wesleyboar added a commit to TACC/Core-CMS-Custom that referenced this pull request Oct 28, 2022

fix: fp-1791 button width too narrow

a42fdf4

TACC/Core-CMS#560

wesleyboar mentioned this pull request Oct 28, 2022

fix(apcd): fp-1791 button width too narrow TACC/Core-CMS-Custom#37

Merged

4 tasks

feat: fp-1791 auto-width buttons from core-styles

f27c67b

TACC/Core-Styles#49

wesleyboar force-pushed the fix/fp-1791-form-button-selector-tweak branch from 60aa4f9 to f27c67b Compare October 28, 2022 23:20

wesleyboar added a commit to TACC/Core-CMS-Custom that referenced this pull request Oct 28, 2022

fix: fp-1791 button width too narrow (wrong image)

4cd7701

Previous image was missing commit that loaded fix from core-styles. TACC/Core-CMS#560

fix: fp-1791 font size too large

fdd30ed

Cuz #531 did not test button size.

wesleyboar added a commit to TACC/Core-CMS-Custom that referenced this pull request Oct 29, 2022

fix: fp-1791 button size too large

b508584

TACC/Core-CMS#560

fix: fp-1791 no font size set in core styles

bd9661f

TACC/Core-Styles@98cdc10 This APCD testing on #560 did NOT use this, BUT that is okay, BEACUSE this code change would not affect render. CMS sets button font size explicitely (i.e. overrides this removed code).

wesleyboar commented Oct 31, 2022

View reviewed changes

rstijerina approved these changes Oct 31, 2022

View reviewed changes

Merge branch 'main' into fix/fp-1791-form-button-selector-tweak

a4e4650

wesleyboar merged commit 0cde4e3 into main Oct 31, 2022

wesleyboar deleted the fix/fp-1791-form-button-selector-tweak branch October 31, 2022 20:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(css): fp-1791 button auto width & django cms form button tweak #560

fix(css): fp-1791 button auto width & django cms form button tweak #560

wesleyboar commented Oct 28, 2022 •

edited

Loading

wesleyboar left a comment •

edited

Loading

wesleyboar Oct 31, 2022

wesleyboar Oct 31, 2022 •

edited

Loading

wesleyboar Oct 31, 2022

rstijerina left a comment

		font-size: var(--global-font-size--medium);
		font-size: var(--global-font-size--small);

		"@tacc/core-styles": "^0.9.0",
		"@tacc/core-styles": "github:TACC/Core-Styles#fix/fp-1791-automatic-button-width",

fix(css): fp-1791 button auto width & django cms form button tweak #560

fix(css): fp-1791 button auto width & django cms form button tweak #560

Conversation

wesleyboar commented Oct 28, 2022 • edited Loading

Overview

Related

Changes

Testing

UI

wesleyboar left a comment • edited Loading

Choose a reason for hiding this comment

wesleyboar Oct 31, 2022

Choose a reason for hiding this comment

Footnotes

wesleyboar Oct 31, 2022 • edited Loading

Choose a reason for hiding this comment

Footnotes

wesleyboar Oct 31, 2022

Choose a reason for hiding this comment

rstijerina left a comment

Choose a reason for hiding this comment

wesleyboar commented Oct 28, 2022 •

edited

Loading

wesleyboar left a comment •

edited

Loading

wesleyboar Oct 31, 2022 •

edited

Loading