styling fixes

Arize-ai · Aug 1, 2023 · d278b05 · d278b05
1 parent ff54058
commit d278b05
Show file tree

Hide file tree

Showing 4 changed files with 316 additions and 217 deletions.
diff --git a/src/provider/GlobalStyles.tsx b/src/provider/GlobalStyles.tsx
@@ -249,6 +249,10 @@ export const globalCSS = css`
       --ac-global-grid-margin-xlarge: var(
         --ac-global-dimension-static-size-600
       );
+
+      /* Aliases */
+      --ac-alias-single-line-height: var(--ac-global-dimension-size-400);
+      --ac-alias-single-line-width: var(--ac-global-dimension-size-2400);
     }
   }
 `;

diff --git a/src/slider/SliderBase.tsx b/src/slider/SliderBase.tsx
@@ -21,9 +21,71 @@ export interface SliderBaseProps<T = number[]> extends BarSliderBase<T> {
   style?: CSSProperties;
 }
 
+const labelContainerCSS = css`
+  grid-template-columns: auto 1fr auto;
+  grid-template-areas: 'label contextualHelp value';
+  justify-items: start;
+  display: grid;
+`;
+
 const labelCSS = css`
   color: ${theme.textColors.white90};
 `;
+
+const sliderCSS = css`
+  --ac-slider-handle-width: var(--ac-global-dimension-size-200);
+  width: var(
+    --ac-alias-single-line-width,
+    var(--ac-global-dimension-size-2400)
+  );
+  flex-direction: column;
+  display: inline-flex;
+
+  .ac-slider-track {
+    height: var(--ac-slider-track-height, var(--ac-global-border-size-thick));
+    box-sizing: border-box;
+    z-index: 1;
+    top: calc(var(--ac-slider-height, var(--ac-alias-single-line-height)) / 2);
+    margin-top: calc(
+      var(--ac-slider-fill-track-height, var(--ac-alias-border-size-thick)) / -2
+    );
+    pointer-events: none;
+    position: absolute;
+
+    &::before {
+      content: '';
+      height: 100%;
+      display: block;
+    }
+    &:first-of-type::before,
+    &:last-of-type::before {
+      /* The edge tracks */
+      background: var(--ac-global-color-gray-500);
+    }
+    &:not(:first-of-type):not(:last-of-type)::before {
+      /* The middle track */
+      background: var(--ac-global-color-gray-100);
+    }
+    &:last-of-type {
+      margin-left: calc(
+        var(--ac-slider-handle-width, var(--ac-global-dimension-size-200)) / 2 *
+          -1
+      );
+      right: 0;
+      left: auto;
+      padding-left: var(
+        --ac-slider-handle-gap,
+        var(--ac-global-border-size-thicker)
+      );
+      padding-right: 0;
+    }
+  }
+`;
+
+const controlsCSS = css`
+  min-height: var(--ac-slider-height, var(--ac-alias-single-line-height));
+`;
+
 function SliderBase(props: SliderBaseProps, ref: FocusableRef<HTMLDivElement>) {
   props = useProviderProps(props);
   let {
@@ -73,7 +135,7 @@ function SliderBase(props: SliderBaseProps, ref: FocusableRef<HTMLDivElement>) {
   let domRef = useFocusableRef(ref, inputRef);
 
   let displayValue = '';
-  let maxLabelLength = undefined;
+  let maxLabelLength: number | undefined = undefined;
 
   if (typeof getValueLabel === 'function') {
     displayValue = getValueLabel(state.values);
@@ -136,6 +198,10 @@ function SliderBase(props: SliderBaseProps, ref: FocusableRef<HTMLDivElement>) {
     <output
       {...outputProps}
       className={'ac-slider-value'}
+      css={css`
+        grid-area: value;
+        text-align: right;
+      `}
       style={
         maxLabelLength > 0
           ? {
@@ -165,15 +231,21 @@ function SliderBase(props: SliderBaseProps, ref: FocusableRef<HTMLDivElement>) {
         ...style,
       }}
       {...groupProps}
+      css={sliderCSS}
     >
       {props.label && (
-        <div className={'ac-slider-labelContainer'} role="presentation">
+        <div
+          className={'ac-slider-labelContainer'}
+          css={labelContainerCSS}
+          role="presentation"
+        >
           {props.label && labelNode}
           {labelPosition === 'top' && showValueLabel && valueNode}
         </div>
       )}
       <div
         className={'ac-slider-controls'}
+        css={controlsCSS}
         ref={trackRef}
         {...trackProps}
         role="presentation"

diff --git a/src/slider/SliderThumb.tsx b/src/slider/SliderThumb.tsx
@@ -10,32 +10,21 @@ import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { css } from '@emotion/react';
 
 const handleCSS = css`
-  top: calc(
-    var(--spectrum-slider-height, var(--spectrum-alias-single-line-height)) / 2
-  );
+  top: calc(var(--ac-slider-height, var(--ac-alias-single-line-height)) / 2);
   z-index: 2;
   box-sizing: border-box;
-  width: var(
-    --spectrum-slider-handle-width,
-    var(--spectrum-global-dimension-size-200)
-  );
-  height: var(
-    --spectrum-slider-handle-height,
-    var(--spectrum-global-dimension-size-200)
-  );
+  width: var(--ac-slider-handle-width, var(--ac-global-dimension-size-200));
+  height: var(--ac-slider-handle-height, var(--ac-global-dimension-size-200));
   border-width: var(
-    --spectrum-slider-handle-border-size,
-    var(--spectrum-alias-border-size-thick)
+    --ac-slider-handle-border-size,
+    var(--ac-alias-border-size-thick)
   );
   border-radius: var(
-    --spectrum-slider-handle-border-radius,
-    var(--spectrum-alias-border-radius-medium)
+    --ac-slider-handle-border-radius,
+    var(--ac-global-rounding-medium)
   );
   transition: border-width
-    var(
-      --spectrum-slider-animation-duration,
-      var(--spectrum-global-animation-duration-100)
-    )
+    var(--ac-slider-animation-duration, var(--ac-global-animation-duration-100))
     ease-in-out;
   border-style: solid;
   outline: none;