svelte: Add bottom panel close button#63128
Conversation
This commit adds a button to the right hand side of the tabs that allows closing the bottom panel. For this I - extended the Tabs.svelte component to allow rendering something to the right hand side of the tabs. - added a new `text` variant to button that renders an unstyled button and shows a background on hover Note that the icon as shown in the figma design doesn't exist in lucide.
| 'merged', | ||
| 'link', | ||
| 'icon', | ||
| 'text', |
There was a problem hiding this comment.
Oh nice. I've wanted something like this in the past
| &:global(.disabled), | ||
| &:disabled, | ||
| &[aria-disabled='true'] { | ||
| cursor: not-allowed; |
There was a problem hiding this comment.
why get rid of the not-allowed cursor?
There was a problem hiding this comment.
Huh. Looks like it's working as expected still in storybook
There was a problem hiding this comment.
Sorry, I wanted to leave some comments but didn't have time. I removed this selected because it's not used by us.
|
The icon is too small for that particular one to work well, let's try https://lucide.dev/icons/arrow-down-from-line instead. |
| <div class="actions"> | ||
| <slot name="header-actions" /> | ||
| </div> |
There was a problem hiding this comment.
Should we use this slot for the last commit info when closed?
There was a problem hiding this comment.
We could though I don't know whether that works together with the commit message text-overflow stuff. Something to investigate.
|
@taiyab Should we make the button larger? It's currently small. But that will also increase the font size and it seemed a little too large to me. |
Nope, no need for now. I'm designing a whole new design system and component library that will take care of this problem properly down the road. |
Closes SRCH-450
This commit adds a button to the right hand side of the tabs that allows closing the bottom panel.
For this I
textvariant to button that renders an unstyled button and shows a background on hoverNote that the icon as shown in the figma design doesn't exist in lucide.
Test plan
Visual/manual inspection in light and dark mode
Changelog