Tabs first item has a double underline

jekhoxy commented 5 years ago

Hello @fibo

I have noticed when using Tabs component, the first Tabs.Item has a double underline, even when it becomes no active anymore.

The rest of the Tabs.Item is rendered correctly then.

Thanks to give a look at it. (I'm working with version 0.21.0)

Jekho

ps: Bravo for your work!

fibo commented 5 years ago

Hi @jekho41, thank you very much for your feedback!

It looks like it is caused by storybook, probably by some CSS it adds. I am considering moving to some other tool (maybe Next.js) before first major release.

I tested it using only Trunx on a standalone examples and it looks ok, you can try it on Sandbox.

I am sorry but I am changing the interface, and in latest version Tabs.Item does not exists.

Given also this feedback https://github.com/fibo/trunx/issues/18 where it makes sense, I am using wrappers around native components, so Bulma snippets (using HTML tags) will be specular to JSX snippets in Trunx documentation.

In our case the tabs example code will be like this

<Tabs>
  <Ul>
    <Li isActive><A>Pictures</A></Li>

    <Li><A>Music</A></Li>

    <Li><A>Videos</A></Li>

    <Li><A>Documents</A></Li>
  </Ul>
</Tabs>

Please notice that Tabs, Ul, Li, A are Trunx components, you can import them for example with

import { A, Li, Tabs, Ul } from "trunx";

jekhoxy commented 5 years ago

Ok, I updated my version to 0.22 with your new components but I still have this issue.

It's from Bulma css, the first <li> is unchanged whereas the others have.content li + li rule with a margin-top of 4px. That's why I see this line.

But anyway, I found a workaround (so bad). Maybe it's because I use it with NextJs.

thanks

fibo commented 5 years ago

Mmh but I do not see it in the CodeSandbox example I posted above. I guess it is caused by some other css code.

fibo / trunx

Tabs first item has a double underline #20