feat: add prop labelAlignment to select component

src/components/Select/__test__/select.spec.js

@@ -29,4 +29,42 @@ describe('Select component', () => {
         const component = mount(<Select label="Select Label" required />);
         expect(component.find('RequiredAsterisk').prop('required')).toBe(true);
     });
+    it('should set "left" to labelAlignment prop passed in the Label component', () => {
+        const component = mount(<Select label="Select Label" required labelAlignment="left" />);
+        expect(component.find('SelectStyledLabel').prop('labelAlignment')).toBe('left');
+    });
+    it('should set "right" to labelAlignment prop passed in the Label component', () => {
+        const component = mount(<Select label="Select Label" required labelAlignment="right" />);
+        expect(component.find('SelectStyledLabel').prop('labelAlignment')).toBe('right');
+    });
+    it('should set "center" to labelAlignment if prop not passed (default) in the Label component', () => {
+        const component = mount(<Select label="Select Label" required />);
+        expect(component.find('SelectStyledLabel').prop('labelAlignment')).toBe('center');
+    });
+    it('renders correctly with label left aligned', () => {
+        const component = mount(<Select label="Select Label" required labelAlignment="left" />);
+        const elem = component.find('SelectStyledLabel');
+
+        expect(getComputedStyle(elem.getDOMNode()).getPropertyValue('align-self')).toBe(
+            'flex-start',
+        );
+    });
+    it('renders correctly with label right aligned', () => {
+        const component = mount(<Select label="Select Label" required labelAlignment="right" />);
+        const elem = component.find('SelectStyledLabel');
+
+        expect(getComputedStyle(elem.getDOMNode()).getPropertyValue('align-self')).toBe('flex-end');
+    });
+    it('renders correctly with label centered (default)', () => {
+        const component = mount(<Select label="Select Label" required />);
+        const elem = component.find('SelectStyledLabel');
+
+        expect(getComputedStyle(elem.getDOMNode()).getPropertyValue('align-self')).toBe('center');
+    });
+    it('renders correctly with label centered by passing prop (explicit)', () => {
+        const component = mount(<Select label="Select Label" required labelAlignment="center" />);
+        const elem = component.find('SelectStyledLabel');
+
+        expect(getComputedStyle(elem.getDOMNode()).getPropertyValue('align-self')).toBe('center');
+    });
 });

src/components/Select/index.d.ts

@@ -23,6 +23,7 @@ export interface SelectProps extends BaseProps {
     id?: string;
     hideLabel?: boolean;
     tabIndex?: number | string;
+    labelAlignment?: 'center' | 'left' | 'right';
 }
 
 declare const Select: React.ComponentType<SelectProps>;

src/components/Select/index.js

@@ -66,11 +66,16 @@ class Select extends Component {
             name,
             hideLabel,
             tabIndex,
+            labelAlignment,
         } = this.props;
 
         return (
             <StyledContainer className={className} style={style} id={id}>
-                <StyledLabel hideLabel={hideLabel} htmlFor={this.selectId}>
+                <StyledLabel
+                    hideLabel={hideLabel}
+                    htmlFor={this.selectId}
+                    labelAlignment={labelAlignment}
+                >
                     <RequiredAsterisk required={required} />
                     {label}
                 </StyledLabel>
@@ -146,6 +151,8 @@ Select.propTypes = {
     hideLabel: PropTypes.bool,
     /** Specifies the tab order of an element (when the tab button is used for navigating). */
     tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    /** Specifies the label alignment. */
+    labelAlignment: PropTypes.oneOf(['center', 'left', 'right']),
 };
 
 Select.defaultProps = {
@@ -166,6 +173,7 @@ Select.defaultProps = {
     id: undefined,
     hideLabel: false,
     tabIndex: undefined,
+    labelAlignment: 'center',
 };
 
 export default withReduxForm(Select);

src/components/Select/readme.md

@@ -169,3 +169,55 @@ const options = [
     className="rainbow-m-vertical_x-large rainbow-p-horizontal_medium rainbow-m_auto"
 />;
 ```
+
+##### select with left align label
+
+```js
+import React from 'react';
+import { Select } from 'react-rainbow-components';
+
+const containerStyles = {
+    maxWidth: 700,
+};
+
+const options = [
+    { value: 'option 1', label: 'Option with help 1' },
+    { value: 'option 2', label: 'Option with help 2' },
+    { value: 'option 3', label: 'Option with help 3' },
+];
+
+<Select
+    label="Select Label"
+    bottomHelpText="ex: here goes the help"
+    options={options}
+    style={containerStyles}
+    className="rainbow-m-vertical_x-large rainbow-p-horizontal_medium rainbow-m_auto"
+    labelAlignment="left"
+/>;
+```
+
+##### select with right align label
+
+```js
+import React from 'react';
+import { Select } from 'react-rainbow-components';
+
+const containerStyles = {
+    maxWidth: 700,
+};
+
+const options = [
+    { value: 'option 1', label: 'Option with help 1' },
+    { value: 'option 2', label: 'Option with help 2' },
+    { value: 'option 3', label: 'Option with help 3' },
+];
+
+<Select
+    label="Select Label"
+    bottomHelpText="ex: here goes the help"
+    options={options}
+    style={containerStyles}
+    className="rainbow-m-vertical_x-large rainbow-p-horizontal_medium rainbow-m_auto"
+    labelAlignment="right"
+/>;
+```

src/components/Select/styled/label.js

@@ -3,13 +3,19 @@ import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs';
 import { FONT_SIZE_TEXT_MEDIUM } from '../../../styles/fontSizes';
 import { MARGIN_SMALL, MARGIN_XX_SMALL } from '../../../styles/margins';
 
+const LABEL_ALIGNMENT_MAPPING = {
+    center: 'center',
+    left: 'flex-start',
+    right: 'flex-end',
+};
+
 const StyledLabel = attachThemeAttrs(styled.label)`
     color: ${props => props.palette.text.label};
     font-size: ${FONT_SIZE_TEXT_MEDIUM};
     line-height: 1.5;
     margin-right: ${MARGIN_SMALL};
     margin-bottom: ${MARGIN_XX_SMALL};
-    align-self: center;
+    align-self: ${props => LABEL_ALIGNMENT_MAPPING[props.labelAlignment]};
     box-sizing: border-box;
 
     &:empty {
@@ -32,4 +38,6 @@ const StyledLabel = attachThemeAttrs(styled.label)`
         `};
 `;
 
+StyledLabel.displayName = 'SelectStyledLabel';
+
 export default StyledLabel;