fix notify

Arize-ai · Oct 26, 2023 · 13c31a7 · 13c31a7
1 parent feae4c4
commit 13c31a7
Show file tree

Hide file tree

Showing 13 changed files with 93 additions and 111 deletions.
diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
@@ -1,6 +1,6 @@
 <style>
   body {
     font-family: 'Roboto', sans-serif;
-    color: rgba(255, 255, 255, 0.9);
+    color: var(--ac-global-text-color-900);
   }
 </style>
diff --git a/src/alert/styles.ts b/src/alert/styles.ts
@@ -12,7 +12,7 @@ const generateSeverityCSS = (semanticColor: SeverityLevel) => {
     css`
       border: 1px solid var(${colorPrefix});
       background-color: var(${colorPrefix}-700);
-      color: var(--ac-global-color-text-900);
+      color: var(--ac-global-static-color-white-900);
     `
   );
 };

diff --git a/src/button/styles.ts b/src/button/styles.ts
@@ -70,7 +70,7 @@ export const buttonCSS = css`
     border-color: transparent;
     &:hover:not([disabled]) {
       border-color: transparent;
-      background-color: ${theme.components.button.defaultHoverBackgroundColor};
+      background-color: var(--ac-global-input-field-background-color-active);
     }
   }
 

diff --git a/src/list/List.tsx b/src/list/List.tsx
@@ -113,7 +113,7 @@ const listItemCSS = (options: {
 
     &:not(:first-of-type)::after {
       content: ' ';
-      border-top: 1px solid ${theme.colors.dividerColor};
+      border-top: 1px solid var(--ac-global-border-color-default);
       position: absolute;
       left: ${spacing}px;
       right: 0;

diff --git a/src/notification/Notice.tsx b/src/notification/Notice.tsx
@@ -56,6 +56,7 @@ export function Notice({
           display: flex;
           flex-direction: row;
           align-items: center;
+          color: var(--ac-global-static-color-white-900);
           flex: 1 1 auto;
           & > .ac-text {
             flex: 1 1 auto;
@@ -75,7 +76,7 @@ export function Notice({
           title="Close notice"
           css={css`
             background-color: transparent;
-            color: inherit;
+            color: var(--ac-global-static-color-white-900);
             padding: 0;
             border: none;
             cursor: pointer;
@@ -126,7 +127,7 @@ export function Notice({
               onClose();
             }}
           >
-            <Text textSize="medium" color={'inherit'}>
+            <Text textSize="medium" color="inherit">
               {action.text}
             </Text>
           </button>

diff --git a/src/progress/styles.ts b/src/progress/styles.ts
@@ -4,10 +4,10 @@ import { fillMask1, fillMask2, fillsRotate } from './animation';
 
 export const progressCircleCSS = css`
   /* circle unfilled border color */
-  --progress-circle-track-border-color: ${theme.colors.gray200};
+  --progress-circle-track-border-color: var(--ac-global-color-grey-300);
 
   /* circle progress fill border color */
-  --progress-circle-fill-border-color: ${theme.colors.arizeLightBlue};
+  --progress-circle-fill-border-color: var(--ac-global-color-primary);
 
   /* default size and thickness */
   --progress-circle-size: 32px;

diff --git a/src/provider/GlobalStyles.tsx b/src/provider/GlobalStyles.tsx
@@ -606,7 +606,7 @@ export const lightThemeCSS = css`
 
     // Designation colors
     --ac-global-color-designation-purple: #4500d9;
-    --ac-global-color-designation-turquoise: #00add0;
+    --ac-global-color-designation-turquoise: #y;
 
     --ac-global-text-color-900: rgba(0, 0, 0, 0.9);
     --ac-global-text-color-700: rgba(0, 0, 0, 0.7);

