Skip to content

Conversation

@BenOsodrac
Copy link
Contributor

@BenOsodrac BenOsodrac commented Oct 18, 2024

Issue number: internal


What is the new behavior?

  • Removed old tokens stored on foundations folder. Now the jsons with the tokens come from the new dependency: https://github.com/OutSystems/outsystems-design-tokens.
  • The tokens from UX Team completely changed the structure and in some cases the values. Everything was replaced on the project to use the new tokens.
  • Snapshots updated and differences reviewed with UX Team. A fix was done on the testing css, to make sure the correct Inter font-family was actually used. This resulted in some differences on the text for some componentes, that had snapshots with the native fonts.
  • Removed generation of scss file on tokens script, that contained the :root selector with the custom CSS properties, as they were not used on the Ionic context.
  • Removed generation of html file with tokens preview, as there wasn't a great value on this (we have storybook on other contexts) and it allowed to reduce a lot of code and complexity from the tokens script.
  • The token command was adapted to use the command available from the https://github.com/OutSystems/outsystems-design-tokens package, using the --config prop, where we pass the path to our Ionic token script, where we generate the needed scss variables and utility-classes (by default the tokens repo tries to be as agnostic as possible, and only generates the css variables, without the prefix and added details we need on the Ionic side).
  • Removed the token command from the npm run build, as it unnecessarily added time on that command to run. Besides, it should not be common that we need to run this command in the future.
  • Updated reference to latest version of Style Dictionary 4.1.3. Version 4 comes with a lot of improvements, but also breaking-changes, so it was needed to adapt the tokens script. The code on the script is also now cleaner.
  • Changed prefix from ionic to ion. The term ionic was used initially, to help differentiate from the old ios/md stuff, but I feel with the current scss architecture, that is no longer needed, and we can use the same prefix across themes.

This requires to run npm install again.

Does this introduce a breaking change?

  • Yes
  • No

Copy link
Member

@brandyscarney brandyscarney left a comment

Choose a reason for hiding this comment

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

Looks good! Reviewed every single file. 😂

Comment on lines -359 to -364
// disabled, unchecked checkbox
:host(.checkbox-disabled) .native-wrapper {
border-color: globals.$ionic-color-neutral-800;

background-color: globals.$ionic-state-disabled;
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Why was this removed?

Copy link
Contributor Author

@BenOsodrac BenOsodrac Oct 28, 2024

Choose a reason for hiding this comment

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

From what I recall it was because this seems unnecessary, as the mixin state-disabled was already being applied to the pseudo-element, which should be enough for the disabled styling:

@include globals.disabled-state();

Also, I noticed this when running the tests for the first time, the checkbox failed, as the snapshot returned a grey background. I believe this was now noticeable due to the changes on the new tokens values.

Screenshot 2024-10-18 at 10 13 12

Let me know if I'm missing some detail here or use-case :)

Copy link
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

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

LGTM

@BenOsodrac BenOsodrac merged commit a5a7bee into next Oct 28, 2024
46 checks passed
@BenOsodrac BenOsodrac deleted the ROU-10946 branch October 28, 2024 18:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

dependencies Pull requests that update a dependency file package: core @ionic/core package type: feature request a new feature, enhancement, or improvement

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants