CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Align custom policy details with the Figma create modal so the add-field control, copy, and labels match the intended styling.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
adilallo
2026-08-25 09:49:10 -06:00
co-authored by Cursor
parent 963fa03c5c
commit 712437edc7
13 changed files with 88 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/controls/AddCustomField/AddCustomField.view.tsx
+24 -40
View File
@@ -38,15 +38,6 @@ function FieldTypeButton({
);
}
/**
* Stable block height for collapsed vs expanded so the Create dialog (`top-1/2 -translate-y-1/2`)
* does not shrink and re-center when toggling `active`.
*
* - Collapsed CTA: `py-12` (48+48) + inner row (`py-3` + 20px icon/line) ≈ 140px border-box.
* - Expanded: inner `p-4` (32) + Vertical tile (py 12+12, gap 8, 32px icon, 18px label) ≈ 114px — shorter without this floor.
*/
const ADD_CUSTOM_FIELD_SHELL_MIN_H_PX = 140;
function AddCustomFieldViewComponent({
active,
onPressAdd,
@@ -55,17 +46,12 @@ function AddCustomFieldViewComponent({
fieldTypeLabels,
className,
}: AddCustomFieldViewProps) {
const shellStyle = {
minHeight: ADD_CUSTOM_FIELD_SHELL_MIN_H_PX,
} as const;
if (!active) {
return (
<button
type="button"
onClick={onPressAdd}
style={shellStyle}
className={`flex w-full shrink-0 cursor-pointer items-center justify-center rounded-[var(--measures-radius-medium,8px)] bg-[var(--color-surface-default-secondary)] px-6 py-12 text-medium-label text-[var(--color-content-default-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)] ${className ?? ""}`.trim()}
className={`flex h-[88px] w-full shrink-0 cursor-pointer items-center justify-center rounded-[var(--measures-radius-medium,8px)] bg-[var(--color-surface-default-secondary)] px-6 text-medium-label text-[var(--color-content-default-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)] ${className ?? ""}`.trim()}
>
<span className="flex items-center gap-[var(--spacing-scale-006)] rounded-full px-4 py-3">
<svg
@@ -89,35 +75,33 @@ function AddCustomFieldViewComponent({
);
}
const expandedShellClasses = ["flex w-full shrink-0 flex-col", className ?? ""]
const expandedShellClasses = ["flex w-full shrink-0", className ?? ""]
.join(" ")
.trim();
return (
<div className={expandedShellClasses} style={shellStyle}>
<div className="flex w-full flex-col gap-3 rounded-[var(--measures-radius-medium,8px)] bg-[var(--color-surface-default-secondary)] p-4">
<div className="flex w-full flex-row flex-nowrap justify-center gap-3 overflow-x-auto max-sm:justify-start">
<FieldTypeButton
type="text"
label={fieldTypeLabels.text}
onSelect={onSelectFieldType}
/>
<FieldTypeButton
type="badges"
label={fieldTypeLabels.badges}
onSelect={onSelectFieldType}
/>
<FieldTypeButton
type="upload"
label={fieldTypeLabels.upload}
onSelect={onSelectFieldType}
/>
<FieldTypeButton
type="proportion"
label={fieldTypeLabels.proportion}
onSelect={onSelectFieldType}
/>
</div>
<div className={expandedShellClasses}>
<div className="grid w-full grid-cols-4 gap-3">
<FieldTypeButton
type="text"
label={fieldTypeLabels.text}
onSelect={onSelectFieldType}
/>
<FieldTypeButton
type="badges"
label={fieldTypeLabels.badges}
onSelect={onSelectFieldType}
/>
<FieldTypeButton
type="upload"
label={fieldTypeLabels.upload}
onSelect={onSelectFieldType}
/>
<FieldTypeButton
type="proportion"
label={fieldTypeLabels.proportion}
onSelect={onSelectFieldType}
/>
</div>
</div>
);