diff --git a/src/radio/styles.ts b/src/radio/styles.ts
@@ -24,7 +24,7 @@ export const radioGroupCSS = ({
   &.ac-radio-group--inline-button {
     display: inline-flex;
     flex-direction: row;
-    background-color: var(--ac-global-color-grey-300);
+    background-color: var(--ac-global-input-field-background-color);
     border: 1px solid var(--ac-global-input-field-border-color);
     border-radius: ${theme.borderRadius.medium}px;
     overflow: hidden;

diff --git a/src/search/CompactSearchField.tsx b/src/search/CompactSearchField.tsx
@@ -50,10 +50,7 @@ export function CompactSearchField(props: CompactSearchFieldProps) {
           border: none !important;
           border-radius: 0 ${theme.rounding.rounding4}px
             ${theme.rounding.rounding4}px 0;
-          // The button padding provides enough space
-          & > input {
-            padding-left: 0;
-          }
+
           min-width: 0;
           transition: width 0.2s ease-in-out;
         }

diff --git a/src/switch/styles.ts b/src/switch/styles.ts
@@ -2,14 +2,14 @@ import { css } from '@emotion/react';
 import theme from '../theme';
 
 export const switchCSS = css`
-  --ac-switch-label-color-disabled: ${theme.textColors.white50};
+  --ac-switch-label-color-disabled: var(--ac-global-text-color-500);
 
   --ac-switch-background-color: var(--ac-global-color-grey-300);
   --ac-switch-background-color-disabled: var(--ac-global-color-grey-300);
-  --ac-switch-background-color-selected: var(--ac-global-color-primary);
+  --ac-switch-background-color-selected: var(--ac-global-color-primary-900);
 
   --ac-switch-handle-background-color: white;
-  --ac-switch-handle-background-color-selected: ${theme.colors.arizeLightBlue};
+  --ac-switch-handle-background-color-selected: var(--ac-global-color-primary);
 
   --ac-switch-min-height: 30px;
   --ac-switch-rail-width: 34px;

diff --git a/stories/Gallery.stories.tsx b/stories/Gallery.stories.tsx
@@ -36,6 +36,7 @@ import { Icon, Icons, SearchOutline, Settings } from '../src/icon';
 import chartFile from './images/chart.png';
 import { ThemeToggleWrap } from './components/ThemeToggleWrap';
 import InfoTip from './components/InfoTip';
+import { ThemeSplitView } from './components/ThemeSplitView';
 
 const meta: Meta = {
   title: 'Gallery',
@@ -100,7 +101,7 @@ function AsideLane(props: PropsWithChildren) {
 
 export function OverviewPage() {
   return (
-    <ThemeToggleWrap>
+    <ThemeSplitView>
       <View padding="size-100">
         <Flex direction="row" gap="size-100">
           <MainLane>
@@ -110,10 +111,25 @@ export function OverviewPage() {
               extra={<ZoomControls />}
             >
               <Flex direction="row">
-                <img src={chartFile} />
-                <View>
-                  <Text textSize="xxlarge">0.0</Text>
-                  <Heading>Metric</Heading>
+                <View flex="1 1 auto">
+                  <img
+                    src={chartFile}
+                    css={css`
+                      width: 100%;
+                      flex: 1 1 auto;
+                    `}
+                  />
+                </View>
+                <View flex="none" width="100px">
+                  <Flex
+                    direction="column"
+                    alignItems="center"
+                    justifyContent="center"
+                    height="100%"
+                  >
+                    <Text textSize="xxlarge">0.0</Text>
+                    <Heading>Metric</Heading>
+                  </Flex>
                 </View>
               </Flex>
             </Card>
@@ -160,17 +176,8 @@ export function OverviewPage() {
             <ModelBaseline />
           </AsideLane>
         </Flex>
-
-        <Flex direction="column" gap="size-100">
-          <View
-            borderColor="light"
-            borderWidth="thin"
-            flex="1 1 auto"
-            borderRadius="medium"
-          ></View>
-        </Flex>
       </View>
-    </ThemeToggleWrap>
+    </ThemeSplitView>
   );
 }
 
@@ -182,21 +189,21 @@ function AccordionDimensions() {
         id="model-health-predictions"
         defaultIsOpen={false}
       >
-        beeboop
+        Prediction Details
       </AccordionItem>
       <AccordionItem
         title="Actuals"
         id="model-health-actual"
         defaultIsOpen={false}
       >
-        beeboop
+        Actuals Details
       </AccordionItem>
       <AccordionItem
         title="Features"
         id="model-health-features"
         defaultIsOpen={false}
       >
-        beeboop
+        Feature Details
       </AccordionItem>
     </Accordion>
   );
@@ -239,25 +246,22 @@ function MonitorsListingCard() {
     >
       <List>
         <ListItem>
-          <div
-            css={css`
-              display: flex;
-              align-items: center;
-            `}
-          >
-            <div
-              css={css`
-                margin-right: 24px;
-              `}
-            >
-              <Icon svg={<Icons.CheckmarkCircleOutline />} />
-              <h3>Drift</h3>
-            </div>
-          </div>
+          <Flex direction="row" alignItems="center" gap="size-100">
+            <Icon svg={<Icons.CheckmarkCircleOutline />} />
+            <Heading>Drift</Heading>
+          </Flex>
         </ListItem>
         <ListItem>
-          <Icon svg={<Icons.CheckmarkCircleOutline />} />
-          Data Quality
+          <Flex direction="row" alignItems="center" gap="size-100">
+            <Icon svg={<Icons.CheckmarkCircleOutline />} />
+            <Heading>Data Quality</Heading>
+          </Flex>
+        </ListItem>
+        <ListItem>
+          <Flex direction="row" alignItems="center" gap="size-100">
+            <Icon svg={<Icons.CheckmarkCircleOutline />} />
+            <Heading>Performance</Heading>
+          </Flex>
         </ListItem>
       </List>
     </Card>
@@ -271,7 +275,7 @@ function ModelBaseline() {
       variant="compact"
       titleExtra={<InfoTip>tooltips stuff</InfoTip>}
     >
-      drift/dataquality/performance stuff
+      baseline info
     </Card>
   );
 }
@@ -291,30 +295,12 @@ export function Gallery() {
           gap: 8px;
         `}
       >
-        <Card
-          title="hello"
-          extra={
-            <div
-              css={css`
-                display: flex;
-                & > * + * {
-                  margin-left: 8px;
-                }
-              `}
-            >
-              <Button
-                variant="default"
-                icon={<Icon svg={<Settings />} />}
-              ></Button>
-              <CompactSearchField placeholder="Search..." />
-            </div>
-          }
-        ></Card>
         <Card
           title="Model Health"
           subTitle={'An overview of the the health of your model'}
           bodyStyle={{ padding: 0, overflow: 'hidden' }}
           collapsible
+          extra={<CompactSearchField placeholder="Search..." />}
         >
           <Accordion>
             <AccordionItem
@@ -394,28 +380,20 @@ export function Gallery() {
             </div>
           }
         >
-          <div
+          <Alert variant="info" banner title="Heads up">
+            Your predictions may be delayed by up to 10 minutes
+          </Alert>
+          <Alert variant="danger" banner title="Heads up">
+            Your predictions may be delayed by up to 10 minutes
+          </Alert>
+          <img
+            src={chartFile}
+            alt="chart image"
             css={css`
-              position: relative;
-              .ac-alert {
-                position: absolute;
-                left: 0;
-                right: 0;
-              }
+              width: 100%;
+              padding: 16px;
             `}
-          >
-            <Alert variant="info" banner title="Heads up">
-              Your predictions may be delayed by up to 10 minutes
-            </Alert>
-
-            <img
-              src={chartFile}
-              alt="chart image"
-              css={css`
-                margin: 24px;
-              `}
-            />
-          </div>
+          />
         </Card>
         <Card
           title="Example Form"
@@ -510,6 +488,7 @@ export function Gallery() {
             alt="chart image"
             css={css`
               margin: 24px;
+              width: 100%;
             `}
           />
         </View>

diff --git a/stories/ProgressCircle.stories.tsx b/stories/ProgressCircle.stories.tsx
@@ -4,6 +4,7 @@ import { Meta, Story } from '@storybook/react';
 import { ProgressCircle, ProgressCircleProps } from '../src';
 import { Icon, PlusCircleOutline } from '../src/icon';
 import { withDesign } from 'storybook-addon-designs';
+import { ThemeSplitView } from './components/ThemeSplitView';
 
 const plusIcon = <Icon svg={<PlusCircleOutline />} />;
 
@@ -31,21 +32,23 @@ export default meta;
 
 export const Gallery = () => {
   return (
-    <div
-      css={css`
-        display: flex;
-        flex-direction: column;
-        gap: 24px;
-        align-items: center;
-      `}
-    >
-      <ProgressCircle aria-label="Loading…" size="S" isIndeterminate />
-      <ProgressCircle aria-label="Loading…" size="M" isIndeterminate />
-      <ProgressCircle aria-label="Loading…" size="L" isIndeterminate />
-      <ProgressCircle aria-label="Loading…" size="S" value={30} />
-      <ProgressCircle aria-label="Loading…" size="M" value={60} />
-      <ProgressCircle aria-label="Loading…" size="L" value={80} />
-    </div>
+    <ThemeSplitView>
+      <div
+        css={css`
+          display: flex;
+          flex-direction: column;
+          gap: 24px;
+          align-items: center;
+        `}
+      >
+        <ProgressCircle aria-label="Loading…" size="S" isIndeterminate />
+        <ProgressCircle aria-label="Loading…" size="M" isIndeterminate />
+        <ProgressCircle aria-label="Loading…" size="L" isIndeterminate />
+        <ProgressCircle aria-label="Loading…" size="S" value={30} />
+        <ProgressCircle aria-label="Loading…" size="M" value={60} />
+        <ProgressCircle aria-label="Loading…" size="L" value={80} />
+      </div>
+    </ThemeSplitView>
   );
 };
 const Template: Story<ProgressCircleProps> = args => (