Skip to content
This repository has been archived by the owner on Dec 11, 2019. It is now read-only.

Separate input and select styles using Aphrodite #5972

Closed
7 tasks done
jkup opened this issue Dec 1, 2016 · 3 comments
Closed
7 tasks done

Separate input and select styles using Aphrodite #5972

jkup opened this issue Dec 1, 2016 · 3 comments
Assignees
@bsclifton
Labels
design A design change, especially one which needs input from the design team. QA/test-plan-required refactoring/aphrodite release-notes/exclude
Milestone
0.13.2

Comments

@jkup
Copy link
Contributor

jkup commented Dec 1, 2016 •
edited by bsclifton
Loading

The goal for this issue would be to separate input and select styles (which are currently coupled together). Per our style guidelines, solving this issue would involve rolling the input and select elements into an Aphrodite component.

  • Text entry field (editable)
  • Text entry field (focus outline)
  • Text entry field (locked/fixed value)
  • drop-down menu style
  • preferred drop down arrow style
  • flatten out the orange button
  • update about:styles

Here are some spec images:

Text entry field (editable)

image

image

Text entry field (focus outline)

image
(use a 2 px radius, and "@statsBlue: #0796fa;")

Text entry field (locked/fixed value)

image

image
(use variable color for fill: @veryLightGray: rgb(250, 250, 250); )

drop-down menu style

image

image

preferred drop down arrow style

image

We can switch to a different FA triangle
image

and this will flatten out the orange button

image

image
@jkup jkup added the design A design change, especially one which needs input from the design team. label Dec 1, 2016
@jkup jkup added this to the 0.13.1 milestone Dec 1, 2016
@luixxiul luixxiul mentioned this issue Dec 8, 2016
Closed
4 tasks
@bsclifton bsclifton assigned luixxiul and unassigned bradleyrichter Dec 9, 2016
@luixxiul luixxiul removed their assignment Dec 22, 2016
@jkup jkup mentioned this issue Jan 7, 2017
Closed
@cezaraugusto
Copy link
Contributor

sorry don't get it, what's the issue here?

@bsclifton bsclifton changed the title Separate input and select styles Separate input and select styles using Aphrodite Jan 16, 2017
@bsclifton bsclifton modified the milestones: 0.13.2, 0.13.1 Jan 16, 2017
@bsclifton
Copy link
Member

Updated issue to capture the requirement for the Aphrodite library. A PR was submitted to solve the style issues, but we've been fighting style regressions. Styles are very hard to test / review because of the global impact to the app.

Our new reviewer guidelines outline the need to use Aphrodite, which is why I reworked this issue after closing the mentioned PR

@bsclifton bsclifton modified the milestones: 0.13.1, 0.13.2 Jan 16, 2017
@bsclifton bsclifton self-assigned this Jan 16, 2017
@bsclifton bsclifton mentioned this issue Jan 16, 2017
Merged
4 tasks
@bsclifton
Copy link
Member

Fixed with #6689

bsclifton added a commit that referenced this issue Jan 24, 2017
@bsclifton
Separate input and select styles using Aphrodite
b65c9f9 
Fixes #5972

- Create aphrodite components for "text" input type
- Create aphrodite components for "select" input type
- Small LESS updates to primary button (not Aphrodite component yet)
- Update about:styles

Auditors: @bbondy, @luixxiul, @cezaraugusto, @bradleyrichter
bsclifton added a commit that referenced this issue Jan 25, 2017
@bsclifton
Separate input and select styles using Aphrodite
d9d7483 
Fixes #5972

- Create aphrodite components for "text" input type
- Create aphrodite components for "select" input type
- Small LESS updates to primary button (not Aphrodite component yet)
- Update about:styles

Auditors: @bbondy, @luixxiul, @cezaraugusto, @bradleyrichter
bsclifton added a commit that referenced this issue Jan 25, 2017
@bsclifton
Separate input and select styles using Aphrodite
64b1e2f 
Fixes #5972

- Create aphrodite components for "text" input type
- Create aphrodite components for "select" input type
- Small LESS updates to primary button (not Aphrodite component yet)
- Update about:styles

Auditors: @bbondy, @luixxiul, @cezaraugusto, @bradleyrichter
bsclifton added a commit that referenced this issue Jan 26, 2017
@bsclifton
Separate input and select styles using Aphrodite
d1d80db 
Fixes #5972

- Create aphrodite components for "text" input type
- Create aphrodite components for "select" input type
- Small LESS updates to primary button (not Aphrodite component yet)
- Update about:styles

Auditors: @bbondy, @luixxiul, @cezaraugusto, @bradleyrichter
This was referenced Feb 3, 2017
Closed
Closed
Closed
Closed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@bsclifton bsclifton

Labels
design A design change, especially one which needs input from the design team. QA/test-plan-required refactoring/aphrodite release-notes/exclude
Projects
None yet
Milestone
0.13.2
Development

No branches or pull requests
5 participants
@jkup @luixxiul @cezaraugusto @bsclifton @bradleyrichter