Used introduced Tabs component in ChatTabs, replacing existing solution. Chat borders design now matches Figma design and elements have onHover effect. The behavior of panel should remain the same.
Before:
After:
Details
Details
Run web app and try to switch Between Focus and Background tabs. It should work as before.
Diff Detail
Diff Detail
- Repository
- rCOMM Comm
- Lint
Lint Not Applicable - Unit
Tests Not Applicable
Event Timeline
Comment Actions
Just an idea: we can consider using children instead of a prop with an array. Initially I thought it might be complicated, but I used this approach in D3341 and it wasn't that hard
| web/chat/chat-tabs.react.js | ||
|---|---|---|
| 29–33 ↗ | (On Diff #10186) | Can we use more concrete type, e.g. 'Background' | 'Focus' and avoid using invariants? |
| 66 ↗ | (On Diff #10186) | |
| web/chat/chat-tabs.react.js | ||
|---|---|---|
| 29 ↗ | (On Diff #10303) | Just to make sure, as it looks really interesting. So does that mean that if we try to use a tab with a different id a flow error would be returned? |
| web/chat/chat-tabs.react.js | ||
|---|---|---|
| 29 ↗ | (On Diff #10303) | Yes, if we try to execute this callback with other id, flow error is thrown. |
Comment Actions
Makes sense to me! The Tabs.Item header prop probably could've been a Tabs.Header component, but it doesn't matter that much