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

Recolouring follow-up #2742

Merged
merged 11 commits into from
Mar 18, 2024
Merged

Recolouring follow-up #2742

merged 11 commits into from
Mar 18, 2024

Conversation

kark
Copy link
Contributor

@kark kark commented Mar 12, 2024

Summary

Figma file

@kark kark added the 🚧 Status: WIP Work in progress label Mar 12, 2024
Copy link

changeset-bot bot commented Mar 12, 2024

🦋 Changeset detected

Latest commit: 16be228

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 95 packages
Name Type
@commercetools-uikit/primary-action-dropdown Minor
@commercetools-uikit/checkbox-input Minor
@commercetools-uikit/select-utils Minor
@commercetools-uikit/toggle-input Minor
@commercetools-uikit/radio-input Minor
@commercetools-uikit/view-switcher Minor
@commercetools-uikit/progress-bar Minor
@commercetools-uikit/data-table Minor
@commercetools-uikit/avatar Minor
@commercetools-uikit/icons Minor
@commercetools-uikit/text Minor
@commercetools-uikit/tag Minor
@commercetools-uikit/design-system Minor
@commercetools-frontend/ui-kit Minor
@commercetools-uikit/inputs Minor
@commercetools-uikit/async-creatable-select-input Minor
@commercetools-uikit/async-select-input Minor
@commercetools-uikit/creatable-select-input Minor
@commercetools-uikit/date-input Minor
@commercetools-uikit/date-range-input Minor
@commercetools-uikit/date-time-input Minor
@commercetools-uikit/localized-money-input Minor
@commercetools-uikit/money-input Minor
@commercetools-uikit/search-select-input Minor
@commercetools-uikit/select-input Minor
@commercetools-uikit/selectable-search-input Minor
@commercetools-uikit/data-table-manager Minor
@commercetools-uikit/radio-field Minor
@commercetools-uikit/calendar-utils Minor
@commercetools-uikit/collapsible-panel Minor
@commercetools-uikit/field-label Minor
@commercetools-uikit/link Minor
@commercetools-uikit/notifications Minor
@commercetools-uikit/pagination Minor
@commercetools-uikit/password-field Minor
@commercetools-uikit/input-utils Minor
@commercetools-uikit/localized-multiline-text-input Minor
@commercetools-uikit/localized-rich-text-input Minor
@commercetools-uikit/localized-text-input Minor
@commercetools-uikit/multiline-text-input Minor
@commercetools-uikit/rich-text-input Minor
@commercetools-uikit/rich-text-utils Minor
@commercetools-uikit/search-text-input Minor
@commercetools-uikit/time-input Minor
@commercetools-uikit/label Minor
@commercetools-uikit/loading-spinner Minor
@commercetools-uikit/messages Minor
@commercetools-uikit/stamp Minor
@commercetools-uikit/flat-button Minor
@commercetools-uikit/icon-button Minor
@commercetools-uikit/link-button Minor
@commercetools-uikit/primary-button Minor
@commercetools-uikit/secondary-button Minor
@commercetools-uikit/secondary-icon-button Minor
@commercetools-uikit/card Minor
@commercetools-uikit/constraints Minor
@commercetools-uikit/tooltip Minor
@commercetools-uikit/accessible-button Minor
@commercetools-uikit/async-creatable-select-field Minor
@commercetools-uikit/async-select-field Minor
@commercetools-uikit/creatable-select-field Minor
@commercetools-uikit/date-field Minor
@commercetools-uikit/date-range-field Minor
@commercetools-uikit/date-time-field Minor
@commercetools-uikit/localized-multiline-text-field Minor
@commercetools-uikit/localized-text-field Minor
@commercetools-uikit/money-field Minor
@commercetools-uikit/multiline-text-field Minor
@commercetools-uikit/number-field Minor
@commercetools-uikit/search-select-field Minor
@commercetools-uikit/select-field Minor
@commercetools-uikit/text-field Minor
@commercetools-uikit/time-field Minor
@commercetools-uikit/number-input Minor
@commercetools-uikit/password-input Minor
@commercetools-uikit/text-input Minor
@commercetools-uikit/spacings-inline Minor
@commercetools-uikit/spacings-inset-squish Minor
@commercetools-uikit/spacings-inset Minor
@commercetools-uikit/spacings-stack Minor
@commercetools-uikit/buttons Minor
visual-testing-app Patch
@commercetools-uikit/fields Minor
@commercetools-uikit/field-errors Minor
@commercetools-uikit/field-warnings Minor
@commercetools-uikit/spacings Minor
@commercetools-uikit/calendar-time-utils Minor
@commercetools-uikit/hooks Minor
@commercetools-uikit/i18n Minor
@commercetools-uikit/localized-utils Minor
@commercetools-uikit/utils Minor
@commercetools-uikit/accessible-hidden Minor
@commercetools-uikit/collapsible-motion Minor
@commercetools-uikit/collapsible Minor
@commercetools-uikit/grid Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

vercel bot commented Mar 12, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
ui-kit ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 14, 2024 2:57pm

