From aed577435c2f6070d49e1d53102964232beb4a21 Mon Sep 17 00:00:00 2001
From: MrCreeper1008 <ngcreeper@outlook.com>
Date: Wed, 27 Jan 2021 01:36:01 +0000
Subject: [PATCH] Add rounded props for Form.Select

---
 .../__snapshots__/select.test.js.snap         | 23 +++++++++++++
 .../form/components/__test__/select.test.js   | 10 ++++++
 src/components/form/components/select.js      | 34 ++++++++++++++++++-
 3 files changed, 66 insertions(+), 1 deletion(-)

diff --git a/src/components/form/components/__test__/__snapshots__/select.test.js.snap b/src/components/form/components/__test__/__snapshots__/select.test.js.snap
index 1e02077ba..d9ff89a0d 100644
--- a/src/components/form/components/__test__/__snapshots__/select.test.js.snap
+++ b/src/components/form/components/__test__/__snapshots__/select.test.js.snap
@@ -23,6 +23,29 @@ exports[`Select component Should be large, red, disabled and multioption 1`] = `
 </div>
 `;
 
+exports[`Select component Should be rounded 1`] = `
+<div
+  className="select is-rounded"
+>
+  <select
+    disabled={false}
+    multiple={false}
+    readOnly={false}
+    value=""
+  >
+    <option>
+      1
+    </option>
+    <option>
+      2
+    </option>
+    <option>
+      3
+    </option>
+  </select>
+</div>
+`;
+
 exports[`Select component Should concat classname in props with Bulma classname 1`] = `
 <div
   className="select other-class this-is-a-test"
diff --git a/src/components/form/components/__test__/select.test.js b/src/components/form/components/__test__/select.test.js
index 33fa46cbe..afeae6657 100644
--- a/src/components/form/components/__test__/select.test.js
+++ b/src/components/form/components/__test__/select.test.js
@@ -46,6 +46,16 @@ describe('Select component', () => {
     );
     expect(component.toJSON()).toMatchSnapshot();
   });
+  it('Should be rounded', () => {
+    const component = renderer.create(
+      <Select rounded>
+        <option>1</option>
+        <option>2</option>
+        <option>3</option>
+      </Select>,
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
   describe('value PropTypes', () => {
     it('Should be multioption and should not accept non array value', () => {
       const spy = jest.spyOn(console, 'error').mockImplementation();
diff --git a/src/components/form/components/select.js b/src/components/form/components/select.js
index 2c077139f..10762458a 100644
--- a/src/components/form/components/select.js
+++ b/src/components/form/components/select.js
@@ -9,6 +9,7 @@ const colors = [null].concat(Object.values(CONSTANTS.COLORS));
 
 const Select = ({
   className,
+  rounded,
   style,
   size,
   color,
@@ -37,6 +38,7 @@ const Select = ({
         [`is-${color}`]: color,
         'is-loading': loading,
         'is-multiple': multiple,
+        'is-rounded': rounded,
       })}
       style={style}
     >
@@ -57,15 +59,44 @@ const Select = ({
 
 Select.propTypes = {
   ...modifiers.propTypes,
+  /**
+   * Children of this component. Usually they are `<option>` elements.
+   */
   children: PropTypes.node,
+  /**
+   * Additional CSS classes to be passed to this component.
+   * They will be applied to the wrapper element around the
+   * actual `<select>` element.
+   */
   className: PropTypes.string,
   style: PropTypes.shape({}),
+  /**
+   * Adjusts the size of this component.
+   */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
+  /**
+   * Adjusts the color of this component.
+   */
   color: PropTypes.oneOf(colors),
+  /**
+   * Whether the dropdown button should have fully rounded corners.
+   */
+  rounded: PropTypes.bool,
   readOnly: PropTypes.bool,
   disabled: PropTypes.bool,
+  /**
+   * Whether the `<select>` element should accept multiple values.
+   * If true, then the `value` prop can only accept an array.
+   */
   multiple: PropTypes.bool,
   loading: PropTypes.bool,
+  /**
+   * The value that is held by the `<select>` element.
+   * Must be an array if `multiple` prop is true.
+   *
+   * If this prop is undefined, an empty string will be the default value
+   * of `<select>`, or an empty array if `multiple` is true.
+   */
   value: (props, propName, componentName) => {
     if (props.multiple) {
       PropTypes.checkPropTypes(
@@ -90,7 +121,8 @@ Select.propTypes = {
     }
   },
   /**
-   * The name of the input field Commonly used for [multi-input handling](https://reactjs.org/docs/forms.html#handling-multiple-inputs)
+   * The name of the input field.
+   * Commonly used for [multi-input handling](https://reactjs.org/docs/forms.html#handling-multiple-inputs)
    */
   name: PropTypes.string,
 };