feat(select): prepend support on textfield & select #82
Conversation
|
@i8ramin Interesting contribution, however, this will need to be audited by design. Can you please confer with Dana Ballasy about this change? |
|
What is the breaking change for? |
No longer breaking change. |
|
hmmm.. so the idea is you would prepend a select to the text field in order to solve for phone field? Might be useful to provide an example of this specific use case (with a dummy select), since that is the reason for adding? like |
|
doesn't look like disabled behaves the same way with |
That was a bad copy/paste job. It was missing the |
This is just the first step towards that end goal. Adding a phone select in there is gonna be tricky, so didn't want to create a huge PR. This one just makes it so we can "prepend" things to textfield & selects |
|
@cmugla added a simple flag dropdown (no functionality, just visuals)
|
| @@ -140,5 +147,22 @@ | |||
| color: rgba($ray-color-gray-60, 0.4); | |||
| } | |||
| } | |||
|
|
|||
| &--simple { | |||
There was a problem hiding this comment.
new addition to ray-select to support things like the flag dropdown
| border-radius: 0; | ||
|
|
||
| &__input { | ||
| font-size: ($ray-field-label-size * 1.2); |
There was a problem hiding this comment.
this is specifically to make the flags a bit larger .. not sure if we should set this font size here
i8ramin
changed the title
|
@i8ramin Is there any way to avoid the breaking change? We just released 1.0.0 lol |
No longer breaking changes. New wrapper div is only required for the new |
i8ramin
force-pushed
the
rb-prepend
branch
2 times, most recently
from
d18ca98
to
630a200
Compare
BREAKING CHANGE: textfields and selects that have icons (and not prepends) need to be wrapped in an
extra div with a class name of "#{$ray-class-prefix}#{$class}__wrapper"
re #81
| @@ -44,11 +46,15 @@ | |||
| border-radius: 2px; | |||
|
|
|||
| [dir='rtl'] & { | |||
| position: unset; | |||
| margin-left: $ray-field-h-spacing; | |||
| right: calc(100% - (2 * #{$ray-field-h-spacing})); | |||
There was a problem hiding this comment.
This is a slight change in how we handle the arrow on RTL. Instead of unsetting position, we calculate it so that the behavior is similar to how it is done with LTR
|
|
textfields and selects that have icons (and not prepends) need to be wrapped in an
extra div with a class name of "#{$ray-class-prefix}#{$class}__wrapper"
re #81
No longer breaking change. Decided to not touch the current
with-iconimplementation and create new styles to supportprepend.Main motivation (re #81)
Screenshots