Update sidebar #16017

KTibow · 2023-04-02T03:12:08Z

Proposed change

Updates the sidebar to

use raw links instead of paper-listbox, fixes some ugly apperance stuff and ctrl+clicking
use m3 styling
refactor so it isn't a megacomponent

Type of change

Dependency upgrade
Bugfix (non-breaking change which fixes an issue)
New feature (thank you!)
Breaking change (fix/feature causing existing functionality to break)
Code quality improvements to existing code or addition of tests

Example configuration

NA

Additional information

This PR fixes or closes issue: fixes #
This PR is related to issue or discussion:
Link to documentation pull request:

Checklist

The code change is tested and works locally.
There is no commented out code in this PR.
Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

Documentation added/updated for www.home-assistant.io

KTibow · 2023-04-02T15:01:46Z

Original	M3 Example	Implementation

src/components/ha-sidebar.ts

bramkragten · 2023-04-02T19:01:02Z

use raw links instead of paper-listbox, fixes some ugly apperance stuff and ctrl+clicking

With the list element removed, we now no longer have keyboard navigation, like typeahead and simple arrow handling. Also is it now missing a lot of a11y feats.

KTibow · 2023-04-02T19:43:49Z

re: a11y, after checking on my machine:

what is "typeahead and simple arrow handling"?
keyboard navigation still works with shift-tab/tab and enter

LasseRosenow · 2023-04-06T13:39:08Z

Maybe better to just wait for the @material/web drawer component?

bramkragten · 2023-04-06T13:41:50Z

re: a11y, after checking on my machine:

what is "typeahead and simple arrow handling"?

keyboard navigation still works with shift-tab/tab and enter

Press a letter when focus is on the old sidebar list, it will focus the item starting with the letter you pressed.
Also a list should not (only) use tab, but key up down according to a11y specs

KTibow · 2023-04-06T22:06:29Z

@LasseRosenow there is a nav drawer component but that just wraps whatever content you want to put inside of it - could be they'll add more later as it's marked as wip
@bramkragten what a11y specs are you referring to

bramkragten · 2023-04-17T09:18:37Z

Basic a11y features for lists https://w3c.github.io/aria/#list

KTibow · 2023-04-21T00:07:32Z

Well I'm not sure how to move forward on this, as using paper-listbox would reintroduce the bugs like ctrl+clicking behavior. Should I make a custom implementation to handle those keys?

bramkragten · 2023-06-02T09:29:25Z

Well I'm not sure how to move forward on this, as using paper-listbox would reintroduce the bugs like ctrl+clicking behavior. Should I make a custom implementation to handle those keys?

You can use mwc-list but that will not work with anchor links, so open in new tab etc will no longer work.

- fix currentpanel logic - disable native outline, indicate focus on active page - prevent focus on container - space works to activate an item - typing and up/down works to focus an item

KTibow · 2023-06-03T01:50:57Z

I believe this PR should be ready for comment now. In my testing I didn't find any bugs, and everything from the ARIA listbox guidelines (if it was in there previously) is now working.
(The only thing I can think of changing is increasing the touch targets)

silamon · 2023-08-02T17:49:29Z

Too bad this didn't got a review yet, I've had a go and tested your changes. I didn't look at the code yet.

The sidebar is so much smoother by removing that paper-listbox. It feels like the dashboard also loads faster.
I hope you don't mind if I share some things that didn't work for me:

Reordering the dashboards: I can go in edit mode, but dragging dashboards to other places doesn't seem to move it.
The scrollbar takes a lot of place as can be seen in the screenshot

KTibow · 2023-08-02T18:41:52Z

i'll see if i can reproduce that

silamon · 2023-08-08T16:54:36Z

src/components/ha-sidebar-panels.ts

+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };


This is the reason the ordering of dashboards no longer work. I'm not sure how to solve it though, unless it is accepted that focus can be on the container, which I assume this is the reason the code exists.

Can't reproduce the issue with reordering dashboards
Can you send a screen recording and other relevant info

So, I can reproduce this on both Microsoft Edge and Google Chrome latest version. On Mozilla Firefox it works good. I'll see if I can create a screen recording.

I've retested today and I'm still unable to reorder the dashboards on Chrome v118 though well done on this PR so far.

Here's a screen recording:

Can't reproduce w/ Chromium 117.0.5938.132 or Chrome Mobile 118.0.5993.80
Does it work if you clear your localstorage by chance

Too bad, removing localstorage doesn't solve it. It works if the shadowRootOptions are removed or delegatesFocus is set to false. Let's wait until somebody other reviews.

bramkragten · 2023-08-10T09:01:31Z

Major UI changes like these will have to be approved by our design department, CC @matthiasdebaat

KTibow · 2023-08-17T19:19:41Z

