feat: various small tweaks (#627)

pluralsh · Jul 25, 2024 · bb1f422 · bb1f422
1 parent 43f4f95
commit bb1f422
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 46 deletions.
diff --git a/src/components/Accordion.tsx b/src/components/Accordion.tsx
@@ -39,7 +39,6 @@ function AccordionRef(
       ref={ref}
       asChild
       collapsible={props.collapsible ?? true}
-      css={{ overflow: 'hidden' }}
       {...props}
     >
       <Card>{children}</Card>

diff --git a/src/components/ComboBox.tsx b/src/components/ComboBox.tsx
@@ -475,6 +475,7 @@ function ComboBox({
             >
               {chips.map((chipProps) => (
                 <Chip
+                  fillLevel={2}
                   size="small"
                   condensed
                   truncateWidth={100}

diff --git a/src/components/IconFrame.tsx b/src/components/IconFrame.tsx
@@ -139,14 +139,7 @@ const IconFrameSC = styled(Flex)<{
         },
       }
     : {}),
-  ...($type === 'floating'
-    ? {
-        boxShadow:
-          theme.mode === 'light'
-            ? theme.boxShadows.slight
-            : theme.boxShadows.moderate,
-      }
-    : {}),
+  ...($type === 'floating' ? { boxShadow: theme.boxShadows.slight } : {}),
 }))
 
 const IconFrame = forwardRef<

diff --git a/src/components/Select.tsx b/src/components/Select.tsx
@@ -102,38 +102,26 @@ function Trigger({ buttonElt, isOpen, ...props }: TriggerProps) {
 export const TitleContent = styled.div<{
   $size: Size
   $parentFillLevel: FillLevel
-  $matchFill?: boolean
-}>(
-  ({
-    theme,
-    $size: size,
-    $parentFillLevel: parentFillLevel,
-    $matchFill: matchFill = false,
-  }) => {
-    const hPad = theme.spacing.small
-    const vPad = size === 'small' ? 5 : 9
-
-    return {
-      ...theme.partials.text.caption,
-      alignItems: 'center',
-      backgroundColor: matchFill
-        ? theme.colors[parentFillLevelToBackground[parentFillLevel]]
-        : theme.colors[
-            parentFillLevel < 2 ? 'fill-three' : 'fill-three-selected'
-          ],
-      color: theme.colors.text,
-      display: 'flex',
-      flexDirection: 'row',
-      fontWeight: 600,
-      // Must specify individual padding to override Honorable styles on <Input>
-      paddingTop: vPad,
-      paddingBottom: vPad,
-      paddingLeft: hPad,
-      paddingRight: hPad,
-      borderRight: theme.borders.input,
-    }
+}>(({ theme, $size: size, $parentFillLevel: parentFillLevel }) => {
+  const hPad = theme.spacing.small
+  const vPad = size === 'small' ? 5 : 9
+
+  return {
+    ...theme.partials.text.caption,
+    alignItems: 'center',
+    backgroundColor: theme.colors[parentFillLevelToBackground[parentFillLevel]],
+    color: theme.colors.text,
+    display: 'flex',
+    flexDirection: 'row',
+    fontWeight: 600,
+    // Must specify individual padding to override Honorable styles on <Input>
+    paddingTop: vPad,
+    paddingBottom: vPad,
+    paddingLeft: hPad,
+    paddingRight: hPad,
+    borderRight: theme.borders.input,
   }
-)
+})
 
 const SelectButtonInner = styled.div<{
   $isOpen: boolean
@@ -233,7 +221,6 @@ const SelectButton = forwardRef<
           <TitleContent
             $size={size}
             $parentFillLevel={parentFillLevel}
-            $matchFill={transparent}
           >
             {titleContent}
           </TitleContent>

diff --git a/src/components/StepperStep.tsx b/src/components/StepperStep.tsx
@@ -33,10 +33,7 @@ const StepperStepSC = styled.div<{
     marginLeft: $vertical || $compact ? 'none' : 'auto',
     marginRight: $vertical || $compact ? 'none' : 'auto',
     borderRadius: '100%',
-    backgroundColor:
-      theme.mode === 'light'
-        ? theme.colors['fill-zero']
-        : theme.colors['fill-one'],
+    backgroundColor: theme.colors['fill-two'],
     border: `1px solid ${
       $isActive ? theme.colors['border-selected'] : theme.colors.border
     }`,

diff --git a/src/components/Table.tsx b/src/components/Table.tsx
@@ -832,7 +832,9 @@ function TableRef(
         </T>
         {isEmpty(rows) && (
           <EmptyState
-            {...{ message: 'No results match your query', ...emptyStateProps }}
+            message="No results match your query"
+            style={{ background: theme.colors['fill-zero-hover'] }}
+            {...emptyStateProps}
           />
         )}
       </Div>