increasing size of TrackerStep icons

jpmorganchase · Jul 11, 2024 · 7f41429 · 7f41429
1 parent 9b9754a
commit 7f41429
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 12 deletions.
diff --git a/packages/lab/src/stepped-tracker/TrackerConnector/TrackerConnector.css b/packages/lab/src/stepped-tracker/TrackerConnector/TrackerConnector.css
@@ -15,15 +15,16 @@
   border-top-width: var(--trackerConnector-thickness);
   border-top-style: var(--trackerConnector-style-border);
   border-top-color: var(--trackerConnector-color);
-  width: calc(100% - (var(--saltIcon-size)) - (var(--trackerConnector-margin) * 2));
-  left: calc(50% + (var(--saltIcon-size) / 2) + var(--trackerConnector-margin));
-  top: calc(var(--saltIcon-size) / 2 - (var(--trackerConnector-thickness) / 2));
+  width: calc(100% - var(--salt-size-base));
+  left: calc(50% + (var(--salt-size-base) / 2));
+  top: calc(var(--salt-size-base) / 2 - (var(--trackerConnector-thickness) / 2));
+  transform: translateY(-50%);
   height: 0;
 }
 
 .saltSteppedTracker.saltSteppedTracker-vertical .saltTrackerConnector {
   top: var(--salt-size-base);
-  left: calc((var(--saltIcon-size) / 2) - (var(--trackerConnector-thickness) / 2));
+  left: calc((var(--salt-size-base) / 2) - (var(--trackerConnector-thickness) / 2));
   bottom: 0;
   border-left-width: var(--trackerConnector-thickness);
   border-left-style: var(--trackerConnector-style-border);

diff --git a/packages/lab/src/stepped-tracker/TrackerStep/TrackerStep.css b/packages/lab/src/stepped-tracker/TrackerStep/TrackerStep.css
@@ -5,8 +5,6 @@
   --trackerStep-icon-color: var(--saltTrackerStep-icon-color, var(--salt-status-static-foreground));
 
   --saltIcon-color: var(--trackerStep-icon-color);
-  /* We redefine Icon Size so we can use it in calc functions in the trackerConnector */
-  --saltIcon-size: var(--saltTrackerStep-icon-size, max(var(--salt-size-icon), 12px));
 }
 
 .saltTrackerStep {
@@ -38,8 +36,10 @@
   padding-bottom: var(--salt-spacing-300);
 }
 
-.saltSteppedTracker.saltSteppedTracker-vertical .saltTrackerStep-indicator {
-  width: var(--salt-size-icon);
+.saltTrackerStep-indicator {
+  flex-shrink: 0;
+  flex-grow: 0;
+  width: var(--salt-size-base);
   height: var(--salt-size-base);
   display: flex;
   justify-content: center;
@@ -85,8 +85,8 @@
   --trackerStep-icon-color: var(--trackerStep-icon-color-active);
 }
 
-.saltSteppedTracker.saltSteppedTracker-vertical .saltTrackerStep-depth-1 .saltIcon,
+/* .saltSteppedTracker.saltSteppedTracker-vertical .saltTrackerStep-depth-1 .saltIcon,
 .saltSteppedTracker.saltSteppedTracker-vertical .saltTrackerStep-depth-2 .saltIcon {
   width: var(--salt-size-adornment);
   min-width: var(--salt-size-adornment);
-}
+} */
diff --git a/packages/lab/src/stepped-tracker/TrackerStep/TrackerStep.tsx b/packages/lab/src/stepped-tracker/TrackerStep/TrackerStep.tsx
@@ -58,7 +58,6 @@ const getStateIcon = ({
   }
   const parsedState =
     depth > 0 && state === "completed" ? "completed-sub" : state;
-  console.log({ parsedState });
   return iconMap[parsedState];
 };
 
@@ -117,6 +116,7 @@ export const TrackerStep = forwardRef<HTMLLIElement, TrackerStepProps>(
     const connectorState = activeStep > stepNumber ? "active" : "default";
     const hasConnector = stepNumber < totalSteps - 1;
     const depthClass = withBaseName(`depth-${depth}`);
+    const iconSize = depth > 0 ? 1 : 1.5;
 
     const innerStyle = {
       ...style,
@@ -138,7 +138,7 @@ export const TrackerStep = forwardRef<HTMLLIElement, TrackerStepProps>(
         {...restProps}
       >
         <div className={withBaseName("indicator")}>
-          <Icon />
+          <Icon size={iconSize}/>
         </div>
         {hasConnector && <TrackerConnector state={connectorState} />}
         <div className={withBaseName("body")}>{children}</div>