Merge pull request #75 from input-output-hk/fix/lw-12272-simple-asset-input

fix: expand simple asset input to occupy 100% width

Author: greatertomi

src/design-system/asset-input/amount-input.component.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import cn from 'classnames';
+
 import { Box } from '../box';
 
 import * as cx from './amount-input.css';
@@ -11,6 +13,8 @@ interface Props {
   value?: string;
   id: string;
   testId?: string;
+  className?: string;
+  inputClassName?: string;
 }
 
 export const AmountInput = ({
@@ -19,11 +23,13 @@ export const AmountInput = ({
   value,
   id,
   testId,
+  className,
+  inputClassName,
 }: Readonly<Props>): JSX.Element => {
   return (
-    <Box className={cx.amountInputSizer} data-value={value}>
+    <Box className={cn(cx.amountInputSizer, className)} data-value={value}>
       <input
-        className={cx.amountInput[alignment]}
+        className={cn(cx.amountInput[alignment], inputClassName)}
         value={value}
         size={1}
         onChange={({ target }): void => onChange?.(target.value)}

src/design-system/asset-input/asset-input.stories.tsx

@@ -38,6 +38,17 @@ const AssetInputMainComponents = (): JSX.Element => (
   </Variants.Row>
 );
 
+const SimpleAssetInputMainComponents = (): JSX.Element => (
+  <Variants.Row>
+    <Variants.Cell>
+      <SimpleAssetInput
+        state={validState('1')}
+        balanceLabel="Balance Available"
+      />
+    </Variants.Cell>
+  </Variants.Row>
+);
+
 const AssetInputUIStates = (): JSX.Element => (
   <>
     <Variants.Row>
@@ -94,9 +105,12 @@ export const Overview = (): JSX.Element => (
       <Divider my="$64" />
 
       <Section title="Main components">
-        <ColorSchemaTable headers={['Rest']}>
+        <ColorSchemaTable headers={['Asset Input']}>
           <AssetInputMainComponents />
         </ColorSchemaTable>
+        <ColorSchemaTable headers={['Simple Asset Input']}>
+          <SimpleAssetInputMainComponents />
+        </ColorSchemaTable>
       </Section>
 
       <Divider my="$64" />

src/design-system/asset-input/simple-asset-input.component.tsx

@@ -31,6 +31,8 @@ export const SimpleAssetInput = ({
           onAmountChange?.(state.asset, value);
         }}
         testId={testId}
+        className={cx.amountInputContainer}
+        inputClassName={cx.amountInput}
       />
     </Box>
     <Box className={cx.balance}>

src/design-system/asset-input/simple-asset-input.css.ts

@@ -20,6 +20,10 @@ export const root = style([
 
 export const amountBox = style({ gridArea: 'amount' });
 
+export const amountInputContainer = style({ display: 'flex' });
+
+export const amountInput = style({ width: '100%' });
+
 export const balance = style({ gridArea: 'balance' });
 
 export const error = style({ gridArea: 'error' });