Unverified Commit 4168cf26 authored by gabriellsh's avatar gabriellsh Committed by GitHub
Browse files

fix: outline input and Select text wrapping (#177)


Co-authored-by: default avatarGuilherme Gazzo <guilhermegazzo@gmail.com>
parent e3d7d7d1
......@@ -81,9 +81,9 @@ export const Select = ({
<Flex.Container>
<Margins inline='neg-x4'>
<Wrapper mod-hidden={!!visibleText}>
{ visibleText && <Flex.Item grow={1}>
{ visibleText && <Flex.Item grow={1} shrink={1}>
<Margins inline='x4'>
<Box is='span' textStyle='p2' textColor={ valueLabel ? 'default' : 'hint' }>{visibleText}</Box>
<Box is='span' componentClassName='rcx-select__item' textStyle='p2' textColor={ valueLabel ? 'default' : 'hint' }>{visibleText}</Box>
</Margins>
</Flex.Item>}
<Anchor disabled={disabled} mod-undecorated={true} filter={filter} ref={ref} aria-haspopup='listbox' onClick={show} onBlur={hide} onKeyUp={handleKeyUp} onKeyDown={handleKeyDown} />
......
......@@ -5,6 +5,12 @@
align-items: center; // TODO move to .rcx-input-box
&__item {
white-space: nowrap;
@include use-text-ellipsis;
}
&__focus,
&__placeholder {
display: inline-block;
......@@ -31,10 +37,14 @@
}
&__wrapper {
min-width: 0;
user-select: none;
opacity: 1;
flex-grow: 1;
flex-shrink: 1;
&--hidden {
.rcx-select__focus {
......
......@@ -3,5 +3,5 @@
}
@mixin use-focus-shadow($outer-color) {
box-shadow: 0 0 0 #{ to-rem(6) } #{ $outer-color };
box-shadow: 0 0 0 #{ to-rem($spaces-x4) } #{ $outer-color };
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment