Skip to content

Commit 4a33fdd

Browse files
Copilotsix7
Copilot
and
six7
committed
Fix remaining Box component usage in ConfirmDialog, ConvertToDTCGModal, DownshiftInput, and InspectorMultiView
Co-authored-by: six7 <4548309+six7@users.noreply.github.com>
1 parent 2cc5e08 commit 4a33fdd

File tree

8 files changed

+130
-55
lines changed

8 files changed

+130
-55
lines changed

‎packages/tokens-studio-for-figma/src/app/components/ConfirmDialog.module.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.choiceContainer {
2+
display: flex;
3+
align-items: center;
4+
flex-direction: row;
5+
}

‎packages/tokens-studio-for-figma/src/app/components/ConfirmDialog.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import React from 'react';
22
import {
3-
Button, Box, Text, Checkbox, Label, TextInput, Stack,
3+
Button, Text, Checkbox, Label, TextInput, Stack,
44
} from '@tokens-studio/ui';
55
import useConfirm from '../hooks/useConfirm';
66
import Modal from './Modal';
7+
import styles from './ConfirmDialog.module.css';
78

89
const ChoiceCheckbox: React.FC<React.PropsWithChildren<React.PropsWithChildren<{
910
checked?: boolean
@@ -107,8 +108,8 @@ function ConfirmDialog() {
107108
{confirmState?.choices?.length ? (
108109
<Stack direction="column" align="start" gap={2}>
109110
{confirmState.choices.map((choice) => (
110-
<Box
111-
css={{ display: 'flex', alignItems: 'center', flexDirection: 'row' }}
111+
<div
112+
className={styles.choiceContainer}
112113
key={choice.key}
113114
>
114115
<ChoiceCheckbox
@@ -119,7 +120,7 @@ function ConfirmDialog() {
119120
<Label css={{ paddingLeft: '$3' }} htmlFor={choice.key}>
120121
{choice.label}
121122
</Label>
122-
</Box>
123+
</div>
123124
))}
124125
</Stack>
125126
) : null}

‎packages/tokens-studio-for-figma/src/app/components/ConvertToDTCGModal.module.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.convertImage {
2+
border-radius: var(--radii-small, 4px);
3+
}
4+
5+
.descriptionText {
6+
/* Text content wrapper */
7+
}

‎packages/tokens-studio-for-figma/src/app/components/ConvertToDTCGModal.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {
2-
Box, Button, Link, Stack,
2+
Button, Link, Stack,
33
} from '@tokens-studio/ui';
44
import React from 'react';
55
import { useDispatch, useSelector } from 'react-redux';
@@ -16,6 +16,7 @@ import w3cConvertImage from '@/app/assets/hints/w3cformat.png';
1616
import legacyConvertImage from '@/app/assets/hints/legacyformat.png';
1717
import { storageTypeSelector } from '@/selectors';
1818
import { StorageProviderType } from '@/constants/StorageProviderType';
19+
import styles from './ConvertToDTCGModal.module.css';
1920

2021
export function ConvertToDTCGModal() {
2122
const dispatch = useDispatch<Dispatch>();
@@ -52,10 +53,14 @@ export function ConvertToDTCGModal() {
5253
return (
5354
<Modal title={isDTCG ? t('w3cformatmodaltitle') : t('w3cconverttitle')} isOpen={showConvertTokenFormatModal} close={handleClose} showClose>
5455
<Stack direction="column" align="start" gap={4} css={{ color: '$fgMuted', fontSize: '$xsmall' }}>
55-
<Box as="img" src={isDTCG ? legacyConvertImage : w3cConvertImage} css={{ borderRadius: '$small' }} />
56-
<Box>
56+
<img
57+
src={isDTCG ? legacyConvertImage : w3cConvertImage}
58+
className={styles.convertImage}
59+
alt="Convert format"
60+
/>
61+
<div className={styles.descriptionText}>
5762
{isDTCG ? t('w3cformatmodaldescription') : t('legacyformatmodaldescription')}
58-
</Box>
63+
</div>
5964
<Stack gap={4} align="center">
6065
<Button variant="primary" onClick={handleConvert} disabled={hasRemoteChanges}>
6166
{isDTCG ? t('converttolegacy') : t('converttow3c')}

‎packages/tokens-studio-for-figma/src/app/components/DownshiftInput/DownshiftInput.module.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
.inputContainer {
2+
display: flex;
3+
position: relative;
4+
width: 100%;
5+
}
6+
7+
.popoverContainer {
8+
background-color: var(--colors-bg-canvas);
9+
border: 1px solid var(--colors-border-subtle);
10+
border-radius: var(--radii-medium, 6px);
11+
box-shadow: var(--shadows-context-menu);
12+
}
13+
14+
.headerContainer {
15+
display: flex;
16+
flex-direction: column;
17+
gap: var(--space-3, 12px);
18+
padding: var(--space-3, 12px);
19+
border-bottom: 1px solid var(--colors-border-subtle);
20+
}
21+
22+
.searchFieldContainer {
23+
display: flex;
24+
gap: var(--space-3, 12px);
25+
}
26+
27+
.noSuggestions {
28+
padding: var(--space-3, 12px);
29+
color: var(--colors-fg-muted);
30+
font-size: var(--font-sizes-small);
31+
}

‎packages/tokens-studio-for-figma/src/app/components/DownshiftInput/DownshiftInput.tsx‎

Lines changed: 12 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useCallback, useMemo } from 'react';
22
import Downshift from 'downshift';
33
import { useSelector, useDispatch } from 'react-redux';
44
import {
5-
Box, Stack, Tooltip, Text, IconButton,
5+
Stack, Tooltip, Text, IconButton,
66
} from '@tokens-studio/ui';
77
import * as Popover from '@radix-ui/react-popover';
88
import { ResolveTokenValuesResult } from '@/utils/tokenHelpers';
@@ -23,6 +23,7 @@ import {
2323
StyledList, StyledItem, StyledItemColor, StyledItemColorDiv, StyledItemName, StyledItemValue, StyledPart,
2424
} from './StyledDownshiftInput';
2525
import fuzzySearch from '@/utils/fuzzySearch';
26+
import styles from './DownshiftInput.module.css';
2627
import MentionsInput from './MentionInput';
2728
import getResolvedText from '@/utils/getResolvedTextValue';
2829
import { getColorSwatchStyle } from '@/utils/color/getColorSwatchStyle';
@@ -196,7 +197,7 @@ export const DownshiftInput: React.FunctionComponent<React.PropsWithChildren<Rea
196197
{label && !inlineLabel ? <Text size="small" bold>{label}</Text> : null}
197198
{error ? <ErrorValidation>{error}</ErrorValidation> : null}
198199
</Stack>
199-
<Box css={{ display: 'flex', position: 'relative', width: '100%' }} className="input">
200+
<div className={styles.inputContainer}>
200201
{!!inlineLabel && !prefix && (
201202
<Tooltip label={name}><StyledPrefix isText css={{ height: 'auto' }}>{label}</StyledPrefix></Tooltip>
202203
)}
@@ -233,30 +234,18 @@ export const DownshiftInput: React.FunctionComponent<React.PropsWithChildren<Rea
233234
/>
234235
<Popover.Portal>
235236
<Popover.Content side="bottom" align="end" sideOffset={4} style={{ pointerEvents: 'all', width: 'var(--radix-popover-trigger-width)' }}>
236-
<Box
237-
css={{
238-
backgroundColor: '$bgCanvas',
239-
border: '1px solid',
240-
borderColor: '$borderSubtle',
241-
borderRadius: '$medium',
242-
boxShadow: '$contextMenu',
243-
}}
244-
>
245-
<Box
246-
css={{
247-
display: 'flex', flexDirection: 'column', gap: '$3', padding: '$3', borderBottom: '1px solid $borderSubtle',
248-
}}
249-
>
237+
<div className={styles.popoverContainer}>
238+
<div className={styles.headerContainer}>
250239
{
251240
externalSearchField && (
252-
<Box css={{ display: 'flex', gap: '$3' }}>
241+
<div className={styles.searchFieldContainer}>
253242
<StyledButton isFocused={currentSearchField === 'Tokens'} onClick={handleChangeSearchField}>
254243
Tokens
255244
</StyledButton>
256245
<StyledButton isFocused={currentSearchField !== 'Tokens'} onClick={handleChangeSearchField}>
257246
{externalSearchField}
258247
</StyledButton>
259-
</Box>
248+
</div>
260249
)
261250
}
262251
<StyledDownshiftInput
@@ -266,7 +255,7 @@ export const DownshiftInput: React.FunctionComponent<React.PropsWithChildren<Rea
266255
getInputProps={getInputProps}
267256
data-testid="downshift-search-input"
268257
/>
269-
</Box>
258+
</div>
270259
{
271260
currentSearchField === 'Tokens' && filteredTokenItems.length > 0 && (
272261
<StyledList className="content scroll-container" height={Math.min(downShiftContainerHeight, 30 * filteredTokenItems.length)} width="100%" itemCount={filteredTokenItems.length} itemSize={30}>
@@ -350,17 +339,17 @@ export const DownshiftInput: React.FunctionComponent<React.PropsWithChildren<Rea
350339
}
351340
{
352341
((currentSearchField !== 'Tokens' && filteredValues.length === 0) || (currentSearchField === 'Tokens' && filteredTokenItems.length === 0)) && (
353-
<Box css={{ padding: '$3', color: '$fgMuted', fontSize: '$small' }}>
342+
<div className={styles.noSuggestions}>
354343
No suggestions found
355-
</Box>
344+
</div>
356345
)
357346
}
358-
</Box>
347+
</div>
359348
</Popover.Content>
360349
</Popover.Portal>
361350
</Popover.Root>
362351
)}
363-
</Box>
352+
</div>
364353
</div>
365354
)}
366355
</Downshift>

‎packages/tokens-studio-for-figma/src/app/components/InspectorMultiView.module.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
.container {
2+
padding: var(--space-4, 16px);
3+
display: flex;
4+
flex-direction: column;
5+
gap: var(--space-3, 12px);
6+
}
7+
8+
.headerContainer {
9+
display: inline-flex;
10+
padding-inline: var(--space-4, 16px);
11+
row-gap: var(--space-3, 12px);
12+
justify-content: space-between;
13+
}
14+
15+
.selectAllContainer {
16+
display: flex;
17+
align-items: center;
18+
gap: var(--space-3, 12px);
19+
font-size: var(--font-sizes-small);
20+
flex-basis: 80px;
21+
flex-shrink: 0;
22+
}
23+
24+
.actionsContainer {
25+
display: flex;
26+
flex-direction: row;
27+
flex-wrap: wrap;
28+
justify-content: flex-end;
29+
gap: var(--space-3, 12px);
30+
}
31+
32+
.bodyContainer {
33+
display: flex;
34+
flex-direction: column;
35+
flex-grow: 1;
36+
padding: var(--space-4, 16px);
37+
}
38+
39+
.resultsContainer {
40+
height: 100%;
41+
min-height: 200px;
42+
}
43+
44+
.checkboxList {
45+
display: flex;
46+
flex-direction: column;
47+
gap: var(--space-1, 4px);
48+
}

‎packages/tokens-studio-for-figma/src/app/components/InspectorMultiView.tsx‎

Lines changed: 13 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import { useSelector, useDispatch } from 'react-redux';
33
import { useTranslation } from 'react-i18next';
44
import {
5-
Box, Checkbox, Label, Stack, Button, EmptyState,
5+
Checkbox, Label, Stack, Button, EmptyState,
66
} from '@tokens-studio/ui';
77
import { Dispatch } from '../store';
88
import useTokens from '../store/useTokens';
@@ -17,6 +17,7 @@ import { NodeInfo } from '@/types/NodeInfo';
1717
import { StyleIdBackupKeys } from '@/constants/StyleIdBackupKeys';
1818
import OnboardingExplainer from './OnboardingExplainer';
1919
import BulkRemapModal from './modals/BulkRemapModal';
20+
import styles from './InspectorMultiView.module.css';
2021

2122
export default function InspectorMultiView({ resolvedTokens, tokenToSearch }: { resolvedTokens: SingleToken[], tokenToSearch: string }) {
2223
const { t } = useTranslation(['inspect']);
@@ -108,14 +109,8 @@ export default function InspectorMultiView({ resolvedTokens, tokenToSearch }: {
108109
return (
109110
<>
110111
{uiState.selectionValues.length > 0 && (
111-
<Box css={{
112-
display: 'inline-flex', paddingInline: '$4', rowGap: '$3', justifyContent: 'space-between',
113-
}}
114-
>
115-
<Box css={{
116-
display: 'flex', alignItems: 'center', gap: '$3', fontSize: '$small', flexBasis: '80px', flexShrink: 0,
117-
}}
118-
>
112+
<div className={styles.headerContainer}>
113+
<div className={styles.selectAllContainer}>
119114
<Checkbox
120115
checked={inspectState.selectedTokens.length === uiState.selectionValues.length}
121116
id="selectAll"
@@ -124,11 +119,8 @@ export default function InspectorMultiView({ resolvedTokens, tokenToSearch }: {
124119
<Label htmlFor="selectAll" css={{ fontSize: '$small', fontWeight: '$sansBold', whiteSpace: 'nowrap' }}>
125120
{t('selectAll')}
126121
</Label>
127-
</Box>
128-
<Box css={{
129-
display: 'flex', flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'flex-end', gap: '$3',
130-
}}
131-
>
122+
</div>
123+
<div className={styles.actionsContainer}>
132124
<Button size="small" onClick={handleShowBulkRemap} variant="secondary">
133125
{t('bulkRemap')}
134126
</Button>
@@ -138,19 +130,16 @@ export default function InspectorMultiView({ resolvedTokens, tokenToSearch }: {
138130
<Button size="small" onClick={removeTokens} disabled={inspectState.selectedTokens.length === 0} variant="danger">
139131
{t('removeSelected')}
140132
</Button>
141-
</Box>
142-
</Box>
133+
</div>
134+
</div>
143135
)}
144-
<Box
145-
css={{
146-
display: 'flex', flexDirection: 'column', flexGrow: 1, padding: '$4',
147-
}}
148-
className="content scroll-container"
136+
<div
137+
className={`${styles.bodyContainer} content scroll-container`}
149138
>
150139
{uiState.selectionValues.length > 0 ? (
151-
<Box css={{ display: 'flex', flexDirection: 'column', gap: '$1' }}>
140+
<div className={styles.checkboxList}>
152141
{Object.entries(groupedSelectionValues).map((group) => <InspectorTokenGroup key={`inspect-group-${group[0]}`} group={group as [Properties, SelectionGroup[]]} resolvedTokens={resolvedTokens} />)}
153-
</Box>
142+
</div>
154143
) : (
155144
<Stack direction="column" gap={4} css={{ padding: '$5', margin: 'auto' }}>
156145
<EmptyState title={uiState.selectedLayers > 0 ? t('noTokensFound') : t('noLayersSelected')} description={uiState.selectedLayers > 0 ? t('noLayersWithTokens') : t('selectLayer')} />
@@ -160,7 +149,7 @@ export default function InspectorMultiView({ resolvedTokens, tokenToSearch }: {
160149
)}
161150
</Stack>
162151
)}
163-
</Box>
152+
</div>
164153
{bulkRemapModalVisible && (
165154
<BulkRemapModal
166155
isOpen={bulkRemapModalVisible}

0 commit comments

Comments
 (0)