Skip to content
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.

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

UI/UX Dropdown page picker within Personabar #3651

Closed
10PoundGorilla-ChrisBehling opened this issue Mar 27, 2020 · 1 comment · Fixed by #3653
Closed

UI/UX Dropdown page picker within Personabar #3651

10PoundGorilla-ChrisBehling opened this issue Mar 27, 2020 · 1 comment · Fixed by #3653

Comments

@10PoundGorilla-ChrisBehling
Copy link

10PoundGorilla-ChrisBehling commented Mar 27, 2020

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

current

Proposed

proposed

@bdukes
Copy link
Contributor

bdukes commented Mar 27, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants