From c0bfad5bd8780e83f993c20109da28868da2f947 Mon Sep 17 00:00:00 2001 From: Kenan Date: Fri, 3 Nov 2023 14:52:23 +0000 Subject: [PATCH 1/6] Update Tabs component design and add tests --- .../webui/src/components/ui/Tabs.stories.tsx | 45 +++++++++++++ .../webui/src/components/ui/Tabs.test.tsx | 66 +++++++++++++++++++ packages/webui/src/components/ui/Tabs.tsx | 40 ++++++++--- .../webui/src/components/ui/TraceDetail.tsx | 4 +- packages/webui/src/styles/base.css | 2 +- 5 files changed, 144 insertions(+), 13 deletions(-) create mode 100644 packages/webui/src/components/ui/Tabs.stories.tsx create mode 100644 packages/webui/src/components/ui/Tabs.test.tsx diff --git a/packages/webui/src/components/ui/Tabs.stories.tsx b/packages/webui/src/components/ui/Tabs.stories.tsx new file mode 100644 index 0000000..97513b9 --- /dev/null +++ b/packages/webui/src/components/ui/Tabs.stories.tsx @@ -0,0 +1,45 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import ApplicationContextProvider from '@/context/ApplicationContext'; + +import { TabContent, TabList, TabListItem } from './Tabs'; + +const meta = { + title: 'UI/Tabs', + component: TabList, + parameters: { + layout: 'centered', + }, + decorators: [ + Story => ( + + + + ), + ], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Standard: Story = { + render: () => ( +
+ + + + + + +
+ Foo content + Bar content + Baz content + Qux content +
+
+ ), + args: { + children: [], + }, +}; diff --git a/packages/webui/src/components/ui/Tabs.test.tsx b/packages/webui/src/components/ui/Tabs.test.tsx new file mode 100644 index 0000000..46e30c9 --- /dev/null +++ b/packages/webui/src/components/ui/Tabs.test.tsx @@ -0,0 +1,66 @@ +import { cleanup, render, within } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; + +import { setUseApplicationData } from '@/testing/mockUseApplication'; + +import { TabContent, TabList, TabListItem } from './Tabs'; + +const Tabs = () => ( +
+ + + + + + +
+ Foo content + Bar content + Baz content + Qux content +
+
+); + +describe('Tabs', () => { + afterEach(() => { + cleanup(); + }); + + it('renders a tab item as expected', () => { + const { getByTestId } = render(); + const link = getByTestId('tab-list-item'); + expect(link).toHaveAttribute('role', 'link'); + expect(link).toHaveAttribute('aria-disabled', 'false'); + expect(link).toHaveAttribute('href', '#foo'); + }); + + it('renders a disabled tab item as expected', () => { + const { getByTestId } = render(); + const link = getByTestId('tab-list-item'); + expect(link).toHaveAttribute('role', 'link'); + expect(link).toHaveAttribute('aria-disabled', 'true'); + expect(link).not.toHaveAttribute('href', '#foo'); + }); + + it('should handle changing tabs as expected', async () => { + setUseApplicationData({ selectedTab: 'foo' }); + + const { getByTestId } = render(); + + // TODO, check for changing content + + const tabList = getByTestId('tab-list'); + const tabs = within(tabList).getAllByRole('link'); + + await userEvent.click(tabs.at(1)!); + expect(global.window.location.hash).toBe('#bar'); + + await userEvent.click(tabs.at(2)!); + expect(global.window.location.hash).toBe('#baz'); + + // Disabled tab, should not change the hash + await userEvent.click(tabs.at(3)!); + expect(global.window.location.hash).toBe('#baz'); + }); +}); diff --git a/packages/webui/src/components/ui/Tabs.tsx b/packages/webui/src/components/ui/Tabs.tsx index 7b2a452..00c6a4a 100644 --- a/packages/webui/src/components/ui/Tabs.tsx +++ b/packages/webui/src/components/ui/Tabs.tsx @@ -1,29 +1,49 @@ import useApplication from '@/hooks/useApplication'; import { tw } from '@/utils'; -export function TabList({ children }: { children: React.ReactNode }) { +export function TabList({ + children, + ...props +}: { children: React.ReactNode } & React.HTMLAttributes) { return ( -
-
    {children}
-
+
    + {children} +
); } -export function TabListItem({ id, title }: { id: string; title: string }) { +export function TabListItem({ + id, + title, + disabled = false, + ...props +}: { id: string; title: string; disabled?: boolean } & React.HTMLAttributes) { const { selectedTab, setSelectedTab } = useApplication(); + const href = disabled ? undefined : `#${id}`; + const className = tw( - 'inline-block px-4 py-3 uppercase font-semibold cursor-pointer', - 'border border-b-0', - selectedTab === id ? 'border-green-400 bg-green-100' : 'border-primary bg-primary', + 'inline-block px-2 py-1 rounded-[0.25rem] font-bold text-xs uppercase', + disabled + ? 'text-gray-400 cursor-not-allowed' + : selectedTab === id + ? 'bg-green-400 text-green-900' + : 'text-gray-800 hover:bg-green-200 hover:text-green-900 focus:bg-green-200 focus:text-green-900 active:bg-green-500 active:text-green-950', ); return (
  • { + onClick={e => { + if (disabled) { + e.preventDefault(); + return; + } setSelectedTab(id); }} > diff --git a/packages/webui/src/components/ui/TraceDetail.tsx b/packages/webui/src/components/ui/TraceDetail.tsx index 619f242..5382c45 100644 --- a/packages/webui/src/components/ui/TraceDetail.tsx +++ b/packages/webui/src/components/ui/TraceDetail.tsx @@ -95,7 +95,7 @@ export default function TraceDetail() { return (
    -
    +
    @@ -132,7 +132,7 @@ export default function TraceDetail() {
    -
    +
    diff --git a/packages/webui/src/styles/base.css b/packages/webui/src/styles/base.css index b055fd5..05ef593 100644 --- a/packages/webui/src/styles/base.css +++ b/packages/webui/src/styles/base.css @@ -5,7 +5,7 @@ @tailwind utilities; @tailwind variants; -html { +body { font-size: 14px; } From f65df743d972c1ea2fbfbdc94984c197549db0ef Mon Sep 17 00:00:00 2001 From: Kenan Date: Fri, 3 Nov 2023 15:12:49 +0000 Subject: [PATCH 2/6] Changeset --- .changeset/moody-swans-collect.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/moody-swans-collect.md diff --git a/.changeset/moody-swans-collect.md b/.changeset/moody-swans-collect.md new file mode 100644 index 0000000..372a5bd --- /dev/null +++ b/.changeset/moody-swans-collect.md @@ -0,0 +1,5 @@ +--- +'@envyjs/webui': patch +--- + +Update tab design From 588511f2c8ca1addd2044edc61d11da0b5f29cbb Mon Sep 17 00:00:00 2001 From: Kenan Date: Mon, 6 Nov 2023 09:15:30 +0000 Subject: [PATCH 3/6] Disable tabs instead of hide them --- packages/webui/src/components/ui/TraceDetail.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/webui/src/components/ui/TraceDetail.tsx b/packages/webui/src/components/ui/TraceDetail.tsx index 5382c45..fd2f6fd 100644 --- a/packages/webui/src/components/ui/TraceDetail.tsx +++ b/packages/webui/src/components/ui/TraceDetail.tsx @@ -127,8 +127,8 @@ export default function TraceDetail() { - {requestBody && } - {responseBody && } + +
    From 6c25b2afd6f8de42e8cbc556206686e87f831c64 Mon Sep 17 00:00:00 2001 From: Charlie Brown Date: Tue, 14 Nov 2023 09:40:58 -0600 Subject: [PATCH 4/6] Revert font change --- packages/webui/src/styles/base.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webui/src/styles/base.css b/packages/webui/src/styles/base.css index 05ef593..b055fd5 100644 --- a/packages/webui/src/styles/base.css +++ b/packages/webui/src/styles/base.css @@ -5,7 +5,7 @@ @tailwind utilities; @tailwind variants; -body { +html { font-size: 14px; } From b36bdafec30b38e4e2d0dde15e587a76256d267c Mon Sep 17 00:00:00 2001 From: Charlie Brown Date: Tue, 14 Nov 2023 10:08:58 -0600 Subject: [PATCH 5/6] Update to named colors --- packages/webui/src/components/ui/Tabs.tsx | 14 ++++++++------ packages/webui/src/components/ui/TraceDetail.tsx | 2 +- packages/webui/src/styles/base.css | 2 +- 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/packages/webui/src/components/ui/Tabs.tsx b/packages/webui/src/components/ui/Tabs.tsx index 00c6a4a..1f88c11 100644 --- a/packages/webui/src/components/ui/Tabs.tsx +++ b/packages/webui/src/components/ui/Tabs.tsx @@ -22,13 +22,15 @@ export function TabListItem({ const href = disabled ? undefined : `#${id}`; + const allowInteractive = !(disabled || selectedTab === id); + const className = tw( - 'inline-block px-2 py-1 rounded-[0.25rem] font-bold text-xs uppercase', - disabled - ? 'text-gray-400 cursor-not-allowed' - : selectedTab === id - ? 'bg-green-400 text-green-900' - : 'text-gray-800 hover:bg-green-200 hover:text-green-900 focus:bg-green-200 focus:text-green-900 active:bg-green-500 active:text-green-950', + 'inline-block px-3 py-2 rounded-[0.25rem] font-bold uppercase text-xs', + 'text-manatee-800', + allowInteractive && 'hover:bg-apple-200 hover:text-apple-900', + allowInteractive && 'active:bg-apple-500 active:text-apple-950', + disabled && 'text-gray-400 cursor-not-allowed', + selectedTab === id && 'bg-apple-400 text-[#0D280B]', ); return ( diff --git a/packages/webui/src/components/ui/TraceDetail.tsx b/packages/webui/src/components/ui/TraceDetail.tsx index e518518..fb640d3 100644 --- a/packages/webui/src/components/ui/TraceDetail.tsx +++ b/packages/webui/src/components/ui/TraceDetail.tsx @@ -121,7 +121,7 @@ export default function TraceDetail() {
    -
    +
    diff --git a/packages/webui/src/styles/base.css b/packages/webui/src/styles/base.css index f77fa44..a5b3558 100644 --- a/packages/webui/src/styles/base.css +++ b/packages/webui/src/styles/base.css @@ -6,7 +6,7 @@ @tailwind variants; html { - font-size: 14px; + font-size: 16px; } html, From a4709267a212e7ca0a3b9e10e81b8fdf04d2a81d Mon Sep 17 00:00:00 2001 From: Charlie Brown Date: Tue, 14 Nov 2023 10:09:32 -0600 Subject: [PATCH 6/6] Revert base --- packages/webui/src/styles/base.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webui/src/styles/base.css b/packages/webui/src/styles/base.css index a5b3558..f77fa44 100644 --- a/packages/webui/src/styles/base.css +++ b/packages/webui/src/styles/base.css @@ -6,7 +6,7 @@ @tailwind variants; html { - font-size: 16px; + font-size: 14px; } html,