Merge pull request #714 from chiragg928/feat(QtySelector)

feat(QtySelector): add incrementBtnProps and decrementBtnProps props
ticketmaster · Mar 18, 2021 · 218e318 · 218e318
2 parents 3ef4d66 + f0c9a46
commit 218e318
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git a/catalog/pages/inputs/index.md b/catalog/pages/inputs/index.md
@@ -1281,6 +1281,14 @@ rows:
     Type: string
     Default: Decrease Quantity
     Notes: Aria label of the Decrement button for accessibility requirement
+  - Prop: incrementBtnProps
+    Type: object
+    Default: "{ }"
+    Notes: Extra props passed only to the increment button.
+  - Prop: decrementBtnProps
+    Type: object
+    Default: "{ }"
+    Notes: Extra props passed only to the decrement button.
 ```
 
 It also accepts any event handlers. e.g. `onBlur`, `onFocus` etc. as well as styles object.
@@ -1290,7 +1298,7 @@ span: 6
 ---
 <div style={{ display: 'flex' }}>
     <div style={{ width: '30%' }}>
-        <QtySelector value={50} />
+        <QtySelector value={50} decrementBtnProps={{className:"classOnDecrementBtn"}} incrementBtnProps={{className:"classOnIncrementBtn"}}  />
     </div>
     <div style={{ width: '30%' }}>
         <QtySelector value={2} min={2} max={4}/>

diff --git a/src/components/Input/QtySelector/QtySelector.js b/src/components/Input/QtySelector/QtySelector.js
@@ -37,7 +37,11 @@ class QtySelector extends Component {
     checkValue: PropTypes.func,
     handleValueUpdate: PropTypes.func,
     incrementBtnLabel: PropTypes.string,
-    decrementBtnLabel: PropTypes.string
+    decrementBtnLabel: PropTypes.string,
+    /* eslint-disable react/forbid-prop-types */
+    incrementBtnProps: PropTypes.object,
+    decrementBtnProps: PropTypes.object
+    /* eslint-enable react/forbid-prop-types */
   };
 
   static defaultProps = {
@@ -49,7 +53,9 @@ class QtySelector extends Component {
     checkValue: () => true,
     handleValueUpdate: () => {},
     incrementBtnLabel: "Increase Quantity",
-    decrementBtnLabel: "Decrease Quantity"
+    decrementBtnLabel: "Decrease Quantity",
+    incrementBtnProps: {},
+    decrementBtnProps: {}
   };
 
   state = {
@@ -174,13 +180,16 @@ class QtySelector extends Component {
       min,
       max,
       decrementBtnLabel,
-      incrementBtnLabel
+      incrementBtnLabel,
+      decrementBtnProps,
+      incrementBtnProps
     } = this.props;
     const { value } = this.state;
 
     return (
       <Container>
         <Button
+          {...decrementBtnProps}
           onClick={this.decrement}
           disabled={disabled || min === value}
           aria-label={decrementBtnLabel}
@@ -195,6 +204,7 @@ class QtySelector extends Component {
           {this.renderInput()}
         </InputFieldContainer>
         <Button
+          {...incrementBtnProps}
           onClick={this.increment}
           disabled={disabled || max === value}
           aria-label={incrementBtnLabel}