add right text input option

src/components/Input/Input.stories.tsx

@@ -8,54 +8,59 @@ export const _RegularInput = {
  <>
  <h3>Controlled components</h3>
  <Input placeholder={'with no content'} value="" />
- <br />
+ <br /> <br />
  <Input placeholder={'something'} value="with content" />
- <br />
+ <br /> <br />
  <Input
  placeholder={'something'}
  value=""
  error="that's an error without content"
  />
- <br />
+ <br /> <br />
  <Input
  placeholder={'something'}
  value="with content"
  error="that's an error with content"
  />
- <br />
+ <br /> <br />
  <Input
  placeholder={'something'}
  value=""
  warning="that's a warning without content"
  />
- <br />
+ <br /> <br />
  <Input
  placeholder={'something'}
  value="123"
  warning="that's a warning with content"
  />
- <br />
-
+ <br /> <br />
  <h3>Uncontrolled components</h3>
  <Input placeholder={'something'} defaultValue="" disable={true} />
- <br />
+ <br /> <br />
  <Input
  placeholder={'something'}
  defaultValue=""
  error="that's an error with|without content"
  />
- <br />
+ <br /> <br />
  <Input
  placeholder={'something'}
  defaultValue=""
  warning="that's a warning with|without content"
  />
-
+ <br /> <br />
  <Input
  placeholder={'something'}
  defaultValue=""
  success="that's a success with|without content"
  />
+ <br /> <br />
+ <Input
+ placeholder={'something with right text'}
+ defaultValue=""
+ rightText={'👍'}
+ />
  </>
  ),
 };

src/components/Input/Input.tsx

@@ -1,6 +1,6 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import { ComponentPropsWithoutRef, ChangeEvent, cloneElement } from 'react';
 
@@ -12,6 +12,7 @@ export interface InputProps extends ComponentPropsWithoutRef<'input'> {
  icon?: JSX.Element;
  customClass?: string;
  onClickIcon?: () => void;
+ rightText?: React.ReactNode;
 }
 
 export function Input(props: InputProps) {
@@ -80,7 +81,15 @@ export function IconInput(props: InputProps) {
 }
 
 export function RawInput(props: InputProps) {
- const { error, warning, success, disable, customClass = '', ...rest } = props;
+ const {
+ error,
+ warning,
+ success,
+ disable,
+ customClass = '',
+ rightText,
+ ...rest
+ } = props;
 
  const disabledClass = disable ? 'border-0' : '';
  const errorClass = error ? 'border-s-error' : '';
@@ -100,8 +109,19 @@ export function RawInput(props: InputProps) {
  disabled={disable}
  {...rest}
  />
- <InputMessage error={error} warning={warning} success={success} />
  </div>
+ {rightText && (
+ <div className="inline -ml-16">
+ <button
+ type="button"
+ className="w-10 h-10 bg-transparent mas-body text-tertiary"
+ disabled={true}
+ >
+ {rightText}
+ </button>
+ </div>
+ )}
+ <InputMessage error={error} warning={warning} success={success} />
  </div>
  </div>
  );