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.

Sign up for GitHub

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

Jump to bottom

feat: update Core-CMS & Core-Styles, rename CMS Settings, Portal Purple to Blue #476

Merged
merged 32 commits into from
Oct 17, 2024
Merged

feat: update Core-CMS & Core-Styles, rename CMS Settings, Portal Purple to Blue #476

merged 32 commits into from
Oct 17, 2024

Conversation

wesleyboar
Copy link
Member

@wesleyboar wesleyboar commented Aug 23, 2024 •
edited
Loading

Overview

Use latest Core-Styles and Core-CMS and PostCSS.

Note

More is added than removed because of package-lock.json.

Important

After deploy to production, delete snippet #154.

Related

Changes

  • updated Core-CMS image
  • updated Core-Styles version
  • updated PostCSS and its plugins
  • changed deprecated CSS vars to maintained ones

Testing & UI

Tip

Deployed to dev via v1.1.11-202409-02.

🐞 Fixes of Obscure Origin

  • Verify Instagram icon fills the 25x25 icon box.

    before after
    before insta after insta

  • See news article header changes that are good or acceptable.

    before after
    before after

    Known Changes:

    • 🐞 spacing of tag text (minor bug)
    • ✅ space added between breadcrumb and "> "
    • ✅ reorder share links (LinkedIn is first again)
    • ✅ font of title looks slightly different (because font was updated/fixed)

🆕 Portal Accent Color is Blue
Core-CMS v4.15 & Core-Styles v2.32
  1. ❗️Delete or Disable snippet "CSS: Button Color in Dark Contexts".
  • Verify Portal purple is now blue
    before after
    portal colors before 1 portal colors after 1
    portal colors before 2 portal colors after 2
    login before login after

⚙️ Portal Message Style is Unchanged
Core-CMS v4.15 +4.16.1 & Core-Styles v2.32 +2.33.1
  • Verify message style has not changed.
    I had changed to CMS-style messages, but Designer (M.S.) and I agreed to revert.
    before after / mistake after / fixed
    login, before login message after restored v1 message style

⚙️ Colors Come From Design Tokens
Core-CMS v4.15—16 & Core-Styles v2.32—33

  1. ❗️Delete or Disable snippet "CSS: Button Color in Dark Contexts".

  2. Verify color changes:

    • light blue is a little darker e.g.

      • primary button in a dark section (home page)
        before after
        cms button on dark before cms button on dark after
        cms button on light before cms button on light after
      • focus state border of secondary button (which also changes color)
        before after
        focus state before focus state after

    • light blue of active nav has similar contrast with text as light purple had

      before after
      portal colors before 1 portal colors after 1

  3. Verify no other color changes, especially in Footer.

    before after
    footer, before footer, after

  4. Verify no console error about :--dark-context-safe.

    before after
    dark-context-safe before dark-context-safe after

⚙️ Replaces Article Drop-Cap Class Snippet with Core Code
Core-CMS v4.14.1
  1. ❗️Delete or Disable snippet "CSS: TUP-730 Drop-Cap".
  • old div.s-drop-cap p works automatically on articles with image that has caption
  • new p.s-drop-cap works manually on articles with image with no caption
  • no drop-cap initial on articles with malformed HTML
automatic manual html unsuitable
auto application direct application image no caption

⚙️ No Change Since ElasticSearch Setting Refactor
Core-CMS v4.14.0

Site deploys. Search works.

🐞 2nd-Level Breadcrumb Looks Disabled
Core-CMS v4.13.1 & Core-CMS v4.12.0
before after
2nd breadcrumb disabled before 2nd breadcrumb disabled after

🐞 🆕 We Can Create Containers Again & Use Containers to Create Sections
Core-CMS v4.17.1 & Core-CMS v4.13.0 & Core-CMS v4.15.2

Before, creating a container resulted in a 500 error. Now, creating one works and you can make it double as a Section.

section.via.container.mov
since Core-CMS v4.17.1 (9beb9ac )
tup-cms v4-17-1

⚙️ No Change Since Custom Email Code (Not Used by TUP Yet)
Core-CMS v4.13.0
  1. Forms are able to be sent and only one auto-reply per form:
help form tour request website request (sample reference form)
476 real form - help 476 real form - tour request 476 test form - website request

