UI/UX Dropdown page picker within Personabar

[10PoundGorilla-ChrisBehling]

Description of problem

When using the .dnn-page-picker, menu items that wrap onto multiple lines are indenting around the icon (first div in .page-value). This can become clunky and we believe it would display better if all of the lines of text started at the same spot from the left.

I would also suggest applying class attributes to the children nodes in .page-value, for identification purposes. Current rendered markup is:

<div class="page-value">
	<div class="">
		<svg>...</svg>
	</div>
	<div class="">
		Beer Line Cleaning Certification
	</div>
</div>

Would suggest using:

<div class="page-value">
	<div class="page-value__icon">
		<svg>...</svg>
	</div>
	<div class="page-value__label">
		Beer Line Cleaning Certification
	</div>
</div>

Description of solution

Current css markup for .page-value > div is:

.dnn-page-picker .page-picker-content .pages-container ul li .page-value > div {
    font-size: 15px;
    text-indent: 20px;
    line-height: 16px;
}

Consider removing text-indent: 20px; and instead replacing it with margin-left: 20px; leaving you with the following markup

.dnn-page-picker .page-picker-content .pages-container ul li .page-value > div {
    font-size: 15px;
    margin-left: 20px;
    line-height: 16px;
}

By applying the above suggested .page-value__icon and .page-value__label classes to the children nodes of .page-value, you can also more accurately target both the icon and page name/label.

Description of alternatives considered

If you apply the suggested children classes .page-value__icon and .page-value__label, you open up the opportunity to leverage other css modifiers in the future. You can also more easily switch to using flexbox instead of absolute positioning for the icons.

From what I can tell, it also looks like the .dnn-page-picker does not display different icons for pages that may be a link or file instead of a standard page. CSS modifiers and a css based icon font pack could make the display more flexible. Easy modifiers might include:

<div class="page-value__icon / page-value__icon--file">
<div class="page-value__icon / page-value__icon--link">

Screenshots

Current

Proposed

[bdukes]

The switch from text-indent to margin-left looks good to me, I'd accept a PR to implement that.

In terms of adding more classes, until those classes are used, they don't do a lot for us. Since the Persona Bar is isolated from an user-defined styles, there's not really an ability for someone to make use of those styles to extend the display. So, adding them on their own doesn't buy us much. However, if you wanted to implement differentiated icons or flexbox rendering or anything else that would require those classes, you can add those classes as needed.

Thanks for the well thought-out issue, it really helps us to understand what you're suggesting and make a decision one way or the other. Feel free to open more issues if you have other suggestions.