Implement color theming support #199

jordanjones243 · 2024-08-13T18:09:21Z

Alaska Airlines Pull Request

Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.

Resolves: #198

Summary:

Please summarize the scope of the changes you have submitted, what the intent of the work is and anything that describes the before/after state of the project.

Update dependencies
Implement custom versioned auro-dropdown component
Implement tier 3 color tokens

Type of change:

Please delete options that are not relevant.

New capability
Revision of an existing capability
Infrastructure change (automation, etc.)
Other (please elaborate)

Checklist:

My update follows the CONTRIBUTING guidelines of this project
I have performed a self-review of my own update

By submitting this Pull Request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

Pull Requests will be evaluated by their quality of update and whether it is consistent with the goals and values of this project. Any submission is to be considered a conversation between the submitter and the maintainers of this project and may require changes to your submission.

Thank you for your submission!

-- Auro Design System Team

Summary by Sourcery

Implement color theming support by adding tier 3 color tokens and refactor the auro-dropdown component to use a custom versioned tag. Update documentation and tests to reflect these changes, and remove deprecated husky script.

New Features:

Implement color theming support by introducing tier 3 color tokens and allowing components to be restyled using new SCSS variables.

Enhancements:

Refactor the auro-dropdown component to use a custom versioned tag for better dependency management.

Documentation:

Update documentation to include information on theme support and how to restyle components using new tokens.

Tests:

Update tests to accommodate changes in the auro-dropdown component's query selector.

Chores:

Remove deprecated husky script and update ESLint configuration to use a new module-based setup.

sourcery-ai · 2024-08-13T18:09:33Z

Reviewer's Guide by Sourcery

This pull request implements color theming support and introduces a custom versioned auro-dropdown component. The changes focus on enhancing the auro-select component with dynamic component tags, updating the styling to use new SCSS variables for theming, and improving the overall structure and flexibility of the component.

Key implementation details:

A new dropdownTag property is added to dynamically generate the tag for the auro-dropdown component, improving versioning and flexibility.
The styling is updated to use new color tokens and SCSS variables, allowing for easier theming.
The component's template is refactored to use the dynamic dropdownTag and move the help text inside the dropdown component.
New files are added for color styling (color.scss) and token definitions (tokens.scss).
The build and linting setup is updated, including the addition of a new ESLint configuration file.

These changes significantly improve the component's customizability and maintainability while introducing theme support.

File-Level Changes

Files	Changes
`src/auro-select.js`	Implement custom versioned `auro-dropdown` component with dynamic tag generation
`src/style.scss` `src/color.scss` `src/tokens.scss`	Update styling to use new color tokens and SCSS variables for theming support
`src/auro-select.js`	Refactor component template to use dynamic `dropdownTag` and relocate help text
`demo/api.md` `docs/partials/api.md`	Update documentation to include information on theme support
`test/auro-select.test.js`	Modify tests to accommodate changes in `auro-dropdown` component selection logic
`.husky/_/husky.sh` `eslint.config.mjs`	Update build and linting setup, including new ESLint configuration
`README.md` `scripts/generateDocs.mjs` `scripts/postCss.mjs` `scripts/staticStyles-template.js`	Remove deprecated scripts and update README

Tips

Trigger a new Sourcery review by commenting @sourcery-ai review on the pull request.
Continue your discussion with Sourcery by replying directly to review comments.
You can change your review settings at any time by accessing your dashboard:
- Enable or disable the Sourcery-generated pull request summary or reviewer's guide;
- Change the review language;
You can always contact us if you have any questions or feedback.

sourcery-ai

Hey @jordanjones243 - I've reviewed your changes and they look great!

Here's what I looked at during the review

🟢 General issues: all looks good
🟢 Security: all looks good
🟡 Testing: 1 issue found
🟢 Complexity: all looks good
🟡 Documentation: 2 issues found

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

_{Help me be more useful! Please click 👍 or 👎 on each comment to tell me if it was helpful.}

test/auro-select.test.js

demo/api.md

jason-capsule42

The selected value is not rendering correctly in the menu for me.

.husky/_/husky.sh

src/color.scss

jason-capsule42 · 2024-08-22T18:09:05Z

@sourcery-ai review

sourcery-ai

Hey @jordanjones243 - I've reviewed your changes - here's some feedback:

Overall Comments:

The removal of the CSS custom property fallbacks section from the README might impact users supporting older browsers. Was this intentional, and if so, how should users handle fallbacks now?
Some specific color styles have been removed from style.scss. Please confirm that these are now properly handled by the new color theming system and that there are no unintended side effects from this change.

Here's what I looked at during the review

🟢 General issues: all looks good
🟢 Security: all looks good
🟡 Testing: 1 issue found
🟢 Complexity: all looks good
🟡 Documentation: 1 issue found

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

_{Help me be more useful! Please click 👍 or 👎 on each comment to tell me if it was helpful.}

sourcery-ai · 2024-08-22T18:11:42Z

test/auro-select.test.js

