I proposed an illustrated some changes below:

Initial (closed)	Panel open

• The "external" button, with the "newWindow" icon from the icon repo is used as the entry point to open the external panel.
• When the panel is opened, the actions that were aligned to the right of the map, are pushed to remain over the map (e.g., notice that the close icon remains over the map).
• The panel title is "External use", and two sections are available: "Coordinates" and "map services".
• The selector of type of map, lists the default option as "Standard maps", to make it more clear that other kinds of maps are available as options for the user to chose.
• Map services are listed using the service name and the external icon. Clicking will open the corresponding map in a new tab/window.
• For a given type of map, if there are more than 7 options only the first 4 will be shown, and a "more" option will be available to show the rest. If there are 7 or less options, all of them will be listed.

As a reference the current panel is shown below:

Is this ready to be worked on?

In T187919#4096852, @Mooeypoo wrote:

Is this ready to be worked on?

Yes, I think so. My only refinement has to do with Pau's suggestion of renaming the More Details button "External." I think we could still be a little more specific (external what?), and I'd like that button name to match the name of the section label in the panel. My top suggestion is simply External maps, because that can also be the name of the label.

@Pginer-WMF, would that work for you? I see that you're kind of working in the idea that the coordinates are also for "external" use. I don't think it's a problem with the label "External maps", but if we want to tie everything up neatly we could change "Coordinates" to "For coordinates"—meaning, these are the external maps "for" those coordinates.

I updated the description with new mockups. "External maps" seems a good option to unify the button and the panel title.
Regarding the coordinates label, I left it as just "coordinates" since using "for coordinates" may have localisation issues (i.e., "External maps" + "For coordinates X, Y" may make sense as a sentence or not depending on the language).

I'll move this ticket to RFP, and further adjustments can be done as separate tickets (e.g., removing/replacing the "V" dropdown was suggested in the design review).

Looks great. Thanks!

Change 423826 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/Kartographer@master] [WIP] Tweaks to map details panel

https://gerrit.wikimedia.org/r/423826

What does the down arrow next to "External maps" do? If it closes the side panel, then it should point to the right.

In T187919#4108406, @Esanders wrote:

What does the down arrow next to "External maps" do? If it closes the side panel, then it should point to the right.

The chevron pointing down was left out of the current iteration of changes, but it definitely needs review. We can consider an arrow pointing right as you mentioned or even remove it completely (since users may already know the path to open it since we present it initially close).

If it does not add too much complexity for the ticket, I'll support using the "arrowNext" in this round of changes, and later reconsider further adjustments in separate tickets. We may want the panel to have an opening transition that makes it appear from the side to reinforce the metaphor, or removing the icon if it feels redundant in actual use.

I'll update the ticket description to include the updated version:

Thanks for bringing that up Ed. Moriel and I were just wondering about the same issue yesterday. The right-facing arrow seems like an improvement, since the user perception will be that the panel slides out from the right. Thanks for updating the design Pau.

@Pginer-WMF I've implemented the mockup to the best of my ability without the accurate distances. It looks fairly close to what you have.

The only thing I'm missing is the color for the hover effect on the external services items...? We could add it in a followup, but I wasn't sure which color to use.

In T187919#4118107, @Mooeypoo wrote:

@Pginer-WMF I've implemented the mockup to the best of my ability without the accurate distances. It looks fairly close to what you have.

Great. Where can I see it? I tried with a map in beta but was not updated.

The only thing I'm missing is the color for the hover effect on the external services items...? We could add it in a followup, but I wasn't sure which color to use.

