design feedback

sumup-oss · Mar 11, 2025 · 6727781 · 6727781
1 parent 1ca633c
commit 6727781
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 15 deletions.
diff --git a/packages/circuit-ui/components/ComparisonTable/ComparisonTable.module.css b/packages/circuit-ui/components/ComparisonTable/ComparisonTable.module.css
@@ -0,0 +1,10 @@
+.base {
+  position: relative;
+  background-color: var(--cui-bg-normal);
+}
+
+.picker {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
diff --git a/packages/circuit-ui/components/ComparisonTable/ComparisonTable.tsx b/packages/circuit-ui/components/ComparisonTable/ComparisonTable.tsx
@@ -22,6 +22,7 @@ import {
   AccessibilityError,
   isSufficientlyLabelled,
 } from '../../util/errors.js';
+import { clsx } from '../../styles/clsx.js';
 
 import {
   PlanPicker,
@@ -31,6 +32,7 @@ import {
   PlanTable,
   type PlanTableProps,
 } from './components/PlanTable/PlanTable.js';
+import classes from './ComparisonTable.module.css';
 
 export interface ComparisonTableProps
   extends Omit<PlanTableProps, 'activePlans' | 'isCollapsed'>,
@@ -48,6 +50,7 @@ export const ComparisonTable = forwardRef<
       showAllFeaturesLabel,
       selectFirstPlanLabel,
       selectSecondPlanLabel,
+      className,
       ...props
     },
     ref,
@@ -95,9 +98,10 @@ export const ComparisonTable = forwardRef<
     }, []);
 
     return (
-      <div {...props}>
+      <div className={clsx(classes.base, className)} {...props}>
         {isMobile && plans.length >= 3 && (
           <PlanPicker
+            className={classes.picker}
             plans={planOptions}
             selectedPlans={activePlans}
             onPlanSelect={onPlanSelect}

diff --git a/packages/circuit-ui/components/ComparisonTable/components/PlanPicker/PlanPicker.module.css b/packages/circuit-ui/components/ComparisonTable/components/PlanPicker/PlanPicker.module.css
@@ -3,7 +3,8 @@
   gap: var(--cui-spacings-kilo);
   justify-content: center;
   width: 100%;
-  margin-bottom: var(--cui-spacings-giga);
+  padding-bottom: var(--cui-spacings-giga);
+  background-color: var(--cui-bg-normal);
 }
 
 @media (max-width: 479px) {

diff --git a/packages/circuit-ui/components/ComparisonTable/components/PlanTable/PlanTable.module.css b/packages/circuit-ui/components/ComparisonTable/components/PlanTable/PlanTable.module.css
@@ -1,7 +1,7 @@
 .base {
-  position: relative;
   width: 100%;
-  border-collapse: collapse;
+  border-spacing: 0;
+  border-collapse: separate;
 }
 
 .wrapper {
@@ -10,27 +10,27 @@
 }
 
 .offers {
-  th:last-child > div {
-    border-right: none;
+  th:first-child > div {
+    border-left: none;
   }
 }
 
 .base thead th {
   position: sticky;
   top: 0;
   z-index: 1;
+  padding-top: var(--cui-spacings-giga);
   background-color: var(--cui-bg-normal);
 }
 
 .section {
   position: sticky;
   top: 0;
   z-index: 1;
-  padding: var(--cui-spacings-mega) 0;
+  padding: var(--cui-spacings-giga) 0 var(--cui-spacings-mega);
   text-align: start;
   background-color: var(--cui-bg-normal);
-  box-shadow: inset 0 calc(-1 * var(--cui-border-width-kilo)) 0 0
-    var(--cui-border-strong);
+  border-bottom: var(--cui-border-width-kilo) solid var(--cui-border-strong);
 }
 
 .expand {
@@ -40,20 +40,23 @@
   left: 0;
   z-index: 1;
   display: flex;
+  align-items: flex-end;
   justify-content: center;
   width: 100%;
-  min-height: 64px;
+  min-height: 96px;
   content: "";
   background: linear-gradient(
     color-mix(in sRGB, var(--cui-bg-normal) 0%, transparent),
-    color-mix(in sRGB, var(--cui-bg-normal) 73.5%, transparent),
+    color-mix(in sRGB, var(--cui-bg-normal) 90%, transparent),
     color-mix(in sRGB, var(--cui-bg-normal) 100%, transparent)
   );
 }
 
 @media (max-width: 767px) {
-  .base th {
+  .base thead th {
+    top: 72px;
     width: 30%;
+    padding-top: 0;
   }
 
   .base th:first-child {

diff --git a/packages/circuit-ui/components/ComparisonTable/components/PlanTable/PlanTable.tsx b/packages/circuit-ui/components/ComparisonTable/components/PlanTable/PlanTable.tsx
@@ -123,7 +123,6 @@ export const PlanTable = forwardRef<HTMLTableElement, PlanTableProps>(
     return (
       <div className={classes.wrapper}>
         <table
-          style={{ position: 'relative' }}
           className={classes.base}
           ref={applyMultipleRefs(ref, tableRef)}
           {...props}
@@ -150,8 +149,9 @@ export const PlanTable = forwardRef<HTMLTableElement, PlanTableProps>(
                   scope="rowgroup"
                   headers="features"
                   colSpan={plans.length + 1}
+                  /* account for sticky plan selector on mobile */
                   style={{
-                    top: `${headerHeight}px`,
+                    top: `${(isMobile ? 72 : 0) + headerHeight}px`,
                   }}
                 >
                   <SectionTitleElement size="m" weight="semibold">

diff --git a/packages/circuit-ui/components/ComparisonTable/components/TableHeader/TableHeader.module.css b/packages/circuit-ui/components/ComparisonTable/components/TableHeader/TableHeader.module.css
@@ -5,10 +5,11 @@
   justify-content: center;
   min-height: 96px;
   padding: 0 var(--cui-spacings-kilo);
-  border-right: 1px solid var(--cui-border-subtle);
+  border-left: 1px solid var(--cui-border-subtle);
 }
 
 .wrapper {
+  padding: 0;
   vertical-align: bottom;
 }