@kark kark marked this pull request as ready for review March 13, 2024 13:43
@kark kark requested review from a team and FilPob March 13, 2024 13:43
@CarlosCortizasCT
Copy link
Contributor

Is this PR ready for review?
I'm asking because it still has the WIP label

@kark
Copy link
Contributor Author

kark commented Mar 13, 2024

Is this PR ready for review? I'm asking because it still has the WIP label

@CarlosCortizasCT Thanks for checking, yes, it is

@@ -45,6 +45,7 @@ choiceGroupsByTheme:
color-primary-85: 'hsl(175, 70%, 85%)'
color-primary-90: 'hsl(175, 70%, 90%)'
color-primary-95: 'hsl(175, 90%, 95%)'
color-primary-98: 'hsl(244, 100%, 99%)' # design token copied from recolouring theme for export
Copy link
Contributor

Choose a reason for hiding this comment

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

I know maybe this token won't be used, but I think its value should be aligned with the other color primary tokens:

color-primary-95: 'hsl(175, 90%, 99%)'

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Sorry, I don't fully understand this one. Is the idea to create a placeholder token value solely due to limitations in our tooling? I believe I would need clarification from Filip on this as I'm not familiar with the pattern.

Upon further reflection, it might be beneficial to use a placeholder value like unused or something similar. What do you think?

Copy link
Contributor

Choose a reason for hiding this comment

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

Since default is the base theme, I think it should have all the available tokens.
I understand it might not needed in this case, but I think it's a good idea from the maintainability point of view.

The way I see it, I don't see the benefit in including a placeholder value but just think about what the name of the token represent and have its value in the default theme. That's why I suggest to use the proposal I shared in my previous comment.

We can have a call to discuss this further if you want to 👍

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks 🙏 Still, I don't fully get the full picture and what is the proposed value for this choice, so I'd rather schedule a call to discuss it

@@ -41,14 +41,14 @@ const getButtonStyles = (isDisabled: boolean) => {
css`
background-color: ${designTokens.colorSurface};
box-shadow: ${designTokens.shadow0};
border: ${`1px solid ${designTokens.colorNeutral}`};
border: 1px solid ${designTokens.borderColorForButtonAsSecondary};
Copy link
Contributor

Choose a reason for hiding this comment

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

As my previous comment, I think we should avoid reusing component tokens among different components.
We are already using the dropdown token names below, so I think it would be better to do the same here.

packages/components/text/src/text.styles.ts Show resolved Hide resolved
Copy link
Contributor Author

@kark kark left a comment

Choose a reason for hiding this comment

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

@CarlosCortizasCT Thank you for the review 🙏 I covered token renaming in 2a0f279. The PR is ready for another review round

packages/components/text/src/text.styles.ts Show resolved Hide resolved
@@ -45,6 +45,7 @@ choiceGroupsByTheme:
color-primary-85: 'hsl(175, 70%, 85%)'
color-primary-90: 'hsl(175, 70%, 90%)'
color-primary-95: 'hsl(175, 90%, 95%)'
color-primary-98: 'hsl(244, 100%, 99%)' # design token copied from recolouring theme for export
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Sorry, I don't fully understand this one. Is the idea to create a placeholder token value solely due to limitations in our tooling? I believe I would need clarification from Filip on this as I'm not familiar with the pattern.

Upon further reflection, it might be beneficial to use a placeholder value like unused or something similar. What do you think?

Copy link
Contributor

@ddouglasz ddouglasz left a comment

Choose a reason for hiding this comment

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

Great work @kark 🙌🏾
Just some minor observation I pointed out.

design-system/materials/custom-properties_recolouring.css Outdated Show resolved Hide resolved
design-system/materials/custom-properties_recolouring.css Outdated Show resolved Hide resolved
@kark kark force-pushed the SHIELD-1134-recolouring-follow-up branch from b432d63 to e03508c Compare March 14, 2024 11:11
@CarlosCortizasCT
Copy link
Contributor

@CarlosCortizasCT Thank you for the review 🙏 I covered token renaming in 2a0f279. The PR is ready for another review round

Regarding this one, do you prefer to not change it?

@kark
Copy link
Contributor Author

kark commented Mar 14, 2024

@CarlosCortizasCT Thank you for the review 🙏 I covered token renaming in 2a0f279. The PR is ready for another review round

Regarding this one, do you prefer to not change it?

Updated in 6131eb2

Copy link
Contributor

@ddouglasz ddouglasz left a comment

Choose a reason for hiding this comment

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

Thank you 🙏🏾

Copy link
Contributor

@CarlosCortizasCT CarlosCortizasCT left a comment

Choose a reason for hiding this comment

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

Thanks a lot, Kacper! 🙇 💯

@kark kark merged commit 96dbded into main Mar 18, 2024
6 checks passed
@kark kark deleted the SHIELD-1134-recolouring-follow-up branch March 18, 2024 07:33
@ct-changesets ct-changesets bot mentioned this pull request Mar 18, 2024
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.

4 participants