We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
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
In v13, we should use data-part to style the Select.Input. This will be a breaking change for consumers since how they style elements will change.
Here's an example of how the stencil should change:
const selectInputStencil = createStencil({ base: { '& [data-part="select-visual-input"]': { caretColor: 'transparent', cursor: 'default', '&::selection': { backgroundColor: 'transparent', }, }, '& [data-part="select-start-icon-container"]': { position: 'absolute', pointerEvents: 'none', }, '& [data-part="select-hidden-input"]': { position: 'absolute', top: system.space.zero, bottom: system.space.zero, left: system.space.zero, right: system.space.zero, opacity: system.opacity.zero, cursor: 'default', pointerEvents: 'none', }, }, }); //... <InputGroup data-width="ck-formfield-width" {...handleCsProp({cs, style, className}, selectInputStencil())} > {inputStartIcon && model.state.selectedIds.length > 0 && ( <InputGroup.InnerStart data-part="select-start-icon-container"> <SystemIcon data-part="select-start-icon" icon={inputStartIcon} /> </InputGroup.InnerStart> )} {/* Hidden input to handle ids */} <InputGroup.Input error={error} disabled={disabled} tabIndex={-1} aria-hidden={true} onChange={onChange} onInput={onInput} value={value} name={name} ref={ref} data-part="select-hidden-input" /> {/* Visual input */} <InputGroup.Input as={Element} disabled={disabled} placeholder={placeholder} error={error} data-part="select-visual-input" {...textInputProps} {...mergeStyles(elemProps, [ hasFocus ? 'focus' : undefined, hasHover ? 'hover' : undefined, hasActive ? 'active' : undefined, hasDisabled ? 'disabled' : undefined, ])} /> <InputGroup.InnerEnd data-part="select-caret-container"> <SystemIcon data-part="select-caret-icon" icon={caretDownSmallIcon} /> </InputGroup.InnerEnd> </InputGroup>
The text was updated successfully, but these errors were encountered:
No branches or pull requests
🐛 Bug Report
In v13, we should use data-part to style the Select.Input. This will be a breaking change for consumers since how they style elements will change.
Here's an example of how the stencil should change:
The text was updated successfully, but these errors were encountered: