[EuiSuperSelect] With prepend and append needs it's border-radius fixed in Amsterdam

[cchaos]

[jeepers3327]

Hi @cchaos .

I fixed this one by adding fixed border-radius values depending whether it's prepend, append or both and attaches that style to euiFormControlLayout__childrenWrapper

const wrapperBorder = () => {
      if (append && prepend) return '0';
      if (prepend) return '0 5px 5px 0';
      if (append) return '5px 0 0 5px';
    }

return (
      <div className={classes} {...rest}>
        {prependNodes}
        <div className="euiFormControlLayout__childrenWrapper" style={{borderRadius: wrapperBorder()}}>
          {children}

          <EuiFormControlLayoutIcons
            icon={icon}
            clear={clear}
            compressed={compressed}
            isLoading={isLoading}
          />
        </div>
        {appendNodes}
      </div>
    );

Append:

Prepend:

Both:

I'm not sure whether there's a need for React component code change or will just to deal with it in its .scss file.
Please advised on the ideal way of fixing this.

Thanks.

[cchaos]

Hi @jeepers3327. Thanks for attempting to fix this one. We definitely only want to fix this in the Sass files not the component code itself as it needs to align with our Sass tokens for border-radius and is currently where all those styles live. Eventually, we'll be converting to CSS-in-JS, but for now we don't want to separate where styles are written.

For EuiSuperSelect specifically, it has it's own set of styles for applying border-radius and so it isn't actually tied to the EuiFormControlLayout:

And it's further tricky because this is only an issue in the Amsterdam (now default) theme. There is a specific overrides folder in our themes/amsterdam Sass folder that where these style overrides will need to be applied.

[jeepers3327]

For EuiSuperSelect specifically, it has it's own set of styles for applying border-radius and so it isn't actually tied to the EuiFormControlLayout:

May I know which file in themes/amsterdam do I need to styles for border-radius, I'm looking for a scss file which contains euiSuperSelectControl class but I haven't find it.

[cchaos]

There isn't one yet for the super select component. You can follow the pattern of this file: https://github.com/elastic/eui/blob/main/src/themes/amsterdam/overrides/_mark.scss and create a new one called _super_select.scss importing it in the index.scss file in the same folder