@@ -112,7 +112,7 @@ describe('auro-select', () => {

    await elementUpdated(el);

-    const dropdown = el.shadowRoot.querySelector('auro-dropdown');
+    const dropdown = el.shadowRoot.querySelector('[auro-dropdown]');
    const triggerContentHTML = dropdown.querySelector('#triggerFocus').innerHTML;

    await expect(el.optionSelected).to.be.equal(undefined);


suggestion (testing): Add tests for new color theming support

The pull request implements color theming support, but there are no tests to verify this new functionality. Consider adding tests that check if the component correctly applies theme-related CSS variables and classes.

Suggested change

await expect(el.optionSelected).to.be.equal(undefined);

await expect(el.optionSelected).to.be.equal(undefined);

// Test color theming support

el.setAttribute('theme', 'dark');

await el.updateComplete;

expect(el.classList.contains('auro-select--dark')).to.be.true;

el.setAttribute('theme', 'light');

await el.updateComplete;

expect(el.classList.contains('auro-select--light')).to.be.true;

sourcery-ai · 2024-08-22T18:11:42Z

README.md

-### CSS Custom Property fallbacks
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/cssFallbacks.md) -->
-[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) are [not supported](https://auro.alaskaair.com/support/custom-properties) in older browsers. For this, fallback properties are pre-generated and included with the npm.
-
-Any update to the Auro Design Tokens will be immediately reflected with browsers that support CSS custom properties, legacy browsers will require updated components with pre-generated fallback properties.
-
-<!-- AURO-GENERATED-CONTENT:END -->


question (documentation): Removal of CSS Custom Property fallbacks section

Could you provide the rationale for removing this section? It contained information about browser support for CSS custom properties, which might still be relevant for users supporting older browsers.

jordanjones243 · 2024-08-23T19:57:39Z

PR was approved with @jason-capsule42 during pair programming and I will therefore be forcing a release.

blackfalcon · 2024-08-23T19:59:32Z

🎉 This PR is included in version 2.11.0-beta.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

jordanjones243 self-assigned this Aug 13, 2024

jordanjones243 requested a review from a team as a code owner August 13, 2024 18:09

jordanjones243 linked an issue Aug 13, 2024 that may be closed by this pull request

Update color tokens for theming support #198

Closed

2 tasks

sourcery-ai bot reviewed Aug 13, 2024

View reviewed changes

test/auro-select.test.js Show resolved Hide resolved

demo/api.md Outdated Show resolved Hide resolved

demo/api.md Outdated Show resolved Hide resolved

jordanjones243 force-pushed the jjones/themeSupport/#198 branch 2 times, most recently from 2bd2757 to 04d6915 Compare August 15, 2024 18:21

jason-capsule42 requested changes Aug 19, 2024

View reviewed changes

jordanjones243 requested a review from jason-capsule42 August 19, 2024 22:20

jordanjones243 force-pushed the jjones/themeSupport/#198 branch from 77de448 to 0955810 Compare August 21, 2024 20:31

jason-capsule42 requested changes Aug 21, 2024

View reviewed changes

.husky/_/husky.sh Outdated Show resolved Hide resolved

src/color.scss Outdated Show resolved Hide resolved

jordanjones243 added 4 commits August 21, 2024 21:18

build: update deps and eslint config

7f43799

perf: use custom version of dropdown

2b79172

feat: implement tier 3 color tokens #198

4a3bebe

perf: update dependencies and scripts to latest versions

6b686bb

jordanjones243 force-pushed the jjones/themeSupport/#198 branch from 0955810 to 6b686bb Compare August 22, 2024 04:22

jordanjones243 requested a review from jason-capsule42 August 22, 2024 04:25

perf: move help text functionality into dropdown slot

9d4d8a5

jason-capsule42 previously approved these changes Aug 22, 2024

View reviewed changes

sourcery-ai bot reviewed Aug 22, 2024

View reviewed changes

docs: update links to auro-hyperlinks

7617c96

jordanjones243 dismissed jason-capsule42’s stale review via 7617c96 August 22, 2024 18:15

jordanjones243 requested a review from DukeFerdinand August 23, 2024 17:00

jordanjones243 merged commit 3334514 into beta Aug 23, 2024
4 checks passed

jordanjones243 deleted the jjones/themeSupport/#198 branch August 23, 2024 19:57

blackfalcon added the released on @beta label Aug 23, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement color theming support #199

Implement color theming support #199

jordanjones243 commented Aug 13, 2024 •

edited by sourcery-ai bot

Loading

sourcery-ai bot commented Aug 13, 2024 •

edited

Loading

sourcery-ai bot left a comment

jason-capsule42 left a comment

jason-capsule42 commented Aug 22, 2024

sourcery-ai bot left a comment

sourcery-ai bot Aug 22, 2024

sourcery-ai bot Aug 22, 2024

jordanjones243 commented Aug 23, 2024

blackfalcon commented Aug 23, 2024

-    await expect(el.optionSelected).to.be.equal(undefined);
+    await expect(el.optionSelected).to.be.equal(undefined);
+    // Test color theming support
+    el.setAttribute('theme', 'dark');
+    await el.updateComplete;
+    expect(el.classList.contains('auro-select--dark')).to.be.true;
+    el.setAttribute('theme', 'light');
+    await el.updateComplete;
+    expect(el.classList.contains('auro-select--light')).to.be.true;

Implement color theming support #199

Implement color theming support #199

Conversation

jordanjones243 commented Aug 13, 2024 • edited by sourcery-ai bot Loading

Alaska Airlines Pull Request

Summary:

Type of change:

Checklist:

Summary by Sourcery

sourcery-ai bot commented Aug 13, 2024 • edited Loading

Reviewer's Guide by Sourcery

File-Level Changes

sourcery-ai bot left a comment

Choose a reason for hiding this comment

jason-capsule42 left a comment

Choose a reason for hiding this comment

jason-capsule42 commented Aug 22, 2024

sourcery-ai bot left a comment

Choose a reason for hiding this comment

sourcery-ai bot Aug 22, 2024

Choose a reason for hiding this comment

sourcery-ai bot Aug 22, 2024

Choose a reason for hiding this comment

jordanjones243 commented Aug 23, 2024

blackfalcon commented Aug 23, 2024

jordanjones243 commented Aug 13, 2024 •

edited by sourcery-ai bot

Loading

sourcery-ai bot commented Aug 13, 2024 •

edited

Loading