Skip to content

feature: add prop to set modal location to topleft, topright, bottoml… #566

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JamesDiStef wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feature: add prop to set modal location to topleft, topright, bottoml… #566

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1e60aaf
feature: add prop to set modal location to topleft, topright, bottoml…
JamesDiStef Sep 16, 2025
803e88a
feature: set default position to topleft
JamesDiStef Sep 16, 2025
902a54a
Merge branch 'main' into move-modal
JamesDiStef Sep 25, 2025
66c8752
add back in prop validation
JamesDiStef Sep 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion packages/map-template/src/components/MapTemplate/MapTemplate.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@ MapTemplate.propTypes = {
useAppTitle: PropTypes.bool,
showMapMarkers: PropTypes.bool,
mapboxMapStyle: PropTypes.string,
modalLocation: PropTypes.string,
devicePosition: PropTypes.object
};

Expand Down Expand Up @@ -139,8 +140,9 @@ MapTemplate.propTypes = {
* @param {boolean} [props.useAppTitle] - Specifies if the Map Template should set the document title as defined in the App Config. The default value is set to false.
* @param {boolean} [props.showMapMarkers] - Specifies if the Map Template should show the base map providers Map Markers. The default value is set to true.
* @param {string} [props.mapboxMapStyle] - Specifies the Mapbox Map Style to use. The default value is set to "mapbox://styles/mapbox/standard".
* @param {string} [props.modalLocation] - Specifies where the modal renders - default to top left. other options include topright, bottomleft, or bottomright.
*/
function MapTemplate({ apiKey, gmApiKey, mapboxAccessToken, venue, locationId, primaryColor, logo, appUserRoles, directionsFrom, directionsTo, externalIDs, tileStyle, startZoomLevel, bearing, pitch, gmMapId, useMapProviderModule, kioskOriginLocationId, language, supportsUrlParameters, useKeyboard, timeout, miTransitionLevel, category, searchAllVenues, hideNonMatches, showRoadNames, showExternalIDs, searchExternalLocations, center, useAppTitle, showMapMarkers, mapboxMapStyle, devicePosition }) {
function MapTemplate({ apiKey, gmApiKey, mapboxAccessToken, venue, locationId, primaryColor, logo, appUserRoles, directionsFrom, directionsTo, externalIDs, tileStyle, startZoomLevel, bearing, pitch, gmMapId, useMapProviderModule, kioskOriginLocationId, language, supportsUrlParameters, useKeyboard, timeout, miTransitionLevel, category, searchAllVenues, hideNonMatches, showRoadNames, showExternalIDs, searchExternalLocations, center, useAppTitle, showMapMarkers, mapboxMapStyle, devicePosition, modalLocation }) {

const [userSelectedLanguage, setUserSelectedLanguage] = useState(false);
const [mapOptions, setMapOptions] = useState({ brandingColor: primaryColor });
Expand Down Expand Up @@ -796,6 +798,7 @@ function MapTemplate({ apiKey, gmApiKey, mapboxAccessToken, venue, locationId, p
currentAppView={currentAppView}
appViews={appStates}
onRouteFinished={() => onRouteFinish()}
modalLocation={modalLocation}
/>
}
{!isDesktop &&
Expand Down
6 changes: 5 additions & 1 deletion packages/map-template/src/components/MapsIndoorsMap/MapsIndoorsMap.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ MapsIndoorsMap.propTypes = {
* @param {boolean} [props.useAppTitle] - Specifies if the Map Template should set the document title as defined in the App Config. The default value is set to false.
* @param {boolean} [props.showMapMarkers] - Specifies if the Map Template should show the Map Markers. The default value is set to true.
* @param {string} [props.mapboxMapStyle] - Specifies the Mapbox Map Style to use. The default value is set to "mapbox://styles/mapbox/standard".
* @param {string} [props.modalLocation] - Specifies where the modal renders - default to top left. other options include topright, bottomleft, or bottomright.
*/
function MapsIndoorsMap(props) {

Expand All @@ -99,7 +100,8 @@ function MapsIndoorsMap(props) {
searchExternalLocations: true,
showExternalIDs: false,
hideNonMatches: false,
useAppTitle: false
useAppTitle: false,
modalLocation: 'topleft',
};
Comment on lines +104 to 106
Copy link
Contributor

@coderabbitai coderabbitai bot Sep 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Default not applied: modalLocation can be undefined

defaultProps.modalLocation is declared but not used when neither prop nor URL param is set. This breaks positioning after base offsets were removed.

Apply:

-            modalLocation: 'topleft',
+            modalLocation: 'topleft',
@@
-            modalLocation: props.supportsUrlParameters && modalLocationQueryParameter ? modalLocationQueryParameter : props.modalLocation,
+            modalLocation: (props.supportsUrlParameters && modalLocationQueryParameter)
+                ? modalLocationQueryParameter
+                : (props.modalLocation || defaultProps.modalLocation),

Also applies to: 185-186

🤖 Prompt for AI Agents 
In packages/map-template/src/components/MapsIndoorsMap/MapsIndoorsMap.jsx around
lines 103-105 (and similarly at 185-186), defaultProps.modalLocation is declared
but not applied when neither the prop nor the URL param is present; update the
code to select modalLocation with a clear precedence (prop value -> URL param ->
defaultProps.modalLocation) so the default is used when others are undefined
(implement via destructuring default, nullish coalescing, or explicit fallback),
and apply the same fix at the other occurrence on lines 185-186.


const apiKeyQueryParameter = queryStringParams.get('apiKey');
Expand Down Expand Up @@ -135,6 +137,7 @@ function MapsIndoorsMap(props) {
const useAppTitleQueryParameter = queryStringParams.get('useAppTitle');
const showMapMarkersQueryParameter = queryStringParams.get('showMapMarkers');
const mapboxMapStyleQueryParameter = queryStringParams.get('mapboxMapStyle');
const modalLocationQueryParameter = queryStringParams.get('modalLocation');
// Set the initial props on the Map Template component.

// For the apiKey and venue, set the venue to "AUSTINOFFICE" if the apiKey is "mapspeople3d" and no venue is provided. We want this as the default venue for the "mapspeople3d" apiKey.
Expand Down Expand Up @@ -180,6 +183,7 @@ function MapsIndoorsMap(props) {
useAppTitle: getBooleanValue(props.supportsUrlParameters, defaultProps.useAppTitle, props.useAppTitle, useAppTitleQueryParameter),
showMapMarkers: getBooleanValue(props.supportsUrlParameters, defaultProps.showMapMarkers, props.showMapMarkers, showMapMarkersQueryParameter),
mapboxMapStyle: props.supportsUrlParameters && mapboxMapStyleQueryParameter ? mapboxMapStyleQueryParameter : props.mapboxMapStyle,
modalLocation: props.supportsUrlParameters && modalLocationQueryParameter ? modalLocationQueryParameter : props.modalLocation,
});

}, [props]);
Expand Down
7 changes: 4 additions & 3 deletions packages/map-template/src/components/Sidebar/Modal/Modal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ import PropTypes from 'prop-types';

Modal.propTypes = {
children: PropTypes.node,
isOpen: PropTypes.bool
isOpen: PropTypes.bool,
modalLocation: PropTypes.string
};

/**
Expand All @@ -19,7 +20,7 @@ Modal.propTypes = {
* @param {React.ReactNode} props.children - The content to be displayed inside the modal.
* @param {boolean} props.isOpen - If the modal is open (visible) or not.
*/
function Modal({ children, isOpen }) {
function Modal({ children, isOpen, modalLocation }) {

/** Boolean for controlling the "full" CSS class modifier */
const [fullHeight, setFullHeight] = useState(false);
Expand Down Expand Up @@ -48,7 +49,7 @@ function Modal({ children, isOpen }) {
}, [contentRef]);

return <div ref={modalRef}
className={`modal ${isOpen ? 'modal--open' : ''} ${fullHeight ? 'modal--full' : ''} ${kioskLocation ? 'modal--kiosk' : ''}`}
className={`modal ${modalLocation} ${isOpen ? 'modal--open' : ''} ${fullHeight ? 'modal--full' : ''} ${kioskLocation ? 'modal--kiosk' : ''}`}
>
Comment on lines 51 to 53
Copy link
Contributor

@coderabbitai coderabbitai bot Sep 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Avoid "undefined" CSS class and skip location class in kiosk

Prevent rendering class="undefined" and avoid corner class when kiosk is active.

Apply:

-    return <div ref={modalRef}
-        className={`modal ${modalLocation} ${isOpen ? 'modal--open' : ''} ${fullHeight ? 'modal--full' : ''} ${kioskLocation ? 'modal--kiosk' : ''}`}
-    >
+    const locationClass = !kioskLocation && modalLocation ? modalLocation : '';
+    return <div ref={modalRef}
+        className={`modal ${locationClass} ${isOpen ? 'modal--open' : ''} ${fullHeight ? 'modal--full' : ''} ${kioskLocation ? 'modal--kiosk' : ''}`}
+    >
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
return <div ref={modalRef}
className={`modal ${isOpen ? 'modal--open' : ''} ${fullHeight ? 'modal--full' : ''} ${kioskLocation ? 'modal--kiosk' : ''}`}
className={`modal ${modalLocation} ${isOpen ? 'modal--open' : ''} ${fullHeight ? 'modal--full' : ''} ${kioskLocation ? 'modal--kiosk' : ''}`}
>
const locationClass = !kioskLocation && modalLocation ? modalLocation : '';
return <div ref={modalRef}
className={`modal ${locationClass} ${isOpen ? 'modal--open' : ''} ${fullHeight ? 'modal--full' : ''} ${kioskLocation ? 'modal--kiosk' : ''}`}
>
🤖 Prompt for AI Agents 
In packages/map-template/src/components/Sidebar/Modal/Modal.jsx around lines
51-53, the className string can include "undefined" when modalLocation is falsy
and still adds the corner/location class even when kioskLocation is true; update
the className construction to build classes conditionally (e.g., use an array of
class tokens and push modalLocation only if it's a non-empty string, push
'modal--kiosk' only when kioskLocation is truthy, and skip adding modalLocation
when kioskLocation is active), then join the array with spaces (or use
conditional expressions) so no "undefined" token is emitted and the location
class is omitted in kiosk mode.

<div ref={contentRef} className="modal__content">
{children}
Expand Down
31 changes: 29 additions & 2 deletions packages/map-template/src/components/Sidebar/Modal/Modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ $desktop-breakpoint: 992px;
position: absolute;
z-index: var(--z-index-overlay);
width: 568px;
left: var(--spacing-medium);
top: var(--spacing-medium);
border-radius: var(--spacing-x-small);
border: 1px solid var(--color-gray-30);
background: var(--color-white-white);
Expand Down Expand Up @@ -52,4 +50,33 @@ $desktop-breakpoint: 992px;
min-height: 0;
box-sizing: border-box;
}

&.topleft {
top: 10px;
left: 10px;
right: auto;
bottom: auto;
z-index: var(--z-index-dropdown);
}
&.topright {
top: 10px;
right: 100px;
left: auto;
bottom: auto;
z-index: var(--z-index-dropdown);
}
&.bottomleft {
bottom: 10px;
left: 10px;
top: auto;
right: auto;
z-index: var(--z-index-dropdown);
}
&.bottomright {
bottom: 10px;
right: 100px;
left: auto;
top: auto;
z-index: var(--z-index-dropdown);
}
}
15 changes: 8 additions & 7 deletions packages/map-template/src/components/Sidebar/Sidebar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ Sidebar.propTypes = {
currentAppView: PropTypes.string,
appViews: PropTypes.object,
filteredLocationsByExternalIDs: PropTypes.array,
onRouteFinished: PropTypes.func
onRouteFinished: PropTypes.func,
modalLocation: PropTypes.string
};

/**
Expand All @@ -36,9 +37,9 @@ Sidebar.propTypes = {
* @param {array} props.appViews - Array of all possible views.
* @param {array} props.filteredLocationsByExternalIDs - Array of locations filtered based on the external ID.
* @param {function} props.onRouteFinished - Callback that fires when the route has finished.
*
* @param {string} props.modalLocation - The location of the modal in the sidebar. Can be "bottomright", "bottomleft", "centered".
*/
function Sidebar({ directionsFromLocation, directionsToLocation, pushAppView, currentAppView, appViews, onRouteFinished }) {
function Sidebar({ directionsFromLocation, directionsToLocation, pushAppView, currentAppView, appViews, onRouteFinished, modalLocation }) {
const [currentLocation, setCurrentLocation] = useRecoilState(currentLocationState);
const [filteredLocationsByExternalIDs, setFilteredLocationsByExternalID] = useRecoilState(filteredLocationsByExternalIDState);
const [, setLocationId] = useRecoilState(locationIdState);
Expand Down Expand Up @@ -105,7 +106,7 @@ function Sidebar({ directionsFromLocation, directionsToLocation, pushAppView, cu
}

const pages = [
<Modal isOpen={currentAppView === appViews.SEARCH} key="SEARCH">
<Modal isOpen={currentAppView === appViews.SEARCH} key="SEARCH" modalLocation={modalLocation}>
<Search isOpen={currentAppView === appViews.SEARCH} />
</Modal>,
<Modal isOpen={currentAppView === appViews.EXTERNALIDS} key="EXTERNALIDS">
Expand All @@ -115,15 +116,15 @@ function Sidebar({ directionsFromLocation, directionsToLocation, pushAppView, cu
onLocationClick={(location) => setCurrentLocation(location)}
/>
</Modal>,
<Modal isOpen={currentAppView === appViews.LOCATION_DETAILS} key="LOCATION_DETAILS">
<Modal isOpen={currentAppView === appViews.LOCATION_DETAILS} key="LOCATION_DETAILS" modalLocation={modalLocation}>
<LocationDetails
onStartWayfinding={() => pushAppView(appViews.WAYFINDING)}
onBack={() => closeLocationDetails()}
onStartDirections={() => pushAppView(appViews.DIRECTIONS)}
isOpen={currentAppView === appViews.LOCATION_DETAILS}
/>
</Modal>,
<Modal isOpen={currentAppView === appViews.WAYFINDING} key="WAYFINDING">
<Modal isOpen={currentAppView === appViews.WAYFINDING} key="WAYFINDING" modalLocation={modalLocation}>
<Wayfinding
onStartDirections={() => pushAppView(appViews.DIRECTIONS)}
directionsToLocation={directionsToLocation}
Expand All @@ -132,7 +133,7 @@ function Sidebar({ directionsFromLocation, directionsToLocation, pushAppView, cu
isActive={currentAppView === appViews.WAYFINDING}
/>
</Modal>,
<Modal isOpen={currentAppView === appViews.DIRECTIONS} key="DIRECTIONS">
<Modal isOpen={currentAppView === appViews.DIRECTIONS} key="DIRECTIONS" modalLocation={modalLocation}>
<Directions
isOpen={currentAppView === appViews.DIRECTIONS}
onBack={() => closeDirections()}
Expand Down