Skip to content
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.

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

Clean up Select.Input stencil to use data-part for styling. #2921

Open
mannycarrera4 opened this issue Sep 13, 2024 · 0 comments
Open

Clean up Select.Input stencil to use data-part for styling. #2921

mannycarrera4 opened this issue Sep 13, 2024 · 0 comments
Labels
bug Something isn't working

Comments

@mannycarrera4
Copy link
Contributor

🐛 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:

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>
@mannycarrera4 mannycarrera4 added the bug Something isn't working label Sep 13, 2024
@jaclynjessup jaclynjessup moved this to 🆕 New in Canvas Kit Sep 13, 2024
@mannycarrera4 mannycarrera4 changed the title Clean up Select.Input stencil Clean up Select.Input stencil to use data-part for styling. Sep 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
Status: 🆕 New
Development

No branches or pull requests

1 participant