Merge branch 'master' into add-border-radius-to-button-group

integration/specs/Picklist/picklist-3.spec.js

@@ -56,7 +56,7 @@ describe('Picklist with multiple options', () => {
         await firstOption.waitUntilIsVisible();
         await expect(await firstOption.isVisible()).toBe(true);
     });
-    it.skip('should not close when click on search input', async () => {
+    it('should not close when click on search input', async () => {
         const picklist = new PagePicklist(PICKLIST);
         await picklist.clickInput();
         await picklist.waitUntilOpen();

src/components/Calendar/__test__/day.spec.js

@@ -31,7 +31,6 @@ describe('Day', () => {
                 disabledDays={['04/24/2019']}
             />,
         );
-        console.log(component.html());
         component.find('span').simulate('keydown', { key: 'Enter' });
         expect(onChangeMockFn).not.toBeCalled();
     });

src/components/Picklist/index.js

@@ -20,7 +20,7 @@ import InternalDropdown from '../InternalDropdown';
 import InternalOverlay from '../InternalOverlay';
 import WindowResize from '../../libs/WindowResize';
 
-function positionResolver(opts) {
+function positionResolver(opts, enableSearch) {
     const { trigger, viewport, content } = opts;
     const newOpts = {
         trigger,
@@ -30,6 +30,13 @@ function positionResolver(opts) {
             width: trigger.width,
         },
     };
+    if (enableSearch && viewport.width <= 600) {
+        return {
+            top: 0,
+            left: 0,
+            width: viewport.width,
+        };
+    }
     return {
         ...InternalOverlay.defaultPositionResolver(newOpts),
         width: trigger.width,
@@ -55,7 +62,6 @@ class Picklist extends Component {
         this.handleBlur = this.handleBlur.bind(this);
         this.handleKeyPressed = this.handleKeyPressed.bind(this);
         this.handleChange = this.handleChange.bind(this);
-        this.handleContainerClick = this.handleContainerClick.bind(this);
         this.closeAndFocusInput = this.closeAndFocusInput.bind(this);
         this.handleWindowScroll = this.handleWindowScroll.bind(this);
         this.handleWindowResize = this.handleWindowResize.bind(this);
@@ -78,12 +84,14 @@ class Picklist extends Component {
         if (!wasOpen && isOpen) {
             // eslint-disable-next-line id-length
             this.outsideClick.startListening(this.containerRef.current, (_, event) => {
-                if (this.eventTarget !== event.target) {
+                if (!this.dropdownRef.current.contains(event.target)) {
                     this.closeMenu();
                     this.handleBlur();
                 }
             });
-            this.windowScrolling.startListening(this.handleWindowScroll);
+            if (window.screen.width > 600) {
+                this.windowScrolling.startListening(this.handleWindowScroll);
+            }
             this.windowResize.startListening(this.handleWindowResize);
         }
     }
@@ -182,10 +190,6 @@ class Picklist extends Component {
         }, 0);
     }
 
-    handleContainerClick(event) {
-        this.eventTarget = event.target;
-    }
-
     /**
      * Sets focus on the element.
      * @public
@@ -250,7 +254,6 @@ class Picklist extends Component {
                 onKeyDown={this.handleKeyPressed}
                 ref={this.containerRef}
                 readOnly={readOnly}
-                onClick={this.handleContainerClick}
             >
                 <RenderIf isTrue={pickListLabel}>
                     <Label
@@ -304,9 +307,10 @@ class Picklist extends Component {
                     />
                     <InternalOverlay
                         isVisible={isOpen}
-                        positionResolver={positionResolver}
+                        positionResolver={opt => positionResolver(opt, enableSearch)}
                         onOpened={() => this.dropdownRef.current.focus()}
                         triggerElementRef={() => this.triggerRef}
+                        keepScrollEnabled
                     >
                         <InternalDropdown
                             id={this.listboxId}

src/components/RadioButtonGroup/index.d.ts

@@ -13,6 +13,7 @@ export interface RadioButtonGroupProps extends BaseProps {
     options?: RadioOption[];
     error?: ReactNode;
     id?: string;
+    borderRadius?: 'square' | 'semi-rounded' | 'rounded';
 }
 
 declare const RadioButtonGroup: ComponentType<RadioButtonGroupProps>;

src/components/RadioButtonGroup/index.js

@@ -115,6 +115,7 @@ class RadioButtonGroup extends Component {
             onChange,
             variant,
             size,
+            borderRadius,
         } = this.props;
         const { options, markerLeft, markerWidth } = this.state;
         const markerStyle = {
@@ -123,7 +124,12 @@ class RadioButtonGroup extends Component {
         };
 
         return (
-            <StyledContainer id={id} className={className} style={style}>
+            <StyledContainer
+                id={id}
+                className={className}
+                style={style}
+                borderRadius={borderRadius}
+            >
                 <RenderIf isTrue={label}>
                     <StyledLabel
                         label={label}
@@ -134,14 +140,18 @@ class RadioButtonGroup extends Component {
                         forwardedAs="legend"
                     />
                 </RenderIf>
-                <StyledButtonItemsContainer variant={variant} size={size}>
+                <StyledButtonItemsContainer
+                    variant={variant}
+                    size={size}
+                    borderRadius={borderRadius}
+                >
                     <Marker
                         variant={variant}
                         isVisible={this.isMarkerActive()}
                         style={markerStyle}
                         size={size}
+                        borderRadius={borderRadius}
                     />
-
                     <ButtonItems
                         value={value}
                         onChange={onChange}
@@ -151,6 +161,7 @@ class RadioButtonGroup extends Component {
                         ariaDescribedby={this.getErrorMessageId()}
                         variant={variant}
                         size={size}
+                        borderRadius={borderRadius}
                     />
                 </StyledButtonItemsContainer>
                 <RenderIf isTrue={error}>
@@ -202,6 +213,8 @@ RadioButtonGroup.propTypes = {
     style: PropTypes.object,
     /** The id of the outer element. */
     id: PropTypes.string,
+    /** The border radius of the radio button. Valid values are square, semi-rounded and rounded. This value defaults to rounded. */
+    borderRadius: PropTypes.oneOf(['square', 'semi-rounded', 'rounded']),
 };
 
 RadioButtonGroup.defaultProps = {
@@ -217,6 +230,7 @@ RadioButtonGroup.defaultProps = {
     required: false,
     options: [],
     size: 'medium',
+    borderRadius: 'rounded',
     error: null,
     id: undefined,
 };

src/components/RadioButtonGroup/marker.js

@@ -5,7 +5,7 @@ import StyledMarkerContainer from './styled/markerContainer';
 import StyledMarker from './styled/marker';
 
 export default function Marker(props) {
-    const { style, isVisible, variant, size } = props;
+    const { style, isVisible, variant, size, borderRadius } = props;
     const markerStyle = {
         ...style,
         opacity: isVisible ? 1 : 0,
@@ -14,7 +14,12 @@ export default function Marker(props) {
     return (
         <RenderIf isTrue={isVisible}>
             <StyledMarkerContainer size={size}>
-                <StyledMarker variant={variant} size={size} style={markerStyle} />
+                <StyledMarker
+                    variant={variant}
+                    size={size}
+                    style={markerStyle}
+                    borderRadius={borderRadius}
+                />
             </StyledMarkerContainer>
         </RenderIf>
     );
@@ -25,11 +30,13 @@ Marker.propTypes = {
     isVisible: PropTypes.any,
     variant: PropTypes.oneOf(['default', 'inverse', 'brand']),
     size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
+    borderRadius: PropTypes.oneOf(['square', 'semi-rounded', 'rounded']),
 };
 
 Marker.defaultProps = {
     style: undefined,
     isVisible: false,
     variant: 'default',
     size: 'medium',
+    borderRadius: 'rounded',
 };

src/components/RadioButtonGroup/readme.md

@@ -271,7 +271,7 @@ class RequiredRadioButtonGroup extends React.Component {
 ##### RadioButtonGroup error
 
 ```js
-import React from 'react';
+import React , { useState } from 'react';
 import { RadioButtonGroup } from 'react-rainbow-components';
 
 const options = [
@@ -281,36 +281,23 @@ const options = [
     { value: 'on', label: 'On' },
 ];
 
-class ErrorRadioButtonGroup extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            value: 'anonymous',
-        };
-        this.handleOnChange = this.handleOnChange.bind(this);
-    }
-
-    handleOnChange(event) {
-        return this.setState({ value: event.target.value });
-    }
-
-    render() {
-        const { value } = this.state;
+    const ErrorRadioButtonGroup = () => {
+        const [value, setValue] = useState('anonymous');
+        const handleOnChange = event => setValue(event.target.value);
         return (
             <RadioButtonGroup
                 options={options}
                 value={value}
-                onChange={this.handleOnChange}
+                onChange={handleOnChange}
                 label="RadioButtonGroup Label"
                 error="This field is required"
             />
         );
     }
-}
 
-    <div className="rainbow-p-around_x-large rainbow-align-content_center">
-        <ErrorRadioButtonGroup />
-    </div>
+        <div className="rainbow-p-around_x-large rainbow-align-content_center">
+            <ErrorRadioButtonGroup />
+        </div>
 ```
 
 
@@ -499,3 +486,69 @@ const Contacts = ({ data: contacts }) => {
         <Contacts data={data} />
     </div>
 ```
+
+
+##### RadioButtonGroup with different Border Radius
+
+```js
+
+    import React, { useState } from 'react';
+    import { RadioButtonGroup } from 'react-rainbow-components';
+
+    const options = [
+        { value: 'off', label: 'Off' },
+        { value: 'parking', label: 'Parking' },
+        { value: 'auto', label: 'Auto' },
+        { value: 'on', label: 'On' },
+    ];
+
+    const BorderRadiusRadioButtonGroup = () => {
+        const [value1, setValue1] = useState('auto');
+        const [value2, setValue2] = useState('auto');
+        const [value3, setValue3] = useState('auto');
+
+        const handleOnChange1 = event => {
+            setValue1(event.target.value);
+        }
+        const handleOnChange2 = event => {
+            setValue2(event.target.value);
+        }
+        const handleOnChange3 = event => {
+            setValue3(event.target.value);
+        }
+
+        return (
+            <>
+                <RadioButtonGroup
+                    label="Border Radius Square"
+                    id="radio-button-group-component-1"
+                    options={options}
+                    value={value1}
+                    onChange={handleOnChange1}
+                    borderRadius="square"
+                />
+                <RadioButtonGroup
+                    label="Border Radius Semi Rounded"
+                    id="radio-button-group-component-1"
+                    options={options}
+                    value={value2}
+                    onChange={handleOnChange2}
+                    borderRadius="semi-rounded"
+                />
+                <RadioButtonGroup
+                    label="Border Radius Rounded"
+                    id="radio-button-group-component-1"
+                    options={options}
+                    value={value3}
+                    onChange={handleOnChange3}
+                    borderRadius="rounded"
+                />
+            </>
+        );
+    }
+
+        <div className="rainbow-p-around_x-large rainbow-align-content_center" style={ { "flex-direction" : "column", "gap": "20px" }}>
+            <BorderRadiusRadioButtonGroup />
+        </div>
+
+```

src/components/RadioButtonGroup/styled/buttonItemsContainer.js

@@ -1,7 +1,11 @@
 import styled from 'styled-components';
 import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs';
 import { replaceAlpha } from '../../../styles/helpers/color';
-import { BORDER_RADIUS_2 } from '../../../styles/borderRadius';
+import {
+    BORDER_RADIUS_2,
+    BORDER_RADIUS_SQUARE,
+    BORDER_RADIUS_SEMI_ROUNDED,
+} from '../../../styles/borderRadius';
 import { COLOR_GRAY_2 } from '../../../styles/colors';
 
 const sizeMap = { large: '3rem', medium: '2.5rem', small: '1.8rem', 'x-small': '1.3rem' };
@@ -31,6 +35,18 @@ const StyledButtonItemsContainer = attachThemeAttrs(styled.div).attrs(props => {
             border: solid 1px ${props.inverse.border};
             background-color: ${props.inverse.background};
         `};
+
+        ${props =>
+            props.borderRadius === 'square' &&
+            `
+                border-radius: ${BORDER_RADIUS_SQUARE} !important;
+            `};
+        
+        ${props =>
+            props.borderRadius === 'semi-rounded' &&
+            `
+                border-radius: ${BORDER_RADIUS_SEMI_ROUNDED} !important;
+            `};
 `;
 
 export default StyledButtonItemsContainer;

src/components/RadioButtonGroup/styled/marker.js

@@ -1,7 +1,11 @@
 /* stylelint-disable max-line-length */
 import styled from 'styled-components';
 import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs';
-import { BORDER_RADIUS_2 } from '../../../styles/borderRadius';
+import {
+    BORDER_RADIUS_2,
+    BORDER_RADIUS_SQUARE,
+    BORDER_RADIUS_SEMI_ROUNDED,
+} from '../../../styles/borderRadius';
 
 const sizeMap = { large: '3.1rem', medium: '2.6rem', small: '1.81rem', 'x-small': '1.31rem' };
 const StyledMarker = attachThemeAttrs(styled.span)`
@@ -32,6 +36,18 @@ const StyledMarker = attachThemeAttrs(styled.span)`
             background-color: ${props.palette.brand.main};
             border: solid 1px ${props.palette.brand.dark};
         `};
+
+        ${props =>
+            props.borderRadius === 'square' &&
+            `
+                border-radius: ${BORDER_RADIUS_SQUARE} !important;
+            `};
+            
+        ${props =>
+            props.borderRadius === 'semi-rounded' &&
+            `
+                border-radius: ${BORDER_RADIUS_SEMI_ROUNDED} !important;
+            `};
 `;
 
 export default StyledMarker;