fix: border radius in lookup component (#2558)

* fix: change to chip variant * fix: border radius in lookop component * test: fix integration test * chore: trigger CI * test: fix clickSelectedOptionInput integration test * chore: trigger CI Co-authored-by: Jose Leandro Torres <jtorressicilia@gmail.com>
nexxtway · Jan 9, 2023 · fef7965 · fef7965
1 parent 1447e64
commit fef7965
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 91 deletions.
diff --git a/src/components/Lookup/__test__/selectedValue.spec.js b/src/components/Lookup/__test__/selectedValue.spec.js
@@ -3,7 +3,7 @@ import { mount } from 'enzyme';
 import copyFn from 'clipboard-copy';
 import ButtonIcon from '../../ButtonIcon';
 import SelectedValue from '../selectedValue';
-import StyledSelectedValueIcon from '../styled/selectedValueIcon';
+import StyledSelectedIconContainer from '../styled/selectedIconContainer';
 
 jest.mock('clipboard-copy');
 
@@ -22,14 +22,14 @@ describe('<SelectedValue />', () => {
     });
     it('should not render an icon container', () => {
         const component = mount(<SelectedValue value={value} />);
-        expect(component.find(StyledSelectedValueIcon).exists()).toBe(false);
+        expect(component.find(StyledSelectedIconContainer).exists()).toBe(false);
     });
     it('should render an icon container', () => {
         const component = mount(<SelectedValue value={valueWithIcon} />);
-        expect(component.find(StyledSelectedValueIcon).exists()).toBe(true);
+        expect(component.find(StyledSelectedIconContainer).exists()).toBe(true);
     });
     it('should render a close button', () => {
-        const component = mount(<SelectedValue />);
+        const component = mount(<SelectedValue onClearValue={() => {}} />);
         expect(component.find(ButtonIcon).exists()).toBe(true);
     });
     it('should fire an event when the close button is clicked', () => {

diff --git a/src/components/Lookup/pageObject/index.js b/src/components/Lookup/pageObject/index.js
@@ -42,6 +42,7 @@ class PageLookup {
     async clickSelectedOptionInput() {
         await $(this.rootElement)
             .$('input[type="text"]')
+            .parentElement()
             .click();
     }
 
@@ -61,7 +62,7 @@ class PageLookup {
      */
     async clickRemoveSelectedOptionButton() {
         await $(this.rootElement)
-            .$('button[title="Remove selected option"]')
+            .$('button[title="Close"]')
             .click();
     }
 
@@ -94,7 +95,7 @@ class PageLookup {
      */
     async hasFocusRemoveSelectedOptionButton() {
         return $(this.rootElement)
-            .$('button[title="Remove selected option"]')
+            .$('button[title="Close"]')
             .isFocused();
     }
 

diff --git a/src/components/Lookup/selectedValue.js b/src/components/Lookup/selectedValue.js
@@ -3,19 +3,19 @@ import PropTypes from 'prop-types';
 import copy from 'clipboard-copy';
 import formatValue from './helpers/formatValue';
 import RenderIf from '../RenderIf/index';
-import CloseIcon from '../Chip/closeIcon';
-import ButtonIcon from '../ButtonIcon/index';
 import StyledReadOnlySelectedInput from './styled/input';
-import StyledSelectedInput from './styled/selectedInput';
 import StyledSelectedValueIcon from './styled/selectedValueIcon';
 import StyledSelectedValueContainer from './styled/selectedValueContainer';
-import StyledSelectedValueClearButton from './styled/selectedValueClearButton';
+import { StyledCombobox, StyledInput } from '../MultiSelect/styled';
+import StyledChip from './styled/chip';
+import StyledSelectedIconContainer from './styled/selectedIconContainer';
 
 export default class SelectedValue extends Component {
     constructor(props) {
         super(props);
         this.inputRef = React.createRef();
         this.handleFocus = this.handleFocus.bind(this);
+        this.handleClick = this.handleClick.bind(this);
     }
 
     handleFocus() {
@@ -24,6 +24,14 @@ export default class SelectedValue extends Component {
         copy(label);
     }
 
+    handleClick(event) {
+        const { disabled, onClick } = this.props;
+        if (!disabled) {
+            this.inputRef.current.focus();
+        }
+        onClick(event);
+    }
+
     /**
      * Sets focus on the element.
      * @public
@@ -48,14 +56,15 @@ export default class SelectedValue extends Component {
         this.inputRef.current.blur();
     }
 
-    renderInput() {
+    render() {
         const {
-            id,
-            name,
             value,
             disabled,
-            tabIndex,
             readOnly,
+            onClearValue,
+            id,
+            name,
+            tabIndex,
             required,
             onClick,
             errorMessageId,
@@ -64,72 +73,67 @@ export default class SelectedValue extends Component {
         } = this.props;
         const { label, icon } = formatValue(value);
 
-        if (readOnly) {
-            return (
-                <StyledReadOnlySelectedInput
-                    id={id}
-                    name={name}
-                    type="text"
-                    value={label}
-                    tabIndex={tabIndex}
-                    onFocus={this.handleFocus}
-                    onClick={onClick}
-                    disabled={disabled}
-                    readOnly
-                    aria-describedby={errorMessageId}
-                    required={required}
-                    ref={this.inputRef}
-                    iconPosition="left"
-                    icon={icon}
-                    error={error}
-                    borderRadius={borderRadius}
-                />
-            );
-        }
-        return (
-            <StyledSelectedInput
-                id={id}
-                name={name}
-                type="text"
-                value={label}
-                tabIndex={tabIndex}
-                onFocus={this.handleFocus}
-                onClick={onClick}
-                disabled={disabled}
-                readOnly
-                aria-describedby={errorMessageId}
-                required={required}
-                ref={this.inputRef}
-                iconPosition="left"
-                icon={icon}
-                error={error}
-                borderRadius={borderRadius}
-            />
-        );
-    }
-
-    render() {
-        const { value, disabled, readOnly, onClearValue } = this.props;
-        const { icon } = formatValue(value);
-
         return (
             <StyledSelectedValueContainer readOnly={readOnly}>
-                <RenderIf isTrue={icon}>
-                    <StyledSelectedValueIcon readOnly={readOnly}>{icon}</StyledSelectedValueIcon>
+                <RenderIf isTrue={readOnly || disabled}>
+                    <RenderIf isTrue={icon}>
+                        <StyledSelectedValueIcon readOnly={readOnly}>
+                            {icon}
+                        </StyledSelectedValueIcon>
+                        <StyledReadOnlySelectedInput
+                            id={id}
+                            name={name}
+                            type="text"
+                            value={label}
+                            tabIndex={tabIndex}
+                            onFocus={this.handleFocus}
+                            onClick={onClick}
+                            disabled={disabled}
+                            readOnly={readOnly}
+                            aria-describedby={errorMessageId}
+                            required={required}
+                            ref={this.inputRef}
+                            iconPosition="left"
+                            icon={icon}
+                            error={error}
+                            borderRadius={borderRadius}
+                        />
+                    </RenderIf>
                 </RenderIf>
-
-                {this.renderInput()}
-
                 <RenderIf isTrue={!(readOnly || disabled)}>
-                    <StyledSelectedValueClearButton>
-                        <ButtonIcon
-                            assistiveText="clear"
-                            size="small"
-                            title="Remove selected option"
-                            icon={<CloseIcon color="#576574" />}
-                            onClick={onClearValue}
+                    <StyledCombobox
+                        error={error}
+                        disabled={disabled}
+                        borderRadius={borderRadius}
+                        onClick={this.handleClick}
+                    >
+                        <StyledInput
+                            id={id}
+                            role="textbox"
+                            aria-autocomplete="none"
+                            tabIndex={tabIndex}
+                            disabled={disabled}
+                            ref={this.inputRef}
+                            onFocus={this.handleFocus}
+                            value={label}
+                            type="text"
+                            readOnly
+                        />
+                        <StyledChip
+                            label={
+                                <span>
+                                    <RenderIf isTrue={icon}>
+                                        <StyledSelectedIconContainer>
+                                            {icon}
+                                        </StyledSelectedIconContainer>
+                                    </RenderIf>
+                                    {label}
+                                </span>
+                            }
+                            onDelete={onClearValue}
+                            borderRadius={borderRadius}
                         />
-                    </StyledSelectedValueClearButton>
+                    </StyledCombobox>
                 </RenderIf>
             </StyledSelectedValueContainer>
         );

diff --git a/src/components/Lookup/styled/chip.js b/src/components/Lookup/styled/chip.js
@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs';
+import Chip from '../../Chip';
+
+const StyledChip = attachThemeAttrs(styled(Chip))`
+    flex: 1 1 auto;
+    margin: 2px;
+    background-color: ${props => props.palette.background.main};
+`;
+
+export default StyledChip;
diff --git a/src/components/Lookup/styled/selectedIconContainer.js b/src/components/Lookup/styled/selectedIconContainer.js
@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const StyledSelectedIconContainer = styled.span`
+    margin-right: 0.8rem;
+`;
+
+export default StyledSelectedIconContainer;
diff --git a/src/components/Lookup/styled/selectedValueClearButton.js b/src/components/Lookup/styled/selectedValueClearButton.js