Workday / canvas-kit

Development kits to implement UI following the Workday Canvas Design System (https://canvas.workday.com/). See our Component Storybook -
https://workday.github.io/canvas-kit/
Apache License 2.0
297 stars 219 forks source link

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

Open mannycarrera4 opened 2 weeks ago

mannycarrera4 commented 2 weeks ago

šŸ› 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>