I see that there was a "needs design preview" label added. Assuming that refers to https://design.home-assistant.io/, I have some questions about how to implement one:

How exactly do I display the sidebar? Am I supposed to display the whole sidebar or individual panels? If I need to display the whole sidebar:
- What kinds of states do I need to display? Do I need to show what it looks like with devtools, on mobile, etc? If so, should I just display all the different kinds of sidebars, or provide switches that can be used?
- Where can I learn about how to set up a fake hass?
As someone who isn't as familiar with the frontend as someone in the core team might be, is there a specific contributing guide for how to create a design preview?
Also, is there any specific reason a design preview was requested? The previous sidebar isn't there. Is this a norm for new UI components? Does this make it easier to review? As you can tell I'm not sure if I know enough to create a design preview.

KTibow · 2023-09-21T22:46:27Z

Hey, I'd just like to recap that with 3f1fe22 and 586e12f, I added/fixed these things:

A reduced item height
Using the full badge when expanded
A wiggling animation when in edit mode
Full touch targets

If the code looks all good, this PR is ready to merge.

silamon · 2023-10-19T15:10:59Z

I've retested today since I hope this one can be merged soon.

I've found a little issue in the editing mode for rtl languages.

ltr vs rtl:

KTibow · 2023-10-21T00:04:06Z

Should be resolved on the latest commit

silamon · 2023-11-02T16:10:35Z

@bramkragten can this get a review somehow or is there anything that still needs to be done before review?

src/components/ha-sidebar-panel-config.ts

src/components/ha-sidebar-panel-notifications.ts

bramkragten · 2023-12-04T10:19:39Z

I don't like the text color and especially the icon color of the sidebar, is there a reason these are now so dark?
Also the text "Home Assistant" on top of the expanded sidebar looks very small?
I also miss things like the ripple effect in your implementation, but that might be ok.

KTibow · 2023-12-05T00:40:49Z

I don't like the text color and especially the icon color of the sidebar, is there a reason these are now so dark?

In the dark theme or light theme? Thing is that M3 calls for on-surface-variant, but we only have primary-text-color and secondary-text-color (a much less visible color). While I could decrease the opacity (to 90%) to match on-surface-variant, since I use rgba and var in my code and you can't multiply rgba, this wouldn't work.

Also the text "Home Assistant" on top of the expanded sidebar looks very small?

Yup, this is in compliance with Material 3. The title should be title-small, which is 14pt. Technically speaking it should be even smaller as Home Assistant uses a text size that is 7/8 the normal size.

I also miss things like the ripple effect in your implementation, but that might be ok.

The previous implementation didn't have ripples, and I'm not exactly sure which ripples to use.

src/components/ha-sidebar-panel-config.ts

github-actions · 2024-03-04T15:01:21Z

There hasn't been any activity on this pull request recently. This pull request has been automatically marked as stale because of that and will be closed if no further activity occurs within 7 days.
Thank you for your contributions.

codyc1515 · 2024-03-04T17:37:13Z

Current or can be closed?

KTibow · 2024-03-05T00:35:47Z

Let me fix the conflicts (yet again..)

KTibow · 2024-03-05T00:47:43Z

Actually there have been too many changes for me to want to bother with fixing this yet again. I'm just sad that this never got a chance to get merged.

KTibow added 2 commits April 1, 2023 22:35

initial sidebar refactoring work, todo: sorting

bfed613

add editing and fix stuff

e6f0319

home-assistant bot added the cla-signed label Apr 2, 2023

rename some stuff and add external config

36779f9

KTibow marked this pull request as ready for review April 2, 2023 14:58

bramkragten reviewed Apr 2, 2023

View reviewed changes

src/components/ha-sidebar.ts Show resolved Hide resolved

KTibow added 3 commits April 2, 2023 19:50

fix focusing the list of items

d484b5f

fix rtl (the old sidebar had a rtl bug, fun fact)

fe5025f

Merge branch 'dev' into dev

25ca09d

Merge branch 'dev' into dev

4d3bb5f

Fix accessibility and other bugs

45a8797

- fix currentpanel logic - disable native outline, indicate focus on active page - prevent focus on container - space works to activate an item - typing and up/down works to focus an item

KTibow added 2 commits July 6, 2023 08:57

Merge branch 'dev' into dev

5846073

use @storage

07351e6

improve scrolling

a0f5d4b

silamon reviewed Aug 8, 2023

View reviewed changes

bramkragten added the needs design preview PRs with this label will trigger a GitHub action to generate a gallery preview label Aug 17, 2023

KTibow added 3 commits October 2, 2023 19:23

Merge remote-tracking branch 'upstream/dev' into dev

abb8ca1

fix a11y

30b8631

Merge branch 'dev' into dev

