PDS proposals
← All proposals

Model Selector

A new component built on the local MenuButton (trigger, popover, keyboard and focus behavior come from it).

Net-new componentOpen in Storybook

proposals/ModelSelector/model-selector.css38 lines · View on GitHub
/*
 * No fill in any state. The trigger is the subtle Button, which paints a
 * translucent fill on hover, press and while open; here all of those are
 * cleared and the state shows in the text color instead. The focus ring is
 * unchanged.
 */
.pds-model-selector button.pds-button--subtle.pds-menu-button__trigger {
	--button-background-color: transparent;
	--button-background-color-active: transparent;
	--button-background-color-hover: transparent;
	--button-foreground-color: var(--pds-color-foreground-default-secondary);
	--button-foreground-color-hover: var(--pds-color-foreground-default);

	background-color: transparent;
	box-shadow: none;
}

.pds-model-selector
	button.pds-button--subtle.pds-menu-button__trigger:hover:enabled,
.pds-model-selector
	button.pds-button--subtle.pds-menu-button__trigger:active:enabled,
.pds-model-selector
	button.pds-button--subtle.pds-menu-button__trigger[aria-expanded='true'] {
	background-color: transparent;
	border-color: transparent;
	box-shadow: none;
	color: var(--pds-color-foreground-default);
}

.pds-model-selector
	button.pds-button--subtle.pds-menu-button__trigger:hover:enabled
	.pds-button__icon,
.pds-model-selector
	button.pds-button--subtle.pds-menu-button__trigger[aria-expanded='true']
	.pds-button__icon {
	color: var(--pds-color-foreground-default);
}