✨ (entity selector) design feedback

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

Hide file tree

Showing 19 changed files with 427 additions and 205 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;
 }