c7d72c1

KTibow added 3 commits October 20, 2023 16:53

Remove useless slots

788eca1

Fix selected

b38d350

Fix RTL

6c47aed

KTibow added 3 commits October 20, 2023 17:18

Merge branch 'dev' into dev

471ffef

Merge remote-tracking branch 'upstream/dev' into dev

fcab8c9

format code

5f6d718

Merge remote-tracking branch 'upstream/dev' into dev

e154267

KTibow force-pushed the dev branch from cb02d4f to e154267 Compare December 3, 2023 23:20

fix formatting

70ac929

bramkragten reviewed Dec 4, 2023

View reviewed changes

src/components/ha-sidebar-panel-config.ts Outdated Show resolved Hide resolved

bramkragten reviewed Dec 4, 2023

View reviewed changes

src/components/ha-sidebar-panel-notifications.ts Outdated Show resolved Hide resolved

address review

74e2f65

bramkragten reviewed Dec 5, 2023

View reviewed changes

src/components/ha-sidebar-panel-config.ts Outdated Show resolved Hide resolved

address review (make keydown/keyup static)

7de61b9

github-actions bot added the stale label Mar 4, 2024

github-actions bot removed the stale label Mar 4, 2024

KTibow closed this Mar 5, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update sidebar #16017

Update sidebar #16017

KTibow commented Apr 2, 2023 •

edited

Loading

KTibow commented Apr 2, 2023

bramkragten commented Apr 2, 2023

KTibow commented Apr 2, 2023 •

edited

Loading

LasseRosenow commented Apr 6, 2023

bramkragten commented Apr 6, 2023 •

edited

Loading

KTibow commented Apr 6, 2023

bramkragten commented Apr 17, 2023

KTibow commented Apr 21, 2023

bramkragten commented Jun 2, 2023

KTibow commented Jun 3, 2023 •

edited

Loading

silamon commented Aug 2, 2023

KTibow commented Aug 2, 2023

silamon Aug 8, 2023 •

edited

Loading

KTibow Aug 8, 2023

silamon Aug 13, 2023

silamon Oct 19, 2023 •

edited

Loading

KTibow Oct 21, 2023

silamon Oct 21, 2023

bramkragten commented Aug 10, 2023

KTibow commented Aug 17, 2023

KTibow commented Sep 21, 2023

silamon commented Oct 19, 2023

KTibow commented Oct 21, 2023

silamon commented Nov 2, 2023

bramkragten commented Dec 4, 2023

KTibow commented Dec 5, 2023

github-actions bot commented Mar 4, 2024

codyc1515 commented Mar 4, 2024

KTibow commented Mar 5, 2024

KTibow commented Mar 5, 2024

Update sidebar #16017

Update sidebar #16017

Conversation

KTibow commented Apr 2, 2023 • edited Loading

Proposed change

Type of change

Example configuration

Additional information

Checklist

KTibow commented Apr 2, 2023

bramkragten commented Apr 2, 2023

KTibow commented Apr 2, 2023 • edited Loading

LasseRosenow commented Apr 6, 2023

bramkragten commented Apr 6, 2023 • edited Loading

KTibow commented Apr 6, 2023

bramkragten commented Apr 17, 2023

KTibow commented Apr 21, 2023

bramkragten commented Jun 2, 2023

KTibow commented Jun 3, 2023 • edited Loading

silamon commented Aug 2, 2023

KTibow commented Aug 2, 2023

silamon Aug 8, 2023 • edited Loading

Choose a reason for hiding this comment

KTibow Aug 8, 2023

Choose a reason for hiding this comment

silamon Aug 13, 2023

Choose a reason for hiding this comment

silamon Oct 19, 2023 • edited Loading

Choose a reason for hiding this comment

KTibow Oct 21, 2023

Choose a reason for hiding this comment

silamon Oct 21, 2023

Choose a reason for hiding this comment

bramkragten commented Aug 10, 2023

KTibow commented Aug 17, 2023

KTibow commented Sep 21, 2023

silamon commented Oct 19, 2023

KTibow commented Oct 21, 2023

silamon commented Nov 2, 2023

bramkragten commented Dec 4, 2023

KTibow commented Dec 5, 2023

github-actions bot commented Mar 4, 2024

codyc1515 commented Mar 4, 2024

KTibow commented Mar 5, 2024

KTibow commented Mar 5, 2024

KTibow commented Apr 2, 2023 •

edited

Loading

KTibow commented Apr 2, 2023 •

edited

Loading

bramkragten commented Apr 6, 2023 •

edited

Loading

KTibow commented Jun 3, 2023 •

edited

Loading

silamon Aug 8, 2023 •

edited

Loading

silamon Oct 19, 2023 •

edited

Loading