Skip to content

Commit 2662e83

Browse files
fgatti675fgatti675
committed
Renamed all UI component sizes
1 parent 3f7329c commit 2662e83

File tree

73 files changed

+243
-173
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

73 files changed

+243
-173
lines changed

‎examples/example_cloud/src/custom_entity_view/ProductDetailPreview.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ export function ProductDetailPreview({
163163
<Label className="text-base" htmlFor="quantity">
164164
Quantity
165165
</Label>
166-
<Select size={"small"} value={String(quantity)}>
166+
<Select size={"medium"} value={String(quantity)}>
167167
<SelectItem value="1">1</SelectItem>
168168
<SelectItem value="2">2</SelectItem>
169169
<SelectItem value="3">3</SelectItem>

‎examples/example_pro/src/FirestoreApp/collection_actions/SampleCollectionActions.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export function CustomFiltersActions({
5353
</IconButton> : undefined}
5454
renderValue={(value) => value}
5555
onValueChange={updateFilter}
56-
size={"small"}
56+
size={"medium"}
5757
value={categoryFilterValue}>
5858
<SelectItem value="cameras">Cameras</SelectItem>
5959
<SelectItem value="bath">Bath</SelectItem>

‎examples/example_pro/src/FirestoreApp/custom_field/RecursiveField.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,8 @@ function UnionField({
167167
className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}
168168
/>
169169
<Paper key={`form_control_${props.propertyKey}_${type}`} className={"flex flex-col gap-2 p-2"}>
170-
<Select size="small" value={type}
170+
<Select size="medium"
171+
value={type}
171172
onValueChange={setType}
172173
renderValue={(value) => <div>{value}</div>}>
173174
<SelectItem value={"string"}>String</SelectItem>

‎examples/example_pro/src/FirestoreApp/views/ClientUIComponentsShowcase.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ export default function ClientUIComponentsShowcase({
112112
<Button size="small">Small Button</Button>
113113
<Button size="medium">Medium Button</Button>
114114
<Button size="large">Large Button</Button>
115-
<Button variant={"ghost"}>Ghost Button</Button>
115+
<Button variant={"neutral"}>Neutral Button</Button>
116116
<Button variant={"text"}>Text Button</Button>
117117
<Button variant={"outlined"}>Outlined Button</Button>
118118
</div>
@@ -144,6 +144,7 @@ export default function ClientUIComponentsShowcase({
144144
</IconButton>
145145
<Typography variant="subtitle2">File Upload</Typography>
146146
<FileUpload
147+
size={"large"}
147148
accept={{ "image/*": [] }}
148149
onFilesAdded={() => {
149150
}}
@@ -235,20 +236,20 @@ export default function ClientUIComponentsShowcase({
235236
<Typography variant="subtitle2">Boolean Switch</Typography>
236237
<div className={"flex flex-row items-center gap-2"}>
237238
<BooleanSwitch value={checked}
238-
size="medium"
239+
size="large"
239240
onValueChange={() => {
240241
setChecked(!checked)
241242
}}/>
242243
<BooleanSwitch value={checked}
243244
onValueChange={() => {
244245
setChecked(!checked)
245246
}}
246-
size="small"/>
247+
size="medium"/>
247248
<BooleanSwitch value={checked}
248249
onValueChange={() => {
249250
setChecked(!checked)
250251
}}
251-
size="smallest"/>
252+
size="small"/>
252253
</div>
253254
</Card>
254255

@@ -487,7 +488,8 @@ export default function ClientUIComponentsShowcase({
487488
<ArrowForwardIcon size="smallest"/>
488489
</IconButton>
489490
<Typography variant="subtitle2">DateTime Field</Typography>
490-
<DateTimeField value={selectedDate ?? undefined} onChange={setSelectedDate} label="Select a date"
491+
<DateTimeField value={selectedDate ?? undefined}
492+
onChange={setSelectedDate} label="Select a date"
491493
mode="date"/>
492494
<DateTimeField value={new Date()} onChange={setSelectedDate}
493495
label="Select date and time" mode="date_time"/>

‎examples/example_pro/src/FirestoreApp/views/ExampleCMSView.tsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,10 @@ import {
2020
MultiSelect,
2121
MultiSelectItem,
2222
Paper,
23+
Select,
24+
SelectItem,
2325
Sheet,
26+
TextField,
2427
Tooltip,
2528
Typography
2629
} from "@firecms/ui";
@@ -159,6 +162,23 @@ export function ExampleCMSView() {
159162
</div>
160163
</div>
161164

165+
<div className="flex gap-2">
166+
<TextField
167+
size={"small"}
168+
placeholder="Invite others by email"
169+
className="flex-grow"
170+
endAdornment={<Select
171+
size={"medium"}
172+
value={"read"}>
173+
<SelectItem value={"write"}>Can edit</SelectItem>
174+
<SelectItem value={"read"}>Can view</SelectItem>
175+
</Select>}
176+
/>
177+
<Button variant="neutral">
178+
Invite
179+
</Button>
180+
</div>
181+
162182
<div>
163183
<Button
164184
variant={"outlined"}

‎examples/example_pro/src/MedMot/collections/fields/ExerciseReferenceWidget.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -180,10 +180,10 @@ export function ExerciseReferenceWidget<M extends Record<string, any>>({
180180
propertyKey={key as string}
181181
value={(entity.values)[key]}
182182
property={property as ResolvedProperty}
183-
size={"smallest"}/>
183+
size={"small"}/>
184184
: <SkeletonPropertyComponent
185185
property={property as ResolvedProperty}
186-
size={"smallest"}/>}
186+
size={"small"}/>}
187187
</ErrorBoundary>
188188
<ExerciseTitle entity={{ path: value.path, id: value.id } as Entity<Exercise>}/>
189189
</div>

‎examples/example_pro/src/MedMot/custom_views/InvoicesExport.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -215,13 +215,13 @@ export function InvoicesExport() {
215215
}}/>
216216
<div className="flex flex-row gap-2">
217217
<DateTimeField
218-
size={"small"}
218+
size={"medium"}
219219
label="Start Date"
220220
value={startDate}
221221
onChange={setStartDate}
222222
/>
223223
<DateTimeField
224-
size={"small"}
224+
size={"medium"}
225225
label="End date"
226226
value={endDate}
227227
onChange={setEndDate}

‎examples/example_pro/src/template/collections/entity_views/ProductDetailPreview.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,8 @@ export function ProductDetailPreview({
164164
<Label className="text-base" htmlFor="quantity">
165165
Quantity
166166
</Label>
167-
<Select size={"small"} value={String(quantity)}
167+
<Select size={"medium"}
168+
value={String(quantity)}
168169
onValueChange={(value) => setQuantity(Number(value))}>
169170
<SelectItem value="1">1</SelectItem>
170171
<SelectItem value="2">2</SelectItem>

‎packages/cli/templates/template_pro/src/collections/entity_views/ProductDetailPreview.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,8 @@ export function ProductDetailPreview({
164164
<Label className="text-base" htmlFor="quantity">
165165
Quantity
166166
</Label>
167-
<Select size={"small"} value={String(quantity)}
167+
<Select size={"medium"}
168+
value={String(quantity)}
168169
onValueChange={(value) => setQuantity(Number(value))}>
169170
<SelectItem value="1">1</SelectItem>
170171
<SelectItem value="2">2</SelectItem>

‎packages/collection_editor/src/ui/collection_editor/CollectionDetailsForm.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -298,6 +298,7 @@ export function CollectionDetailsForm({
298298
<div className={"col-span-12"}>
299299
<Select
300300
name="defaultSize"
301+
size={"large"}
301302
label="Default row size"
302303
position={"item-aligned"}
303304
onChange={handleChange}
@@ -318,6 +319,7 @@ export function CollectionDetailsForm({
318319
name="customId"
319320
label="Document IDs generation"
320321
position={"item-aligned"}
322+
size={"large"}
321323
disabled={customIdValue === "code_defined"}
322324
onValueChange={(v) => {
323325
if (v === "code_defined")
@@ -416,7 +418,7 @@ function DefaultDatabaseField({
416418
return <Tooltip title={"Database ID"}
417419
side={"top"}
418420
align={"start"}>
419-
<TextField size={"smallest"}
421+
<TextField size={"small"}
420422
invisible={true}
421423
inputClassName={"text-end"}
422424
value={databaseId ?? ""}

‎packages/collection_editor/src/ui/collection_editor/import/CollectionEditorImportMapping.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -235,6 +235,7 @@ function PropertySelect({
235235
open={selectOpen}
236236
onOpenChange={setSelectOpen}
237237
invisible={true}
238+
size={"large"}
238239
className={"w-full"}
239240
disabled={disabled}
240241
error={!widget}

‎packages/collection_editor/src/ui/collection_editor/properties/DateTimePropertyField.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export function DateTimePropertyField({ disabled }: {
3131
<Select name={modePath}
3232
value={modeValue ?? "date"}
3333
error={Boolean(modeError)}
34+
size={"large"}
3435
onValueChange={(v) => setFieldValue(modePath, v)}
3536
label={"Mode"}
3637
renderValue={(v) => {
@@ -54,6 +55,7 @@ export function DateTimePropertyField({ disabled }: {
5455
<div>
5556
<Select name={autoValuePath}
5657
disabled={disabled}
58+
size={"large"}
5759
value={autoValueValue ?? ""}
5860
onValueChange={(v) => setFieldValue(autoValuePath, v === "none" ? null : v)}
5961
renderValue={(v) => {

‎packages/collection_editor/src/ui/collection_editor/properties/EnumPropertyField.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ export function EnumPropertyField({
9696
onValueChange={(value: string) => {
9797
setFieldValue("defaultValue", value);
9898
}}
99+
size={"large"}
99100
label={"Default value"}
100101
value={defaultValue ?? ""}>
101102
{enumValues

‎packages/collection_editor/src/ui/collection_editor/properties/ReferencePropertyField.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ export function CollectionsSelect({
8989
value={value ?? ""}
9090
position={"item-aligned"}
9191
name={pathPath}
92+
size={"large"}
9293
onChange={handleChange}
9394
label={"Target collection"}
9495
renderValue={(selected) => {

‎packages/data_enhancement/src/components/fields/AdvancedTextField.tsx

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export function AdvancedTextField<T extends string | number>({
2121
highlight,
2222
disabled,
2323
error,
24-
size = "medium",
24+
size = "large",
2525
className
2626
}: {
2727
inputType: InputType<T>,
@@ -32,7 +32,7 @@ export function AdvancedTextField<T extends string | number>({
3232
multiline?: boolean,
3333
disabled?: boolean,
3434
error?: boolean,
35-
size?: "smallest" | "small" | "medium",
35+
size?: "small" | "medium" | "large",
3636
className?: string,
3737
}) {
3838

@@ -117,9 +117,9 @@ export function AdvancedTextField<T extends string | number>({
117117
disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
118118
error ? "border border-red-500 dark:border-red-600" : "",
119119
{
120-
"min-h-[32px]": size === "smallest",
121-
"min-h-[48px]": size === "small",
122-
"min-h-[64px]": size === "medium"
120+
"min-h-[32px]": size === "small",
121+
"min-h-[48px]": size === "medium",
122+
"min-h-[64px]": size === "large"
123123
},
124124
className)}>
125125

@@ -128,7 +128,7 @@ export function AdvancedTextField<T extends string | number>({
128128
className={cls("absolute pointer-events-none",
129129
!error ? (focused ? "text-primary" : "text-text-secondary dark:text-text-secondary-dark") : "text-red-500 dark:text-red-600",
130130
disabled ? "opacity-50" : "",
131-
size === "medium" ? "top-1" : "-top-1",)}
131+
size === "large" ? "top-1" : "-top-1",)}
132132
shrink={hasValue || focused}
133133
>
134134
{label}
@@ -138,8 +138,8 @@ export function AdvancedTextField<T extends string | number>({
138138
<div ref={ref}
139139
className={cls("inset-0 whitespace-pre-wrap overflow-x-auto select-none pb-2 px-3",
140140
{
141-
"pt-8": size === "medium",
142-
"pt-4": size === "small" || size === "smallest",
141+
"pt-8": size === "large",
142+
"pt-4": size === "medium" || size === "small",
143143
})}>
144144

145145
{addLineBreaks(originalValue, !endsWithHighlight && multiline)}
@@ -154,15 +154,15 @@ export function AdvancedTextField<T extends string | number>({
154154
<TextareaAutosize
155155
className={cls(
156156
{
157-
"min-h-[32px]": size === "smallest",
158-
"min-h-[48px]": size === "small",
159-
"min-h-[64px]": size === "medium"
157+
"min-h-[32px]": size === "small",
158+
"min-h-[48px]": size === "medium",
159+
"min-h-[64px]": size === "large"
160160
},
161161
"rounded-md resize-none w-full outline-none text-base bg-transparent ",
162162
disabled && "border border-transparent outline-none opacity-50 text-surface-600 dark:text-surface-500",
163163
"absolute top-0 right-0 left-0 max-w-full bg-transparent text-transparent caret-surface-800 dark:caret-surface-200",
164164
"pt-8 pb-2 px-3",
165-
label ? (size === "medium" ? "pt-8 pb-2" : "pt-4 pb-2") : "py-2"
165+
label ? (size === "large" ? "pt-8 pb-2" : "pt-4 pb-2") : "py-2"
166166
)}
167167
ignoreBoxSizing={true}
168168
ref={inputRef}

‎packages/data_import/src/components/DataNewPropertiesMapping.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ function IdSelectField({
176176
}) {
177177
return <div>
178178
<Select
179-
size={"small"}
179+
size={"medium"}
180180
value={idColumn ?? ""}
181181
onChange={(event) => {
182182
const value = event.target.value;
@@ -203,12 +203,12 @@ function DefaultValuesField({
203203
defaultValue
204204
}: { property: Property, onValueChange: (value: any) => void, defaultValue?: any }) {
205205
if (property.dataType === "string") {
206-
return <TextField size={"small"}
206+
return <TextField size={"medium"}
207207
placeholder={"Default value"}
208208
value={defaultValue ?? ""}
209209
onChange={(event) => onValueChange(event.target.value)}/>;
210210
} else if (property.dataType === "number") {
211-
return <TextField size={"small"}
211+
return <TextField size={"medium"}
212212
type={"number"}
213213
value={defaultValue ?? ""}
214214
placeholder={"Default value"}
@@ -228,7 +228,7 @@ function DefaultValuesField({
228228
} else if (property.dataType === "date") {
229229
return <DateTimeField
230230
mode={property.mode ?? "date"}
231-
size={"small"}
231+
size={"medium"}
232232
value={defaultValue ?? undefined}
233233
onChange={(dateValue: Date | null) => {
234234
onValueChange(dateValue);

‎packages/data_import/src/components/ImportFileUpload.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export function ImportFileUpload({ onDataAdded }: {
1818
"application/json": [".json"],
1919
}}
2020
preventDropOnDocument={true}
21-
size={"small"}
21+
size={"medium"}
2222
maxFiles={1}
2323
uploadDescription={<><UploadIcon/>Drag and drop a file here or click to upload</>}
2424
onFilesAdded={(files: File[]) => {

‎packages/data_import/src/components/ImportNewPropertyFieldPreview.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export function ImportNewPropertyFieldPreview({
4040
<div className={"flex flex-row items-center gap-2"}>
4141
{includeName &&
4242
<TextField
43-
size={"small"}
43+
size={"medium"}
4444
className={"text-base grow"}
4545
value={property?.name ?? ""}
4646
onChange={(e) => {

‎packages/data_import/src/import/ImportCollectionAction.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -276,6 +276,7 @@ function PropertyTreeSelect({
276276
};
277277

278278
return <Select value={isIdColumn ? internalIDValue : (selectedPropertyKey ?? undefined)}
279+
size={"large"}
279280
onValueChange={onSelectValueChange}
280281
renderValue={renderValue}>
281282

‎packages/datatalk/src/components/SystemMessage.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,7 @@ function BadMessageIcon({
196196
selected={selected}
197197
setSelected={setSelected}/>
198198
</div>
199-
<TextField size={"smallest"}
199+
<TextField size={"small"}
200200
value={feedbackText}
201201
onChange={(e) => setFeedbackText(e.target.value)}
202202
placeholder={"Feel free to add specific details"}></TextField>

‎packages/firecms_cloud/src/components/PaywallDatabaseIdField.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export function PaywallDatabaseIdField() {
2929
</div>}>
3030
<TextField
3131
inputRef={ref}
32-
size={"smallest"}
32+
size={"small"}
3333
inputClassName={"text-end"}
3434
className={"bg-transparent dark:bg-transparent"}
3535
disabled={true}

‎packages/firecms_cloud/src/components/settings/ProjectSettings.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,7 @@ function LogoUploadField({ onNoSubscriptionPlan }: {
123123
};
124124

125125
return <FileUpload
126+
size={"large"}
126127
accept={{ "*/image": [] }}
127128
maxSize={2048 * 1024}
128129
onFilesAdded={onFilesAdded}

0 commit comments

Comments
 (0)