Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: extract segment header into ads #38679

Draft
wants to merge 1 commit into
base: release
Choose a base branch
from
+114 −0
Draft

feat: extract segment header into ads #38679

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions .../design-system/ads/src/Templates/EntityExplorer/SegmentHeader/SegmentHeader.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { Canvas, Meta } from "@storybook/blocks";

import * as Stories from "./SegmentHeader.stories";

<Meta of={Stories} />

# Segment Header

This component is designed as a companion to the `EntityExplorer` component.
It's primary use is to display the tabs that are used to navigate between different actions of the entity explorer.
This is particularly useful when IDE is in split screen mode and entity explorer is in a collapsed state.

## Anatomy

It's a flex container that accepts an arbitrary number of children.

### Default implementation

<Canvas of={Stories.Basic} />
70 changes: 70 additions & 0 deletions ...es/design-system/ads/src/Templates/EntityExplorer/SegmentHeader/SegmentHeader.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import React from "react";
import type { Meta, StoryObj } from "@storybook/react";

import { ToggleButton } from "../../../ToggleButton";
import { ScrollArea } from "../../../ScrollArea";
import { Tab, Tabs, TabsList } from "../../../Tab";
import { Button } from "../../../Button";

import { SegmentHeader } from ".";

const SCROLL_AREA_OPTIONS = {
overflow: {
x: "scroll",
y: "hidden",
},
} as const;

const meta: Meta<typeof SegmentHeader> = {
title: "ADS/Templates/Entity Explorer/Segment Header",
component: SegmentHeader,
};

export default meta;

interface Args {
width: number;
}

const Template = ({ width }: Args) => {
// TODO: replace SegmentHeader children with proper components when ready
return (
<div style={{ width }}>
<SegmentHeader>
<ToggleButton icon="hamburger" size="md" />
<ScrollArea
data-testid="t--editor-tabs"
options={SCROLL_AREA_OPTIONS}
size="sm"
style={{ height: 32, top: 0.5 }}
>
<Tabs defaultValue="tab1">
<TabsList>
<Tab notificationCount={3} value="tab1">
Account
</Tab>
<Tab notificationCount={15} value="tab2">
Password
</Tab>
<Tab value="tab3">Account</Tab>
<Tab value="tab4">Test</Tab>
<Tab value="tab5">General</Tab>
</TabsList>
</Tabs>
</ScrollArea>
<Button
isIconButton
kind="tertiary"
startIcon="maximize-v3"
style={{ marginLeft: "auto", minWidth: 24 }}
/>
</SegmentHeader>
</div>
);
};

export const Basic = Template.bind({}) as StoryObj;

Basic.args = {
width: 500,
};
14 changes: 14 additions & 0 deletions ...ages/design-system/ads/src/Templates/EntityExplorer/SegmentHeader/SegmentHeader.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import styled from "styled-components";

export const Root = styled.div`
display: flex;
align-items: center;
border-bottom: 1px solid var(--ads-v2-color-border-muted);
background-color: var(--ads-v2-color-bg);
gap: var(--ads-v2-spaces-2);
max-height: 32px;
min-height: 32px;
padding: 0 var(--ads-v2-spaces-2);
width: 100%;
overflow: hidden;
`;
10 changes: 10 additions & 0 deletions ...t/packages/design-system/ads/src/Templates/EntityExplorer/SegmentHeader/SegmentHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import React from "react";

import * as Styled from "./SegmentHeader.styles";

interface SegmentHeaderProps {
children: React.ReactNode;
}
export function SegmentHeader({ children }: SegmentHeaderProps) {
return <Styled.Root>{children}</Styled.Root>;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we not do it in the below format?

<Styled.Root>
      {props.leftControl}
      <ScrollArea>
             <Tabs>
                  <TabsList>
                        {tabs.map(() => <Tab  />)
                        <AddTab />
                        <AddButton />
                  </TabsList>
             </Tabs>
      </ScrollArea>
      {props.righControl}
</Styled.Root>

CC: @hetunandu

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Short answer - no.

Long answer is - it's too limiting and super inconvenient to work with, at the same time this approach does not offer any protection against passing literally anything in those props. Additionally we cannot have tabs wrapped up in this particular component as it is in ADS and tabs will be wrapped up in all kinds of business logic.

@ankitakinger

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As per our discussion, this will need a bit more thought, moving it to a draft state for now.

}
alex-golovanov marked this conversation as resolved.
Show resolved Hide resolved
1 change: 1 addition & 0 deletions app/client/packages/design-system/ads/src/Templates/EntityExplorer/SegmentHeader/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { SegmentHeader } from "./SegmentHeader";
Loading