feat: New button group element `nes-btn-group`

nostalgic-css / NES.css

NES-style CSS Framework | ファミコン風CSSフレームワーク

https://nostalgic-css.github.io/NES.css/

MIT License

20.61k stars 1.65k forks source link

feat: New button group element `nes-btn-group` #297

Open jdvivar opened 5 years ago

jdvivar commented 5 years ago

Description

I've added a new nes-btn-group class:

<div class="nes-btn-group">
  <button type="button" class="nes-btn is-primary">this</button>
  <button type="button" class="nes-btn">is a</button>
  <button type="button" class="nes-btn">button</button>
  <button type="button" class="nes-btn">group</button>
</div>

Here an update on the /index.html demo:

Compatibility

It adds a new class, so it won't break anything made before

Caveats

There might be a better way to do this, as the inner shadows of the buttons are not consistent. However this is better than not having it, so it's improved :)
- I haven't added a storybook element as I'm not familiar with it, it's missing there, sorry!
- Max number of elements in button group is whatever we put in SASS, 6 at the moment. We can just write a bigger number though.

BcRikko commented 5 years ago

Looks good 🎉 I'll review it later 🙇

jdvivar commented 5 years ago

Hi @BcRikko, your comments are exactly the caveats in my PR.

I've improved the PR based on that and now:

Shadow is consistent
The maximum number of items in a button group is now a default variable (set to 10)
I've adapted the disabled state so that it's consistent inside a button group

This is how it looks now:

BcRikko commented 5 years ago

sry, I'm busy... so It will be late for me to review. 🙇

I have not reviewed all of them,,, I think that the following code is improved by using negative margin. 🛠 max-btn-group-items will not be needed. 🤔

    .nes-btn:nth-child(#{$i + 1}) {
      left: -($i * 24px);

↓↓↓

margin-left: -4rem;  // `-4rem` is roughly length.

I'll review other parts at a later date. 🙇‍♀️🙇‍♀️🙇‍♀️

tjvalpo commented 4 years ago

Hello, the icons of social networks look bad if the page is 100%, if I change it to 110% they look good, why does that happen?

100%

110%

guastallaigor commented 4 years ago

Hello @tjvalpo . I'm not really sure why this happens. Could you open an issue about this problem, so that we or another contributor can look into it? Thank you.

ldd commented 4 years ago

what is the status of this pull request? Is it ever going to make it into master or develop?