tweak: Move alert icon to route pill (#2828)

mbta · Oct 3, 2024 · 2c26b55 · 2c26b55
1 parent 45624e5
commit 2c26b55
Show file tree

Hide file tree

Showing 10 changed files with 51 additions and 47 deletions.
diff --git a/assets/css/_route_ladder.scss b/assets/css/_route_ladder.scss
@@ -65,22 +65,16 @@
  .c-route-ladder__alert-icon {
  display: flex;
  align-items: center;
- width: 1.6rem;
 
  cursor: pointer;
 
  svg {
- height: 1.6rem;
- width: 1.6rem;
+ height: 1rem;
+ width: 1.125rem;
  }
  }
 
- .c-route-ladder__route-pill {
- grid-column: 2/3;
- }
-
  .c-route-ladder__close-button-container {
- grid-column: 3/4;
  margin: 2px 0 2px auto;
  }
 }

diff --git a/assets/css/_route_pill.scss b/assets/css/_route_pill.scss
@@ -11,16 +11,23 @@
  font-family: $font-family-route-pill;
 
  display: flex;
- flex-direction: column;
+ flex-direction: row;
  justify-content: center;
+ align-items: center;
 
  &--large-format {
- width: 4.5rem;
+ min-width: 4.5rem;
  height: 2.25rem;
  border-radius: 1.875rem;
  font-size: $h3-font-size;
  font-weight: 600;
  }
