feat(ui): add page header tabs #15

New issue

Open

opened 2025-10-04 09:25:39 +00:00 by chartgerink · 0 comments

chartgerink commented

2025-10-04 09:25:39 +00:00

Owner

An initial trial run shows the tab system is semi-functional. I can add the tabs and the content, but the switching did not work out of the box.

   <Tabs>
      <PageHeader>
        <PageHeaderContent
          title={title}
          // pageActions={
          //   <PageHeaderContentPageActions menuButtonLabel="Actions"></PageHeaderContentPageActions>
          // }
        >
          <PageHeaderContentText subtitle={subtitle}>
            {children}
          </PageHeaderContentText>
        </PageHeaderContent>
        <PageHeaderTabBar>
          <TabList>
            <Tab>Tab 1</Tab>
            <Tab>Tab 2</Tab>
          </TabList>
        </PageHeaderTabBar>
      </PageHeader>
      <TabPanels>
        <TabPanel>Tab Panel 1</TabPanel>
        <TabPanel>Tab Panel 2</TabPanel>
      </TabPanels>
    </Tabs>

Carbon has a tab system, which would be great to use to display multiple perspectives of data. For example, for a user we may want to list their outputs, sources, affiliations. Tabs help organize this without cluttering. An initial trial run shows the tab system is semi-functional. I can add the tabs and the content, but the switching did not work out of the box. ``` <Tabs> <PageHeader> <PageHeaderContent title={title} // pageActions={ // <PageHeaderContentPageActions menuButtonLabel="Actions"></PageHeaderContentPageActions> // } > <PageHeaderContentText subtitle={subtitle}> {children} </PageHeaderContentText> </PageHeaderContent> <PageHeaderTabBar> <TabList> <Tab>Tab 1</Tab> <Tab>Tab 2</Tab> </TabList> </PageHeaderTabBar> </PageHeader> <TabPanels> <TabPanel>Tab Panel 1</TabPanel> <TabPanel>Tab Panel 2</TabPanel> </TabPanels> </Tabs> ``` See also the Carbon Storybook: https://react.carbondesignsystem.com/?path=/story/patterns-preview-pageheader--tab-bar-with-tabs-and-tags