-
Notifications
You must be signed in to change notification settings - Fork 204
feat: remove dir polyfill [CSS-222] #4014
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
base: spectrum-two
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
--- | ||
"@spectrum-css/actionbutton": major | ||
"@spectrum-css/colorslider": major | ||
"@spectrum-css/progressbar": major | ||
"@spectrum-css/breadcrumb": major | ||
"@spectrum-css/colorloupe": major | ||
"@spectrum-css/colorwheel": major | ||
"@spectrum-css/pagination": major | ||
"@spectrum-css/accordion": major | ||
"@spectrum-css/assetlist": major | ||
"@spectrum-css/colorarea": major | ||
"@spectrum-css/calendar": major | ||
"@spectrum-css/combobox": major | ||
"@spectrum-css/steplist": major | ||
"@spectrum-css/treeview": major | ||
"@spectrum-css/popover": major | ||
"@spectrum-css/tooltip": major | ||
"@spectrum-css/slider": major | ||
"@spectrum-css/switch": major | ||
"@spectrum-css/radio": major | ||
"@spectrum-css/table": major | ||
"@spectrum-css/menu": major | ||
"@spectrum-css/tabs": major | ||
--- | ||
|
||
This update removes the `dir` attribute polyfill (served via a PostCSS transform to compiled assets) as the fallback is no longer necessary. The`dir` attribute support is available in all supported browsers and has been tested to correctly inherit inside web component shadow DOMs. This is a breaking change **only** to those relying on the `dir` attribute being present for styling, however, the `:dir` pseudo will correctly inherit values from their containers. To correctly determine the `dir` value of a node using JavaScript, you can use `getComputedStyle(node).direction`. |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -63,10 +63,7 @@ | |
".spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before", | ||
".spectrum-Switch:hover .spectrum-Switch-switch", | ||
".spectrum-Switch:hover .spectrum-Switch-switch:before", | ||
".spectrum-Switch:hover ~ .spectrum-Switch-label", | ||
"[dir=\"rtl\"] .spectrum-Switch--active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before", | ||
"[dir=\"rtl\"] .spectrum-Switch-input:checked + .spectrum-Switch-switch:before", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We might have to address the switch too. When I select the switch in RTL, the position of the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This one looks to already be in the |
||
"[dir=\"rtl\"] .spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before" | ||
".spectrum-Switch:hover ~ .spectrum-Switch-label" | ||
], | ||
"modifiers": [ | ||
"--mod-switch-animation-duration-switch", | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -247,59 +247,7 @@ | |
".u-tooltip-showOnHover:hover .spectrum-Tooltip--top-end", | ||
".u-tooltip-showOnHover:hover .spectrum-Tooltip--top-left", | ||
".u-tooltip-showOnHover:hover .spectrum-Tooltip--top-right", | ||
".u-tooltip-showOnHover:hover .spectrum-Tooltip--top-start", | ||
"[dir=\"rtl\"] .spectrum-Tooltip--bottom-end .spectrum-Tooltip-tip", | ||
"[dir=\"rtl\"] .spectrum-Tooltip--bottom-start .spectrum-Tooltip-tip", | ||
"[dir=\"rtl\"] .spectrum-Tooltip--end .spectrum-Tooltip-tip", | ||
"[dir=\"rtl\"] .spectrum-Tooltip--end-bottom .spectrum-Tooltip-tip", | ||
"[dir=\"rtl\"] .spectrum-Tooltip--end-bottom.is-open", | ||
"[dir=\"rtl\"] .spectrum-Tooltip--end-top .spectrum-Tooltip-tip", | ||
"[dir=\"rtl\"] .spectrum-Tooltip--end-top.is-open", | ||
"[dir=\"rtl\"] .spectrum-Tooltip--end.is-open", | ||
Comment on lines
-252
to
-258
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 👏👏👏👏 |
||
"[dir=\"rtl\"] .spectrum-Tooltip--left .spectrum-Tooltip-tip", | ||
"[dir=\"rtl\"] .spectrum-Tooltip--left-bottom .spectrum-Tooltip-tip", | ||
"[dir=\"rtl\"] .spectrum-Tooltip--left-top .spectrum-Tooltip-tip", | ||
"[dir=\"rtl\"] .spectrum-Tooltip--right .spectrum-Tooltip-tip", | ||
"[dir=\"rtl\"] .spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip", | ||
"[dir=\"rtl\"] .spectrum-Tooltip--right-top .spectrum-Tooltip-tip", | ||
"[dir=\"rtl\"] .spectrum-Tooltip--start .spectrum-Tooltip-tip", | ||
"[dir=\"rtl\"] .spectrum-Tooltip--start-bottom .spectrum-Tooltip-tip", | ||
"[dir=\"rtl\"] .spectrum-Tooltip--start-bottom.is-open", | ||
"[dir=\"rtl\"] .spectrum-Tooltip--start-top .spectrum-Tooltip-tip", | ||
"[dir=\"rtl\"] .spectrum-Tooltip--start-top.is-open", | ||
"[dir=\"rtl\"] .spectrum-Tooltip--start.is-open", | ||
"[dir=\"rtl\"] .spectrum-Tooltip--top-end .spectrum-Tooltip-tip", | ||
"[dir=\"rtl\"] .spectrum-Tooltip--top-start .spectrum-Tooltip-tip", | ||
"[dir=\"rtl\"] .u-tooltip-showOnHover .spectrum-Tooltip--end", | ||
"[dir=\"rtl\"] .u-tooltip-showOnHover .spectrum-Tooltip--end-bottom", | ||
"[dir=\"rtl\"] .u-tooltip-showOnHover .spectrum-Tooltip--end-top", | ||
"[dir=\"rtl\"] .u-tooltip-showOnHover .spectrum-Tooltip--start", | ||
"[dir=\"rtl\"] .u-tooltip-showOnHover .spectrum-Tooltip--start-bottom", | ||
"[dir=\"rtl\"] .u-tooltip-showOnHover .spectrum-Tooltip--start-top", | ||
"[dir=\"rtl\"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--end", | ||
"[dir=\"rtl\"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--end-bottom", | ||
"[dir=\"rtl\"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--end-top", | ||
"[dir=\"rtl\"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--start", | ||
"[dir=\"rtl\"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--start-bottom", | ||
"[dir=\"rtl\"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--start-top", | ||
"[dir=\"rtl\"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end", | ||
"[dir=\"rtl\"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-bottom", | ||
"[dir=\"rtl\"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-top", | ||
"[dir=\"rtl\"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start", | ||
"[dir=\"rtl\"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start-bottom", | ||
"[dir=\"rtl\"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start-top", | ||
"[dir=\"rtl\"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--end", | ||
"[dir=\"rtl\"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--end-bottom", | ||
"[dir=\"rtl\"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--end-top", | ||
"[dir=\"rtl\"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--start", | ||
"[dir=\"rtl\"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--start-bottom", | ||
"[dir=\"rtl\"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--start-top", | ||
"[dir=\"rtl\"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--end", | ||
"[dir=\"rtl\"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--end-bottom", | ||
"[dir=\"rtl\"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--end-top", | ||
"[dir=\"rtl\"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--start", | ||
"[dir=\"rtl\"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--start-bottom", | ||
"[dir=\"rtl\"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--start-top" | ||
".u-tooltip-showOnHover:hover .spectrum-Tooltip--top-start" | ||
], | ||
"modifiers": [ | ||
"--mod-overlay-animation-duration", | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we need some additional CSS to fix the chevron from flipping? In the video, if I click the action buttons to advance the month, the chevron flips when the button is
active
.Screen.Recording.2025-07-28.at.2.05.57.PM.mov
I think it's because of this transform:
spectrum-css/components/calendar/index.css
Line 180 in cc65f04
I don't think we can remove that line, but maybe we add the
.spectrum-Calendar-prevMonth:active
and.spectrum-Calendar-nextMonth:active
selectors, to the block? You might know of a more elegant solution.