feat(multiline text input): use secondary button

commercetools · Jun 20, 2024 · a724882 · a724882
1 parent 662cb27
commit a724882
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 30 deletions.
diff --git a/packages/components/inputs/multiline-text-input/src/multiline-text-input.story.js b/packages/components/inputs/multiline-text-input/src/multiline-text-input.story.js
@@ -2,13 +2,7 @@ import { createElement } from 'react';
 import { Value } from 'react-value';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import {
-  withKnobs,
-  boolean,
-  text,
-  select,
-  number,
-} from '@storybook/addon-knobs/react';
+import { withKnobs, boolean, text, select } from '@storybook/addon-knobs/react';
 import Constraints from '@commercetools-uikit/constraints';
 import Section from '../../../../../docs/.storybook/decorators/section';
 import Readme from '../README.md';

diff --git a/packages/components/inputs/multiline-text-input/src/multiline-text-input.styles.ts b/packages/components/inputs/multiline-text-input/src/multiline-text-input.styles.ts
@@ -1,12 +1,15 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { designTokens } from '@commercetools-uikit/design-system';
+import { type TMultilineTextInputProps } from './multiline-text-input';
 
-const getMultilineTextInputActionIconStyles = () => css`
+const getMultilineTextInputActionIconStyles = (
+  props: TMultilineTextInputProps
+) => css`
   position: absolute;
-  right: calc(${designTokens.spacing40} + 4px);
-  top: ${designTokens.spacing20};
-  padding: '0';
+  right: ${designTokens.spacing30};
+  top: ${props.isCondensed ? '7px' : designTokens.spacing20};
+  padding: 0;
 `;
 
 const MultilineInputWrapper = styled.div`

diff --git a/packages/components/inputs/multiline-text-input/src/multiline-text-input.tsx b/packages/components/inputs/multiline-text-input/src/multiline-text-input.tsx
@@ -5,9 +5,9 @@ import {
   type FocusEventHandler,
   ReactElement,
 } from 'react';
-import IconButton, {
-  type TIconButtonProps,
-} from '@commercetools-uikit/icon-button';
+import SecondaryIconButton, {
+  type TSecondaryButtonIconProps,
+} from '@commercetools-uikit/secondary-icon-button';
 import { useIntl } from 'react-intl';
 import { css } from '@emotion/react';
 import { AngleUpIcon, AngleDownIcon } from '@commercetools-uikit/icons';
@@ -117,7 +117,7 @@ export type TMultilineTextInputProps = {
    * Props for the right-action icon-button. Required when rightActionIcon is provided.
    * At least a `label` and an `onClick` prop/function need to be provided.
    */
-  rightActionProps?: TIconButtonProps;
+  rightActionProps?: TSecondaryButtonIconProps;
   /**
    * Set this to `true` to reduce the paddings of the input allowing the input to display
    * more data in less space.
@@ -193,7 +193,9 @@ const MultilineTextInput = (props: TMultilineTextInputProps) => {
             isAutofocussed={props.isAutofocussed}
             isOpen={isOpen}
             css={css`
-              padding-right: ${designTokens.spacing60};
+              padding-right: ${props.rightActionIcon &&
+              props.rightActionProps &&
+              designTokens.spacing50};
             `}
             isCondensed={props.isCondensed}
             maxRows={props.maxRows}
@@ -203,11 +205,11 @@ const MultilineTextInput = (props: TMultilineTextInputProps) => {
             aria-errormessage={props['aria-errormessage']}
           />
           {props.rightActionIcon && props.rightActionProps && (
-            <div css={getMultilineTextInputActionIconStyles()}>
-              <IconButton
-                theme="primary"
+            <div css={getMultilineTextInputActionIconStyles(props)}>
+              <SecondaryIconButton
+                color="info"
                 isDisabled={props.isDisabled || props.isReadOnly}
-                size={props.isCondensed ? '10' : '20'}
+                size={props.isCondensed ? '30' : '40'}
                 icon={props.rightActionIcon}
                 {...props.rightActionProps}
               />

diff --git a/packages/components/inputs/multiline-text-input/src/multiline-text-input.visualroute.jsx b/packages/components/inputs/multiline-text-input/src/multiline-text-input.visualroute.jsx
@@ -76,7 +76,7 @@ export const component = () => (
     </Spec>
     <Spec label="with right action">
       <MultilineTextInput
-         value={value}
+        value={value}
         placeholder="Enter a text"
         onChange={() => {}}
         horizontalConstraint={7}
@@ -89,10 +89,10 @@ export const component = () => (
     </Spec>
     <Spec label="with right action and condensed">
       <MultilineTextInput
-         value={value}
-         placeholder="Enter a text"
-         onChange={() => {}}
-         horizontalConstraint={7}
+        value={value}
+        placeholder="Enter a text"
+        onChange={() => {}}
+        horizontalConstraint={7}
         rightActionIcon={<InfoIcon />}
         rightActionProps={{
           label: 'Click me',
@@ -102,11 +102,11 @@ export const component = () => (
     </Spec>
     <Spec label="with max rows">
       <MultilineTextInput
-         value={value}
-         placeholder="Enter a text"
-         onChange={() => {}}
-         horizontalConstraint={7}
-         maxRows={3}
+        value={value}
+        placeholder="Enter a text"
+        onChange={() => {}}
+        horizontalConstraint={7}
+        maxRows={3}
         rightActionIcon={<InfoIcon />}
         rightActionProps={{
           label: 'Click me',