[TableToolbarSearch] icon overlay on text

nicoxxie commented 3 years ago

What package(s) are you using?

[x] carbon-components
[x] carbon-components-react

Detailed description

Describe in detail the issue you're having. The table search has text overlaying the search icon

This bx-input in search.scss set a padding which broke this.

Is this issue related to a specific component? TableToolbarSearch

What did you expect to happen? What happened instead? What would you like to see changed? The text not overlay on the icon

What browser are you working in? Chrome

What version of the Carbon Design System are you using? we used "carbon-components": "10.33.0", "carbon-components-react": "7.33.0",

What offering/product do you work on? Any pressing ship or release dates we should be aware of? IBM Cloud

Steps to reproduce the issue

It's complicated to copy the whole table in sandbox. you have to import the search.scss

Please create a reduced test case in CodeSandbox

Style and vanilla JS: https://codesandbox.io/s/github/carbon-design-system/carbon/tree/main/packages/components/examples/codesandbox

React: https://codesandbox.io/s/github/carbon-design-system/carbon/tree/main/packages/react/examples/codesandbox

https://codesandbox.io/s/pensive-butterfly-miqbx?file=/src/index.js

Additional information

Screenshots or code
Notes

tw15egan commented 3 years ago

Hey there @nicoxxie , not seeing this in the storybook so it seems like it might be some extra css in your app.

In your example, you are wrapping it in a div with a class of className="bx--search-input", which is adding some extra padding. TableToolbarSearch renders a Search in side of it, with its own bx--search-input class. Can you remove the outer wrapper?

nicoxxie commented 3 years ago

Hi @tw15egan, thanks for checking. That example was me trying to reproduce and wrap it, it's not in our code at all. But without the entire table setup, it's hard to reproduce. Also tried importing the search.scss, no luck.

Here is the exact code we have, no class name

        <TableToolbarContent>
          {this.props.search &&
            <TableToolbarSearch
              id={...}
              labelText={...}
              onChange={...}
              value={...}
              placeHolderText={...} />
          }
....
          {this.getToolbarButton(button)})}
        </TableToolbarContent>

This is the piece of search.scsss picking it up

@mixin search {
...
  // Small styles
  .#{$prefix}--search--sm .#{$prefix}--search-input,
  .#{$prefix}--search--sm.#{$prefix}--search--expandable.#{$prefix}--search--expanded
    .#{$prefix}--search-input {
    height: rem(32px);
    // 8px padding on either side of icon + 16px icon (32px)
    padding: 0 $spacing-07;
  }
}

tw15egan commented 3 years ago

Without a reproduction, it's tough to tell exactly what's going on since the component seems to be rendering okay inside of our DataTable examples. That scss is correct, but it seems like you're getting some duplicate padding on the wrapper from somewhere 🤔

It seems like since you've removed the Cloud PAL styles, the issue isn't present, so it must be coming from somewhere in there.

Hope that helps! Going to close this as this doesn't seem to be an issue with our implementation, but if you figure out the root cause we can reopen and take a deeper look

AlanGreene commented 3 years ago

@tw15egan I'm seeing this on the Storybook https://react.carbondesignsystem.com/?path=/story/components-datatable--with-toolbar

Also notice the focus outline isn't the full height

Chrome 90 + Firefox 88 + Safari 14 on macOS 11.3

carbon-design-system / carbon