feat: border control on title (#198)

* feat: border control on title * simplify * v1.1.8
Arize-ai · Mar 27, 2024 · 2d8b3b1 · 2d8b3b1
1 parent ea1ce4f
commit 2d8b3b1
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.1.7",
+  "version": "1.1.8",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

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
@@ -159,7 +165,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/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>