Rename property size to dimension, because size is native HTML attribute

[MAILPOET-2772]

assets/js/src/common/button/_stories/button.tsx

@@ -14,34 +14,34 @@ export const WithoutIcons = () => (
     <p>
       <Button
         onClick={action('light small')}
-        size="small"
+        dimension="small"
         variant="light"
       >
         Light button
       </Button>
       <Button
         onClick={action('regular small')}
-        size="small"
+        dimension="small"
       >
         Regular button
       </Button>
       <Button
         onClick={action('dark small')}
-        size="small"
+        dimension="small"
         variant="dark"
       >
         Dark button
       </Button>
       <Button
         onClick={action('link small')}
-        size="small"
+        dimension="small"
         variant="link"
       >
         Link button
       </Button>
       <Button
         onClick={action('link-dark small')}
-        size="small"
+        dimension="small"
         variant="link-dark"
       >
         Link dark button
@@ -87,34 +87,34 @@ export const WithoutIcons = () => (
     <p>
       <Button
         onClick={action('light large')}
-        size="large"
+        dimension="large"
         variant="light"
       >
         Light button
       </Button>
       <Button
         onClick={action('regular large')}
-        size="large"
+        dimension="large"
       >
         Regular button
       </Button>
       <Button
         onClick={action('dark large')}
-        size="large"
+        dimension="large"
         variant="dark"
       >
         Dark button
       </Button>
       <Button
         onClick={action('link large')}
-        size="large"
+        dimension="large"
         variant="link"
       >
         Link button
       </Button>
       <Button
         onClick={action('link-dark large')}
-        size="large"
+        dimension="large"
         variant="link-dark"
       >
         Link dark button

assets/js/src/common/button/_stories/button_icons.tsx

@@ -15,20 +15,20 @@ export const WithIcons = () => (
     <p>
       <Button
         onClick={action('only icon small')}
-        size="small"
+        dimension="small"
         variant="light"
         iconStart={icon}
       />
       <Button
         onClick={action('icon start small')}
-        size="small"
+        dimension="small"
         iconStart={icon}
       >
         Icon start
       </Button>
       <Button
         onClick={action('icon end small')}
-        size="small"
+        dimension="small"
         variant="dark"
         iconEnd={icon}
       >
@@ -36,7 +36,7 @@ export const WithIcons = () => (
       </Button>
       <Button
         onClick={action('both icons small')}
-        size="small"
+        dimension="small"
         variant="light"
         iconStart={icon}
         iconEnd={icon}
@@ -45,13 +45,13 @@ export const WithIcons = () => (
       </Button>
       <Button
         onClick={action('only icon link small')}
-        size="small"
+        dimension="small"
         variant="link"
         iconStart={icon}
       />
       <Button
         onClick={action('icon start link small')}
-        size="small"
+        dimension="small"
         variant="link-dark"
         iconStart={icon}
       >
@@ -108,20 +108,20 @@ export const WithIcons = () => (
     <p>
       <Button
         onClick={action('only icon large')}
-        size="large"
+        dimension="large"
         variant="light"
         iconStart={icon}
       />
       <Button
         onClick={action('icon start large')}
-        size="large"
+        dimension="large"
         iconStart={icon}
       >
         Icon start
       </Button>
       <Button
         onClick={action('icon end large')}
-        size="large"
+        dimension="large"
         variant="dark"
         iconEnd={icon}
       >
@@ -129,7 +129,7 @@ export const WithIcons = () => (
       </Button>
       <Button
         onClick={action('both icons large')}
-        size="large"
+        dimension="large"
         variant="light"
         iconStart={icon}
         iconEnd={icon}
@@ -138,13 +138,13 @@ export const WithIcons = () => (
       </Button>
       <Button
         onClick={action('only icon link large')}
-        size="large"
+        dimension="large"
         variant="link"
         iconStart={icon}
       />
       <Button
         onClick={action('icon start link large')}
-        size="large"
+        dimension="large"
         variant="link-dark"
         iconStart={icon}
       >

assets/js/src/common/button/button.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 
 type Props = {
   children?: React.ReactNode,
-  size?: 'small' | 'large',
+  dimension?: 'small' | 'large',
   variant?: 'light' | 'dark' | 'link' | 'link-dark',
   withSpinner?: boolean, // also disables href and onClick (via pointer-events in CSS)
   isDisabled?: boolean, // also disables href and onClick (via pointer-events in CSS)
@@ -16,7 +16,7 @@ type Props = {
 
 const Button = ({
   children,
-  size,
+  dimension,
   variant,
   withSpinner,
   isDisabled,
@@ -33,7 +33,7 @@ const Button = ({
       classnames(
         'mailpoet-button',
         {
-          [`mailpoet-button-${size}`]: size,
+          [`mailpoet-button-${dimension}`]: dimension,
           [`mailpoet-button-${variant}`]: variant,
           'mailpoet-button-disabled': isDisabled,
           'mailpoet-button-with-spinner': withSpinner,

assets/js/src/common/form/input/_stories/input.tsx

@@ -12,38 +12,38 @@ export default {
 export const Inputs = () => (
   <>
     <Heading level={3}>Small inputs</Heading>
-    <p>
+    <div>
       <Input
         type="text"
-        size="small"
+        dimension="small"
         placeholder="Small input value"
       />
       <div className="mailpoet-gap" />
       <Input
         type="text"
         placeholder="Small input with iconStart"
-        size="small"
+        dimension="small"
         iconStart={icon}
       />
       <div className="mailpoet-gap" />
       <Input
         type="text"
         placeholder="Small input with iconEnd"
-        size="small"
+        dimension="small"
         iconEnd={icon}
       />
       <div className="mailpoet-gap" />
       <Input
         type="text"
         placeholder="Small input with both icons"
-        size="small"
+        dimension="small"
         iconStart={icon}
         iconEnd={icon}
       />
-    </p>
+    </div>
     <br />
     <Heading level={3}>Regular inputs</Heading>
-    <p>
+    <div>
       <Input
         type="text"
         placeholder="Regular input"
@@ -67,10 +67,10 @@ export const Inputs = () => (
         iconStart={icon}
         iconEnd={icon}
       />
-    </p>
+    </div>
     <br />
     <Heading level={3}>Full-width inputs</Heading>
-    <p>
+    <div>
       <Input
         type="text"
         placeholder="Full-width input"
@@ -95,7 +95,7 @@ export const Inputs = () => (
         iconStart={icon}
         iconEnd={icon}
       />
-    </p>
+    </div>
     <br />
   </>
 );

assets/js/src/common/form/input/input.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import classnames from 'classnames';
 
 type Props = {
-  size?: 'small',
+  dimension?: 'small',
   isFullWidth?: boolean,
   iconStart?: JSX.Element,
   iconEnd?: JSX.Element,
@@ -10,7 +10,7 @@ type Props = {
 };
 
 const Input = ({
-  size,
+  dimension,
   isFullWidth,
   iconStart,
   iconEnd,
@@ -21,7 +21,7 @@ const Input = ({
       classnames(
         'mailpoet-form-input',
         {
-          [`mailpoet-form-input-${size}`]: size,
+          [`mailpoet-form-input-${dimension}`]: dimension,
           'mailpoet-full-width': isFullWidth,
         }
       )

assets/js/src/common/form/select/_stories/select.tsx

@@ -12,25 +12,25 @@ export default {
 export const SelectBoxes = () => (
   <>
     <Heading level={3}>Small select boxes</Heading>
-    <p>
-      <Select size="small">
+    <div>
+      <Select dimension="small">
         <option value="1">Option 1</option>
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
       </Select>
       <div className="mailpoet-gap" />
       <Select
-        size="small"
+        dimension="small"
         iconStart={icon}
       >
         <option value="1">Option 1</option>
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
       </Select>
-    </p>
+    </div>
     <br />
     <Heading level={3}>Regular select boxes</Heading>
-    <p>
+    <div>
       <Select>
         <option value="1">Option 1</option>
         <option value="2">Option 2</option>
@@ -42,10 +42,10 @@ export const SelectBoxes = () => (
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
       </Select>
-    </p>
+    </div>
     <br />
     <Heading level={3}>Full-width select boxes</Heading>
-    <p>
+    <div>
       <Select isFullWidth>
         <option value="1">Option 1</option>
         <option value="2">Option 2</option>
@@ -60,7 +60,7 @@ export const SelectBoxes = () => (
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
       </Select>
-    </p>
+    </div>
     <br />
   </>
 );

assets/js/src/common/form/select/select.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 
 type Props = {
   children?: React.ReactNode,
-  size?: 'small',
+  dimension?: 'small',
   isFullWidth?: boolean,
   iconStart?: JSX.Element,
   [attribute: string]: any, // any HTML attributes, e.g. name, id
@@ -11,7 +11,7 @@ type Props = {
 
 const Select = ({
   children,
-  size,
+  dimension,
   isFullWidth,
   iconStart,
   ...attributes
@@ -22,7 +22,7 @@ const Select = ({
         'mailpoet-form-input',
         'mailpoet-form-select',
         {
-          [`mailpoet-form-input-${size}`]: size,
+          [`mailpoet-form-input-${dimension}`]: dimension,
           'mailpoet-full-width': isFullWidth,
         }
       )