+
+ &--dynamic-size {
+ min-width: unset;
+ padding: 0 1.5rem;
+ margin: 0 0.5rem;
+ }
 }
 
 .c-route-pill--bus {

diff --git a/assets/src/components/routeLadder.tsx b/assets/src/components/routeLadder.tsx
@@ -113,6 +113,13 @@ export const Header = ({
  </Dropdown.Menu>
  </Dropdown>
  )}
+ </div>
+ <RoutePill
+ id={routePillId}
+ routeName={routeName}
+ largeFormat
+ className="c-route-pill--dynamic-size"
+ >
  {hasAlert && (
  <Tippy
  content="Active detour"
@@ -127,13 +134,7 @@ export const Header = ({
  </div>
  </Tippy>
  )}
- </div>
- <RoutePill
- id={routePillId}
- routeName={routeName}
- largeFormat
- className="c-route-ladder__route-pill c-route-pill"
- />
+ </RoutePill>
  <div className="c-route-ladder__close-button-container">
  <CloseButton className="p-2" onClick={onClose} />
  </div>

diff --git a/assets/src/components/routePill.tsx b/assets/src/components/routePill.tsx
@@ -2,11 +2,13 @@ import React, { ComponentPropsWithoutRef } from "react"
 import { joinClasses } from "../helpers/dom"
 
 export const RoutePill = ({
+ children,
  routeName,
  largeFormat,
  className,
  ...props
 }: {
+ children?: React.ReactNode
  routeName: string
  largeFormat?: boolean
  className?: string
@@ -20,6 +22,7 @@ export const RoutePill = ({
 
  return (
  <div {...props} className={classes}>
+ {children}
  {routeNameTransform(routeName)}
  </div>
  )

diff --git a/assets/tests/components/__snapshots__/ladderPage.test.tsx.snap b/assets/tests/components/__snapshots__/ladderPage.test.tsx.snap
@@ -299,7 +299,7 @@ exports[`LadderPage renders with alerts 1`] = `
  class="c-route-ladder__dropdown"
  />
  <div
- class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
+ class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
  id="route-pill:rq:"
  >
  28
@@ -338,6 +338,10 @@ exports[`LadderPage renders with alerts 1`] = `
  >
  <div
  class="c-route-ladder__dropdown c-route-ladder__dropdown--non-skate-alert"
+ />
+ <div
+ class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
+ id="route-pill:rs:"
  >
  <div
  class="mock-tippy"
@@ -366,11 +370,6 @@ exports[`LadderPage renders with alerts 1`] = `
  </svg>
  </div>
  </div>
- </div>
- <div
- class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
- id="route-pill:rs:"
- >
  1
  </div>
  <div
@@ -609,7 +608,7 @@ exports[`LadderPage renders with route tabs 1`] = `
  class="c-route-ladder__dropdown"
  />
  <div
- class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
+ class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
  id="route-pill:r0:"
  >
  1
@@ -829,7 +828,7 @@ exports[`LadderPage renders with selectedRoutes in different order than routes d
  class="c-route-ladder__dropdown"
  />
  <div
- class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
+ class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
  id="route-pill:ri:"
  >
  28
@@ -870,7 +869,7 @@ exports[`LadderPage renders with selectedRoutes in different order than routes d
  class="c-route-ladder__dropdown"
  />
  <div
- class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
+ class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
  id="route-pill:rk:"
  >
  1
@@ -1090,7 +1089,7 @@ exports[`LadderPage renders with timepoints 1`] = `
  class="c-route-ladder__dropdown"
  />
  <div
- class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
+ class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
  id="route-pill:rm:"
  >
  28
@@ -1249,7 +1248,7 @@ exports[`LadderPage renders with timepoints 1`] = `
  class="c-route-ladder__dropdown"
  />
  <div
- class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
+ class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
  id="route-pill:ro:"
  >
  1

diff --git a/assets/tests/components/__snapshots__/minimalLadder.test.tsx.snap b/assets/tests/components/__snapshots__/minimalLadder.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`MinimalLadders renders route ladders 1`] = `
  class="c-route-ladder__dropdown"
  />
  <div
- class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
+ class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
  id="route-pill:r0:"
  >
  1
@@ -178,7 +178,7 @@ exports[`MinimalLadders renders route ladders 1`] = `
  class="c-route-ladder__dropdown"
  />
  <div
- class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
+ class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
  id="route-pill:r2:"
  >
  28

diff --git a/assets/tests/components/__snapshots__/routeLadder.test.tsx.snap b/assets/tests/components/__snapshots__/routeLadder.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`routeLadder displays loading if we are fetching the timepoints 1`] = `
  class="c-route-ladder__dropdown"
  />
  <div
- class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
+ class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
  id="route-pill:rr:"
  >
  28
@@ -58,7 +58,7 @@ exports[`routeLadder displays no crowding data for a bus coming off a route with
  class="c-route-ladder__dropdown"
  />
  <div
- class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
+ class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
  id="route-pill:rn:"
  >
  28
@@ -327,7 +327,7 @@ exports[`routeLadder doesn't display crowding data for a vehicle coming off a ro
  class="c-route-ladder__dropdown"
  />
  <div
- class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
+ class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
  id="route-pill:rp:"
  >
  28
@@ -539,7 +539,7 @@ exports[`routeLadder doesn't render a bus that's off-course but nonrevenue 1`] =
  class="c-route-ladder__dropdown"
  />
  <div
- class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
+ class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
  id="route-pill:rl:"
  >
  28
@@ -718,7 +718,7 @@ exports[`routeLadder renders a route ladder 1`] = `
  class="c-route-ladder__dropdown"
  />
  <div
- class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
+ class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
  id="route-pill:r0:"
  >
  28
@@ -855,7 +855,7 @@ exports[`routeLadder renders a route ladder with crowding instead of vehicles 1`
  class="c-route-ladder__dropdown"
  />
  <div
- class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
+ class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
  id="route-pill:rj:"
  >
  28
@@ -1128,7 +1128,7 @@ exports[`routeLadder renders a route ladder with laying over vehicles 1`] = `
  class="c-route-ladder__dropdown"
  />
  <div
- class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
+ class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
  id="route-pill:rh:"
  >
  28
@@ -1372,7 +1372,7 @@ exports[`routeLadder renders a route ladder with the new header and detour dropd
  </div>
  </div>
  <div
- class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
+ class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
  id="route-pill:r4:"
  >
  28
@@ -1509,7 +1509,7 @@ exports[`routeLadder renders a route ladder with the new header format 1`] = `
  class="c-route-ladder__dropdown"
  />
  <div
- class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
+ class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
  id="route-pill:r2:"
  >
  28
@@ -1646,7 +1646,7 @@ exports[`routeLadder renders a route ladder with vehicles 1`] = `
  class="c-route-ladder__dropdown"
  />
  <div
- class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
+ class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
  id="route-pill:rd:"
  >
  28
@@ -1950,7 +1950,7 @@ exports[`routeLadder renders a route ladder with vehicles in the incoming box 1`
  class="c-route-ladder__dropdown"
  />
  <div
- class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
+ class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
  id="route-pill:rf:"
  >
  28

diff --git a/assets/tests/components/__snapshots__/routeLadders.test.tsx.snap b/assets/tests/components/__snapshots__/routeLadders.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`RouteLadders renders a route ladder 1`] = `
  class="c-route-ladder__dropdown"
  />
  <div
- class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
+ class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
  id="route-pill:r0:"
  >
  1
@@ -175,7 +175,7 @@ exports[`RouteLadders renders a route ladder 1`] = `
  class="c-route-ladder__dropdown"
  />
  <div
- class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
+ class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-pill--dynamic-size"
  id="route-pill:r2:"
  >
  28

diff --git a/assets/tests/components/ladderPage.test.tsx b/assets/tests/components/ladderPage.test.tsx
@@ -566,7 +566,7 @@ describe("LadderPage", () => {
  expect(container.querySelector(".c-route-ladder__header")).toBeVisible()
 
  await userEvent.click(
- screen.getByRole("button", { name: "1 Route Options" })
+ screen.getByRole("button", { name: /1 Route Options/ })
  )
 
  await userEvent.click(screen.getByRole("button", { name: "Add detour" }))

diff --git a/assets/tests/components/routeLadder.test.tsx b/assets/tests/components/routeLadder.test.tsx
@@ -253,7 +253,7 @@ describe("routeLadder", () => {
  )
 
  expect(
- screen.getByRole("button", { name: "28 Route Options" })
+ screen.getByRole("button", { name: /28 Route Options/ })
  ).toBeVisible()
 
  expect(tree).toMatchSnapshot()
@@ -288,7 +288,7 @@ describe("routeLadder", () => {
  )
 
  await userEvent.click(
- screen.getByRole("button", { name: "28 Route Options" })
+ screen.getByRole("button", { name: /28 Route Options/ })
  )
 
  expect(screen.getByText(/This route has an active detour./)).toBeVisible()
@@ -323,7 +323,7 @@ describe("routeLadder", () => {
  )
 
  await userEvent.click(
- screen.getByRole("button", { name: "28 Route Options" })
+ screen.getByRole("button", { name: /28 Route Options/ })
  )
 
  expect(