Skip to content

refactor: Components updates #7308

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
raunakab merged 16 commits into from
Jan 10, 2026
Merged

refactor: Components updates #7308

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
6766249
Remove classNames from modal footers
raunakab Jan 9, 2026
3d6a902
Remove classNames from modal content
raunakab Jan 9, 2026
6944785
Remove classNames from modal header
raunakab Jan 9, 2026
cdb405a
Remove unnecessary `twoTone` flag invocation
raunakab Jan 9, 2026
d8c3402
Update modal body styling
raunakab Jan 9, 2026
380871b
More updates
raunakab Jan 9, 2026
dbb6c50
Fix spacing for footer components
raunakab Jan 9, 2026
a89c8b1
Fix spacing for footer components
raunakab Jan 9, 2026
2fa3601
Update docs
raunakab Jan 9, 2026
764924f
Fix some dumb className overrides of the IconButton
raunakab Jan 9, 2026
8f23a71
Merge branch 'pr5a-modal-updates' into pr5b-non-modal-updates
raunakab Jan 9, 2026
fd6e836
Component updates
raunakab Jan 9, 2026
716fe60
Merge main
raunakab Jan 10, 2026
14641ad
Revert separator changes
raunakab Jan 10, 2026
1ccb2e2
Edit new-lines
raunakab Jan 10, 2026
9604076
Revert shadow-div
raunakab Jan 10, 2026
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
2 changes: 1 addition & 1 deletion web/src/refresh-components/ShadowDiv.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ export default function ShadowDiv({
}, [containerRef, checkScroll]);

return (
<div className="relative">
<div className="relative h-full">
Copy link
Contributor

@jmelahman jmelahman Jan 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe an example would be helpful, but this seems wrong as a default? Feel like ShadowDiv should behave like a div.

Copy link
Contributor

@jmelahman jmelahman Jan 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or maybe rename the component to make it clear this has default layout properties

Copy link
Contributor Author

@raunakab raunakab Jan 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, maybe @nmgarza5 can update the name? He was the one who originally named it.

Copy link
Contributor

@jmelahman jmelahman Jan 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this change load-bearing? Can we follow up with this change? It's a functional change and realistically does not belong in a refactor. I also think it's incorrect, so we should resolve this before merge imo.

<div
ref={containerRef}
className={cn("overflow-y-auto", className)}
Expand Down
37 changes: 36 additions & 1 deletion web/src/refresh-components/inputs/InputSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ import {
} from "@/refresh-components/inputs/styles";
import Truncated from "@/refresh-components/texts/Truncated";
import { SvgChevronDownSmall } from "@opal/icons";
import Separator, { SeparatorProps } from "@/refresh-components/Separator";
import { WithoutStyles } from "@/types";

// ============================================================================
// Context
Expand Down Expand Up @@ -304,7 +306,9 @@ const InputSelectContent = React.forwardRef<
onMouseDown={noProp()}
{...props}
>
<SelectPrimitive.Viewport>{children}</SelectPrimitive.Viewport>
<SelectPrimitive.Viewport className="flex flex-col gap-1">
{children}
</SelectPrimitive.Viewport>
</SelectPrimitive.Content>
</SelectPrimitive.Portal>
));
Expand Down Expand Up @@ -453,6 +457,35 @@ const InputSelectLabel = React.forwardRef<
));
InputSelectLabel.displayName = "InputSelectLabel";

// ============================================================================
// InputSelect Separator
// ============================================================================

/**
* InputSelect Separator Component
*
* A visual divider between items in the dropdown.
* Uses the app's standard Separator component with appropriate defaults for dropdown menus.
*
* @example
* ```tsx
* <InputSelect.Content>
* <InputSelect.Item value="1">Option 1</InputSelect.Item>
* <InputSelect.Separator />
* <InputSelect.Item value="2">Option 2</InputSelect.Item>
* </InputSelect.Content>
* ```
*/
type InputSelectSeparatorProps = WithoutStyles<SeparatorProps>;

const InputSelectSeparator = React.forwardRef<
React.ComponentRef<typeof Separator>,
InputSelectSeparatorProps
>(({ noPadding = true, ...props }, ref) => (
<Separator ref={ref} noPadding={noPadding} className="px-2 py-1" {...props} />
));
InputSelectSeparator.displayName = "InputSelectSeparator";

// ============================================================================
// Exports
// ============================================================================
Expand Down Expand Up @@ -496,6 +529,7 @@ export default Object.assign(InputSelectRoot, {
Item: InputSelectItem,
Group: InputSelectGroup,
Label: InputSelectLabel,
Separator: InputSelectSeparator,
});

export {
Expand All @@ -505,4 +539,5 @@ export {
type InputSelectItemProps,
type InputSelectGroupProps,
type InputSelectLabelProps,
type InputSelectSeparatorProps,
};
Loading