feat: remove dir polyfill [CSS-222] #4014
Open
+73
−134
Conversation
This file contains hidden or 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
🦋 Changeset detectedLatest commit: 6e05e55 The changes in this PR will be included in the next version bump. This PR includes changesets to release 24 packages
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 |
File metricsSummaryTotal size: 1.42 MB*
File change detailsaccordion
actionbutton
assetlist
breadcrumb
calendar
colorarea
colorloupe
colorslider
colorwheel
combobox
menu
pagination
popover
progressbar
radio
slider
steplist
switch
table
tabs
tooltip
treeview
* An ASCII character in UTF-8 is 8 bits or 1 byte. |
📚 Branch previewPR #4014 has been deployed to Azure Blob Storage: https://spectrumcss.z13.web.core.windows.net/pr-4014/index.html. |
castastrophe
added
breaking change
|
Manual VRT compare: https://www.chromatic.com/review?appId=64762974a45b8bc5ca1705a2&number=35&type=unlinked&view=activity It uncovered only 1 diff which seems to have just been a test blip off spectrum-two's last baseline. |
castastrophe
force-pushed
the
castastrophe/remove-dir-polyfill-css-222
branch
from
cfaca84 to
9b639c3
Compare
castastrophe
force-pushed
the
castastrophe/remove-dir-polyfill-css-222
branch
from
9b639c3 to
6e05e55
Compare
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.
Description
This PR removes the
dirattribute polyfill (served via a PostCSS transform to compiled assets) as the fallback is no longer necessary. Thedirattribute support is available in all supported browsers and has been tested to correctly inherit inside web component shadow DOMs.Breaking change: This is a breaking change only to those relying on the
dirattribute being present for styling, however, the:dirpseudo will correctly inherit values from their containers. To correctly determine thedirvalue of a node using JavaScript, you can usegetComputedStyle(node).direction.Components affected: This change affects 22 components that previously relied on the
dirpolyfill:Technical changes:
"dir-pseudo-class": { preserve: true }from PostCSS config--tag nextfor comparison[dir="rtl"]selectorsHow and where has this been tested?
Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.
Validation steps
Test RTL layout in accordion component:
Test RTL layout in breadcrumb component:
Test RTL layout in calendar component:
Test RTL layout in pagination component:
Test RTL layout in tabs component:
Test that
getComputedStyle(node).directionreturns correct values:dir="ltr"anddir="rtl"attributesgetComputedStyle(node).directionreturns "ltr" and "rtl" respectivelyRun component comparison:
yarn component:compareto verify changes against published versions[dir="rtl"]selectors were removed:dir(rtl)selectors remain intactRegression testing
Validate:
Screenshots
No visual changes expected - this is a technical cleanup removing polyfill code that is no longer needed.
To-do list