update arrows and standardize names (#11246)

frontend/src/metabase/admin/datamodel/containers/FieldApp.jsx

@@ -383,7 +383,7 @@ export const BackButton = ({
     to={`/admin/datamodel/database/${databaseId}/table/${tableId}`}
     className="circle text-white p2 flex align-center justify-center bg-dark bg-brand-hover"
   >
-    <Icon name="arrow_back" />
+    <Icon name="arrow_left" />
   </Link>
 );
 

frontend/src/metabase/components/DirectionalButton.jsx

@@ -3,7 +3,7 @@ import Icon from "metabase/components/Icon";
 
 import { color } from "metabase/lib/colors";
 
-const DirectionalButton = ({ direction = "back", onClick }) => (
+const DirectionalButton = ({ direction = "left", onClick }) => (
   <div
     className="shadowed cursor-pointer text-brand-hover text-medium flex align-center circle p2 bg-white transition-background transition-color"
     onClick={onClick}

frontend/src/metabase/icon_paths.js

@@ -42,12 +42,21 @@ export const ICON_PATHS = {
       "M22.162 8.704c.029 8.782-.038 14.123-.194 15.926-.184 2.114-2.922 4.322-5.9 4.322-3.06 0-5.542-1.98-5.836-4.376-.294-2.392-.195-14.266.01-18.699.077-1.661 1.422-2.83 3.548-2.83 2.067 0 3.488 1.335 3.594 3.164.06 1.052.074 3.49.053 7.107-.006.928-.013 1.891-.023 3.072l-.023 2.527c-.006.824-.01 1.358-.01 1.718 0 1.547-.39 2.011-1.475 2.011-.804 0-1.202-.522-1.202-1.38V8.699a1.524 1.524 0 0 0-3.048 0v12.567c0 2.389 1.554 4.428 4.25 4.428 2.897 0 4.523-1.934 4.523-5.06 0-.348.003-.875.01-1.691l.022-2.526c.01-1.184.018-2.15.024-3.082.021-3.697.008-6.155-.058-7.3C20.227 2.592 17.469 0 13.79 0c-3.695 0-6.438 2.382-6.593 5.737-.213 4.613-.312 16.585.01 19.21C7.697 28.94 11.53 32 16.067 32c4.482 0 8.61-3.327 8.937-7.106.168-1.935.235-7.302.206-16.2a1.524 1.524 0 0 0-3.048.01z",
     attrs: { fillRule: "nonzero" },
   },
-  arrow_up:
-    "M18.328406,11.4853334 L18.328406,29.7077864 L14.4223947,29.7077864 L14.4223947,11.8297344 L9.50278039,18.1675528 C8.8404623,19.0154505 7.6197978,19.1738811 6.76297243,18.5231539 C6.35277743,18.2132641 6.08392515,17.7518746 6.01656674,17.2422135 C5.94920833,16.7325524 6.08896602,16.2171598 6.40457139,15.811346 L14.9851963,4.75551385 C15.3592393,4.27672509 15.9336742,3.99782238 16.5412448,4.00001281 C17.1488154,4.00220324 17.7212243,4.28524058 18.0918054,4.76671388 L26.6038301,15.9009462 C26.9164489,16.3090229 27.0524499,16.8253809 26.9814089,17.3345078 C26.9103679,17.8436347 26.6382138,18.3030408 26.225829,18.6099541 C25.3648265,19.253956 24.1398229,19.0859555 23.4888211,18.234753 L18.328406,11.4867334 L18.328406,11.4853334 Z",
-  arrow_down:
-    "M18.328406,22.222453 L18.328406,22.221053 L23.4888211,15.4730334 C24.1398229,14.6218309 25.3648265,14.4538304 26.225829,15.0978323 C26.6382138,15.4047456 26.9103679,15.8641517 26.9814089,16.3732786 C27.0524499,16.8824055 26.9164489,17.3987635 26.6038301,17.8068401 L18.0918054,28.9410725 C17.7212243,29.4225458 17.1488154,29.7055831 16.5412448,29.7077736 C15.9336742,29.709964 15.3592393,29.4310613 14.9851963,28.9522725 L6.40457139,17.8964404 C6.08896602,17.4906266 5.94920833,16.9752339 6.01656674,16.4655728 C6.08392515,15.9559117 6.35277743,15.4945223 6.76297243,15.1846325 C7.6197978,14.5339052 8.8404623,14.6923359 9.50278039,15.5402335 L14.4223947,21.878052 L14.4223947,4 L18.328406,4 L18.328406,22.222453 Z",
-  arrow_back:
-    "M11.7416687,19.0096 L18.8461178,26.4181004 L14.2696969,30.568 L0.38960831,16.093881 L0,15.6875985 L0.49145276,15.241949 L14.6347557,1 L19.136,5.22693467 L11.3214393,13.096 L32,13.096 L32,19.0096 L11.7416687,19.0096 Z",
+  arrow_up: {
+    path:
+      "M16 34.23a2.5 2.5 0 002.5-2.5V9.036l8.732 8.732a2.5 2.5 0 003.405.122l.13-.122a2.5 2.5 0 000-3.536l-13-13a2.5 2.5 0 00-3.535 0l-13 13a2.5 2.5 0 103.536 3.536L13.5 9.036V31.73a2.5 2.5 0 002.336 2.495z",
+    attrs: { viewBox: "0 0 32 34" },
+  },
+  arrow_down: {
+    path:
+      "M16 .5A2.5 2.5 0 0118.5 3v22.694l8.732-8.732a2.5 2.5 0 013.405-.122l.13.122a2.5 2.5 0 010 3.536l-13 13a2.5 2.5 0 01-3.535 0l-13-13a2.5 2.5 0 113.536-3.536l8.732 8.732V3A2.5 2.5 0 0115.836.505z",
+    attrs: { viewBox: "0 0 32 34" },
+  },
+  arrow_left: {
+    path:
+      "M14.502 1.232a2.5 2.5 0 113.536 3.536l-8.732 8.731L32 13.5a2.5 2.5 0 012.495 2.336L34.5 16a2.5 2.5 0 01-2.5 2.5l-22.696-.001 8.734 8.733a2.5 2.5 0 01.122 3.405l-.122.13a2.5 2.5 0 01-3.536 0l-13-13a2.5 2.5 0 010-3.535z",
+    attrs: { viewBox: "0 0 35 32" },
+  },
   bar:
     "M2 23.467h6.4V32H2v-8.533zm10.667-12.8h6.4V32h-6.4V10.667zM23.333 0h6.4v32h-6.4V0z",
   beaker:
@@ -111,8 +120,6 @@ export const ICON_PATHS = {
     "M3.033 3.791v22.211H31.09c.403 0 .882.872.882 1.59 0 .717-.48 1.408-.882 1.408H0V3.791c0-.403.875-.914 1.487-.914.612 0 1.546.511 1.546.914zm3.804 17.912C5.714 21.495 5 20.318 5 19.355c0-.963.831-2.296 1.837-2.296 2.093 0 2.965-1.207 4.204-5.242l.148-.482C12.798 6.077 14.18 3 17.968 3c3.792 0 5.17 3.08 6.765 8.343l.145.478c1.227 4.034 2.093 5.238 4.181 5.238 1.006 0 1.875 1.29 1.875 2.296 0 1.007-.898 2.184-1.875 2.348-3.656.612-6.004-2.364-7.665-7.821l-.146-.482c-1.14-3.76-1.8-6.754-3.28-6.754-1.483 0-2.147 2.995-3.297 6.754l-.148.486c-1.675 5.454-3.93 8.514-7.686 7.817z",
   document:
     "M29,10.1052632 L29,28.8325291 C29,30.581875 27.5842615,32 25.8337327,32 L7.16626728,32 C5.41758615,32 4,30.5837102 4,28.8441405 L4,3.15585953 C4,1.41292644 5.42339685,9.39605581e-15 7.15970573,8.42009882e-15 L20.713352,8.01767853e-16 L20.713352,8.42105263 L22.3846872,8.42105263 L22.3846872,0.310375032 L28.7849894,8.42105263 L20.713352,8.42105263 L20.713352,10.1052632 L29,10.1052632 Z M7.3426704,12.8000006 L25.7273576,12.8000006 L25.7273576,14.4842112 L7.3426704,14.4842112 L7.3426704,12.8000006 Z M7.3426704,17.3473687 L25.7273576,17.3473687 L25.7273576,19.0315793 L7.3426704,19.0315793 L7.3426704,17.3473687 Z M7.3426704,21.8947352 L25.7273576,21.8947352 L25.7273576,23.5789458 L7.3426704,23.5789458 L7.3426704,21.8947352 Z M7.43137255,26.2736849 L16.535014,26.2736849 L16.535014,27.9578954 L7.43137255,27.9578954 L7.43137255,26.2736849 Z",
-  down_arrow:
-    "M12.2782161,19.3207547 L12.2782161,0 L19.5564322,0 L19.5564322,19.3207547 L26.8346484,19.3207547 L15.9173242,32 L5,19.3207547 L12.2782161,19.3207547 Z",
   download:
     "M19.3636364,15.0588235 L19.3636364,0 L13.6363636,0 L13.6363636,15.0588235 L7.90909091,15.0588235 L16.5,24.9411765 L25.0909091,15.0588235 L19.3636364,15.0588235 Z M27,26.3529412 L27,32 L6,32 L6,26.3529412 L27,26.3529412 Z",
   edit_document:
@@ -360,17 +367,10 @@ ICON_PATHS["horizontal_bar"] = {
 };
 
 // $FlowFixMe
-ICON_PATHS["arrow_forward"] = {
-  path: ICON_PATHS["arrow_back"],
-  attrs: {
-    style: { transform: "rotate(-180deg)" },
-  },
-};
-
-// $FlowFixMe
-ICON_PATHS["up_arrow"] = {
-  path: ICON_PATHS["down_arrow"],
+ICON_PATHS["arrow_right"] = {
+  path: ICON_PATHS["arrow_left"].path,
   attrs: {
+    ...ICON_PATHS["arrow_left"].attrs,
     style: { transform: "rotate(-180deg)" },
   },
 };

frontend/src/metabase/query_builder/components/notebook/steps/SortStep.jsx

@@ -27,7 +27,7 @@ export default function SortStep({
           }}
         >
           <Icon
-            name={sort[0] === "asc" ? "up_arrow" : "down_arrow"}
+            name={sort[0] === "asc" ? "arrow_up" : "arrow_down"}
             className="text-white mr1"
           />
           <SortName sort={sort} query={query} />

frontend/src/metabase/visualizations/visualizations/ObjectDetail.jsx

@@ -362,7 +362,7 @@ export class ObjectDetail extends Component {
               }}
             >
               <DirectionalButton
-                direction="back"
+                direction="left"
                 onClick={this.props.viewPreviousObjectDetail}
               />
             </div>
@@ -374,7 +374,7 @@ export class ObjectDetail extends Component {
               }}
             >
               <DirectionalButton
-                direction="forward"
+                direction="right"
                 onClick={this.props.viewNextObjectDetail}
               />
             </div>

frontend/test/metabase/visualizations/components/ObjectDetail.e2e.spec.js

@@ -44,14 +44,14 @@ describe("ObjectDetail", () => {
 
       expect(app.find(".ObjectDetail h1").text()).toEqual("2");
 
-      const previousObjectTrigger = app.find(".Icon.Icon-arrow_back");
+      const previousObjectTrigger = app.find(".Icon.Icon-arrow_left");
       click(previousObjectTrigger);
 
       await store.waitForActions([QUERY_COMPLETED]);
       await delay(100); // Trying to address random CI failures with a small delay
 
       expect(app.find(".ObjectDetail h1").text()).toEqual("1");
-      const nextObjectTrigger = app.find(".Icon.Icon-arrow_forward");
+      const nextObjectTrigger = app.find(".Icon.Icon-arrow_right");
       click(nextObjectTrigger);
 
       await store.waitForActions([QUERY_COMPLETED]);