The light blue color is Accent90 (#eaf3ff). There is more information about colors in the design style guide.

@Mooeypoo, when and where will we be able to see this, please?

In T187919#4120505, @jmatazzoni wrote:

@Mooeypoo, when and where will we be able to see this, please?

When someone reviews the change...

I'll add the color on a subsequent change so it doesn't hold this up.

I implemented the hover color in the current patch. I'll poke the team about reviewing it.

I've merged the patch.

I noted that in the map services dropdown, when you select "Topological" there are no features services so by default you only see the "View more" button. No big deal but it looks weird initially.

Change 423826 merged by jenkins-bot:
[mediawiki/extensions/Kartographer@master] Tweaks to map details panel

https://gerrit.wikimedia.org/r/423826

I took a look to the map in beta. It works as expected, but there are a few aspects that we may want to polish a bit:

• Avoid the "View more" option when there are few options. If there are 7 or less options, all of them should be listed (without a "view more" button).
• Items in the list of map services get highlighted when hovering anywhere in their row, but users can only click only on the label and the icon. The whole row should be interactive, and the highlight should expand from edge to edge of the panel.
• Make the panel distance consistent in all sides. Ideally it should be 16px to all sides. This may require to distribute the padding through different elements (an example below).
• Remove the instructions text "View this location in one of the services listed below. You can filter the list by map type:".
• Add to the "View more" button the same padding that items in the list have so that the left edge of the text is aligned.
• Adjust the coordinates text color to use Base20 (#54595D).

I included a CSS example on how to support some of the above changes (those about layout):

.mw-kartographer-description {
		display:none;
}

.mw-kartographer-mapdetails-coordinates-latlon {
	color: #54595d
}

.mw-kartographer-mapDialog-sidebar {
	padding: 16px 0 !important;
}

.mw-kartographer-mapdetails, .mw-kartographer-filterservices {
	padding: 0 16px;
}
.mw-kartographer-filterservices-list-item {
	padding: 4px 16px !important;
}

.mw-kartographer-externalservices>.oo-ui-buttonElement { /* "View more" button. Couldn't make a better CSS selector */
	margin-left:16px;
}

@Mooeypoo, Please also make the button name "External maps," not just "External," so that it matches the header in the panel. Thanks.

Pulling it back to 'in development' to work on the fixes with a followup commit.

@Pginer-WMF Three minor questions
(1) - previously the coordinates for the displayed map were shown in the section 'Map details'. I guess this was a main logical reason to name the section 'Map details'. :

Now, the coordinates are listed under 'External maps' label - no potential source of confusion to users? And naming the button "External" there would be no hint that there is in fact, some additional info on the displayed map :

(2) Any reason why Coordinates are displayed on two lines?
(3) I read through the discussion about naming the button "External" - would be hard to translate (and understand, in my opinion). What about standard "More options" wording?

In T187919#4129260, @Pginer-WMF wrote:

• Avoid the "View more" option when there are few options. If there are 7 or less options, all of them should be listed (without a "view more" button).

Done.

• Items in the list of map services get highlighted when hovering anywhere in their row, but users can only click only on the label and the icon. The whole row should be interactive, and the highlight should expand from edge to edge of the panel.

Actually, they can click either the label or the icon, but I can see how that's not very clear.

I am switching those rows to be a link, and the label to be an actual label rather than a frameless button -- but that means that we lose some of the OOUI behavior on those buttons, like the colors and things like accessibility markers (when tabbing through, focus, etc).
I can override the colors in the CSS, but we should test and make sure the other behavior is still okay.

• Make the panel distance consistent in all sides. Ideally it should be 16px to all sides. This may require to distribute the padding through different elements (an example below).

Implemented the style you gave below. The only comment I have for note is that the list of items seem a lot more compact (less internal margin in there?) I think it's fine, but I want to make sure that's what you intended.

• Remove the instructions text "View this location in one of the services listed below. You can filter the list by map type:".

Done.

• Add to the "View more" button the same padding that items in the list have so that the left edge of the text is aligned.

Done (with your styles)

• Adjust the coordinates text color to use Base20 (#54595D).

Done (with your styles)

I included a CSS example on how to support some of the above changes (those about layout):

Thanks! That was super helpful! I implemented verbatim, and added a class for the button to make that style easier to implement too.

In T187919#4130108, @jmatazzoni wrote:

@Mooeypoo, Please also make the button name "External maps," not just "External," so that it matches the header in the panel. Thanks.

Done.

Change 426149 had a related patch set uploaded (by Mooeypoo; owner: Mooeypoo):
[mediawiki/extensions/Kartographer@master] Followup Ie6bdead6dcb: Improve sidebar styling and display

https://gerrit.wikimedia.org/r/426149

Change 426227 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/Kartographer@master] Use 'next' instead of 'arrowNext'

https://gerrit.wikimedia.org/r/426227

I've replaced 'arrowNext' with 'next'. The next/previous icons are rotations of the expand/collapse pair, and this action is 'collapse'. Also the arrow icons haven't been used anywhere yet (according to T141801 their usage is "Planned in MinervaNeue").

Change 426227 merged by jenkins-bot:
[mediawiki/extensions/Kartographer@master] Use 'next' instead of 'arrowNext'

https://gerrit.wikimedia.org/r/426227

Based on comments on the patch, I reset the item list to be OOUI buttons so that they follow the accessibility requirements, and also that they work the same in Apex, which the previous <a> design didn't have.

That means that the hover effect is built-in OOUI for buttons, which means -- none. @Pginer-WMF if we put hover effect on these buttons, that's overriding the styleguide. @Esanders Also made a good point about OOUI's hover color being grey, not blue. What do you want done here?

You could look into subclassing SelectWidget.

In T187919#4132211, @Esanders wrote:

You could look into subclassing SelectWidget.

I thought about that, but it kinda reminds me of what we had to do in the Notifications popup, too. We started with a SelectWidget and we ended up changing out of it fairly quickly.

If we subclass SelectWidget, we end up overriding all behavior (including listeners for things like 'mousedown' as well as 'click' etc), so it ends up being a widget that overrides everything "just" to have the styling, and it's not just SelectWidget, it's also OptionWidget that needs to be overriden to undo the prevention of event propagation and to set it up with a <a> tag.

... on the flip side, if I create my own widget without SelectWidget (just with <a> tags), I'll need to force it to have OptionWidgets' hover/general styling...

I am not entirely sure what strategy is better. In the Notifications popup we had x-wiki bundles that made the choice easier (no SelectWidget) but here we really have a straight forward list.

Subclassing SelectWidget *and* OptionWidget for this list, honestly, looks like an overkill, but if we aim towards "as little maintenance as possible" then maybe that's better, seeing as it will get the updated versions of styling,etc from OOUI "for free".

In T187919#4131118, @Mooeypoo wrote:

That means that the hover effect is built-in OOUI for buttons, which means -- none. @Pginer-WMF if we put hover effect on these buttons, that's overriding the styleguide. @Esanders Also made a good point about OOUI's hover color being grey, not blue. What do you want done here?

The general idea is to have a list of clickable elements, which I assumed we had a standard component for, but I don't see an example in the demos. The hover color to use on lists is still an open issue, so let's use the standard to make sure it keeps aligned if it changes in the future.

In T187919#4132961, @Pginer-WMF wrote:

In T187919#4131118, @Mooeypoo wrote:

That means that the hover effect is built-in OOUI for buttons, which means -- none. @Pginer-WMF if we put hover effect on these buttons, that's overriding the styleguide. @Esanders Also made a good point about OOUI's hover color being grey, not blue. What do you want done here?

The general idea is to have a list of clickable elements, which I assumed we had a standard component for, but I don't see an example in the demos. The hover color to use on lists is still an open issue, so let's use the standard to make sure it keeps aligned if it changes in the future.

The "standard" is not a standard.

I am using OO.ui.ButtonWidget. They have no hover color.
If I use OO.ui.SelectWidget, it has hover colors, but will be requiring heavy modification to itself *and* a child class for OO.ui.OptionWidget, just to have the hover colors.

The OO.ui.ButtonWidget method works, except it doesn't have a hover color, so I can apply the color requested, or apply no hover. Either way, going the SelectWidget route and overriding/shutting-off all click/mousedown/focus events sounds a lot more evil than applying the style...

Screenshot taken with the latest patch:

In T187919#4130108, @jmatazzoni wrote:

@Mooeypoo, Please also make the button name "External maps," not just "External," so that it matches the header in the panel. Thanks.

I'm looking on beta and don't see the change to the button name. Was this change made? If not, please make it, unless there is some issue I'm unaware of. I don't think the word "External" on its own will mean much to people. Also, I'd like the panel title and the button to say the same thing.

If there is a problem with 'External maps," we could go for something like "Other map services" or "Other maps of this location." But I'm not sure the latter would fit on one line as the title of the panel.

In T187919#4143133, @jmatazzoni wrote:

I'm looking on beta and don't see the change to the button name. Was this change made?

The patch will be merged later today and should appear on beta shortly after. We'll let you know.

Change 426149 merged by jenkins-bot:
[mediawiki/extensions/Kartographer@master] Followup Ie6bdead6dcb: Improve sidebar styling and display

https://gerrit.wikimedia.org/r/426149

In T187919#4143153, @SBisson wrote:

In T187919#4143133, @jmatazzoni wrote:

I'm looking on beta and don't see the change to the button name. Was this change made?

The patch will be merged later today and should appear on beta shortly after. We'll let you know.

Merged. Should be on beta now or shortly.

Checked in betalabs.

Reviewed with @jmatazzoni and @Volker_E - the following are no-issues.

(1) (seems to be specific to beta) Unnecessary horizontal scrolling in the side panel:

(2) On enwikivoyage (and on https://maps.wikimedia.org/#7/45.936/10.481) 'Switzerland' is displayed in four different languages (as long as the name of the country is displayed, it will be in four different languages):

(3) No tooltips for the right arrow icon.

(4) enwikivoyage does not show layers options when 'More details' is clicked.

The layers options are shown when the side panel is open. I did not see any particular reason why it might be bad, but it's curious that previously we had a different behavior.

(5) Unbalanced positioning of the arrow icon and (maybe) of external links icons:

Compare with previous layout :