Restyled select and input to the spec image #6084

luixxiul · 2016-12-08T06:45:20Z

Submitted a ticket for my issue if one did not already exist.
Used Github auto-closing keywords in the commit message.
Added/updated tests for this change (for new code or code which already has tests).
Ran git rebase -i to squash commits (if needed).

Closes #5972
The SVG caret down will be replaced with the sprite later (#5891)

Test Plan: in fd0c10a

Auditors:

Into

It seems there is no property such as outline-radius.

luixxiul · 2016-12-08T06:47:08Z

If there is (and should be) a better way to handle radius inside the input form, please add edits to the PR, thanks.

bradleyrichter · 2016-12-08T07:05:47Z

sweet!

I do see that we need one more style difference between editable text entry fields and non-editable. (can be the same but light grey BG instead of white.)

luixxiul · 2016-12-08T07:50:07Z

@bradleyrichter even @veryLightGray in variable.less is too dark on about:preferences, though I'm not sure if #fefefe makes difference.

luixxiul · 2016-12-10T07:55:03Z

be2a185 fixes

into

luixxiul · 2016-12-10T08:26:31Z

With 21a13ef

luixxiul · 2016-12-11T05:04:30Z

less/forms.less

@@ -22,7 +22,8 @@ select {
  width: 100%;
 }

-select.form-control {
+select.form-control,
+.bookmarkForm select {


I know this is not an elegant solution; general properties for select and input should be specified at first, followed by more specific properties for .form-control, etc.

luixxiul · 2016-12-11T09:57:44Z

With f21ff68

the length of the input form on about:preferences#payments is fixed after #6047 is merged like this:

bradleyrichter · 2016-12-11T18:44:19Z

@luixxiul These look good. The one thing I see that is still wrong is that the form elements in the bookmark hanger should be taller to match the prefs pages.

luixxiul · 2016-12-11T19:44:16Z

@bradleyrichter Should it be like this?

bradleyrichter · 2016-12-11T21:06:54Z

yes. Now they match. But perhaps we can tighten up the padding across all of them now?

About this much: (see thinner vs current on both objects)

luixxiul · 2016-12-12T03:49:08Z

OK, updated. ready for re-review.

bsclifton · 2016-12-19T00:51:26Z

Will check this out soon (I promise!)

bradleyrichter · 2016-12-20T23:40:08Z

@bsclifton Candidate for 13.0? Or wait?

bsclifton · 2016-12-26T04:50:50Z

Let's keep this for 0.13.1 😄

Majorly, the change affects 2 places in the UI. The Clear Browsing Data… option in the History menu and the Clear Browsing Data Now… button in the Security tab in Preferences. We store the state of the toggled options when the user clears anytime, so that the next time he/she opens this dialog, the options are pre-populated as per the last selected options From a technical perspective, we have moved away from saving the current state of the SwitchControls in the windowState. We only save the visibility on the windowState. The whole state is managed by the panel itself and just updates the appState on clicking clear. Fixes #4082

Making the Clear Browsing Data panel stateful

restyle preferences payments

Add focus ring to about page form elements

Add Paste Without Formatting to context menu

@bradleyrichter

Closes #5972 - Set -webkit-appearance:none - Set the caret down SVG file (created by @bradleyrichter) as the background-image - Set the outline inside the input element - Set height:2rem to make the height consistent - Moved properties in .form-control to the input and select element - Removed box-shadow properties from the input and select element under .bookmarkForm - Set specific properties to input in #navigator The caret down SVG file will be replaced with the sprite PNG later (See #5891) Auditors: Test Plan: 1. Open about:preferences 2. Make sure the text entry fields with active edit state have the rectangle inside them 3. Make sure the drop down arrows are styled properly 4. Open another page in a new tab 5. Open the shield from the top right lion icon 6. Make sure the drop down arrows are styled properly 7. Bookmark about:preferences 8. Make sure the input and select elements are styled consistently on the bookmark dialog

luixxiul · 2017-01-11T16:33:33Z

CI passed: https://travis-ci.org/brave/browser-laptop/builds/190889920

cezaraugusto · 2017-01-15T22:21:44Z

looks good but needs rebase

bsclifton · 2017-01-16T02:51:40Z

I've been very hesitant to review this PR because of all of the time cost associated with bugs and regressions that style updates introduce.

Per our reviewer guidelines, I'm going to close this PR since it doesn't meet our requirements:
https://github.com/brave/browser-laptop/wiki/Reviewer-guideline

Front end: If styles are being added, make sure it is using Aphrodite.

I'll update the original issue to capture this requirement

luixxiul · 2017-01-16T03:14:38Z

�OK but please make sure that the guideline was published 8 days ago while the PR was initially opened 1 month ago

bsclifton · 2017-01-16T04:15:53Z

@luixxiul I understand. I definitely appreciate the work, but the cost of reviewing adhoc style changes is orders of magnitude higher than reviewing code which has tests.

luixxiul added design A design change, especially one which needs input from the design team. settings labels Dec 8, 2016

luixxiul added the polish Nice to have — usually related to front-end/visual tasks. label Dec 8, 2016

luixxiul requested a review from bradleyrichter December 8, 2016 11:13

bsclifton assigned bsclifton and unassigned bsclifton Dec 9, 2016

bsclifton added this to the 0.13.1 milestone Dec 9, 2016

luixxiul commented Dec 11, 2016

View reviewed changes

luixxiul changed the title ~~Restyled select.form-control and input.form-control to the spec image~~ Restyled select and input to the spec image Dec 11, 2016

luixxiul mentioned this pull request Dec 11, 2016

Add "hide sites if" options to Advanced Options Dialog #4681

Closed

Add focus ring to about page form elements

3d75ed6

luixxiul mentioned this pull request Dec 14, 2016

Design "hide sites if" options on Advanced Options Dialog #6201

Closed

luixxiul requested review from jkup and bsclifton December 14, 2016 11:32

luixxiul modified the milestones: 0.13.0, 0.13.1 Dec 17, 2016

bbondy modified the milestones: 0.13.1, 0.13.0 Dec 19, 2016

luixxiul added the PR/needs-QA-attention ☕ label Jan 3, 2017

jkup mentioned this pull request Jan 7, 2017

input type text and select should have separate classes #6562

Closed

maazadeeb and others added 4 commits January 9, 2017 02:21

Merge pull request #6026 from maaz93/new-history-state

e5fc2ba

Making the Clear Browsing Data panel stateful

restyle preferences payments

0f0fc38

Merge pull request #6101 from brave/prefs-payments

2161945

restyle preferences payments

luixxiul changed the base branch from master to 0.13.1-branch January 11, 2017 06:59

bsclifton added 2 commits January 10, 2017 23:26

Merge pull request #6037 from brave/add-focus-ring

d3759ba

Add focus ring to about page form elements

Merge pull request #6359 from Liunkae/paste-unformatted-context-menu

dd64f4d

Add Paste Without Formatting to context menu

luixxiul added PR/work-in-progress ⚒ PR/needs-QA-attention ☕ and removed PR/needs-QA-attention ☕ PR/work-in-progress ⚒ labels Jan 11, 2017

bsclifton force-pushed the 0.13.1-branch branch from 4abf18d to e29888d Compare January 14, 2017 06:47

cezaraugusto self-requested a review January 15, 2017 22:19

bsclifton closed this Jan 16, 2017

bsclifton mentioned this pull request Jan 16, 2017

Separate input and select styles using Aphrodite #5972

Closed

7 tasks

luixxiul deleted the fix-input-select-styles branch January 16, 2017 03:10

luixxiul removed the PR/needs-QA-attention ☕ label Jan 16, 2017

luixxiul removed this from the 0.13.1 milestone Jan 16, 2017

luixxiul mentioned this pull request Jan 16, 2017

Include links to the guidelines in README.md and CONTRIBUTING.md #6660

Closed

2 tasks

bsclifton mentioned this pull request Jan 16, 2017

Separate input and select styles using Aphrodite #6689

Merged

4 tasks

luixxiul mentioned this pull request Feb 4, 2017

Replace input and select elements with <FormTextbox> and <FormDropdown> in .bookmarkFormTable #6777

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Restyled select and input to the spec image #6084

Restyled select and input to the spec image #6084

luixxiul commented Dec 8, 2016 •

edited

Loading

luixxiul commented Dec 8, 2016 •

edited

Loading

bradleyrichter commented Dec 8, 2016

luixxiul commented Dec 8, 2016

luixxiul commented Dec 10, 2016

luixxiul commented Dec 10, 2016

luixxiul Dec 11, 2016

luixxiul commented Dec 11, 2016 •

edited

Loading

bradleyrichter commented Dec 11, 2016

luixxiul commented Dec 11, 2016

bradleyrichter commented Dec 11, 2016 •

edited

Loading

luixxiul commented Dec 12, 2016 •

edited

Loading

bsclifton commented Dec 19, 2016

bradleyrichter commented Dec 20, 2016

bsclifton commented Dec 26, 2016

luixxiul commented Jan 11, 2017

cezaraugusto commented Jan 15, 2017 •

edited

Loading

bsclifton commented Jan 16, 2017 •

edited

Loading

luixxiul commented Jan 16, 2017

bsclifton commented Jan 16, 2017

Restyled select and input to the spec image #6084

Restyled select and input to the spec image #6084

Conversation

luixxiul commented Dec 8, 2016 • edited Loading

luixxiul commented Dec 8, 2016 • edited Loading

bradleyrichter commented Dec 8, 2016

luixxiul commented Dec 8, 2016

luixxiul commented Dec 10, 2016

luixxiul commented Dec 10, 2016

luixxiul Dec 11, 2016

Choose a reason for hiding this comment

luixxiul commented Dec 11, 2016 • edited Loading

bradleyrichter commented Dec 11, 2016

luixxiul commented Dec 11, 2016

bradleyrichter commented Dec 11, 2016 • edited Loading

luixxiul commented Dec 12, 2016 • edited Loading

bsclifton commented Dec 19, 2016

bradleyrichter commented Dec 20, 2016

bsclifton commented Dec 26, 2016

luixxiul commented Jan 11, 2017

cezaraugusto commented Jan 15, 2017 • edited Loading

bsclifton commented Jan 16, 2017 • edited Loading

luixxiul commented Jan 16, 2017

bsclifton commented Jan 16, 2017

luixxiul commented Dec 8, 2016 •

edited

Loading

luixxiul commented Dec 8, 2016 •

edited

Loading

luixxiul commented Dec 11, 2016 •

edited

Loading

bradleyrichter commented Dec 11, 2016 •

edited

Loading

luixxiul commented Dec 12, 2016 •

edited

Loading

cezaraugusto commented Jan 15, 2017 •

edited

Loading

bsclifton commented Jan 16, 2017 •

edited

Loading