Carbon: [Button]: cannot use icon-only button without importing all styles

[janhassel]

What package(s) are you using?

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

Detailed description

Describe in detail the issue you're having.
When trying to use the icon-only button component by only importing the carbon-components/scss/components/button/button styles, the tooltip positioning is wrong. When also importing carbon-components/scss/components/tooltip/tooltip, the tooltip position is correct but is always visible without the triangle. The triangle is added on hover and focus.

Is this issue related to a specific component?
Button

What browser are you working in?
Chrome 79

What version of the Carbon Design System are you using?

• [email protected]
• [email protected]

Steps to reproduce the issue

See https://codesandbox.io/s/musing-wave-spqu0 as a reference.
Also try removing the tooltip style import in styles.scss.

[asudoh]

@emyarod Would you be interested in taking a look at this...? Thanks!

[emyarod]

it looks like css-helpers is not being imported (missing .bx--assistive-text class)

[emyarod]

as mentioned earlier this issue should be resolved if css-helpers is imported

[janhassel]

@emyarod Hey! Sorry, it seems like I missed the notification on this one.
Indeed importing css--helpers fixes the issue. Doesn't this mean though, that the css--helpers should already be imported in the _button.scss?

@import '../../globals/scss/vars';
@import '../../globals/scss/typography';
@import '../../globals/scss/helper-mixins';
@import '../../globals/scss/tooltip';
@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
@import 'mixins';
+ @import '../../globals/scss/css--helpers';
@import '../../globals/scss/css--reset';

/// Button styles
/// @access private
/// @group button
@mixin button {

[tw15egan]

@janhassel Yes, if the component needs that file we should be importing it within the button file. Reopening to resolve this.

[tw15egan]

Wondering if we should also move out the mixins that are in components/tooltip/_tooltip.scss to the global tooltip file since they seem to be used in a few places?

[emyarod]

which mixins are you referring to @tw15egan ?

[tw15egan]

I’m not sure actually, but it does seem like the positioning is off if you only import the button styles and not the tooltip ones