⚙️ Replaces Existing Accessibility Fixes with Core Code
Core-CMS v4.13.0

  • Verify social media logos have the same accessibility attributes as before.

    before after
    before a11y after a11y

  • Use aria-label not aria-description.

    before after
    aria-description (before) aria-label (after)

⚙️ Rename Many Settings
Core-CMS v4.13.0 & Core-CMS v4.12.0 & Core-CMS v4.7.0

  • Verify header branding has not changed.

    before after
    prod test

  • Verify logo markup has not changed besides removal of unused image class tup.

    before after
    before after

  • Verify favicon and its markup have not changed.

    before after
    before after

  • Verify news list layout has not changed.

    before after
    news list before news list after

  • Verify news article header layout has mostly not changed.

    before after
    before after

    See "Changes of Unknown Origin" for known changes.

⚙️ Other Releases are No-Op
Core-CMS v4.11.1 & Core-CMS v4.11.0

The changes in these releases do not affect TACC site.

@wesleyboar wesleyboar changed the title Enhance/cmd 182 design tokens enhance: CMD-182 design tokens Aug 23, 2024
This was referenced Aug 23, 2024
Merged
Merged
@wesleyboar wesleyboar force-pushed the enhance/CMD-182-design-tokens branch from 157d165 to 81cb021 Compare August 23, 2024 12:55
wesleyboar and others added 13 commits August 23, 2024 09:35
@wesleyboar
feat: CMD-182 use tokens core-v3
ab490f2
@wesleyboar
fix(cep): dev, cms tag via hash
291efe4 
because latest image is not used
@wesleyboar
fix: CMD-182 color fix snippet was using core-v2
443b30a
@wesleyboar
feat: CMD-182 use built tokens core-v3
75ecadd
@wesleyboar
fix: CMD-182 cms tag actual design tokens i hope
4330030
@wesleyboar
refactor: CMD-182 delete unnecessary overrides
ea5002e 
Core Styles v3 does not distinguish Portal colors.

