✨ (entity selector) design feedback

owid · May 2, 2024 · ce84260 · ce84260
1 parent b02c8f4
commit ce84260
Show file tree

Hide file tree

Showing 19 changed files with 340 additions and 176 deletions.
diff --git a/packages/@ourworldindata/components/src/Checkbox.scss b/packages/@ourworldindata/components/src/Checkbox.scss
@@ -7,6 +7,10 @@
 
     position: relative;
 
+    label {
+        margin: 0; // style leak in admin
+    }
+
     input {
         position: absolute;
         opacity: 0;

diff --git a/packages/@ourworldindata/grapher/src/closeButton/CloseButton.scss b/packages/@ourworldindata/grapher/src/closeButton/CloseButton.scss
@@ -18,11 +18,12 @@
 
     color: $light-text;
     background: white;
-    border: 1px solid $light-stroke !important;
+    border: 1px solid $light-stroke;
     border-radius: 50%;
 
     &:hover {
         background: $hover-fill;
+        border-color: $hover-fill;
         cursor: pointer;
         color: $dark-text;
     }

diff --git a/packages/@ourworldindata/grapher/src/controls/Dropdown.scss b/packages/@ourworldindata/grapher/src/controls/Dropdown.scss
@@ -33,6 +33,11 @@
         padding: 7px;
         color: $dark-text;
 
+        &.focus {
+            outline: 1px solid #a4b6ca !important;
+            outline-offset: -1px;
+        }
+
         &:hover {
             background: $hover-fill;
             cursor: pointer;
@@ -63,7 +68,8 @@
 
         .option {
             padding: 8px 18px;
-            &:hover {
+            &:hover,
+            &.focus {
                 cursor: pointer;
                 background: $hover-fill;
             }

diff --git a/packages/@ourworldindata/grapher/src/controls/Dropdown.tsx b/packages/@ourworldindata/grapher/src/controls/Dropdown.tsx
@@ -1,5 +1,6 @@
 import React from "react"
 import Select, { Props } from "react-select"
+import cx from "classnames"
 
 export function Dropdown(props: Props): React.JSX.Element {
     return (
@@ -14,10 +15,18 @@ export function Dropdown(props: Props): React.JSX.Element {
             unstyled={true}
             isMulti={false}
             classNames={{
-                control: (state) =>
-                    state.menuIsOpen ? "active control" : "control",
-                option: (state) =>
-                    state.isSelected ? "active option" : "option",
+                control: (state) => {
+                    return cx("control", {
+                        focus: state.isFocused,
+                        active: state.menuIsOpen,
+                    })
+                },
+                option: (state) => {
+                    return cx("option", {
+                        focus: state.isFocused,
+                        active: state.isSelected,
+                    })
+                },
                 menu: () => "menu",
             }}
             {...props}

diff --git a/packages/@ourworldindata/grapher/src/controls/RadioButton.scss b/packages/@ourworldindata/grapher/src/controls/RadioButton.scss
@@ -6,6 +6,10 @@
 
     position: relative;
 
+    label {
+        margin: 0; // style leak in admin
+    }
+
     input {
         position: absolute;
         opacity: 0;

diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
@@ -1527,8 +1527,14 @@ export class Grapher
         const { yColumnSlugs, xColumnSlug, sizeColumnSlug, colorColumnSlug } =
             this
 
+        // sort y columns by their display name
+        const sortedYColumnSlugs = sortBy(
+            yColumnSlugs,
+            (slug) => this.inputTable.get(slug).titlePublicOrDisplayName.title
+        )
+
         return excludeUndefined([
-            ...yColumnSlugs,
+            ...sortedYColumnSlugs,
             xColumnSlug,
             sizeColumnSlug,
             colorColumnSlug,
@@ -1542,7 +1548,7 @@ export class Grapher
         // sort y-columns by their display name
         const sortedYColumnSlugs = sortBy(
             yColumnSlugs,
-            (slug) => this.inputTable.get(slug).titlePublicOrDisplayName
+            (slug) => this.inputTable.get(slug).titlePublicOrDisplayName.title
         )
 
         const columnSlugs = excludeUndefined([
@@ -2492,7 +2498,7 @@ export class Grapher
                     justifyContent: "center",
                     textAlign: "center",
                     lineHeight: 1.5,
-                    padding: "3rem",
+                    padding: "48px",
                 }}
             >
                 <p style={{ color: "#cc0000", fontWeight: 700 }}>

diff --git a/packages/@ourworldindata/grapher/src/core/OverlayHeader.scss b/packages/@ourworldindata/grapher/src/core/OverlayHeader.scss
@@ -6,7 +6,13 @@
     align-items: center;
     padding: var(--padding) var(--padding) 16px;
 
-    button {
+    .title {
+        @include grapher_h5-black-caps;
+        color: $light-text;
+    }
+
+    .close-button {
         margin-left: 8px;
+        flex-shrink: 0;
     }
 }
diff --git a/packages/@ourworldindata/grapher/src/core/OverlayHeader.tsx b/packages/@ourworldindata/grapher/src/core/OverlayHeader.tsx
@@ -4,16 +4,25 @@ import { CloseButton } from "../closeButton/CloseButton.js"
 
 export function OverlayHeader({
     title,
+    onTitleClick,
     onDismiss,
     className,
 }: {
     title: string
+    onTitleClick?: () => void
     onDismiss?: () => void
     className?: string
 }): JSX.Element {
     return (
         <div className={cx("overlay-header", className)}>
-            <h2 className="grapher_h5-black-caps grapher_light">{title}</h2>
+            <h2
+                className={cx("title", {
+                    clickable: !!onTitleClick,
+                })}
+                onClick={onTitleClick}
+            >
+                {title}
+            </h2>
             {onDismiss && <CloseButton onClick={onDismiss} />}
         </div>
     )

diff --git a/packages/@ourworldindata/grapher/src/core/typography.scss b/packages/@ourworldindata/grapher/src/core/typography.scss
@@ -2,12 +2,34 @@
 // headings
 //
 
+@mixin grapher_h1-semibold {
+    display: block;
+    margin: 0;
+
+    font-family: $serif-font-stack;
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 1.1667;
+    letter-spacing: 0;
+}
+
+@mixin grapher_h2-semibold {
+    display: block;
+    margin: 0;
+
+    font-family: $serif-font-stack;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 1.2;
+    letter-spacing: 0;
+}
+
 @mixin grapher_h3-semibold {
     display: block;
     margin: 0;
 
     font-family: $serif-font-stack;
-    font-size: 1.125rem;
+    font-size: 18px;
     font-weight: 600;
     line-height: 1.1111;
     letter-spacing: 0;
@@ -22,7 +44,7 @@
     margin: 0;
 
     font-family: $serif-font-stack;
-    font-size: 1.1rem;
+    font-size: 16px;
     font-weight: 600;
     line-height: 1.5;
     letter-spacing: 0;
@@ -37,7 +59,7 @@
     margin: 0;
 
     font-family: $sans-serif-font-stack;
-    font-size: 0.75rem;
+    font-size: 12px;
     font-weight: 900;
     line-height: 1.3333;
     letter-spacing: 0.1em;
@@ -58,7 +80,7 @@
     margin: 0;
 
     font-family: $sans-serif-font-stack;
-    font-size: 1rem;
+    font-size: 16px;
     font-weight: 600;
     line-height: 1.5;
     letter-spacing: 0;
@@ -73,7 +95,7 @@
     margin: 0;
 
     font-family: $sans-serif-font-stack;
-    font-size: 0.8125rem;
+    font-size: 13px;
     font-weight: 500;
     line-height: 1.3846;
     letter-spacing: 0;
@@ -110,7 +132,7 @@
     margin: 0;
 
     font-family: $sans-serif-font-stack;
-    font-size: 0.875rem;
+    font-size: 14px;
     font-weight: 500;
     line-height: 1.2;
     letter-spacing: 0;
@@ -125,7 +147,7 @@
     margin: 0;
 
     font-family: $sans-serif-font-stack;
-    font-size: 0.8125rem;
+    font-size: 13px;
     font-weight: 400;
     line-height: 1.2;
     letter-spacing: 0.01em;

diff --git a/packages/@ourworldindata/grapher/src/dataTable/DataTable.scss b/packages/@ourworldindata/grapher/src/dataTable/DataTable.scss
@@ -226,7 +226,7 @@
 }
 
 .closest-time-notice-tippy {
-    max-width: 13rem;
+    max-width: 208px;
     text-align: center;
-    padding: 0.25rem;
+    padding: 4px;
 }
diff --git a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss
@@ -1,6 +1,9 @@
 .entity-selector {
     --padding: var(--modal-padding, 16px);
 
+    $sort-button-size: 32px;
+    $sort-button-margin: 16px;
+
     color: $dark-text;
 
     // necessary for scrolling
@@ -114,22 +117,19 @@
         .label {
             flex-shrink: 0;
             margin-right: 8px;
-            color: $dark-text;
         }
 
         button.sort {
             flex-shrink: 0;
-            margin-left: 16px;
-
-            $size: 32px;
+            margin-left: $sort-button-margin;
 
             display: flex;
             align-items: center;
             justify-content: center;
 
             position: relative;
-            height: $size;
-            width: $size;
+            height: $sort-button-size;
+            width: $sort-button-size;
             padding: 7px;
 
             color: $dark-text;
@@ -185,6 +185,14 @@
             position: relative;
             cursor: pointer;
 
+            &.hovered {
+                background: rgba(219, 229, 240, 0.4);
+            }
+
+            &--with-bar.hovered {
+                background: rgba(219, 229, 240, 0.6);
+            }
+
             .value {
                 color: #a1a1a1;
                 white-space: nowrap;
@@ -217,7 +225,7 @@
             }
         }
 
-        .animated-entity {
+        .flipped {
             position: relative;
             z-index: 0;
             background: #fff;
@@ -255,36 +263,48 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: 16px var(--padding);
+        padding: 8px var(--padding);
         box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.04);
 
         .footer__selected {
-            font-size: 0.6875rem;
+            font-size: 11px;
             font-weight: 500;
             letter-spacing: 0.06em;
             text-transform: uppercase;
-
-            display: flex;
-            flex-wrap: wrap;
-            column-gap: 4px;
         }
 
         button {
             background: none;
             border: none;
             color: $dark-text;
-            font-size: 0.8125rem;
+            font-size: 13px;
             font-weight: 500;
             letter-spacing: 0.01em;
             text-decoration-line: underline;
             text-underline-offset: 3px;
             cursor: pointer;
 
+            padding: 8px;
+            margin-right: -8px;
+            border-radius: 4px;
+
+            &:hover {
+                text-decoration: none;
+            }
+
+            &:active {
+                background: #f7f7f7;
+            }
+
             &:disabled {
                 color: #c6c6c6;
                 text-decoration: none;
                 cursor: default;
             }
         }
     }
+
+    .grapher-dropdown .menu {
+        width: calc(100% + $sort-button-margin + $sort-button-size);
+    }
 }