Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 9 additions & 2 deletions shared/common/newui/modal/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export function ModalPanel({
footerDetails,
footerButtons,
footerExtra,
...props
}: PropsWithChildren<
| ({noHeader?: false} & Omit<ModalProps, "noCloseOnOverlayClick">)
| ({
Expand All @@ -56,6 +57,7 @@ export function ModalPanel({
: undefined
}
autoComplete="off"
{...props}
>
{!noHeader ? (
<div className={styles.header}>
Expand All @@ -66,9 +68,13 @@ export function ModalPanel({
) : null}
</div>
{onClose ? (
<div className={styles.closeButton} onClick={onClose}>
<button
className={styles.closeButton}
onClick={onClose}
aria-label="Close"
>
<CrossIcon />
</div>
</button>
) : null}
</div>
) : null}
Expand Down Expand Up @@ -109,6 +115,7 @@ export function ModalOverlay({
}
: undefined
}
role="dialog"
>
{children}
</div>
Expand Down
13 changes: 10 additions & 3 deletions shared/common/newui/modal/modal.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,13 @@
}

.modal {
box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16),
box-shadow:
0px 4px 16px 0px rgba(0, 0, 0, 0.16),
0px 2px 4px 0px rgba(0, 0, 0, 0.08);

transition: transform 0.3s, opacity 0.3s;
transition:
transform 0.3s,
opacity 0.3s;

:global(.MODAL_TRANSITION) & {
transform: translateY(100px);
Expand All @@ -51,7 +54,8 @@
}

.modal {
box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.4),
box-shadow:
0px 4px 16px 0px rgba(0, 0, 0, 0.4),
0px 2px 4px 0px rgba(0, 0, 0, 0.2);
}
}
Expand Down Expand Up @@ -155,6 +159,9 @@
margin: -4px;
color: var(--Grey50, #808080);
cursor: pointer;
background: none;
border: none;
padding: 0;
}

.footer {
Expand Down
2 changes: 1 addition & 1 deletion shared/common/newui/textInput/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export const TextInput = forwardRef(function TextInput(
/>
{suffixEl}
{error != null ? (
<div className={styles.error}>
<div className={styles.error} role="alert">
<InfoIcon />
<div>{error}</div>
</div>
Expand Down
11 changes: 11 additions & 0 deletions shared/common/ui/select/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,7 @@ export function Select<T extends any>({
className={cn(styles.select, className)}
onClick={!disabled ? () => setDropdownOpen(true) : undefined}
data-disabled={disabled}
role="combobox"
{...props}
>
{title ?? selectedItem?.fullLabel ?? selectedItem?.label ?? (
Expand All @@ -207,6 +208,7 @@ export function Select<T extends any>({
})}
style={isMobile ? {} : {maxHeight}}
onClick={(e) => e.stopPropagation()}
role="listbox"
>
{isFullscreenMobile && (
<>
Expand Down Expand Up @@ -253,6 +255,10 @@ export function Select<T extends any>({
setDropdownOpen(false);
onChange(result.obj.item.item);
}}
role="option"
aria-disabled={
!!result.obj.item.item.disabled || undefined
}
>
{highlightString(
result.target,
Expand Down Expand Up @@ -288,6 +294,11 @@ export function Select<T extends any>({
}
: undefined
}
role="option"
aria-disabled={
(item.type === "item" && !!item.item.disabled) ||
undefined
}
>
{item.type === "item" ? (
<div className={styles.itemContent}>
Expand Down
8 changes: 4 additions & 4 deletions shared/studio/components/modals/createBranch.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -56,10 +56,10 @@ export default function CreateBranchModal({
legacy
? `create database \`${branchName}\``
: fromBranch != null
? `create ${
copyData ? "data" : "schema"
} branch \`${branchName}\` from \`${fromBranch}\``
: `create empty branch \`${branchName}\``
? `create ${
copyData ? "data" : "schema"
} branch \`${branchName}\` from \`${fromBranch}\``
: `create empty branch \`${branchName}\``
);
} catch (e) {
setError((e as any).toString());
Expand Down