feat(map-marker): support two lines in map marker (uber#5207)

* feat(map-marker): support two lines in map marker * feat(map-marker): wrap up two line changes for map marker * test(vrt): update visual snapshots for 81f4ede [skip ci] (uber#5226) Co-authored-by: UberOpenSourceBot <[email protected]> Co-authored-by: UberOpenSourceBot <[email protected]> Co-authored-by: UberOpenSourceBot <[email protected]>
vmatthes · Nov 22, 2022 · d81ad7d · d81ad7d
1 parent 8537953
commit d81ad7d
Show file tree

Hide file tree

Showing 45 changed files with 404 additions and 559 deletions.
diff --git a/documentation-site/cheat-sheet.js b/documentation-site/cheat-sheet.js
diff --git a/documentation-site/components/yard/config/fixed-marker.ts b/documentation-site/components/yard/config/fixed-marker.ts
@@ -168,7 +168,9 @@ const FixedMarkerConfig: TConfig = {
         names: [
           'Root',
           'PinHead',
-          'PinHeadContent',
+          'LabelSlot',
+          'Label',
+          'EnhancerSlot',
           'PinHeadContainer',
           'Needle',
           'DragShadow',

diff --git a/documentation-site/components/yard/config/floating-marker.ts b/documentation-site/components/yard/config/floating-marker.ts
@@ -22,6 +22,11 @@ export const floatingMarkerProps = {
     type: PropTypes.String,
     description: 'Text to display inside of the marker.',
   },
+  secondaryLabel: {
+    value: undefined,
+    type: PropTypes.String,
+    description: 'Secondary text to display inside of the marker.',
+  },
   anchor: {
     value: 'FLOATING_MARKER_ANCHOR_POSITIONS.bottomLeft',
     enumName: 'FLOATING_MARKER_ANCHOR_POSITIONS',
@@ -101,7 +106,10 @@ const FloatingMarkerConfig: TConfig = {
           'InnerAnchor',
           'OuterAnchor',
           'PinHead',
-          'PinHeadContent',
+          'LabelSlot',
+          'Label',
+          'SecondaryLabel',
+          'EnhancerSlot',
           'PinHeadContainer',
           'AnchorContainer',
         ],

diff --git a/documentation-site/examples/floating-marker/secondary-label-color.js b/documentation-site/examples/floating-marker/secondary-label-color.js
@@ -0,0 +1,23 @@
+// @flow
+import * as React from 'react';
+import {
+  FloatingMarker,
+  FLOATING_MARKER_SIZES,
+} from 'baseui/map-marker';
+
+export default function Example() {
+  return (
+    <FloatingMarker
+      size={FLOATING_MARKER_SIZES.medium}
+      label="Pickup"
+      secondaryLabel="Mission Bay 3"
+      overrides={{
+        Label: {
+          style: ({$theme}) => ({
+            color: $theme.colors.contentTertiary,
+          }),
+        },
+      }}
+    />
+  );
+}
diff --git a/documentation-site/examples/floating-marker/secondary-label-color.tsx b/documentation-site/examples/floating-marker/secondary-label-color.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import {
+  FloatingMarker,
+  FLOATING_MARKER_SIZES,
+} from 'baseui/map-marker';
+
+export default function Example() {
+  return (
+    <FloatingMarker
+      size={FLOATING_MARKER_SIZES.medium}
+      label="Pickup"
+      secondaryLabel="Mission Bay 3"
+      overrides={{
+        Label: {
+          style: ({$theme}) => ({
+            color: $theme.colors.contentTertiary,
+          }),
+        },
+      }}
+    />
+  );
+}
diff --git a/documentation-site/examples/floating-marker/secondary-label.js b/documentation-site/examples/floating-marker/secondary-label.js
@@ -0,0 +1,16 @@
+// @flow
+import * as React from 'react';
+import {
+  FloatingMarker,
+  FLOATING_MARKER_SIZES,
+} from 'baseui/map-marker';
+
+export default function Example() {
+  return (
+    <FloatingMarker
+      size={FLOATING_MARKER_SIZES.large}
+      label="Uber HQ"
+      secondaryLabel="Mission Bay 3"
+    />
+  );
+}
diff --git a/documentation-site/examples/floating-marker/secondary-label.tsx b/documentation-site/examples/floating-marker/secondary-label.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import {
+  FloatingMarker,
+  FLOATING_MARKER_SIZES,
+} from 'baseui/map-marker';
+
+export default function Example() {
+  return (
+    <FloatingMarker
+      size={FLOATING_MARKER_SIZES.large}
+      label="Uber HQ"
+      secondaryLabel="Mission Bay 3"
+    />
+  );
+}
diff --git a/documentation-site/pages/components/fixed-marker.mdx b/documentation-site/pages/components/fixed-marker.mdx
@@ -50,7 +50,7 @@ For more information on the design principles behind the Base map markers, pleas
   - The `xxSmall` or `xSmall` pinhead sizes cannot contain any content.
 - A fixed marker may have either no needle or a choice of 3 different sizes: `short`, `medium`, or `tall`.
 - A fixed marker without a label can only have one icon. As such, do not use both a `startEnhancer` and an `endEnhancer` if there is no label.
-- A fixed marker can have a kind property that changes the colors of PinHead, PinHeadContent, Needle and DragShadow.
+- A fixed marker can have a kind property that changes the colors of PinHead, Needle and DragShadow.
 - A fixed marker can have a badge enhancer of the following sizes: `xSmall`, `small`, `mediumText`, `mediumIcon`.
   - The `xSmall` cannot have any content.
   - The `small` can only have an icon as a content.

diff --git a/documentation-site/pages/components/floating-marker.mdx b/documentation-site/pages/components/floating-marker.mdx
@@ -15,6 +15,8 @@ import LargeTopRight from 'examples/floating-marker/large-top-right.js';
 import StartEnhancer from 'examples/floating-marker/start-enhancer.js';
 import SmallNoAnchor from 'examples/floating-marker/small-no-anchor.js';
 import LargeSquareAnchorStartEnhancer from 'examples/floating-marker/large-square-anchor-start-enhancer.js';
+import SecondaryLabel from 'examples/floating-marker/secondary-label.js';
+import SecondaryLabelColor from 'examples/floating-marker/secondary-label-color.js';
 import ReactMapGL from 'examples/floating-marker/react-map-gl.js';
 import { FloatingMarkerSizingTable } from '../../components/map-marker-sizing-table.js';
 
@@ -56,6 +58,12 @@ For more information on the design principles behind the Base map markers, pleas
 - The anchor of a floating marker can be attached to any of the four corners of the marker.
 - A floating marker without a label can only have one icon. Do not use both a `startEnhancer` and an `endEnhancer` if there is no label.
 
+### Two line labels
+
+- A floating marker may accept a second line with the `secondaryLabel` prop.
+- Only size `large` and `medium` floating markers allow two lines of content.
+- In order to make room for the second line, the font size will drop to one size below. For example, a size `large` marker's font will decrease from `LabelLarge` to `LabelMedium`.
+
 ### Enhancer sizing
 
 - The size of an enhancer depends on the marker size you are using. Refer to the table below for the proper enhancer sizes.
@@ -110,6 +118,22 @@ A small floating marker without an anchor.
 
 A large floating marker with a square anchor and start enhancer. Because the floating marker is size large, make sure to pass the `size` parameter as prop to ensure the icon receives the proper size.
 
+<Example title="Two labels" path="floating-marker/secondary-label.js">
+  <FloatingMarkerContainer>
+    <SecondaryLabel />
+  </FloatingMarkerContainer>
+</Example>
+
+A floating marker with two labels. Use the prop `secondaryLabel` to add a second line. When using a second line, the font size will decrease to one size below.
+
+<Example title="Two labels with custom color" path="floating-marker/secondary-label-color.js">
+  <FloatingMarkerContainer>
+    <SecondaryLabelColor />
+  </FloatingMarkerContainer>
+</Example>
+
+A floating marker with two labels. The top label's color is customized with an override.
+
 <Example title="Usage with react-map-gl" path="floating-marker/react-map-gl.js">
   <ReactMapGL />
 </Example>

diff --git a/src/map-marker/__tests__/eats-pickup-marker.scenario.tsx b/src/map-marker/__tests__/eats-pickup-marker.scenario.tsx
@@ -83,7 +83,7 @@ export function Scenario() {
                         : theme.colors.backgroundPrimary,
                   },
                 },
-                PinHeadContent: {
+                EnhancerSlot: {
                   style: {
                     color:
                       hoveredLocationIndex === 0 || selectedLocationIndex === 0
@@ -157,7 +157,7 @@ export function Scenario() {
                         : theme.colors.backgroundPrimary,
                   },
                 },
-                PinHeadContent: {
+                EnhancerSlot: {
                   style: {
                     color:
                       hoveredLocationIndex === 2 || selectedLocationIndex === 2

diff --git a/src/map-marker/__tests__/floating-marker-map.scenario.tsx b/src/map-marker/__tests__/floating-marker-map.scenario.tsx
@@ -41,6 +41,7 @@ const defaultLocation = [uberHq.longitude, uberHq.latitude] as [number, number];
 
 export function Scenario() {
   const [label, setLabel] = React.useState('Uber HQ');
+  const [secondaryLabel, setSecondaryLabel] = React.useState('');
   const [startEnhancer, setStartEnhancer] = React.useState(true);
   const [endEnhancer, setEndEnhancer] = React.useState(false);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -81,7 +82,13 @@ export function Scenario() {
             clearOnEscape
             key="label"
           />,
-
+          <Input
+            value={secondaryLabel}
+            onChange={(e) => setSecondaryLabel(e.target.value)}
+            placeholder="Secondary Label"
+            clearOnEscape
+            key="secondary-label"
+          />,
           <Checkbox
             checked={startEnhancer}
             onChange={(e) => setStartEnhancer(e.target.checked)}
@@ -149,6 +156,7 @@ export function Scenario() {
                 }}
                 anchorType={floatingMarkerAnchorType[0].id}
                 label={label}
+                secondaryLabel={secondaryLabel}
                 startEnhancer={
                   startEnhancer
                     ? function renderEnhancer({ size }) {

diff --git a/src/map-marker/__tests__/floating-marker.scenario.tsx b/src/map-marker/__tests__/floating-marker.scenario.tsx
@@ -28,6 +28,7 @@ const floatingMarkerAnchorTypes = Object.keys(FLOATING_MARKER_ANCHOR_TYPES)
 
 export function Scenario() {
   const [label, setLabel] = React.useState('Uber HQ');
+  const [secondaryLabel, setSecondaryLabel] = React.useState('Pickup');
   const [startEnhancer, setStartEnhancer] = React.useState(true);
   const [endEnhancer, setEndEnhancer] = React.useState(false);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -50,6 +51,7 @@ export function Scenario() {
                 size={size}
                 key={i}
                 label={label}
+                secondaryLabel={secondaryLabel}
                 anchor={position}
                 anchorType={floatingMarkerAnchorType[0].id}
                 startEnhancer={
@@ -83,6 +85,13 @@ export function Scenario() {
           clearOnEscape
           key="label"
         />,
+        <Input
+          value={secondaryLabel}
+          onChange={(e) => setSecondaryLabel(e.target.value)}
+          placeholder="Secondary Label"
+          clearOnEscape
+          key="secondary-label"
+        />,
 
         <Checkbox
           checked={startEnhancer}

diff --git a/src/map-marker/constants.ts b/src/map-marker/constants.ts
@@ -18,6 +18,7 @@ export const NEEDLE_HEIGHTS = Object.freeze({
   [NEEDLE_SIZES.tall]: 20,
 } as const);
 
+// Important: keep this sorted by size, as it used to determine label size when a secondary label is used.
 export const PINHEAD_SIZES_SHAPES = Object.freeze({
   xxSmallCircle: 'xx-small-circle',
   xxSmallSquare: 'xx-small-square',

diff --git a/src/map-marker/fixed-marker.js.flow b/src/map-marker/fixed-marker.js.flow
@@ -6,132 +6,9 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import { useStyletron, type ThemeT } from '../styles/index.js';
-import { getOverrides } from '../helpers/overrides.js';
-import {
-  PINHEAD_TYPES,
-  NEEDLE_SIZES,
-  PINHEAD_SIZES_SHAPES,
-  LABEL_ENHANCER_POSITIONS,
-  KIND,
-  dragShadowHeight,
-  dragShadowMarginTop,
-} from './constants.js';
-import PinHead from './pin-head.js';
-import Needle from './needle.js';
-import DragShadow from './drag-shadow.js';
-import { StyledFixedMarkerDragContainer, StyledFixedMarkerRoot } from './styled-components.js';
-import type { FixedMarkerPropsT, KindT } from './types.js';
 
-type Colors = {
-  color: string,
-  backgroundColor: string,
-};
+import type { FixedMarkerPropsT } from './types.js';
 
-function getColors(kind: KindT, theme: ThemeT): Colors {
-  if (kind === KIND.accent) {
-    return {
-      color: theme.colors.contentInversePrimary,
-      backgroundColor: theme.colors.backgroundAccent,
-    };
-  }
-  if (kind === KIND.negative) {
-    return {
-      color: theme.colors.contentInversePrimary,
-      backgroundColor: theme.colors.backgroundNegative,
-    };
-  }
-  return {
-    color: theme.colors.contentInversePrimary,
-    backgroundColor: theme.colors.backgroundInversePrimary,
-  };
-}
-
-const FixedMarker = ({
-  size = PINHEAD_SIZES_SHAPES.medium,
-  needle = NEEDLE_SIZES.medium,
-  label,
-  startEnhancer,
-  endEnhancer,
-  kind = KIND.default,
-  dragging = false,
-  overrides = {},
-  labelEnhancerContent = null,
-  labelEnhancerPosition = LABEL_ENHANCER_POSITIONS.bottom,
-  badgeEnhancerSize = null,
-  badgeEnhancerContent = null,
-  ...restProps
-}: FixedMarkerPropsT) => {
-  const [, theme] = useStyletron();
-  const { color, backgroundColor } = getColors(kind, theme);
-
-  const doesPinHeadTransformOnDrag =
-    needle !== NEEDLE_SIZES.none &&
-    size !== PINHEAD_SIZES_SHAPES.xxSmallCircle &&
-    size !== PINHEAD_SIZES_SHAPES.xxSmallSquare;
-
-  const [Root, rootProps] = getOverrides(overrides.Root, StyledFixedMarkerRoot);
-  const [FixedMarkerDragContainer, fixedMarkerDragContainerProps] = getOverrides(
-    overrides.DragContainer,
-    StyledFixedMarkerDragContainer
-  );
-
-  const renderNeedle =
-    needle !== NEEDLE_SIZES.none &&
-    ![PINHEAD_SIZES_SHAPES.xxSmallCircle, PINHEAD_SIZES_SHAPES.xxSmallSquare].includes(size);
-
-  if (__DEV__) {
-    if (
-      needle !== NEEDLE_SIZES.none &&
-      [PINHEAD_SIZES_SHAPES.xxSmallCircle, PINHEAD_SIZES_SHAPES.xxSmallSquare].includes(size)
-    ) {
-      console.warn(
-        `Needles cannot be rendered with ${PINHEAD_SIZES_SHAPES.xxSmallCircle} or ${PINHEAD_SIZES_SHAPES.xxSmallSquare} pin heads`
-      );
-    }
-  }
-  const enhancers = {};
-  if (startEnhancer) {
-    enhancers.startEnhancer = startEnhancer;
-  }
-  if (endEnhancer) {
-    enhancers.endEnhancer = endEnhancer;
-  }
-  return (
-    <Root data-baseweb="fixed-map-marker" {...rootProps}>
-      <FixedMarkerDragContainer
-        $translateAmount={dragShadowMarginTop + dragShadowHeight}
-        $performTranslate={doesPinHeadTransformOnDrag && !dragging}
-        {...fixedMarkerDragContainerProps}
-      >
-        <PinHead
-          size={size}
-          label={label}
-          {...enhancers}
-          color={color}
-          background={backgroundColor}
-          type={PINHEAD_TYPES.fixed}
-          overrides={overrides}
-          badgeEnhancerSize={badgeEnhancerSize}
-          badgeEnhancerContent={badgeEnhancerContent}
-          labelEnhancerContent={labelEnhancerContent}
-          labelEnhancerPosition={labelEnhancerPosition}
-          needle={needle}
-        />
-        {renderNeedle && (
-          <Needle size={needle} background={backgroundColor} overrides={overrides} />
-        )}
-      </FixedMarkerDragContainer>
-      {doesPinHeadTransformOnDrag && (
-        <DragShadow
-          background={backgroundColor}
-          dragging={dragging}
-          height={dragShadowMarginTop + dragShadowHeight}
-          overrides={overrides}
-        />
-      )}
-    </Root>
-  );
-};
+declare var FixedMarker: (props: FixedMarkerPropsT) => React.Node;
 
 export default FixedMarker;