Input Number component (#11275)

* feat: add tooltip support for Labelled components

* chore: basic translations added

* chore: minor change

* fix: tooltip

* feat: removed tooltip and used labelExtra

packages/apps/public/locales/en/react-components.json

@@ -1,4 +1,5 @@
 {
+  "(enter value in standard units)": "(enter value in standard units)",
   "0.1x voting balance, no lockup period": "0.1x voting balance, no lockup period",
   "<unknown>": "<unknown>",
   "Add identity judgment": "Add identity judgment",

packages/apps/public/locales/en/translation.json

@@ -1,6 +1,7 @@
 {
   "1000": "",
   " This update includes chain metadata and chain properties.": "",
+  "(enter value in standard units)": "(enter value in standard units)",
   "//hard": "",
   "//hard///password": "",
   "//hard/soft": "",

packages/react-components/src/InputBalance.tsx

@@ -4,11 +4,14 @@
 import type { BN } from '@polkadot/util';
 import type { SiDef } from '@polkadot/util/types';
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 
 import { formatBalance, isUndefined } from '@polkadot/util';
 
+import { TokenUnit } from './InputConsts/units.js';
 import InputNumber from './InputNumber.js';
+import { styled } from './styled.js';
+import { useTranslation } from './translate.js';
 
 interface Props {
   autoFocus?: boolean;
@@ -64,11 +67,17 @@ function reformat (value?: string | BN | null, isDisabled = false, siDecimals?:
 }
 
 function InputBalance ({ autoFocus, children, className = '', defaultValue: inDefault, isDisabled, isError, isFull, isLoading, isWarning, isZeroable, label, labelExtra, maxValue, onChange, onEnter, onEscape, placeholder, siDecimals, siSymbol, value, withEllipsis, withLabel, withMax }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+
   const { defaultValue, siDefault } = useMemo(
     () => reformat(inDefault, isDisabled, siDecimals),
     [inDefault, isDisabled, siDecimals]
   );
 
+  const [si] = useState<SiDef | null>(() =>
+    siDefault || formatBalance.findSi('-')
+  );
+
   return (
     <InputNumber
       autoFocus={autoFocus}
@@ -83,7 +92,16 @@ function InputBalance ({ autoFocus, children, className = '', defaultValue: inDe
       isWarning={isWarning}
       isZeroable={isZeroable}
       label={label}
-      labelExtra={labelExtra}
+      labelExtra={
+        <LabelledExtra>
+          {labelExtra}
+          {!!si && (siSymbol || TokenUnit.abbr) &&
+          <p>
+            {t('(enter value in standard units)')}
+          </p>
+          }
+        </LabelledExtra>
+      }
       maxValue={maxValue}
       onChange={onChange}
       onEnter={onEnter}
@@ -102,4 +120,15 @@ function InputBalance ({ autoFocus, children, className = '', defaultValue: inDe
   );
 }
 
+const LabelledExtra = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.1rem;
+
+  p {
+    font-size: var(--font-size-tiny);
+    font-weight: var(--font-weight-normal);
+  }
+`;
+
 export default React.memo(InputBalance);

packages/react-components/src/Labelled.tsx

@@ -34,7 +34,8 @@ function Labelled ({ children, className = '', isFull, isHidden, isOuter, isSmal
       <label>{withEllipsis
         ? <div className='withEllipsis'>{label}</div>
         : label
-      }</label>
+      }
+      </label>
       {labelExtra && <div className='labelExtra'>{labelExtra}</div>}
       <div className='ui--Labelled-content'>
         {children}

packages/react-components/src/Tooltip.tsx

@@ -60,7 +60,7 @@ function Tooltip ({ children, className = '', isClickable = false, place, text,
 // upgraded to latest, we probably don't want to start digging...
 const StyledReactTooltip = styled(ReactTooltip as unknown as React.ComponentType<any>)`
   .tooltipSpacer {
-    padding: 0.375rem;
+    padding-bottom: 0.1rem;
   }
 
   > div {