-
Notifications
You must be signed in to change notification settings - Fork 196
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
fix(*): define missing custom properties from theme directory #3476
fix(*): define missing custom properties from theme directory #3476
Conversation
🦋 Changeset detectedLatest commit: 557d0f5 The changes in this PR will be included in the next version bump. This PR includes changesets to release 7 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 |
🚀 Deployed on https://pr-3476--spectrum-css.netlify.app |
File metricsSummaryTotal size: 1.74 MB* Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.
Detailsactionbutton
avatar
button
clearbutton
dialog
infieldbutton
* Results are not gzipped or minified. * An ASCII character in UTF-8 is 8 bits or 1 byte. |
d72049e
to
1303a5e
Compare
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.
Nice work on this! I just wanted to double check with you on some of those action button "unused custom properties" (I left a comment). Otherwise, I didn't get any linter warnings/errors for each of the components ✅
2f3fc28
to
16ddbc6
Compare
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.
Wow, this ended up being quite the collection of components, especially with actionbutton and dialog in the mix! It looks like you took care of all the no undefined custom props warnings, so that's great!
I think there are a few remaining oddities particularly with actionbutton, like the selected state content color (and also the default/disabled state border, which I didn't comment on within the code because I wasn't able to figure out if that was because of a missing/undefined custom prop or something else). Hopefully we can resolve them here, or if not, in the S2 migration. I'd also noticed that when I was running yarn build
on this branch that there were some lingering metadata changes that needed to be committed, but that may or may not still be an issue if your branch has been updated since then.
I left a few comments, fixed the |
4341683
to
b4c0701
Compare
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.
Hi again! Found a few more selected states in action button that likely need fixing, and I'm bringing up a hover question/issue with the static color variant for clear button.
One more thing! Those dual-colored borders in action button are happening because the border-style is no longer being set! In s2 foundations we're setting it by importing the commons/base-button styles. Therefore in computed border styles we end up with an But what we have in s2 foundations is a It looks like button is still importing the base button styles in |
f9b720a
to
7c7ecde
Compare
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.
Looks good to me! I know @marissahuysentruyt was planning to take another look at this, I'd be curious to know if her eagle eyes can spot anything here.
Documenting that I still think actionbutton is missing the basebutton styles and that's what's causing the two-colored outset border style, but we weren't able to get those base button styles to work on action button, so there may need to be a follow-up card for that (or we'll address it in the migration).
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.
I believe I found one or two more variables that should be defined here- let me know what you think!
b9e355e
to
6cc39ea
Compare
6cc39ea
to
a42f004
Compare
1d51314
to
49bf9c4
Compare
f6805da
to
bc72ba7
Compare
5840e93
to
19f6bba
Compare
I just reverted
Alrighty! I just added that missing rule. I had tried reintroducing the action button updates by stepping through the changes again, but things still weren't quite right. |
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.
Also wanted to document: spectrum-two.css defines this custom property (--spectrum-actionbutton-content-color-selected: var(--spectrum-gray-50);
) in the foundations branch. This is what I see in foundations actionbutton/index.css for &.is-selected
:
But in the spectrum-two
branch, instead of using that spectrum-actionbutton-content-color-selected
prop, we just use gray-25
:
Should we refactor the gray-25
out of the mod definition during action button's migration? Like do something more like:
--spectrum-actionbutton-content-color-selected: var(--spectrum-gray-25);
&.is-selected {
...
--mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-actionbutton-content-color-selected));
--mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-actionbutton-content-color-selected));
--mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-actionbutton-content-color-selected));
--mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--spectrum-actionbutton-content-color-selected));
}
This is a change that isn't related to our undefined properties, so it's definitely a separate PR.
2a3b8c4
to
30ae168
Compare
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.
Noting a couple of diffs I saw between this branch and s2-foundations that are causing some regressions!
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.
There's this selector in s2 foundations that sets the border color to transparent that looks like its missing here, after --spectrum-logical-rotation
. You have this selector here but I think would maybe need to add the border-color?
&.spectrum-ActionButton--quiet {
--spectrum-actionbutton-border-color: transparent;
}
Except that I don't think that works because now we're not setting --spectrum-actionbutton-border-color
anywhere, so maybe try something like
--mod-actionbutton-border-color-default: transparent;
--mod-actionbutton-border-color-hover: transparent;
--mod-actionbutton-border-color-down: transparent;
--mod-actionbutton-border-color-focus: transparent;
--mod-actionbutton-border-color-disabled: transparent;
We're also missing setting the static-black-focus-indicator-color:
--mod-actionbutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
And static white:
--mod-actionbutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
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.
I believe the spectrum-action-border-color
change(s) should be handled in this commit: fef056. I stepped through the states on this branch/PR and matched them to a recent deploy with the previous, working state of the button(s).
1c4b4a6
to
fef056c
Compare
Hey! I think we've come a long way on action button and while we're still getting unintended borders on several quiet variants, I think a lot of this is due to some of the structural differences between the branches, which isn't really what we intended to fix here, and is proving to be a lot more difficult than originally anticipated. Overall, it looks fine and there are no glaring contrast or background issues that I'm seeing. If there are no other improvements that you or @marissahuysentruyt see to make on action button, I think that one's good to go. When scanning the rest of the components fixed here, I did still notice some possible inconsistencies with button that I'd love some opinions on: As far as I can tell I think the other components look good! |
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.
Running yarn linter
against each component doesn't return any errors 🥳 With the project running, I don't see anything that's absolutely broken (wrong styles - yes, but nothing totally broken or unusable). I was a little concerned at the number of mods that look like they've been deleted in action button, but you mentioned in standup that they seemed self-referential, so maybe it's ok for the spectrum-two
branch.
Like @rise-erpelding said, there's lots of work that probably could be done with action button. We'll have to readdress those things when the action button migration gets restarted. I also see the missing outlines in the test cases for outline buttons (she left that screenshot).
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.
Thanks for all your hard work on this!
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.
I think this is good to go!
Re-summarizing my notes:
- Action button has several instances of visible borders where they should be transparent, but this doesn't seem to be because of missing custom properties so hopefully this can be taken care of in the migration.
- Button - some follow up should be done to remove unneeded outline variants from tests since it's already been migrated and those variants don't exist anymore.
Clear button, Avatar, Dialog, and Infield button look good! Thanks @cdransf!
Description
CSS-1084
s2-foundations-redux
To-do list