feat: border control on title

Arize-ai · Mar 27, 2024 · c4abd96 · c4abd96
1 parent ea1ce4f
commit c4abd96
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 1 deletion.
diff --git a/src/card/Card.tsx b/src/card/Card.tsx
@@ -61,6 +61,11 @@ interface CollapsibleCardProps {
    * Callback function for when the collapsed state changes
    */
   onOpenChange?: (isOpen: boolean) => void;
+  /**
+   * Whether or not the title has a separator
+   * @default true
+   */
+  titleSeparator?: boolean;
 }
 
 export interface CardProps
@@ -87,6 +92,7 @@ export function Card({
   titleExtra,
   collapsible = false,
   defaultOpen = true,
+  titleSeparator = true,
   id,
   onOpenChange,
   ...props
@@ -136,6 +142,7 @@ export function Card({
         headerId={headerId}
         className="ac-card-collapsible-header"
         subTitle={subTitleEl}
+        titleSeparator={titleSeparator}
         {...styleProps}
       />
     </div>
@@ -159,7 +166,7 @@ export function Card({
       style={{ ...style, ...styleProps.style }}
     >
       <header
-        css={headerCSS({ bordered: true })}
+        css={headerCSS({ bordered: titleSeparator })}
         id={headerId}
         className={classNames({ 'is-collapsible': collapsible })}
       >

diff --git a/src/card/CollapsibleCardTitle.tsx b/src/card/CollapsibleCardTitle.tsx
@@ -27,6 +27,7 @@ interface CollapsibleCardTitleProps extends ViewProps {
   headerId: string;
   className?: string;
   subTitle: ReactNode;
+  titleSeparator?: boolean;
 }
 export function CollapsibleCardTitle(props: CollapsibleCardTitleProps) {
   const {

diff --git a/stories/Card.stories.tsx b/stories/Card.stories.tsx
@@ -94,6 +94,33 @@ const GalleryCards = (props: { variant: CardProps['variant'] }) => {
       >
         {''}
       </Card>
+      <Card
+        collapsible
+        titleSeparator={false}
+        title="Title"
+        style={cardStyle}
+        {...props}
+      >
+        <Tabs>
+          <TabPane name="Tab 1">{null}</TabPane>
+          <TabPane name="Tab 2">{null}</TabPane>
+        </Tabs>
+      </Card>
+      <TabbedCard
+        title="Title"
+        extra={
+          <Button variant="default" size={buttonSize}>
+            Create Dashboard
+          </Button>
+        }
+        {...props}
+        style={cardStyle}
+      >
+        <Tabs>
+          <TabPane name="Tab 1">{null}</TabPane>
+          <TabPane name="Tab 2">{null}</TabPane>
+        </Tabs>
+      </TabbedCard>
       <TabbedCard title="Title" style={cardStyle} {...props}>
         <Tabs>
           <TabPane name="Tab 1">{null}</TabPane>