So, Portal need not worry about overrides.
@wesleyboar
fix: CMD-182 cms w/ updated tokens
c82a249
@wesleyboar
fix: CMD-182 cms w/ updated tokens & fixed rgb()
8ff037c
@wesleyboar
fix: CMD-182 remove outdated css hack
2090fee 
Not necessary since Core-Styles 45dc5aa1.
@wesleyboar
deps: CMD-182 core-styles colors.accent.1.light
8b29551
@wesleyboar
deps: CMD-182 core-styles v2.32.0 core-cms v4.15.0
1c26d0d
@wesleyboar
fix(tup-cms): missing v in tag
6373e23
@wesleyboar
chore: CMD-182 delete unnecessary snippet
041d5d4
@wesleyboar wesleyboar changed the title enhance: CMD-182 design tokens deps: Core-CMS v4.15 & Core-Styles v2.32 Sep 5, 2024
@wesleyboar wesleyboar mentioned this pull request Sep 5, 2024
Closed
This was referenced Sep 5, 2024
Merged
Merged
@wesleyboar wesleyboar mentioned this pull request Sep 5, 2024
Merged
@wesleyboar
refactor: cmd-79 rename tacc cms settings (#416)
2c6812b 
* chore: cmd-79/tv3-181 FAVICON → PORTAL_FAVICON

* refactor: cmd-79/tv3-181 LOGO → PORTAL_LOGO

* refactor: cmd-79/tv3-181 TACC_ → PORTAL_

* feat: cmd-79/tv3-181 Core-CMS image placeholder

* test: cmd-79/tv3-181 new Core-CMS image

* fix: correct branch translation to core-cms image

* fix!: cmd-79 core-cms backwards-compatibility bugs

With this update, there is an unexpected and bewildering UI change:
- the navbar at 992px is collapsed
- it should only collapse at 991px
- this behavior is different than when using Core-CMS v4.8.3

* style: cmd-79 remove newline to simplify diff

* fix: cmd-79 nav overflows header at certain screen widths

* refactor: rename old Core-CMS settings to new

* docs: PORTAL_NAV_WIDTH moved to correct section
@wesleyboar wesleyboar mentioned this pull request Sep 6, 2024
Merged
@wesleyboar wesleyboar mentioned this pull request Sep 6, 2024
Merged
This was referenced Sep 6, 2024
Merged
Merged
@wesleyboar wesleyboar changed the title deps: Core-CMS v4.15 & Core-Styles v2.32 deps: Core-CMS v4.16 & Core-Styles v2.33 Sep 6, 2024
@wesleyboar wesleyboar mentioned this pull request Sep 9, 2024
Merged
@wesleyboar wesleyboar mentioned this pull request Sep 9, 2024
Merged
@wesleyboar wesleyboar marked this pull request as ready for review September 9, 2024 23:16
@wesleyboar wesleyboar changed the title deps: Core-CMS v4.16 & Core-Styles v2.33 feat: Core-CMS v4.16 & Core-Styles v2.33 Sep 9, 2024
@wesleyboar wesleyboar changed the title feat: Core-CMS v4.16 & Core-Styles v2.33 feat: Core-CMS v4.16, Core-Styles v2.33, Rename CMS Settings Sep 9, 2024
@wesleyboar wesleyboar changed the title feat: Core-CMS v4.16, Core-Styles v2.33, Rename CMS Settings feat: Core-CMS v4.16, Core-Styles v2.33, rename CMS Settings Sep 9, 2024
@wesleyboar wesleyboar requested a review from jarosenb September 9, 2024 23:51
@wesleyboar wesleyboar changed the title feat: Core-CMS v4.16, Core-Styles v2.33, rename CMS Settings feat: update Core-CMS & Core-Styles, rename CMS Settings, Portal Purple to Blue Sep 12, 2024
wesleyboar
wesleyboar commented Sep 12, 2024
View reviewed changes
Copy link
Member Author

@wesleyboar wesleyboar left a comment

Choose a reason for hiding this comment

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

Notes for reviewers.

.postcssrc.yml
Comment on lines +11 to +12
custom-selectors: true
relative-color-syntax: true
Copy link
Member Author

@wesleyboar wesleyboar Sep 12, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

custom-selectors: moved / no-op
relative-color-syntax: to change a color programmatically

apps/tup-cms/src/taccsite_cms/settings_custom.py Outdated
Copy link
Member Author

@wesleyboar wesleyboar Sep 12, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Renaming & updating CMS settings. Mostly no-op, cuz setting names are backwards-compatible.

apps/tup-cms/src/taccsite_cms/templates/snippets/css-button-color-in-dark-contexts.html Outdated
Copy link
Member Author

Choose a reason for hiding this comment

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

Not necessary since I now do this (much more simply) in Core-Styles.

apps/tup-cms/src/taccsite_cms/templates/snippets/logos-social-media.html Outdated
Copy link
Member Author

Choose a reason for hiding this comment

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

Not necessary since I updated the Core-CMS template of the same name.

...p-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-cms/trumps/search-elements.css
color: var(--global-color-accent--secondary);
color: var(--global-color-secondary--normal);
Copy link
Member Author

Choose a reason for hiding this comment

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

Uses Core-Styles v2 color var name instead of v1’s.

libs/core-components/src/lib/HistoryBadge/HistoryBadge.module.css
background-color: var(--global-color-accent--weak);
background-color: var(--global-color-accent--xx-light);
Copy link
Member Author

Choose a reason for hiding this comment

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

Uses Core-Styles v2 color var name instead of v1’s.

libs/core-components/src/lib/Sidebar/Sidebar.module.css
background-color: var(--global-color-accent--weak);
background-color: var(--global-color-accent--xx-light);
Copy link
Member Author

Choose a reason for hiding this comment

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

Uses Core-Styles v2 color var name instead of v1’s.

libs/core-wrappers/src/lib/Navbar/Navbar.module.css Outdated
Copy link
Member Author

Choose a reason for hiding this comment

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

Uses Core-Styles v2 color var name instead of v1’s.

libs/tup-components/src/news/UserNews.module.css
color: var(--global-color-accent--secondary);
color: var(--global-color-secondary--normal);
Copy link
Member Author

Choose a reason for hiding this comment

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

Uses Core-Styles v2 color var name instead of v1’s.

package.json
Comment on lines +75 to +77
"postcss": "^8.4.38",
"postcss-preset-env": "^10.0.2",
"postcss-replace": "^2.0.1",
Copy link
Member Author

Choose a reason for hiding this comment

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

Updated to match Core-Styles’ versions.

@jarosenb jarosenb merged commit 0466dcc into main Oct 17, 2024
1 check passed
@jarosenb jarosenb deleted the enhance/CMD-182-design-tokens branch October 17, 2024 20:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jarosenb jarosenb jarosenb approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@wesleyboar @jarosenb