fix: add spacing to card titleExtra, align center (#172)

* fix: add spacing to card titleExtra, align center * fix: add to stories * v0.17.5
Arize-ai · Oct 12, 2023 · 2601d78 · 2601d78
1 parent 14d18a2
commit 2601d78
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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}>