Merge branch 'couds:master' into master

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bulma-components",
-  "version": "4.0.3",
+  "version": "4.0.6",
   "description": "React components for Bulma framework",
   "main": "./cjs/index.js",
   "types": "./src/index.d.ts",

src/components/dropdown/dropdown.js

@@ -21,6 +21,7 @@ const Dropdown = ({
   closeOnSelect,
   icon,
   domRef,
+  disabled,
   ...props
 }) => {
   const ref = useRef(domRef);
@@ -92,12 +93,15 @@ const Dropdown = ({
         className="dropdown-trigger"
         role="presentation"
         onClick={() => {
-          return setIsOpen((o) => {
-            return !o;
+          if (disabled) {
+            return;
+          }
+          setIsOpen((open) => {
+            return !open;
           });
         }}
       >
-        <Button color={color}>
+        <Button disabled={disabled} color={color}>
           <span>{current}</span>
           {icon}
         </Button>
@@ -139,6 +143,7 @@ Dropdown.propTypes = {
     ]),
     PropTypes.string,
   ]),
+  disabled: PropTypes.bool,
   /**
    * Whether the dropdown should align to the right side.
    */

src/components/dropdown/dropdown.story.js

@@ -85,6 +85,12 @@ Overview.argTypes = {
       type: 'boolean',
     },
   },
+  disabled: {
+    defaultValue: false,
+    control: {
+      type: 'boolean',
+    },
+  },
 };
 
 export const Controlled = (args) => {

src/components/dropdown/index.d.ts

@@ -13,6 +13,7 @@ interface DropdownProps<T> {
   up?: boolean;
   align?: 'right';
   icon?: React.ReactNode;
+  disabled: boolean;
 }
 
 interface DropdownItemProps<T> {

src/components/form/components/__test__/__snapshots__/select.test.js.snap

@@ -6,7 +6,6 @@ exports[`Select component Should be focused 1`] = `
 >
   <select
     className="is-focused"
-    value=""
   >
     <option>
       1
@@ -27,7 +26,6 @@ exports[`Select component Should be hovered 1`] = `
 >
   <select
     className="is-hovered"
-    value=""
   >
     <option>
       1
@@ -49,7 +47,6 @@ exports[`Select component Should be large, red, disabled and multioption 1`] = `
   <select
     disabled={true}
     multiple={true}
-    value={Array []}
   >
     <option>
       1
@@ -68,9 +65,7 @@ exports[`Select component Should be loading 1`] = `
 <div
   className="select is-loading"
 >
-  <select
-    value=""
-  >
+  <select>
     <option>
       1
     </option>
@@ -88,9 +83,7 @@ exports[`Select component Should be rounded 1`] = `
 <div
   className="select is-rounded"
 >
-  <select
-    value=""
-  >
+  <select>
     <option>
       1
     </option>
@@ -108,9 +101,7 @@ exports[`Select component Should concat classname in props with Bulma classname
 <div
   className="select other-class this-is-a-test"
 >
-  <select
-    value=""
-  >
+  <select>
     <option>
       1
     </option>
@@ -130,9 +121,7 @@ exports[`Select component Should have select classname 1`] = `
 <div
   className="select"
 >
-  <select
-    value=""
-  >
+  <select>
     <option>
       1
     </option>
@@ -155,9 +144,7 @@ exports[`Select component Should use inline styles 1`] = `
     }
   }
 >
-  <select
-    value=""
-  >
+  <select>
     <option>
       1
     </option>

src/components/form/components/checkbox.js

@@ -9,7 +9,6 @@ const Checkbox = ({
   style,
   disabled,
   children,
-  checked,
   domRef,
   ...props
 }) => {

src/components/form/components/select.js

@@ -22,10 +22,6 @@ const Select = ({
   domRef,
   ...props
 }) => {
-  /**
-   * Return default value for value prop
-   */
-  const defaultValue = multiple ? [] : '';
   const context = useFieldContext();
   const calculatedSize = size || context.size;
 
@@ -47,7 +43,7 @@ const Select = ({
           [`is-${normalizeStatus(status)}`]: status,
         })}
         multiple={multiple}
-        value={value !== undefined ? value : defaultValue}
+        value={value}
         disabled={disabled}
         name={name}
       >

src/components/form/index.d.ts

@@ -71,7 +71,7 @@ interface InputFileProps {
   filename?: string;
   value?: FileList;
   fullwidth?: boolean;
-  aling?: 'center' | 'right';
+  align?: 'center' | 'right';
   boxed?: boolean;
   label?: string;
   icon?: React.ReactElement;
@@ -116,4 +116,4 @@ declare const Form: {
   InputFile: BulmaComponent<InputFileProps, 'div'>;
 };
 
-export default Form;
+export default Form;

src/components/icon/__test__/__snapshots__/icon.test.js.snap

@@ -4,7 +4,7 @@ exports[`Icon component Should Exist 1`] = `[Function]`;
 
 exports[`Icon component Should concat Bulma class with classes in props 1`] = `
 <span
-  className="icon other-class"
+  className="other-class icon"
   icon="bars"
 />
 `;
@@ -15,3 +15,10 @@ exports[`Icon component Should have box classname 1`] = `
   icon="bars"
 />
 `;
+
+exports[`Icon component Should only enable icon-text class if text prop is enabled 1`] = `
+<span
+  className="icon-text"
+  icon="bars"
+/>
+`;

src/components/icon/__test__/icon.test.js

@@ -16,4 +16,8 @@ describe('Icon component', () => {
     );
     expect(component.toJSON()).toMatchSnapshot();
   });
+  it('Should only enable icon-text class if text prop is enabled', () => {
+    const component = renderer.create(<Icon text icon="bars" />);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
 });

src/components/icon/icon.js

@@ -8,7 +8,8 @@ const Icon = ({ size, color, className, align, text, ...props }) => {
   return (
     <Element
       {...props}
-      className={classnames('icon', className, {
+      className={classnames(className, {
+        icon: !text,
         [`is-${size}`]: size,
         [`is-${align}`]: align,
         [`has-text-${color}`]: color,