Converts CSS to logical properties #646
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
msayoung
reviewed
Nov 7, 2024
| @@ -257,7 +257,7 @@ body { | |||
|
|
|||
| /* File Upload Items */ | |||
| --file-upload-border: var(--border); | |||
| --file-upload-border-left-size: var(--border-width-large); | |||
| --file-upload-border-inline-start-size: var(--border-width-large); | |||
There was a problem hiding this comment.
I'm not certain we want to change the variable names. Though I understand the reason for it... It would be good to discuss.
There was a problem hiding this comment.
I think I'll go with this approach:
Solutions - 2: Mapped variables
We could create new variables and map those to the old ones, such as:
--quote-padding-inline-start: var(--quote-padding-left);
There was a problem hiding this comment.
@maria I think this is fixed now.
We now have
- The old variable so we don't break existing sites, and
- The new variable for how we will work from here on ...
msayoung
approved these changes
Nov 13, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #628
What does this change?
Removes all instances of things like
margin-left,margin-right, etc and use logical properties for them instead, such asmargin-inline-startandmargin-inline-end.This will be very beneficial for any site that wants to use languages other than left-to-right languages. It will be even more beneficial if we scale the project beyond UK/Ireland. Oh, and it will also mean a smaller CSS codebase to maintain.
How to test
How can we measure success?
We only have to write one set of CSS rules, no matter what direction our language is in.
Have you considered any issues?
This PR changes the names of all our properties such as
margin-leftbut also all our custom variables such as--quote-padding-left: var(--spacing-larger);becoming--quote-padding-inline-start: var(--spacing-larger);.Solutions - 1: Release Notes
We will need to make sure we have release notes for people to update anywhere they have used those variables (it should be a simple enough find/replace task).
Solutions - 2: Mapped variables
We could create new variables and map those to the old ones, such as:
--quote-padding-inline-start: var(--quote-padding-left);