carbon-design-system / carbon-components-vue

Vue implementation of the Carbon Design System
http://vue.carbondesignsystem.com
Apache License 2.0
598 stars 177 forks source link

bug: icons inside cv-header-global-action of UI Shell Header not center/horizontal alligned #1178

Open leungyauming opened 3 years ago

leungyauming commented 3 years ago

Detailed description

Describe in detail the issue you're having.

Icons inside cv-header-global-action of UI Shell Header not center/vertically aligned.

Is this a feature request (new component, new icon), a bug, or a general issue?

Bug.

Is this issue related to a specific component?

Yes, specific to icons inside cv-header-global-action of a UI Shell Header.

What did you expect to happen? What happened instead? What would you like to see changed?

I expect the icons to be center/horizontal alligned. The icons are moved up a bit. The position of the icons.

What browser are you working in?

Microsoft Edge Version 89.0.774.76 (Official build) (64-bit) on macOS. Microsoft Edge Version 90.0.818.46 (Official build) (64-bit) on Windows.

What version of the Carbon Design System are you using?

@carbon/icons-vue: 10.30.0 @carbon/vue: 2.37.1

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

No.

Steps to reproduce the issue

  1. Create vue project with Vue CLI (Babel, Router, SCSS and ESLint + Prettier)

  2. Install @carbon/icons-vue and @carbon/vue with npm.

  3. Create a component like following:

    
    <template>
    <cv-header>
    <cv-skip-to-content href="#main-content">
      Skip to content
    </cv-skip-to-content>
    
    <cv-header-name>Account Management Console</cv-header-name>
    
    <template v-slot:header-global>
      <cv-header-global-action>
        <Login20 />
      </cv-header-global-action>
      <cv-header-global-action @click="toggleSwithcer">
        <Switcher20 v-if="!switcherIsOpen" />
        <Close20 v-else />
      </cv-header-global-action>
    </template>
    </cv-header>
    </template>


## Additional information

<img width="113" alt="Screenshot 2021-04-25 at 6 12 54 PM" src="https://user-images.githubusercontent.com/50203211/115989629-dee23480-a5f1-11eb-95ce-108ce02378ce.png">
github-actions[bot] commented 2 weeks ago

This issue has been marked as stale because it has required additional info or a response from the author for over 14 days. When you get the chance, please comment with the additional info requested. Otherwise, this issue will be closed in 14 days.