Merge pull request #199 from puppetlabs/pds-416-buttonselect-width-prop

Fix and add custom width to ActionSelect and ButtonSelect

Author: Rhyza Velasco

packages/react-components/source/react/library/action-select/ActionSelect.js

@@ -53,6 +53,8 @@ const propTypes = {
   loading: PropTypes.bool,
   /** Optional additional className passed to the outer element */
   className: PropTypes.string,
+  /** Optional inline width passed to the button element */
+  width: PropTypes.string,
   /** Optional inline style passed to the outer element */
   style: PropTypes.shape({}),
 };
@@ -68,6 +70,7 @@ const defaultProps = {
   loading: false,
   disabled: false,
   className: '',
+  width: null,
   style: {},
 };
 
@@ -147,6 +150,7 @@ class ActionSelect extends Component {
       actions,
       weight,
       className,
+      width,
       style,
     } = this.props;
 
@@ -172,6 +176,7 @@ class ActionSelect extends Component {
           weight={weight}
           icon={icon}
           trailingIcon={icon ? null : 'chevron-down'}
+          style={width ? { width, textAlign: 'left' } : null}
           disabled={disabled}
           loading={loading}
           aria-haspopup="true"

packages/react-components/source/react/library/action-select/ActionSelect.md

@@ -173,6 +173,50 @@ const style = { display: 'inline-block', margin: 10 };
 </div>;
 ```
 
+### Custom Width
+
+Use the `width` prop to customize the width of the button.
+
+```jsx
+const actions = [
+  {
+    id: 'one',
+    icon: 'pencil',
+    label: 'Do thing one',
+    onClick() {
+      console.log('Thing one');
+    },
+  },
+  {
+    id: 'two',
+    icon: 'send',
+    label: 'Do thing two',
+    onClick() {
+      console.log('Thing two');
+    },
+  },
+  {
+    id: 'three',
+    as: 'a',
+    href: 'https://www.google.com',
+    target: '_blank',
+    label: 'Open link',
+    icon: 'link',
+  },
+];
+
+const style = { display: 'inline-block', margin: 10 };
+
+<div>
+  <ActionSelect
+    actions={actions}
+    label="Choose an Action"
+    style={style}
+    width="200px"
+  />
+</div>;
+```
+
 ## Related
 
 - [ButtonSelect](#/React%20Components/ButtonSelect)

packages/react-components/source/react/library/button-select/ButtonSelect.js

@@ -66,6 +66,8 @@ const propTypes = {
   loading: PropTypes.bool,
   /** Optional additional className passed to the outer element */
   className: PropTypes.string,
+  /** Optional inline width passed to the button element */
+  width: PropTypes.string,
   /** Optional inline style passed to the outer element */
   style: PropTypes.shape({}),
 };
@@ -86,6 +88,7 @@ const defaultProps = {
   loading: false,
   disabled: false,
   className: '',
+  width: null,
   style: {},
 };
 
@@ -234,6 +237,7 @@ class ButtonSelect extends Component {
       options,
       weight,
       className,
+      width,
       style,
       value,
     } = this.props;
@@ -263,6 +267,7 @@ class ButtonSelect extends Component {
           weight={weight}
           icon={icon}
           trailingIcon={icon ? null : 'chevron-down'}
+          style={width ? { width, textAlign: 'left' } : null}
           disabled={disabled}
           loading={loading}
           aria-haspopup="true"

packages/react-components/source/react/library/button-select/ButtonSelect.md

@@ -219,3 +219,26 @@ const style = { display: 'inline-block', margin: 10 };
   />
 </div>;
 ```
+
+### Custom Width
+
+Use the `width` prop to customize the width of the button.
+
+```jsx
+const options = [
+  { value: 'hello', label: 'Hello' },
+  { value: 'world', label: 'World' },
+  { value: 'hi', label: 'Hi' },
+  { value: 'mom', label: 'Mom' },
+];
+
+<ButtonSelect
+  options={options}
+  value={state.value}
+  onChange={value => {
+    console.log('New Value:', value);
+    setState({ value });
+  }}
+  width="100px"
+/>
+```

packages/react-components/source/scss/library/components/_button.scss

@@ -338,7 +338,7 @@ $puppet-button-padding-vertical: 5px;
   }
 }
 
-.rc-button-trailing-icon:not(.rc-button-text).rc-button-trailing-icon:focus {
+.rc-button-inner-focus.rc-button-trailing-icon:not(.rc-button-text).rc-button-trailing-icon:focus {
   &.rc-button-full {
     padding-right: 32px;
   }