Unverified Commit 4ef17e05 authored by gabriellsh's avatar gabriellsh Committed by GitHub
Browse files

fix: Select arrow position for empty selects (#157)



* Minor rewrite

* Fixed placeholder for selectfiltered

* Fixed text style, changed prop

* Added 'No Placeholder' to history, prop fix
Co-authored-by: default avatarTasso Evangelista <tasso.evangelista@rocket.chat>
parent 910c85c9
......@@ -9,7 +9,7 @@ const Container = Box.extend('rcx-select', 'div');
export const Addon = Box.extend('rcx-select__addon', 'div');
const Wrapper = Box.extend('rcx-select__wrapper', 'div'); // ({ children, ...props }) => <InnerWrapper children={React.Children.map(children, (c, i) => <Margins key={i} inline='x4'>{c}</Margins>)} {...props} />;
const Wrapper = Box.extend('rcx-select__wrapper', 'div');
export const Focus = React.forwardRef((props, ref) => <Box ref={ref} textStyle='p2' textColor='hint' componentClassName='rcx-select__focus' is='button' type='button' {...props}/>);
......@@ -23,7 +23,7 @@ export const Select = ({
onChange = () => {},
getValue = ([value] = []) => value,
getLabel = ([, label] = []) => label,
placeholder,
placeholder = '',
renderOptions: _Options = Options,
}) => {
const [internalValue, setInternalValue] = useState(value);
......@@ -68,7 +68,7 @@ export const Select = ({
const valueLabel = getLabel(option);
const visibleText = (filter === undefined || visible === AnimatedVisibility.HIDDEN) && (valueLabel ? <Box textStyle='p1' textColor='default'>{valueLabel}</Box> : placeholder);
const visibleText = (filter === undefined || visible === AnimatedVisibility.HIDDEN) && (valueLabel || placeholder);
return (
<Container disabled={disabled} ref={containerRef} onClick={() => ref.current.focus() & show()} className={
[
......@@ -82,8 +82,10 @@ export const Select = ({
<Flex.Container>
<Margins inline='neg-x4'>
<Wrapper mod-hidden={!!visibleText}>
{ visibleText && <Flex.Item grow={1}>
<Margins inline='x4'><Box is='span' textStyle='p2' textColor='hint' className='rcx-select__placeholder'>{visibleText}</Box></Margins>
{ (typeof placeholder === 'string' || !!valueLabel) && <Flex.Item grow={1}>
<Margins inline='x4'>
<Box is='span' 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} />
<Margins inline='x4'><Addon children={<Icon name={ visible === AnimatedVisibility.VISIBLE ? 'cross' : 'arrow-down'} size='20' />}/></Margins>
......@@ -102,5 +104,5 @@ export const SelectFiltered = ({
}) => {
const [filter, setFilter] = useState('');
const anchor = useCallback(React.forwardRef(({ children, filter, ...props }, ref) => <Margins inline='x4'><Flex.Item grow={1}><InputBox.Input className='rcx-select__focus' ref={ref} placeholder={placeholder} value={filter} onChange={() => {}} onInput={(e) => setFilter(e.currentTarget.value)} {...props} mod-undecorated={true}/></Flex.Item></Margins>), []);
return <Select filter={filter} options={options} {...props} anchor={anchor}/>;
return <Select placeholder={null} filter={filter} options={options} {...props} anchor={anchor}/>;
};
......@@ -30,7 +30,6 @@ An input for selection of options.
</Story>
</Preview>
<Preview>
<Story name='Error'>
<Select error placeholder="Placeholder here..." options={options}/>
......@@ -43,6 +42,13 @@ An input for selection of options.
</Story>
</Preview>
#### No Placeholder
<Preview>
<Story name='No Placeholder'>
<Select options={options}/>
</Story>
</Preview>
<Props of={Select} />
......
Markdown is supported
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