Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

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

Browse Source 
[MAILPOET-2772]
This commit is contained in:
Ján Mikláš
2020-05-07 11:42:11 +02:00
committed by Veljko V
parent 0cfa239f1f
commit 6ef2467342
7 changed files with 49 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
assets/js/src/common/button/_stories/button.tsx
View File

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

24
assets/js/src/common/button/_stories/button_icons.tsx
View File

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

6
assets/js/src/common/button/button.tsx
View File

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

20
assets/js/src/common/form/input/_stories/input.tsx
View File

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

6
assets/js/src/common/form/input/input.tsx
View File

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

16
assets/js/src/common/form/select/_stories/select.tsx
View File

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

6
assets/js/src/common/form/select/select.tsx
View File

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