Carbon: [Button]: bx--btn--sm do not make buttons smaller

Created on 17 May 2019  路  6Comments  路  Source: carbon-design-system/carbon

What package(s) are you using?

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

Detailed description

Describe in detail the issue you're having.

Small buttons do not render as such on the last version of Carbon 9. They appear with regular size. The height/min-height is not correctly updated.

Is this issue related to a specific component?

Button

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

The button size (height) should be smaller. Instead, the size stays the same.

What browser are you working in?

Chrome, Firefox, Edge

What version of the Carbon Design System are you using?

v9.91.0

Steps to reproduce the issue

  1. Create a regular Cabon button
  2. Add bx--btn--sm class

Please create a reduced test case

https://codepen.io/gian1200/pen/KLmovp

Additional information

  • The bug appeared between Carbon 9.81.5 and 9.81.6
medium components 3 bug 馃悰

All 6 comments

@emyarod Should min-height change in #1907 be applied to v9 code, too? Thanks!

@gian1200 You may try:

.bx--btn--sm {
  min-height: 2rem;
}

@asudoh most likely yes, although the priority for #1907 was for v10 IIRC

@emyarod I see does it mean that the change to button-base (as opposed to button-base--x) was unintentional or was a stretch-goal change?

@asudoh, yes. Actually that's the workaround I've been applying for the moment. I also wanted to do a PR to fix it on v9, but since I haven't used any post or pre css processors (sass, scss) before, I wanted to read a little bit about them (as well as the contribution documentation) before doing it.

Although, if I understand the code correctly, it's only necessary a 1 line change on branch v9, from height to min-height (?).
https://github.com/carbon-design-system/carbon/blob/20735b4729ad6720eaa051946c6d8cec496bfe3b/src/components/button/_button.scss#L163

@asudoh a stretch goal change but just missed a line

@gian1200 yes it should just be changing the line you identified

closing as this is now resolved in the latest v9 stylesheet

Was this page helpful?
0 / 5 - 0 ratings