diff --git a/.changeset/six-timers-promise.md b/.changeset/six-timers-promise.md new file mode 100644 index 0000000000..519bbd7d9a --- /dev/null +++ b/.changeset/six-timers-promise.md @@ -0,0 +1,6 @@ +--- +'@commercetools-uikit/localized-money-input': minor +'@commercetools-uikit/money-input': minor +--- + +Add support for isCondensed property on LocalizedMoneyInput component diff --git a/packages/components/inputs/localized-money-input/README.md b/packages/components/inputs/localized-money-input/README.md index 08a4b4b465..d9c3b08b27 100644 --- a/packages/components/inputs/localized-money-input/README.md +++ b/packages/components/inputs/localized-money-input/README.md @@ -62,6 +62,7 @@ export default Example; | `onFocus` | `Function`
[See signature.](#signature-onFocus) | | | Called when input is focused | | `hideCurrencyExpansionControls` | `boolean` | | | Will hide the currency expansion controls when set to `true`. All currencies will be shown when set to `true`. | | `defaultExpandCurrencies` | `boolean` | | | Controls whether one or all currencirs are visible by default | +| `isCondensed` | `boolean` | | | Use this property to reduce the paddings of the component for a ui compact variant | | `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). | | `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content | | `placeholder` | `Record` | | | Placeholder text for the input | diff --git a/packages/components/inputs/localized-money-input/src/localized-money-input.story.js b/packages/components/inputs/localized-money-input/src/localized-money-input.story.js index 8bcc6af297..536ef67f29 100644 --- a/packages/components/inputs/localized-money-input/src/localized-money-input.story.js +++ b/packages/components/inputs/localized-money-input/src/localized-money-input.story.js @@ -71,6 +71,7 @@ storiesOf('Components|Inputs', module) // warnings in case hideCurrencyExpansionControls is true defaultExpandCurrencies || undefined } + isCondensed={boolean('isCondensed', false)} isDisabled={boolean('isDisabled', false)} isReadOnly={boolean('isReadOnly', false)} placeholder={object('placeholder', { EUR: '', USD: '' })} diff --git a/packages/components/inputs/localized-money-input/src/localized-money-input.tsx b/packages/components/inputs/localized-money-input/src/localized-money-input.tsx index 2a1457e123..cedd3408a2 100644 --- a/packages/components/inputs/localized-money-input/src/localized-money-input.tsx +++ b/packages/components/inputs/localized-money-input/src/localized-money-input.tsx @@ -76,6 +76,10 @@ export type TLocalizedMoneyInputProps = { * Controls whether one or all currencirs are visible by default */ defaultExpandCurrencies?: boolean; + /** + * Use this property to reduce the paddings of the component for a ui compact variant + */ + isCondensed?: boolean; /** * Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). */ @@ -161,6 +165,10 @@ type TLocalizedInputProps = { * Called when input is focused */ onFocus?: (event: TCustomEvent) => void; + /** + * Use this property to reduce the paddings of the component for a ui compact variant + */ + isCondensed?: boolean; /** * Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). */ @@ -246,6 +254,7 @@ const LocalizedInput = (props: TLocalizedInputProps) => { value={props.value} onChange={handleChange} onBlur={props.onBlur} + isCondensed={props.isCondensed} isDisabled={props.isDisabled} isReadOnly={props.isReadOnly} placeholder={props.placeholder} @@ -335,6 +344,7 @@ const LocalizedMoneyInput = (props: TLocalizedMoneyInputProps) => { } onBlur={props.onBlur} onFocus={props.onFocus} + isCondensed={props.isCondensed} isDisabled={props.isDisabled} isReadOnly={props.isReadOnly} hasError={Boolean( diff --git a/packages/components/inputs/localized-money-input/src/localized-money-input.visualroute.jsx b/packages/components/inputs/localized-money-input/src/localized-money-input.visualroute.jsx index 0a775937d4..a0e1618884 100644 --- a/packages/components/inputs/localized-money-input/src/localized-money-input.visualroute.jsx +++ b/packages/components/inputs/localized-money-input/src/localized-money-input.visualroute.jsx @@ -91,6 +91,25 @@ export const component = () => ( isReadOnly={true} /> + + {}} + selectedCurrency="CAD" + horizontalConstraint={7} + isCondensed={true} + defaultExpandCurrencies={true} + /> + + + {}} + selectedCurrency="CAD" + horizontalConstraint={7} + isCondensed={true} + /> + [See signature.](#signature-onBlur) | | | Called when input is blurred | | `onFocus` | `Function`
[See signature.](#signature-onFocus) | | | Called when input is focused | +| `isCondensed` | `boolean` | | | Use this property to reduce the paddings of the component for a ui compact variant | | `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). | | `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content | | `isAutofocussed` | `boolean` | | | Focus the input on initial render | diff --git a/packages/components/inputs/money-input/src/money-input.styles.ts b/packages/components/inputs/money-input/src/money-input.styles.ts index c2ec193415..bfbf6e9cf5 100644 --- a/packages/components/inputs/money-input/src/money-input.styles.ts +++ b/packages/components/inputs/money-input/src/money-input.styles.ts @@ -27,7 +27,9 @@ const getCurrencyLabelStyles = (props: TInputProps) => css` border-right: 0; padding: 0 ${designTokens.spacing25}; align-items: center; - font-size: ${designTokens.fontSize30}; + font-size: ${props.isCondensed + ? designTokens.fontSize20 + : designTokens.fontSize30}; box-sizing: border-box; &:focus-within: { diff --git a/packages/components/inputs/money-input/src/money-input.tsx b/packages/components/inputs/money-input/src/money-input.tsx index cb198b045e..558b101b55 100644 --- a/packages/components/inputs/money-input/src/money-input.tsx +++ b/packages/components/inputs/money-input/src/money-input.tsx @@ -46,6 +46,7 @@ const getPortalNode = (id?: string) => type TLabel = { id: string; children?: ReactNode; + isCondensed?: boolean; isDisabled?: boolean; isReadOnly?: boolean; }; @@ -86,6 +87,7 @@ type TCreateCurrencySelectStyles = ( ) => void; export type TInputProps = { + isCondensed?: boolean; isDisabled?: boolean; hasError?: boolean; hasWarning?: boolean; @@ -103,6 +105,7 @@ type TBase = { const createCurrencySelectStyles: TCreateCurrencySelectStyles = ({ hasWarning, hasError, + isCondensed, isDisabled, isReadOnly, menuPortalZIndex, @@ -112,6 +115,7 @@ const createCurrencySelectStyles: TCreateCurrencySelectStyles = ({ hasWarning, hasError, menuPortalZIndex, + isCondensed, isReadOnly, isDisabled, }); @@ -460,6 +464,10 @@ type TMoneyInputProps = { * Called when input is focused */ onFocus?: (event: TCustomEvent) => void; + /** + * Use this property to reduce the paddings of the component for a ui compact variant + */ + isCondensed?: boolean; /** * Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). */ @@ -709,6 +717,7 @@ const MoneyInput = (props: TMoneyInputProps) => { const currencySelectStyles = createCurrencySelectStyles({ hasWarning: props.hasWarning, hasError: props.hasError, + isCondensed: props.isCondensed, isDisabled: props.isDisabled, isReadOnly: props.isReadOnly, menuPortalZIndex: props.menuPortalZIndex, @@ -785,6 +794,7 @@ const MoneyInput = (props: TMoneyInputProps) => { {hasNoCurrencies ? (