fix: according last item border (#240)

* fix: according last item border * restyle * cleanup
Arize-ai · Oct 14, 2024 · c2d6c57 · c2d6c57
1 parent 59fbe0a
commit c2d6c57
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 26 deletions.
diff --git a/src/accordion/Accordion.tsx b/src/accordion/Accordion.tsx
@@ -11,7 +11,8 @@ export interface AccordionProps {
 
 const accordionItemCSS = css`
   cursor: pointer;
-  padding: var(--accordion-padding-top) var(--accordion-padding-side);
+  height: 40px;
+  padding: 0 var(--accordion-padding-side);
   display: block;
   width: 100%;
   display: flex;
@@ -25,15 +26,9 @@ const accordionItemCSS = css`
   text-align: start;
   color: var(--ac-global-text-color-900);
   border-bottom: 1px solid var(--ac-global-border-color-dark);
-  /* remove outline - TODO might need to give a visual cue that this area is in focus */
-  outline: none;
-  background-color: var(--ac-global-background-color-light);
-  transition: background-color 0.2s ease-in-out;
+  transition: background-color ease-in-out 0.2s;
   &:hover {
-    background-color: var(--ac-global-background-color-light-hover);
-  }
-  .ac-accordion-item__title {
-    font-size: var(--accordion-font-size);
+    background-color: var(--ac-global-background-color-light);
   }
 `;
 
@@ -48,12 +43,16 @@ export function Accordion({ children }: AccordionProps) {
       role="region"
       css={css`
         --accordion-animation-duration: ${theme.animation.global.duration}ms;
-
         &.ac-accordion--default {
           --accordion-padding-top: var(--ac-global-dimension-static-size-100);
           --accordion-padding-side: var(--ac-global-dimension-static-size-200);
           --accordion-font-size: ${theme.typography.sizes.medium.fontSize}px;
         }
+        .ac-accordion-item:not(:last-of-type) {
+          .ac-accordion-itemContent {
+            border-bottom: 1px solid var(--ac-global-border-color-dark);
+          }
+        }
       `}
     >
       {children}
@@ -77,6 +76,10 @@ export interface AccordionItemProps {
    * Callback function for when the collapsed state changes
    */
   onChange?: (isOpen: boolean) => void;
+  /**
+   * An extra element to show on the right hand side
+   */
+  extra?: ReactNode;
 }
 
 export function AccordionItem(props: AccordionItemProps) {
@@ -87,6 +90,7 @@ export function AccordionItem(props: AccordionItemProps) {
     defaultIsOpen = true,
     onChange,
     children,
+    extra,
   } = props;
   const [isOpen, setIsOpen] = useState(defaultIsOpen);
   const contentId = `${id}-content`,
@@ -137,23 +141,32 @@ export function AccordionItem(props: AccordionItemProps) {
           aria-expanded={isOpen}
         >
           {titleEl}
-          <Icon
-            svg={<ArrowIosDownwardOutline />}
-            className="ac-accordion-itemIndicator"
+          <div
             css={css`
-              transition: transform ease var(--accordion-animation-duration);
-              transform: rotate(0deg);
+              display: flex;
+              flex-direction: row;
+              align-items: center;
+              gap: var(--ac-global-dimension-static-size-100);
             `}
-            aria-hidden={true}
-          />
+          >
+            {extra}
+            <Icon
+              svg={<ArrowIosDownwardOutline />}
+              className="ac-accordion-itemIndicator"
+              css={css`
+                transition: transform ease var(--accordion-animation-duration);
+                transform: rotate(0deg);
+              `}
+              aria-hidden={true}
+            />
+          </div>
         </button>
       </Heading>
       <div
         className="ac-accordion-itemContent"
         id={contentId}
         role="region"
         css={css`
-          border-bottom: 1px solid var(--ac-global-border-color-dark);
           display: ${isOpen ? 'block' : 'none'};
         `}
         aria-labelledby={headerId}

diff --git a/src/card/Card.tsx b/src/card/Card.tsx
@@ -80,6 +80,7 @@ export function useStyleBorderColor(styleProps: HTMLAttributes<HTMLElement>) {
       : `var(--ac-global-border-color-default)`;
   }, [styleProps.style]);
 }
+
 export function Card({
   title,
   subTitle,

diff --git a/stories/Accordion.stories.tsx b/stories/Accordion.stories.tsx
@@ -7,6 +7,9 @@ import {
   AccordionItem,
   Card,
   Counter,
+  Text,
+  Button,
+  View,
 } from '../src';
 import InfoTip from './components/InfoTip';
 import { ThemeSplitView } from './components/ThemeSplitView';
@@ -20,14 +23,17 @@ const meta: Meta = {
 };
 
 const AccordionContents = () => (
-  <p style={{ padding: 16, margin: 10 }}>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
-    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
-  </p>
+  <View padding="size-100">
+    <Text>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+      est laborum
+    </Text>
+  </View>
 );
 
 export default meta;
@@ -68,3 +74,34 @@ const Template: Story<AccordionProps> = args => {
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
 // https://storybook.js.org/docs/react/workflows/unit-testing
 export const Default = Template.bind({});
+
+export function simple() {
+  return (
+    <ThemeSplitView>
+      <Accordion>
+        <AccordionItem
+          title="2 Predictions"
+          titleExtra={<InfoTip>Description of predictions</InfoTip>}
+          id="predictions"
+          extra={
+            <Button variant="default" size="compact">
+              Edit
+            </Button>
+          }
+        >
+          <AccordionContents />
+        </AccordionItem>
+        <AccordionItem
+          title="Features"
+          titleExtra={<Counter variant="light">100</Counter>}
+          id="features"
+        >
+          <AccordionContents />
+        </AccordionItem>
+        <AccordionItem title="10 Actuals" id="actuals">
+          <AccordionContents />
+        </AccordionItem>
+      </Accordion>
+    </ThemeSplitView>
+  );
+}