test: update test to so that button el is selected

apps/governance/src/components/wallet-card/wallet-card.tsx

@@ -54,7 +54,7 @@ export const WalletCardRow = ({
 }) => {
   const ref = React.useRef<HTMLDivElement | null>(null);
   useAnimateValue(ref, value);
-  const [integers, decimalsPlaces, separator] = useNumberParts(value, decimals);
+  const [integers, decimalsPlaces] = useNumberParts(value, decimals);
 
   return (
     <div
@@ -75,10 +75,7 @@ export const WalletCardRow = ({
           className="font-mono flex-1 text-right"
           data-testid="associated-amount"
         >
-          <span>
-            {integers}
-            {separator}
-          </span>
+          <span>{integers}.</span>
           <span>{decimalsPlaces}</span>
         </span>
       )}
@@ -113,10 +110,7 @@ export const WalletCardAsset = ({
   border,
   subheading,
 }: WalletCardAssetProps) => {
-  const [integers, decimalsPlaces, separator] = useNumberParts(
-    balance,
-    decimals
-  );
+  const [integers, decimalsPlaces] = useNumberParts(balance, decimals);
 
   return (
     <div className="flex flex-nowrap mt-2 mb-4">
@@ -138,10 +132,7 @@ export const WalletCardAsset = ({
           </div>
         </div>
         <div className="px-2 basis-full font-mono" data-testid="currency-value">
-          <span>
-            {integers}
-            {separator}
-          </span>
+          <span>{integers}.</span>
           <span className="text-neutral-400">{decimalsPlaces}</span>
         </div>
       </div>

apps/trading/components/accounts-menu/accounts-menu.tsx

@@ -1,5 +1,5 @@
 import { t } from '@vegaprotocol/i18n';
-import { Intent, TradingButton } from '@vegaprotocol/ui-toolkit';
+import { TradingButton } from '@vegaprotocol/ui-toolkit';
 import { ViewType, useSidebar } from '../sidebar';
 
 export const AccountsMenu = () => {
@@ -8,7 +8,6 @@ export const AccountsMenu = () => {
   return (
     <>
       <TradingButton
-        intent={Intent.Primary}
         size="extra-small"
         data-testid="open-transfer"
         onClick={() => setView({ type: ViewType.Transfer })}
@@ -16,7 +15,6 @@ export const AccountsMenu = () => {
         {t('Transfer')}
       </TradingButton>
       <TradingButton
-        intent={Intent.Primary}
         size="extra-small"
         onClick={() => setView({ type: ViewType.Deposit })}
       >

apps/trading/components/deposits-menu/deposits-menu.tsx

@@ -1,5 +1,5 @@
 import { t } from '@vegaprotocol/i18n';
-import { Intent, TradingButton } from '@vegaprotocol/ui-toolkit';
+import { TradingButton } from '@vegaprotocol/ui-toolkit';
 import { ViewType, useSidebar } from '../sidebar';
 
 export const DepositsMenu = () => {
@@ -7,7 +7,6 @@ export const DepositsMenu = () => {
 
   return (
     <TradingButton
-      intent={Intent.Primary}
       size="extra-small"
       onClick={() => setView({ type: ViewType.Deposit })}
       data-testid="deposit-button"

apps/trading/components/positions-menu/positions-menu.tsx

@@ -1,5 +1,5 @@
 import { t } from '@vegaprotocol/i18n';
-import { Intent, TradingButton } from '@vegaprotocol/ui-toolkit';
+import { TradingButton } from '@vegaprotocol/ui-toolkit';
 import { usePositionsStore } from '../positions-container';
 
 export const PositionsMenu = () => {
@@ -7,7 +7,6 @@ export const PositionsMenu = () => {
   const toggle = usePositionsStore((store) => store.toggleClosedMarkets);
   return (
     <TradingButton
-      intent={Intent.Primary}
       size="extra-small"
       data-testid="open-transfer"
       onClick={toggle}

apps/trading/components/withdrawals-menu/withdrawals-menu.tsx

@@ -1,5 +1,5 @@
 import { t } from '@vegaprotocol/i18n';
-import { Intent, TradingButton } from '@vegaprotocol/ui-toolkit';
+import { TradingButton } from '@vegaprotocol/ui-toolkit';
 import { ViewType, useSidebar } from '../sidebar';
 
 export const WithdrawalsMenu = () => {
@@ -7,7 +7,6 @@ export const WithdrawalsMenu = () => {
 
   return (
     <TradingButton
-      intent={Intent.Primary}
       size="extra-small"
       onClick={() => setView({ type: ViewType.Withdraw })}
       data-testid="withdraw-dialog-button"

libs/candles-chart/src/lib/candles-menu.spec.tsx

@@ -7,8 +7,8 @@ describe('CandlesMenu', () => {
     render(<CandlesMenu />);
 
     await userEvent.click(
-      screen.getByText('Studies', {
-        selector: '[type="button"]',
+      screen.getByRole('button', {
+        name: 'Studies',
       })
     );
     expect(await screen.findByRole('menu')).toBeInTheDocument();

libs/candles-chart/src/lib/candles-menu.tsx

@@ -10,13 +10,14 @@ import {
   studyLabels,
 } from 'pennant';
 import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItemIndicator,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuTrigger,
+  TradingButton,
+  TradingDropdown,
+  TradingDropdownCheckboxItem,
+  TradingDropdownContent,
+  TradingDropdownItemIndicator,
+  TradingDropdownRadioGroup,
+  TradingDropdownRadioItem,
+  TradingDropdownTrigger,
   Icon,
 } from '@vegaprotocol/ui-toolkit';
 import type { IconName } from '@blueprintjs/icons';
@@ -44,69 +45,76 @@ export const CandlesMenu = () => {
   } = useCandlesChartSettings();
   const triggerClasses = 'text-xs';
   const contentAlign = 'end';
+  const triggerButtonProps = { size: 'extra-small' } as const;
 
   return (
     <>
-      <DropdownMenu
+      <TradingDropdown
         trigger={
-          <DropdownMenuTrigger className={triggerClasses}>
-            {t(`Interval: ${intervalLabels[interval]}`)}
-          </DropdownMenuTrigger>
+          <TradingDropdownTrigger className={triggerClasses}>
+            <TradingButton {...triggerButtonProps}>
+              {t(`Interval: ${intervalLabels[interval]}`)}
+            </TradingButton>
+          </TradingDropdownTrigger>
         }
       >
-        <DropdownMenuContent align={contentAlign}>
-          <DropdownMenuRadioGroup
+        <TradingDropdownContent align={contentAlign}>
+          <TradingDropdownRadioGroup
             value={interval}
             onValueChange={(value) => {
               setInterval(value as Interval);
             }}
           >
             {Object.values(Interval).map((timeInterval) => (
-              <DropdownMenuRadioItem
+              <TradingDropdownRadioItem
                 key={timeInterval}
                 inset
                 value={timeInterval}
               >
                 {intervalLabels[timeInterval]}
-                <DropdownMenuItemIndicator />
-              </DropdownMenuRadioItem>
+                <TradingDropdownItemIndicator />
+              </TradingDropdownRadioItem>
             ))}
-          </DropdownMenuRadioGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu
+          </TradingDropdownRadioGroup>
+        </TradingDropdownContent>
+      </TradingDropdown>
+      <TradingDropdown
         trigger={
-          <DropdownMenuTrigger className={triggerClasses}>
-            <Icon name={chartTypeIcon.get(chartType) as IconName} />
-          </DropdownMenuTrigger>
+          <TradingDropdownTrigger className={triggerClasses}>
+            <TradingButton {...triggerButtonProps}>
+              <Icon name={chartTypeIcon.get(chartType) as IconName} />
+            </TradingButton>
+          </TradingDropdownTrigger>
         }
       >
-        <DropdownMenuContent align={contentAlign}>
-          <DropdownMenuRadioGroup
+        <TradingDropdownContent align={contentAlign}>
+          <TradingDropdownRadioGroup
             value={chartType}
             onValueChange={(value) => {
               setType(value as ChartType);
             }}
           >
             {Object.values(ChartType).map((type) => (
-              <DropdownMenuRadioItem key={type} inset value={type}>
+              <TradingDropdownRadioItem key={type} inset value={type}>
                 {chartTypeLabels[type]}
-                <DropdownMenuItemIndicator />
-              </DropdownMenuRadioItem>
+                <TradingDropdownItemIndicator />
+              </TradingDropdownRadioItem>
             ))}
-          </DropdownMenuRadioGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu
+          </TradingDropdownRadioGroup>
+        </TradingDropdownContent>
+      </TradingDropdown>
+      <TradingDropdown
         trigger={
-          <DropdownMenuTrigger className={triggerClasses}>
-            {t('Overlays')}
-          </DropdownMenuTrigger>
+          <TradingDropdownTrigger className={triggerClasses}>
+            <TradingButton {...triggerButtonProps}>
+              {t('Overlays')}
+            </TradingButton>
+          </TradingDropdownTrigger>
         }
       >
-        <DropdownMenuContent align={contentAlign}>
+        <TradingDropdownContent align={contentAlign}>
           {Object.values(Overlay).map((overlay) => (
-            <DropdownMenuCheckboxItem
+            <TradingDropdownCheckboxItem
               key={overlay}
               checked={overlays.includes(overlay)}
               onCheckedChange={() => {
@@ -121,21 +129,23 @@ export const CandlesMenu = () => {
               }}
             >
               {overlayLabels[overlay]}
-              <DropdownMenuItemIndicator />
-            </DropdownMenuCheckboxItem>
+              <TradingDropdownItemIndicator />
+            </TradingDropdownCheckboxItem>
           ))}
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu
+        </TradingDropdownContent>
+      </TradingDropdown>
+      <TradingDropdown
         trigger={
-          <DropdownMenuTrigger className={triggerClasses}>
-            {t('Studies')}
-          </DropdownMenuTrigger>
+          <TradingDropdownTrigger className={triggerClasses}>
+            <TradingButton {...triggerButtonProps}>
+              {t('Studies')}
+            </TradingButton>
+          </TradingDropdownTrigger>
         }
       >
-        <DropdownMenuContent align={contentAlign}>
+        <TradingDropdownContent align={contentAlign}>
           {Object.values(Study).map((study) => (
-            <DropdownMenuCheckboxItem
+            <TradingDropdownCheckboxItem
               key={study}
               checked={studies.includes(study)}
               onCheckedChange={() => {
@@ -150,11 +160,11 @@ export const CandlesMenu = () => {
               }}
             >
               {studyLabels[study]}
-              <DropdownMenuItemIndicator />
-            </DropdownMenuCheckboxItem>
+              <TradingDropdownItemIndicator />
+            </TradingDropdownCheckboxItem>
           ))}
-        </DropdownMenuContent>
-      </DropdownMenu>
+        </TradingDropdownContent>
+      </TradingDropdown>
     </>
   );
 };

libs/orders/src/lib/components/open-orders-menu/open-orders-menu.tsx

@@ -1,5 +1,5 @@
 import { t } from '@vegaprotocol/i18n';
-import { Intent, TradingButton } from '@vegaprotocol/ui-toolkit';
+import { TradingButton } from '@vegaprotocol/ui-toolkit';
 import { useVegaTransactionStore, useVegaWallet } from '@vegaprotocol/wallet';
 import { useHasAmendableOrder } from '../../order-hooks';
 
@@ -28,12 +28,7 @@ export const OpenOrdersMenu = ({ marketId }: { marketId: string }) => {
 };
 
 const CancelAllOrdersButton = ({ onClick }: { onClick: () => void }) => (
-  <TradingButton
-    intent={Intent.Primary}
-    size="extra-small"
-    onClick={onClick}
-    data-testid="cancelAll"
-  >
+  <TradingButton size="extra-small" onClick={onClick} data-testid="cancelAll">
     {t('Cancel all')}
   </TradingButton>
 );

libs/react-helpers/src/hooks/use-number-parts.ts

@@ -5,6 +5,6 @@ import { toNumberParts } from '@vegaprotocol/utils';
 export const useNumberParts = (
   value: BigNumber | null | undefined,
   decimals: number
-): [integers: string, decimalPlaces: string, separator: string | undefined] => {
+): [integers: string, decimalPlaces: string] => {
   return useMemo(() => toNumberParts(value, decimals), [decimals, value]);
 };

libs/utils/src/lib/format/number.spec.ts

@@ -84,17 +84,17 @@ describe('number utils', () => {
 
   describe('toNumberParts', () => {
     it.each([
-      { v: null, d: 3, o: ['0', '000', '.'] },
-      { v: undefined, d: 3, o: ['0', '000', '.'] },
-      { v: new BigNumber(123), d: 3, o: ['123', '00', '.'] },
-      { v: new BigNumber(123.123), d: 3, o: ['123', '123', '.'] },
-      { v: new BigNumber(123.123), d: 6, o: ['123', '123', '.'] },
-      { v: new BigNumber(123.123), d: 0, o: ['123', '', '.'] },
-      { v: new BigNumber(123), d: undefined, o: ['123', '00', '.'] },
+      { v: null, d: 3, o: ['0', '000'] },
+      { v: undefined, d: 3, o: ['0', '000'] },
+      { v: new BigNumber(123), d: 3, o: ['123', '00'] },
+      { v: new BigNumber(123.123), d: 3, o: ['123', '123'] },
+      { v: new BigNumber(123.123), d: 6, o: ['123', '123'] },
+      { v: new BigNumber(123.123), d: 0, o: ['123', ''] },
+      { v: new BigNumber(123), d: undefined, o: ['123', '00'] },
       {
         v: new BigNumber(30000),
         d: undefined,
-        o: ['30,000', '00', '.'],
+        o: ['30,000', '00'],
       },
     ])('returns correct tuple given the different arguments', ({ v, d, o }) => {
       expect(toNumberParts(v, d)).toStrictEqual(o);

libs/utils/src/lib/format/number.ts

@@ -163,15 +163,15 @@ export const formatNumberPercentage = (value: BigNumber, decimals?: number) => {
 export const toNumberParts = (
   value: BigNumber | null | undefined,
   decimals = 18
-): [integers: string, decimalPlaces: string, separator: string] => {
+): [integers: string, decimalPlaces: string] => {
   if (!value) {
-    return ['0', '0'.repeat(decimals), '.'];
+    return ['0', '0'.repeat(decimals)];
   }
   const separator = getDecimalSeparator() || '.';
   const [integers, decimalsPlaces] = formatNumber(value, decimals)
     .toString()
     .split(separator);
-  return [integers, decimalsPlaces || '', separator];
+  return [integers, decimalsPlaces || ''];
 };
 
 export const isNumeric = (