From 2601d78bfe3dfafdd8c8be46622d90fec01e703b Mon Sep 17 00:00:00 2001
From: Mikyo King <mikyo@arize.com>
Date: Thu, 12 Oct 2023 13:58:01 -0600
Subject: [PATCH] fix: add spacing to card titleExtra, align center (#172)

* fix: add spacing to card titleExtra, align center

* fix: add to stories

* v0.17.5
---
 package.json             | 2 +-
 src/card/Card.tsx        | 2 ++
 stories/Card.stories.tsx | 4 +++-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 4ac1eb97..8aa053c7 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.17.4",
+  "version": "0.17.5",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
diff --git a/src/card/Card.tsx b/src/card/Card.tsx
index 73ea0754..de8ff049 100644
--- a/src/card/Card.tsx
+++ b/src/card/Card.tsx
@@ -29,6 +29,8 @@ const headerTitleWrapCSS = css`
 const titleWithTitleExtraCSS = css`
   display: flex;
   flex-direction: row;
+  align-items: center;
+  gap: var(--ac-global-dimension-static-size-100);
 `;
 
 const bodyCSS = css`
diff --git a/stories/Card.stories.tsx b/stories/Card.stories.tsx
index 8d28971d..ca42a6fb 100644
--- a/stories/Card.stories.tsx
+++ b/stories/Card.stories.tsx
@@ -6,7 +6,7 @@ import { Card, CardProps, TabbedCard } from '../src/card';
 import { Tabs } from '../src/tabs';
 import { Button } from '../src/button';
 import InfoTip from './components/InfoTip';
-import { Flex, Heading, Provider, View } from '../src';
+import { Counter, Flex, Heading, Provider, View } from '../src';
 
 const { TabPane } = Tabs;
 
@@ -138,6 +138,7 @@ const GalleryCards = (props: { variant: CardProps['variant'] }) => {
       </Card>
       <Card
         title="Collapsible Title"
+        titleExtra={<Counter variant="light">5</Counter>}
         {...props}
         style={cardStyle}
         extra={
@@ -153,6 +154,7 @@ const GalleryCards = (props: { variant: CardProps['variant'] }) => {
       <Card
         title="Collapsible Title"
         subTitle="Subtext area"
+        titleExtra={<Counter variant="light">5</Counter>}
         style={cardStyle}
         extra={
           <Button variant="default" size={buttonSize}>