feat: use Switch instead of AutoCompleteRadioGroup

taskany-inc · May 24, 2024 · 60efaa9 · 60efaa9
1 parent dbeccaf
commit 60efaa9
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 23 deletions.
diff --git a/cypress/e2e/goalDependencies.cy.ts b/cypress/e2e/goalDependencies.cy.ts
@@ -2,8 +2,8 @@ import '../support';
 import { routes } from '../../src/hooks/router';
 import {
     goalDependenciesInput,
-    goalDependenciesRadios,
     goalDependenciesSuggestionItemTitle,
+    goalDependenciesSwitch,
     goalDependenciesTrigger,
     goalDependencyGoalsListItem,
     goalDependencyKindBlocks,
@@ -89,7 +89,7 @@ const checkList = (
 
 const addDependency = (title: string, relationKind: keyof typeof dependencyKind) => {
     cy.get(goalDependenciesInput.query).type(title);
-    cy.get(goalDependenciesRadios.query).get(`input[type="radio"][value="${relationKind}"]`).click();
+    cy.get(goalDependenciesSwitch.query).get(`button[value="${relationKind}"]`).click();
 
     cy.get(goalDependenciesSuggestionItemTitle.query)
         .filter(`:contains(${title})`)
@@ -107,12 +107,8 @@ const checkSelectingDependencies = () => {
 
         it('dependencies kind should exist', () => {
             Object.values(dependencyKind).forEach((kind) => {
-                cy.get(goalDependenciesRadios.query).get(`input[type="radio"][value="${kind}"]`).should('exist');
+                cy.get(goalDependenciesSwitch.query).get(`button[value="${kind}"]`).should('exist');
             });
-
-            cy.get(goalDependenciesRadios.query)
-                .get(`input[type="radio"][value="${dependencyKind.blocks}"]`)
-                .should('be.checked');
         });
 
         it('add blocked dependency', () => {

diff --git a/src/components/GoalDependency/GoalDependency.module.css b/src/components/GoalDependency/GoalDependency.module.css
@@ -1,3 +1,8 @@
 .GoalDependencyCheckbox {
     margin: 0;
+}
+
+.DependencyKindSwitch {
+    margin: var(--gap-s) 0;
+    display: inline-flex;
 }
diff --git a/src/components/GoalDependency/GoalDependency.tsx b/src/components/GoalDependency/GoalDependency.tsx
@@ -1,6 +1,5 @@
 import { FC, useCallback, useMemo, useState } from 'react';
-import { AutoCompleteRadioGroup, CheckboxInput } from '@taskany/bricks';
-import { UserGroup } from '@taskany/bricks/harmony';
+import { UserGroup, Checkbox, Switch, SwitchControl } from '@taskany/bricks/harmony';
 import { Goal } from '@prisma/client';
 
 import { trpc } from '../../utils/trpcClient';
@@ -12,8 +11,8 @@ import { safeUserData } from '../../utils/getUserName';
 import { GoalSelect } from '../GoalSelect/GoalSelect';
 import {
     goalDependenciesInput,
-    goalDependenciesRadios,
     goalDependenciesSuggestionItemTitle,
+    goalDependenciesSwitch,
 } from '../../utils/domObjects';
 
 import { tr } from './GoalDependency.i18n';
@@ -77,11 +76,7 @@ export const GoalDependency: FC<GoalDependencyProps> = ({ id, items = [], onSubm
                 <GoalListItemCompact
                     icon
                     rawIcon={
-                        <CheckboxInput
-                            className={s.GoalDependencyCheckbox}
-                            checked={props.active}
-                            value={props.item.id}
-                        />
+                        <Checkbox className={s.GoalDependencyCheckbox} checked={props.active} value={props.item.id} />
                     }
                     item={props.item}
                     columns={[
@@ -117,14 +112,16 @@ export const GoalDependency: FC<GoalDependencyProps> = ({ id, items = [], onSubm
             )}
         >
             <FilterAutoCompleteInput onChange={setGoalQuery} autoFocus {...goalDependenciesInput.attr} />
-            <AutoCompleteRadioGroup
-                title={tr('Kind')}
-                items={radios}
-                name="Kind"
-                onChange={({ value }) => setKind(value)}
+            <Switch
+                className={s.DependencyKindSwitch}
                 value={kind}
-                {...goalDependenciesRadios.attr}
-            />
+                onChange={(_, value) => setKind(value as dependencyKind)}
+                {...goalDependenciesSwitch.attr}
+            >
+                {radios.map((item) => (
+                    <SwitchControl key={item.value} value={item.value} text={item.title} />
+                ))}
+            </Switch>
         </GoalSelect>
     );
 };
diff --git a/src/utils/domObjects.ts b/src/utils/domObjects.ts
@@ -127,7 +127,7 @@ export const userSettingsLogoutButton = userSettings.add('logoutButton');
 
 export const goalDependencies = DO('goalDependencies');
 export const goalDependenciesTrigger = goalDependencies.add('trigger');
-export const goalDependenciesRadios = goalDependencies.add('radios');
+export const goalDependenciesSwitch = goalDependencies.add('switch');
 export const goalDependenciesInput = goalDependencies.add('input');
 export const goalDependenciesSuggestions = goalDependencies.add('suggestions');
 export const goalDependenciesSuggestionItemTitle = goalDependencies.add('suggestionItemTitle');