Doist / reactist

Open source React components made with ❤️ by Doist
http://doist.github.io/reactist
MIT License
248 stars 22 forks source link

Remove gaps between tabs on Web #762

Closed henningmu closed 1 year ago

henningmu commented 1 year ago

Description

There is an unnecessary gap between tabs in the Tab component. It seems like a 4px reactist xsmall gap. We don't need that.

Expected behaviour

Remove the gap between tabs for a more comfortable usage between them. For example in Twist's Inbox.

What needs to change

## Screenshots

Before image

After image

agarwal-aryan commented 1 year ago

Can you please elaborate the problem and also provide the path to the files in which we can work upon?

henningmu commented 1 year ago

What more information apart from the screenshots and the initial issue description do you need to work on this? :)

The file is here: https://github.com/Doist/reactist/blob/main/src/tabs/tabs.tsx – my gut feeling tells me, it's the space = 'xsmall', in the TabsList that we need to remove, but would need confirmation 👍

MahirMahdi commented 1 year ago

Is this issue still open?

gnapse commented 1 year ago

It is still open @MahirMahdi.

MahirMahdi commented 1 year ago

@gnapse Can I work on it? @henningmu is right, removing space = 'xsmall' removes unnecessary gap.

By default( with space = 'xsmall' ):

Screenshot 2023-05-31 083300

After removing space = 'xsmall':

Screenshot 2023-05-31 083519

henningmu commented 1 year ago

@MahirMahdi yes, please feel free to submit a PR 👍

MahirMahdi commented 1 year ago

@henningmu Thanks. On it.