From ee25db733dfe12e5f682fe24f7b1ecef7f01da0f Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Mon, 30 Nov 2020 16:01:37 +0100
Subject: [PATCH] Remove classes utility (#4106)

* Remove classes utility

* Update packages/react-components/src/InputNumber.tsx
---
 packages/react-components/src/AddressMini.tsx  |  4 ++--
 packages/react-components/src/Available.tsx    |  4 +---
 packages/react-components/src/Balance.tsx      |  6 ++----
 packages/react-components/src/Bonded.tsx       |  3 +--
 packages/react-components/src/Call.tsx         |  3 +--
 packages/react-components/src/Chart/Base.tsx   |  4 +---
 packages/react-components/src/CryptoType.tsx   |  4 +---
 packages/react-components/src/Dropdown.tsx     |  3 +--
 packages/react-components/src/Editor.tsx       |  3 +--
 packages/react-components/src/Event.tsx        |  4 ++--
 .../src/InputAddress/index.tsx                 |  4 ++--
 .../src/InputConsts/SelectKey.tsx              |  3 +--
 .../src/InputConsts/SelectSection.tsx          |  3 +--
 packages/react-components/src/InputError.tsx   |  4 +---
 .../src/InputExtrinsic/SelectMethod.tsx        |  3 +--
 .../src/InputExtrinsic/SelectSection.tsx       |  3 +--
 packages/react-components/src/InputNumber.tsx  |  3 +--
 .../src/InputRpc/SelectMethod.tsx              |  3 +--
 .../src/InputRpc/SelectSection.tsx             |  3 +--
 .../src/InputStorage/SelectKey.tsx             |  3 +--
 .../src/InputStorage/SelectSection.tsx         |  3 +--
 packages/react-components/src/Inset.tsx        | 18 +++---------------
 packages/react-components/src/LabelHelp.tsx    |  3 +--
 packages/react-components/src/LockedVote.tsx   |  8 ++------
 packages/react-components/src/Nonce.tsx        |  4 +---
 packages/react-components/src/Output.tsx       |  3 +--
 packages/react-components/src/Row.tsx          |  5 ++---
 packages/react-components/src/Status/index.tsx |  5 ++---
 packages/react-components/src/Tags.tsx         |  5 ++---
 packages/react-components/src/util/classes.ts  |  8 --------
 packages/react-components/src/util/index.ts    |  1 -
 packages/react-params/src/Param/Bare.tsx       |  3 +--
 packages/react-params/src/Param/index.tsx      |  3 +--
 packages/react-params/src/valueToText.tsx      |  3 +--
 34 files changed, 42 insertions(+), 100 deletions(-)
 delete mode 100644 packages/react-components/src/util/classes.ts

diff --git a/packages/react-components/src/AddressMini.tsx b/packages/react-components/src/AddressMini.tsx
index b6b6c41765..db9b247c9e 100644
--- a/packages/react-components/src/AddressMini.tsx
+++ b/packages/react-components/src/AddressMini.tsx
@@ -8,7 +8,7 @@ import BN from 'bn.js';
 import React from 'react';
 import styled from 'styled-components';
 
-import { classes, toShortAddress } from './util';
+import { toShortAddress } from './util';
 import AccountName from './AccountName';
 import BalanceDisplay from './Balance';
 import BondedDisplay from './Bonded';
@@ -44,7 +44,7 @@ function AddressMini ({ balance, bonded, children, className = '', iconInfo, isH
   }
 
   return (
-    <div className={classes('ui--AddressMini', isHighlight ? 'isHighlight' : '', isPadded ? 'padded' : '', withShrink ? 'withShrink' : '', className)}>
+    <div className={`ui--AddressMini${isHighlight ? ' isHighlight' : ''}${isPadded ? ' padded' : ''}${withShrink ? ' withShrink' : ''} ${className}`}>
       {label && (
         <label className='ui--AddressMini-label'>{label}</label>
       )}
diff --git a/packages/react-components/src/Available.tsx b/packages/react-components/src/Available.tsx
index 2966e878bd..0f2e17e8b5 100644
--- a/packages/react-components/src/Available.tsx
+++ b/packages/react-components/src/Available.tsx
@@ -6,8 +6,6 @@ import type { AccountId, AccountIndex, Address } from '@polkadot/types/interface
 import React from 'react';
 import { Available } from '@polkadot/react-query';
 
-import { classes } from './util';
-
 export interface Props {
   className?: string;
   label?: React.ReactNode;
@@ -21,7 +19,7 @@ function AvailableDisplay ({ className = '', label, params }: Props): React.Reac
 
   return (
     <Available
-      className={classes('ui--Available', className)}
+      className={`ui--Available ${className}`}
       label={label}
       params={params}
     />
diff --git a/packages/react-components/src/Balance.tsx b/packages/react-components/src/Balance.tsx
index a6a78da07b..3c92bc663e 100644
--- a/packages/react-components/src/Balance.tsx
+++ b/packages/react-components/src/Balance.tsx
@@ -8,8 +8,6 @@ import React from 'react';
 import { Balance, FormatBalance } from '@polkadot/react-query';
 import { BN_ZERO } from '@polkadot/util';
 
-import { classes } from './util';
-
 export interface RenderProps {
   className?: string;
   label?: React.ReactNode;
@@ -43,7 +41,7 @@ export function renderProvided ({ className = '', label, value }: RenderProps):
 
   return (
     <FormatBalance
-      className={classes('ui--Balance', className)}
+      className={`ui--Balance ${className}`}
       label={label}
       value={Array.isArray(value) ? value[0] : value}
     >
@@ -65,7 +63,7 @@ function BalanceDisplay (props: Props): React.ReactElement<Props> | null {
     ? <>{renderProvided({ className, label, value: balance })}</>
     : (
       <Balance
-        className={classes('ui--Balance', className)}
+        className={`ui--Balance ${className}`}
         label={label}
         params={params}
       />
diff --git a/packages/react-components/src/Bonded.tsx b/packages/react-components/src/Bonded.tsx
index 42ff0c5df7..5a924d3a8e 100644
--- a/packages/react-components/src/Bonded.tsx
+++ b/packages/react-components/src/Bonded.tsx
@@ -8,7 +8,6 @@ import React from 'react';
 import { Bonded } from '@polkadot/react-query';
 
 import { renderProvided } from './Balance';
-import { classes } from './util';
 
 export interface Props {
   bonded?: BN | BN[];
@@ -29,7 +28,7 @@ function BondedDisplay (props: Props): React.ReactElement<Props> | null {
     ? <>{renderProvided({ className, label, value: bonded })}</>
     : (
       <Bonded
-        className={classes('ui--Bonded', className)}
+        className={`ui--Bonded ${className}`}
         label={label}
         params={params}
       />
diff --git a/packages/react-components/src/Call.tsx b/packages/react-components/src/Call.tsx
index e9e10198a5..20b2e722eb 100644
--- a/packages/react-components/src/Call.tsx
+++ b/packages/react-components/src/Call.tsx
@@ -12,7 +12,6 @@ import { FormatBalance } from '@polkadot/react-query';
 import { GenericCall, getTypeDef } from '@polkadot/types';
 
 import Static from './Static';
-import { classes } from './util';
 import { useTranslation } from './translate';
 
 export interface Props {
@@ -64,7 +63,7 @@ function Call ({ children, className = '', labelHash, mortality, onError, tip, v
   }, [value, withHash]);
 
   return (
-    <div className={classes('ui--Extrinsic', className)}>
+    <div className={`ui--Extrinsic ${className}`}>
       <Params
         isDisabled
         onError={onError}
diff --git a/packages/react-components/src/Chart/Base.tsx b/packages/react-components/src/Chart/Base.tsx
index 73cbf4de9e..f2befa6363 100644
--- a/packages/react-components/src/Chart/Base.tsx
+++ b/packages/react-components/src/Chart/Base.tsx
@@ -6,8 +6,6 @@ import type { BaseProps } from './types';
 import React from 'react';
 import styled from 'styled-components';
 
-import { classes } from '../util';
-
 const Wrapper = styled.div`
   position: relative;
   display: inline-block;
@@ -18,7 +16,7 @@ const Wrapper = styled.div`
 
 function BaseChart ({ children, className = '' }: BaseProps): React.ReactElement<BaseProps> {
   return (
-    <Wrapper className={classes('ui--Chart', className)}>
+    <Wrapper className={`ui--Chart ${className}`}>
       {children}
     </Wrapper>
   );
diff --git a/packages/react-components/src/CryptoType.tsx b/packages/react-components/src/CryptoType.tsx
index 7afc0871ef..2e9e3151c2 100644
--- a/packages/react-components/src/CryptoType.tsx
+++ b/packages/react-components/src/CryptoType.tsx
@@ -6,8 +6,6 @@ import type { AccountId, AccountIndex, Address } from '@polkadot/types/interface
 import React, { useEffect, useState } from 'react';
 import keyring from '@polkadot/ui-keyring';
 
-import { classes } from './util';
-
 interface Props {
   accountId: AccountId | AccountIndex | Address | string | Uint8Array | null;
   className?: string;
@@ -44,7 +42,7 @@ function CryptoType ({ accountId, className = '', label = '' }: Props): React.Re
   }, [accountId]);
 
   return (
-    <div className={classes('ui--CryptoType', className)}>
+    <div className={`ui--CryptoType ${className}`}>
       {label}{type}
     </div>
   );
diff --git a/packages/react-components/src/Dropdown.tsx b/packages/react-components/src/Dropdown.tsx
index aaa43738e1..218fd18fb9 100644
--- a/packages/react-components/src/Dropdown.tsx
+++ b/packages/react-components/src/Dropdown.tsx
@@ -7,7 +7,6 @@ import SUIButton from 'semantic-ui-react/dist/commonjs/elements/Button/Button';
 import SUIDropdown, { DropdownProps } from 'semantic-ui-react/dist/commonjs/modules/Dropdown/Dropdown';
 import { isUndefined } from '@polkadot/util';
 
-import { classes } from './util';
 import Labelled from './Labelled';
 
 interface Props<Option> {
@@ -112,7 +111,7 @@ function BaseDropdown<Option> ({ allowAdd = false, children, className = '', def
     ? <SUIButton.Group>{dropdown}{children}</SUIButton.Group>
     : (
       <Labelled
-        className={classes('ui--Dropdown', className)}
+        className={`ui--Dropdown ${className}`}
         help={help}
         isFull={isFull}
         label={label}
diff --git a/packages/react-components/src/Editor.tsx b/packages/react-components/src/Editor.tsx
index c4e5e8431e..096f4f9d7d 100644
--- a/packages/react-components/src/Editor.tsx
+++ b/packages/react-components/src/Editor.tsx
@@ -10,7 +10,6 @@
 import CodeFlask from 'codeflask';
 import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
-import { classes } from '@polkadot/react-components/util';
 
 interface Props {
   className?: string;
@@ -63,7 +62,7 @@ function Editor ({ className = '', code, isValid, onEdit }: Props): React.ReactE
 
   return (
     <div
-      className={classes('ui-Editor', className, isValid === false ? 'invalid' : '')}
+      className={`ui-Editor ${className}${isValid === false ? ' invalid' : ''}`}
       id={editorId}
     />
   );
diff --git a/packages/react-components/src/Event.tsx b/packages/react-components/src/Event.tsx
index e22a654c02..bd6f17764f 100644
--- a/packages/react-components/src/Event.tsx
+++ b/packages/react-components/src/Event.tsx
@@ -12,7 +12,7 @@ import Params from '@polkadot/react-params';
 import { getTypeDef } from '@polkadot/types';
 
 import { useTranslation } from './translate';
-import { classes, getContractAbi } from './util';
+import { getContractAbi } from './util';
 
 export interface Props {
   children?: React.ReactNode;
@@ -64,7 +64,7 @@ function EventDisplay ({ children, className = '', value }: Props): React.ReactE
   );
 
   return (
-    <div className={classes('ui--Event', className)}>
+    <div className={`ui--Event ${className}`}>
       {children}
       <Params
         isDisabled
diff --git a/packages/react-components/src/InputAddress/index.tsx b/packages/react-components/src/InputAddress/index.tsx
index a0480c71fa..6682ce0236 100644
--- a/packages/react-components/src/InputAddress/index.tsx
+++ b/packages/react-components/src/InputAddress/index.tsx
@@ -12,7 +12,7 @@ import keyring from '@polkadot/ui-keyring';
 import createKeyringItem from '@polkadot/ui-keyring/options/item';
 import { isNull, isUndefined } from '@polkadot/util';
 
-import { classes, getAddressName } from '../util';
+import { getAddressName } from '../util';
 import addressToAddress from '../util/toAddress';
 import Dropdown from '../Dropdown';
 import createHeader from './createHeader';
@@ -159,7 +159,7 @@ class InputAddress extends React.PureComponent<Props, State> {
 
     return (
       <Dropdown
-        className={classes('ui--InputAddress', hideAddress && 'hideAddress', className)}
+        className={`ui--InputAddress${hideAddress ? ' hideAddress' : ''} ${className}`}
         defaultValue={_defaultValue}
         help={help}
         isDisabled={isDisabled}
diff --git a/packages/react-components/src/InputConsts/SelectKey.tsx b/packages/react-components/src/InputConsts/SelectKey.tsx
index c34dfe19b1..0a348c018f 100644
--- a/packages/react-components/src/InputConsts/SelectKey.tsx
+++ b/packages/react-components/src/InputConsts/SelectKey.tsx
@@ -7,7 +7,6 @@ import type { ConstValueBase } from './types';
 import React from 'react';
 
 import Dropdown from '../Dropdown';
-import { classes } from '../util';
 
 interface Props {
   className?: string;
@@ -37,7 +36,7 @@ function SelectKey (props: Props): React.ReactElement<Props> | null {
 
   return (
     <Dropdown
-      className={classes('ui--DropdownLinked-Items', className)}
+      className={`ui--DropdownLinked-Items ${className}`}
       isError={isError}
       onChange={onChange}
       options={options}
diff --git a/packages/react-components/src/InputConsts/SelectSection.tsx b/packages/react-components/src/InputConsts/SelectSection.tsx
index 9f49770ba5..c545318349 100644
--- a/packages/react-components/src/InputConsts/SelectSection.tsx
+++ b/packages/react-components/src/InputConsts/SelectSection.tsx
@@ -7,7 +7,6 @@ import type { ConstValueBase, StorageEntryPromise } from './types';
 import React from 'react';
 
 import Dropdown from '../Dropdown';
-import { classes } from '../util';
 
 interface Props {
   className?: string;
@@ -21,7 +20,7 @@ interface Props {
 function SelectSection ({ className = '', defaultValue, isError, onChange, options, value: { section } }: Props): React.ReactElement<Props> {
   return (
     <Dropdown
-      className={classes('ui--DropdownLinked-Sections', className)}
+      className={`ui--DropdownLinked-Sections ${className}`}
       defaultValue={defaultValue}
       isError={isError}
       onChange={onChange}
diff --git a/packages/react-components/src/InputError.tsx b/packages/react-components/src/InputError.tsx
index bafb2aa315..f13471adf6 100644
--- a/packages/react-components/src/InputError.tsx
+++ b/packages/react-components/src/InputError.tsx
@@ -4,8 +4,6 @@
 import React from 'react';
 import Label from 'semantic-ui-react/dist/commonjs/elements/Label/Label';
 
-import { classes } from './util';
-
 interface Props {
   className?: string;
   label?: React.ReactNode;
@@ -17,7 +15,7 @@ const defaultLabel: React.ReactNode = (
 
 function InputError ({ className = '', label = defaultLabel }: Props): React.ReactElement<Props> {
   return (
-    <div className={classes('ui--InputError', className)}>
+    <div className={`ui--InputError ${className}`}>
       <Label
         color='red'
         pointing='left'
diff --git a/packages/react-components/src/InputExtrinsic/SelectMethod.tsx b/packages/react-components/src/InputExtrinsic/SelectMethod.tsx
index 800a33e845..396b911832 100644
--- a/packages/react-components/src/InputExtrinsic/SelectMethod.tsx
+++ b/packages/react-components/src/InputExtrinsic/SelectMethod.tsx
@@ -8,7 +8,6 @@ import React, { useCallback } from 'react';
 import { ApiPromise } from '@polkadot/api';
 
 import Dropdown from '../Dropdown';
-import { classes } from '../util';
 
 interface Props {
   api: ApiPromise;
@@ -32,7 +31,7 @@ function SelectMethod ({ api, className = '', isError, onChange, options, value
 
   return (
     <Dropdown
-      className={classes('ui--DropdownLinked-Items', className)}
+      className={`ui--DropdownLinked-Items ${className}`}
       isError={isError}
       onChange={onChange}
       options={options}
diff --git a/packages/react-components/src/InputExtrinsic/SelectSection.tsx b/packages/react-components/src/InputExtrinsic/SelectSection.tsx
index 2dfe767d26..9338c75210 100644
--- a/packages/react-components/src/InputExtrinsic/SelectSection.tsx
+++ b/packages/react-components/src/InputExtrinsic/SelectSection.tsx
@@ -7,7 +7,6 @@ import type { DropdownOptions } from '../util/types';
 import React from 'react';
 
 import Dropdown from '../Dropdown';
-import { classes } from '../util';
 
 interface Props {
   className?: string;
@@ -21,7 +20,7 @@ interface Props {
 function SelectSection ({ className = '', defaultValue, isError, onChange, options, value }: Props): React.ReactElement<Props> {
   return (
     <Dropdown
-      className={classes('ui--DropdownLinked-Sections', className)}
+      className={`ui--DropdownLinked-Sections ${className}`}
       defaultValue={defaultValue}
       isError={isError}
       onChange={onChange}
diff --git a/packages/react-components/src/InputNumber.tsx b/packages/react-components/src/InputNumber.tsx
index d1c7375080..df6cd7d95f 100644
--- a/packages/react-components/src/InputNumber.tsx
+++ b/packages/react-components/src/InputNumber.tsx
@@ -10,7 +10,6 @@ import styled from 'styled-components';
 import { registry } from '@polkadot/react-api';
 import { BN_ZERO, BN_TEN, formatBalance, isBn } from '@polkadot/util';
 
-import { classes } from './util';
 import { BitLengthOption } from './constants';
 import Dropdown from './Dropdown';
 import Input, { KEYS_PRE } from './Input';
@@ -251,7 +250,7 @@ function InputNumber ({ autoFocus, bitLength = DEFAULT_BITLENGTH, children, clas
   return (
     <Input
       autoFocus={autoFocus}
-      className={classes('ui--InputNumber', isDisabled && 'isDisabled', className)}
+      className={`ui--InputNumber${isDisabled ? ' isDisabled' : ''} ${className}`}
       help={help}
       isAction={isSi}
       isDisabled={isDisabled}
diff --git a/packages/react-components/src/InputRpc/SelectMethod.tsx b/packages/react-components/src/InputRpc/SelectMethod.tsx
index 34dcfc6160..f7ce67c09b 100644
--- a/packages/react-components/src/InputRpc/SelectMethod.tsx
+++ b/packages/react-components/src/InputRpc/SelectMethod.tsx
@@ -8,7 +8,6 @@ import React, { useCallback } from 'react';
 
 import Dropdown from '../Dropdown';
 import rpcs from './rpcs';
-import { classes } from '../util';
 
 interface Props {
   className?: string;
@@ -30,7 +29,7 @@ function SelectMethod ({ className = '', isError, onChange, options, value }: Pr
 
   return (
     <Dropdown
-      className={classes('ui--DropdownLinked-Items', className)}
+      className={`ui--DropdownLinked-Items ${className}`}
       isError={isError}
       onChange={onChange}
       options={options}
diff --git a/packages/react-components/src/InputRpc/SelectSection.tsx b/packages/react-components/src/InputRpc/SelectSection.tsx
index 3d024c3688..bd42e6c322 100644
--- a/packages/react-components/src/InputRpc/SelectSection.tsx
+++ b/packages/react-components/src/InputRpc/SelectSection.tsx
@@ -7,7 +7,6 @@ import type { DropdownOptions } from '../util/types';
 import React from 'react';
 
 import Dropdown from '../Dropdown';
-import { classes } from '../util';
 
 interface Props {
   className?: string;
@@ -21,7 +20,7 @@ interface Props {
 function SelectSection ({ className = '', defaultValue, isError, onChange, options, value }: Props): React.ReactElement<Props> {
   return (
     <Dropdown
-      className={classes('ui--DropdownLinked-Sections', className)}
+      className={`ui--DropdownLinked-Sections ${className}`}
       defaultValue={defaultValue}
       isError={isError}
       onChange={onChange}
diff --git a/packages/react-components/src/InputStorage/SelectKey.tsx b/packages/react-components/src/InputStorage/SelectKey.tsx
index d922e9b119..fa66796217 100644
--- a/packages/react-components/src/InputStorage/SelectKey.tsx
+++ b/packages/react-components/src/InputStorage/SelectKey.tsx
@@ -9,7 +9,6 @@ import { ApiPromise } from '@polkadot/api';
 import { useApi } from '@polkadot/react-hooks';
 
 import Dropdown from '../Dropdown';
-import { classes } from '../util';
 
 interface Props {
   className?: string;
@@ -38,7 +37,7 @@ function SelectKey (props: Props): React.ReactElement<Props> | null {
 
   return (
     <Dropdown
-      className={classes('ui--DropdownLinked-Items', className)}
+      className={`ui--DropdownLinked-Items ${className}`}
       isError={isError}
       onChange={onChange}
       options={options}
diff --git a/packages/react-components/src/InputStorage/SelectSection.tsx b/packages/react-components/src/InputStorage/SelectSection.tsx
index ba24e12d98..9e17ca11bd 100644
--- a/packages/react-components/src/InputStorage/SelectSection.tsx
+++ b/packages/react-components/src/InputStorage/SelectSection.tsx
@@ -7,7 +7,6 @@ import type { DropdownOptions } from '../util/types';
 import React from 'react';
 
 import Dropdown from '../Dropdown';
-import { classes } from '../util';
 
 interface Props {
   className?: string;
@@ -21,7 +20,7 @@ interface Props {
 function SelectSection ({ className = '', defaultValue, isError, onChange, options, value: { creator: { section } } }: Props): React.ReactElement<Props> {
   return (
     <Dropdown
-      className={classes('ui--DropdownLinked-Sections', className)}
+      className={`ui--DropdownLinked-Sections ${className}`}
       defaultValue={defaultValue}
       isError={isError}
       onChange={onChange}
diff --git a/packages/react-components/src/Inset.tsx b/packages/react-components/src/Inset.tsx
index 371dc46405..91e0ccf401 100644
--- a/packages/react-components/src/Inset.tsx
+++ b/packages/react-components/src/Inset.tsx
@@ -7,7 +7,6 @@ import styled from 'styled-components';
 import { useToggle } from '@polkadot/react-hooks';
 
 import Icon from './Icon';
-import { classes } from './util';
 
 export interface InsetProps {
   className?: string;
@@ -38,18 +37,7 @@ function Inset ({ children, className = '', header, href, isCollapsible, isError
 
   return (
     <div
-      className={
-        classes(
-          'ui--Inset',
-          href && 'as-link',
-          isCollapsible && 'collapsible',
-          (isError && !isSuccess) && 'error',
-          (!isError && isSuccess) && 'success',
-          withBottomMargin && 'bottom-margin',
-          withTopMargin && 'top-margin',
-          className
-        )
-      }
+      className={`ui--Inset ${href ? ' as-link' : ''}${isCollapsible ? ' collapsible' : ''}${(isError && !isSuccess) ? ' error' : ''}${(!isError && isSuccess) ? ' success' : ''}${withBottomMargin ? ' bottom-margin' : ''}${withTopMargin ? ' top-margin' : ''} ${className}`}
     >
       {isCollapsible && (
         <div
@@ -58,13 +46,13 @@ function Inset ({ children, className = '', header, href, isCollapsible, isError
         >
           <h3>{header}</h3>
           <Icon
-            className={classes(isCollapsed && 'collapsed')}
+            className={isCollapsed ? 'collapsed' : ''}
             icon='angle-up'
           />
         </div>
       )}
       <div
-        className={classes('children', (isCollapsible && isCollapsed) && 'collapsed')}
+        className={`children${(isCollapsible && isCollapsed) ? ' collapsed' : ''}`}
         onClick={_onClick}
       >
         {children}
diff --git a/packages/react-components/src/LabelHelp.tsx b/packages/react-components/src/LabelHelp.tsx
index d700944be6..8a126805d2 100644
--- a/packages/react-components/src/LabelHelp.tsx
+++ b/packages/react-components/src/LabelHelp.tsx
@@ -6,7 +6,6 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 
 import Icon from './Icon';
-import { classes } from './util';
 import Tooltip from './Tooltip';
 
 interface Props {
@@ -21,7 +20,7 @@ function LabelHelp ({ className = '', help, icon = 'question-circle' }: Props):
   const [trigger] = useState(`label-help-${++id}`);
 
   return (
-    <div className={classes('ui--LabelHelp', className)}>
+    <div className={`ui--LabelHelp ${className}`}>
       <Icon
         icon={icon}
         tooltip={trigger}
diff --git a/packages/react-components/src/LockedVote.tsx b/packages/react-components/src/LockedVote.tsx
index b195630242..075a3cfb0a 100644
--- a/packages/react-components/src/LockedVote.tsx
+++ b/packages/react-components/src/LockedVote.tsx
@@ -6,8 +6,6 @@ import type { AccountId, AccountIndex, Address } from '@polkadot/types/interface
 import React from 'react';
 import { LockedVote } from '@polkadot/react-query';
 
-import { classes } from './util';
-
 export interface Props {
   className?: string;
   label?: React.ReactNode;
@@ -15,16 +13,14 @@ export interface Props {
   withLabel?: boolean;
 }
 
-function LockedVoteDisplay (props: Props): React.ReactElement<Props> | null {
-  const { className = '', label, params } = props;
-
+function LockedVoteDisplay ({ className = '', label, params }: Props): React.ReactElement<Props> | null {
   if (!params) {
     return null;
   }
 
   return (
     <LockedVote
-      className={classes('ui--LockedVote', className)}
+      className={`ui--LockedVote ${className}`}
       label={label}
       params={params}
     />
diff --git a/packages/react-components/src/Nonce.tsx b/packages/react-components/src/Nonce.tsx
index abb03df5ba..8902758b11 100644
--- a/packages/react-components/src/Nonce.tsx
+++ b/packages/react-components/src/Nonce.tsx
@@ -6,8 +6,6 @@ import type { AccountId, AccountIndex, Address } from '@polkadot/types/interface
 import React from 'react';
 import { Nonce } from '@polkadot/react-query';
 
-import { classes } from './util';
-
 export interface Props {
   className?: string;
   label?: React.ReactNode;
@@ -21,7 +19,7 @@ function NonceDisplay ({ className = '', label, params }: Props): React.ReactEle
 
   return (
     <Nonce
-      className={classes('ui--Nonce', className)}
+      className={`ui--Nonce ${className}`}
       label={label}
       params={params.toString()}
     />
diff --git a/packages/react-components/src/Output.tsx b/packages/react-components/src/Output.tsx
index aa2a75a7a0..fcc1921b4d 100644
--- a/packages/react-components/src/Output.tsx
+++ b/packages/react-components/src/Output.tsx
@@ -6,7 +6,6 @@ import styled from 'styled-components';
 
 import CopyButton from './CopyButton';
 import Labelled from './Labelled';
-import { classes } from './util';
 
 interface Props {
   children?: React.ReactNode;
@@ -37,7 +36,7 @@ function Output ({ children, className = '', help, isError, isFull, isHidden, is
       labelExtra={labelExtra}
       withLabel={withLabel}
     >
-      <div className={classes('ui--output', isError && 'error', isMonospace && 'monospace')}>
+      <div className={`ui--output}${isError ? ' error' : ''}${isMonospace ? ' monospace' : ''}`}>
         {isTrimmed && value && (value.length > 256)
           ? `${value.substr(0, 96)}…${value.substr(-96)}`
           : value
diff --git a/packages/react-components/src/Row.tsx b/packages/react-components/src/Row.tsx
index 4d4fddb5ae..d1da6b7548 100644
--- a/packages/react-components/src/Row.tsx
+++ b/packages/react-components/src/Row.tsx
@@ -5,7 +5,6 @@ import React from 'react';
 import styled from 'styled-components';
 import { useToggle } from '@polkadot/react-hooks';
 
-import { classes } from './util';
 import EditButton from './EditButton';
 import Input from './Input';
 import Tags from './Tags';
@@ -167,7 +166,7 @@ export interface RowProps {
   tags?: string[];
 }
 
-function Row ({ address, buttons, children, className, defaultName, details, icon, iconInfo, isDisabled, isEditableName, isEditableTags, isInline, name, onChangeName, onChangeTags, onSaveName, onSaveTags, tags }: RowProps): React.ReactElement<RowProps> {
+function Row ({ address, buttons, children, className = '', defaultName, details, icon, iconInfo, isDisabled, isEditableName, isEditableTags, isInline, name, onChangeName, onChangeTags, onSaveName, onSaveTags, tags }: RowProps): React.ReactElement<RowProps> {
   const [isEditingName, toggleIsEditingName] = useToggle();
   const [isEditingTags, toggleIsEditingTags] = useToggle();
 
@@ -178,7 +177,7 @@ function Row ({ address, buttons, children, className, defaultName, details, ico
 
   return (
     <div
-      className={classes('ui--Row', isDisabled && 'isDisabled', isInline && 'isInline', className)}
+      className={`ui--Row${isDisabled ? ' isDisabled' : ''}${isInline ? ' isInline' : ''} ${className}`}
     >
       <div className='ui--Row-base'>
         {icon && (
diff --git a/packages/react-components/src/Status/index.tsx b/packages/react-components/src/Status/index.tsx
index ba920766a7..a31e73d9d7 100644
--- a/packages/react-components/src/Status/index.tsx
+++ b/packages/react-components/src/Status/index.tsx
@@ -12,7 +12,6 @@ import Button from '../Button';
 import Icon from '../Icon';
 import Spinner from '../Spinner';
 import { useTranslation } from '../translate';
-import { classes } from '../util';
 import StatusContext from './Context';
 import { STATUS_COMPLETE } from './constants';
 
@@ -70,7 +69,7 @@ function signerIconName (status: QueueTxStatus): IconName {
 function renderStatus ({ account, action, id, message, removeItem, status }: QueueStatus): React.ReactNode {
   return (
     <div
-      className={classes('item', status)}
+      className={`item ${status}`}
       key={id}
     >
       <div className='wrapper'>
@@ -117,7 +116,7 @@ function renderItem ({ error, extrinsic, id, removeItem, rpc, status }: QueueTx)
 
   return (
     <div
-      className={classes('item', status)}
+      className={`item ${status}`}
       key={id}
     >
       <div className='wrapper'>
diff --git a/packages/react-components/src/Tags.tsx b/packages/react-components/src/Tags.tsx
index 55922284af..38a46993b6 100644
--- a/packages/react-components/src/Tags.tsx
+++ b/packages/react-components/src/Tags.tsx
@@ -5,7 +5,6 @@ import type { VoidFn } from './types';
 
 import React, { useCallback, useMemo } from 'react';
 import styled from 'styled-components';
-import { classes } from './util';
 
 import EditButton from './EditButton';
 import InputTags from './InputTags';
@@ -24,7 +23,7 @@ interface Props {
   value: string[];
 }
 
-function Tags ({ children, className, isEditable, isEditing, onChange, onSave, onToggleIsEditing, value }: Props): React.ReactElement<Props> {
+function Tags ({ children, className = '', isEditable, isEditing, onChange, onSave, onToggleIsEditing, value }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   const contents = useMemo(
@@ -48,7 +47,7 @@ function Tags ({ children, className, isEditable, isEditing, onChange, onSave, o
   );
 
   return (
-    <div className={classes('ui--Tags', className)}>
+    <div className={`ui--Tags ${className}`}>
       {isEditable && isEditing
         ? (
           <InputTags
diff --git a/packages/react-components/src/util/classes.ts b/packages/react-components/src/util/classes.ts
deleted file mode 100644
index 58292ee021..0000000000
--- a/packages/react-components/src/util/classes.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-export default function classes (...classNames: (boolean | null | string | undefined)[]): string {
-  return classNames
-    .filter((className): boolean => !!className)
-    .join(' ');
-}
diff --git a/packages/react-components/src/util/index.ts b/packages/react-components/src/util/index.ts
index 525b59a46f..4075db743a 100644
--- a/packages/react-components/src/util/index.ts
+++ b/packages/react-components/src/util/index.ts
@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export { default as checkVisibility } from './checkVisibility';
-export { default as classes } from './classes';
 export { default as getAddressMeta } from './getAddressMeta';
 export { default as getAddressName } from './getAddressName';
 export { default as getAddressTags } from './getAddressTags';
diff --git a/packages/react-params/src/Param/Bare.tsx b/packages/react-params/src/Param/Bare.tsx
index a47f8aa597..bfd38fea3b 100644
--- a/packages/react-params/src/Param/Bare.tsx
+++ b/packages/react-params/src/Param/Bare.tsx
@@ -3,7 +3,6 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import { classes } from '@polkadot/react-components/util';
 
 interface Props {
   children?: React.ReactNode;
@@ -12,7 +11,7 @@ interface Props {
 
 function Bare ({ children, className = '' }: Props): React.ReactElement<Props> {
   return (
-    <div className={classes('ui--row', className)}>
+    <div className={`ui--row ${className}`}>
       {children}
     </div>
   );
diff --git a/packages/react-params/src/Param/index.tsx b/packages/react-params/src/Param/index.tsx
index b3d2c47a26..8b49791c27 100644
--- a/packages/react-params/src/Param/index.tsx
+++ b/packages/react-params/src/Param/index.tsx
@@ -4,7 +4,6 @@
 import type { Props, Props as CProps } from '../types';
 
 import React, { useMemo, useRef } from 'react';
-import { classes } from '@polkadot/react-components/util';
 import { encodeTypeDef } from '@polkadot/types/create';
 import { isUndefined } from '@polkadot/util';
 
@@ -35,7 +34,7 @@ function Param ({ className = '', defaultValue, isDisabled, isInOption, isOption
     )
     : (
       <compRef.current
-        className={classes('ui--Param', className)}
+        className={`ui--Param ${className}`}
         defaultValue={defaultValue}
         isDisabled={isDisabled}
         isInOption={isInOption}
diff --git a/packages/react-params/src/valueToText.tsx b/packages/react-params/src/valueToText.tsx
index ff5e93feb5..df81da788f 100644
--- a/packages/react-params/src/valueToText.tsx
+++ b/packages/react-params/src/valueToText.tsx
@@ -5,7 +5,6 @@ import type { Keys, ValidatorId } from '@polkadot/types/interfaces';
 import type { Codec } from '@polkadot/types/types';
 
 import React from 'react';
-import { classes } from '@polkadot/react-components/util';
 import { Option, Raw } from '@polkadot/types';
 import { isFunction, isNull, isUndefined, u8aToHex } from '@polkadot/util';
 
@@ -17,7 +16,7 @@ interface DivProps {
 function div ({ className = '', key }: DivProps, ...values: React.ReactNode[]): React.ReactNode {
   return (
     <div
-      className={classes('ui--Param-text', className)}
+      className={`ui--Param-text ${className}`}
       key={key}
     >
       {values}