-
Notifications
You must be signed in to change notification settings - Fork 850
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
Buttons get Brave style #3569
Buttons get Brave style #3569
Conversation
b23d737
to
67f5810
Compare
@petemill per the triage meeting, can you create an issue for this? (capturing what areas you're looking at updating) |
e6a3e10
to
be9dc0a
Compare
This is working and ready on macOS, but I'm getting an unknown immediate crash on Windows. Will see how the CI does, and do a Debug build locally in the mean time. |
7df7e79
to
fe98f5e
Compare
fe98f5e
to
5cf5e92
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.
Just gave this a go; works great! I used in both light and dark mode, went through all the different pages and situations I could think of (another good UI to try for seeing native components is clicking the lock and going to the cookie manager OR adding a new bookmark folder to toolbar)
Code changes also look good to me!
|
||
// Insert our own definition for `CreateXYZ`, and (in concert with the .cc) | ||
// move chromium's definition to `CreateXYZ_ChromiumImpl` | ||
#define CreateSecondaryUiButton CreateSecondaryUiButton_ChromiumImpl( \ |
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!! great idea! 👍
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.
LGTM
cedd28d
to
fc13588
Compare
Pushed a rebase on c78 |
4a19b7e
to
a25ec60
Compare
I've pushed a fix for the issue that the Buttons would first paint as square, and then paint as rounded when re-painted (due to hover or focus, etc). |
a25ec60
to
7cee53e
Compare
Not sure why CI lint and build failed yet again, even after a rebase. Just trying again... |
CI seems to have failed due to a single browser test in unrelated code
|
hmm... I just pulled latest and noticed a few irregularities (macOS): I did do a sync + then an incremental build. Can you double check this, @petemill? |
7cee53e
to
54e40ce
Compare
Thanks @bsclifton. A last minute change of where the radius was applied didn't get adequate testing. The fix was pushed. https://github.com/brave/brave-core/compare/7cee53ecf4ec18662eee5f8b9109f746dfa5adda..54e40cea0457dac3c6d635915442a88bd3745e24 |
54e40ce
to
0401239
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.
Retested after last change- looks good! 😄
Build seems 'unstable', not failed, and seems to have errored at the intermittent rewards test case. |
@petemill looks like you're good to go- the test that failed is intermittent: cc: @NejcZdovc |
Uplift button-styles #3569 to 0.71.x
Uplifts should include:
Fix brave/brave-browser#6398
Native buttons - creates brave style
WebUI buttons - perfects existing brave style to be consistent with latest design iteration that native buttons now get
Buttons have 2 types: regular and prominent (native) or action (webui).
Each button has styles for 4 states: regular, hover, focus, active and active states.
Each state controls: text color, background color, ink highlight color, ink color, focus ring color, border color, and shadows.
That native button strategy is to replace the
Create
functions which are used to createMdTextButton
s across the browser Views UI code and have those functions instead returnBraveTextButton
s. This class inherits fromMdTextButton
.Unfortunately the definitions for colors seems to be split between a UI-common function (
GetSystemColor
) and hard-coded within the button class.The WebUI strategy is improved by relying on css variables for code simplification: the variables change for different states, but the css properties applying those variables stay the same, and therefore css is only applied once and not overriden multiple times for different states.
Testing
The following should be the same buttons styles for WebUI and Native. The only difference is that WebUI buttons get a slightly better shadow effect when pressed ...because css is better ;-) (but really because AFAIK it would require a lot of new native code to get the shadow like this whilst still using a lot of the existing chromium ink drop and other button features).
Prominent (light and dark mode)
Hover
Pressed
Regular (light mode)
Hover
Pressed (on Windows gets a ink bubble animation)
Regular (dark mode)
Hover
Pressed (on Windows gets a ink bubble animation)
Focus (same for all styles)
Submitter Checklist:
npm run lint
)git rebase master
(if needed).git rebase -i
to squash commits (if needed).Reviewer Checklist:
After-merge Checklist:
changes has landed on.