Add Panel component #6809

ryaplots · 2024-01-05T12:36:36Z

Summary

This PR adds new components to build the various panels.

Changes

Add panel component
Add toggle component
Add news item component for the news panel
Add shortcut item for the shortcuts panel
Add status label component
Update tab style

Testing

Run storybook

Notes for Reviewers

The colors in this PR are just set through their hex, as the updated color variables are not yet part of the redesign

Checklist

Scope: The referenced issue is addressed, there are no unrelated changes.
Compatibility: The changes are backwards compatible with existing API, storage, configuration and CLI, according to the compatibility commitments in README.md for the chosen target branch.
Documentation: Relevant documentation is added or updated.
The steps/process to test this feature are clearly explained including testing for regressions.
Changelog: Significant features, behavior changes, deprecations and fixes are added to CHANGELOG.md.
Commits: Commit messages follow guidelines in CONTRIBUTING.md, there are no fixup commits left.

pkg/webui/components/panel/panel.styl

pkg/webui/components/panel/toggle/index.js

pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl

pkg/webui/components/status-label/index.js

pkg/webui/components/news-panel/news-item/news-item.styl

pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl

pkg/webui/components/shortcut-panel/shortcut-item/index.js

pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl

pkg/webui/components/tabs/tab/tab.styl

pkg/webui/components/tabs/tabs.styl

pkg/webui/styles/variables/generic.styl

pkg/webui/components/news-panel/news-item/news-item.styl

pkg/webui/components/panel/story.js

pierrephz · 2024-01-25T13:25:38Z

@ryaplots I have added here a review on the UI of the panel: https://www.figma.com/file/7pBLWK4tsjoAbyJq2viMAQ/console-redesign?type=design&node-id=2973%3A8689&mode=design&t=xOwdF36i5TRHqifD-1

kschiffer

Code LGTM but please rerequest review after addressing @pierrephz's comments.

pkg/webui/components/panel/panel.styl

pkg/webui/components/plus-icon.js

pkg/webui/components/star-icon.js

Co-authored-by: Kevin Schiffer <[email protected]>

…/lorawan-stack into feature/panel-component

kschiffer · 2024-02-02T03:27:15Z

I've pushed a commit that refactors these replacement icons as part of the <Icon /> component.

kschiffer

Thank you! Please note the remaining comments. I've pushed the fixes so we can merge this now.

kschiffer · 2024-02-05T04:53:47Z

pkg/webui/components/panel/toggle/toggle.styl

+
+    &-active
+      color: var(--c-text-neutral-min)
+      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05)


This shadow is virtually invisible (even with my design-sensitive eye). It maps to the button-shadow on Figma, which is equally invisible. Is this intentional @pierrephz ?

kschiffer · 2024-02-05T05:08:25Z

pkg/webui/components/panel/toggle/index.js

+          message={label}
+          value={value}
+          onClick={onToggleChange}
+          unstyled


Suggested change

unstyled

The unstyled prop has been removed and is now the default when no primary/secondary/naked/etc is set.

github-actions bot added the ui/web This is related to a web interface label Jan 5, 2024

ryaplots self-assigned this Jan 8, 2024

Base automatically changed from feature/new-sidebar to feature/console-redesign January 12, 2024 05:48

ryaplots force-pushed the feature/panel-component branch from 387e270 to 38192d8 Compare January 15, 2024 09:27

ryaplots changed the title ~~Feature/panel component~~ Add Panel component Jan 17, 2024

ryaplots marked this pull request as ready for review January 17, 2024 15:29

ryaplots requested a review from a team as a code owner January 17, 2024 15:29

ryaplots requested review from kschiffer and removed request for a team January 17, 2024 15:29

ryaplots added 10 commits January 23, 2024 13:17

console: Add news panel item

c2804eb

console: Add panel component

ae731de

console: Add toggle

8411c02

console: Add shortcuts panel item

9dbc5a4

console: Add status label

a93079b

console: Update tabs component

b4000d5

console: Fix font sizes, font weights and border radiuses

06761ad

console: Fix styling

59254fa

console: Improve storybook section

e49d806

console: Fix panel

79ec796

ryaplots force-pushed the feature/panel-component branch from 81a5616 to 79ec796 Compare January 23, 2024 12:17

console: Update panel styling

2aa48f9

ryaplots requested a review from pierrephz January 23, 2024 13:16

kschiffer requested changes Jan 24, 2024

View reviewed changes

ryaplots added 5 commits January 24, 2024 15:24

console: Use color utility class

6e01e25

console: Remove max and min width from panel

e4a9fb0

console: Merge utility classes and regular class into the styl file

c54c135

console: Use color utility classes to achieve label states

108c673

console: Add utility classes into styl class in news item

2c4240f

kschiffer requested changes Jan 25, 2024

View reviewed changes

kschiffer reviewed Jan 25, 2024

View reviewed changes

pkg/webui/components/news-panel/news-item/news-item.styl Show resolved Hide resolved

pkg/webui/components/panel/story.js Outdated Show resolved Hide resolved

console: Use link instead of navlink

b905a4e

ryaplots requested a review from kschiffer January 25, 2024 08:10

console: Fix line-height

7f6dfe9

kschiffer requested changes Jan 29, 2024

View reviewed changes

ryaplots and others added 7 commits January 29, 2024 09:41

console: Add transitions

3547f36

Use text-decoration thickness and offset

3d71795

console: Fix panel animations and icon

b4a315e

console: Fix animation on shortcut button

fb7d217

console: Improve animation and add svg to panel

3a84c0f

console: Adapt svg to use current color

6b40f44

console: Add star and plus icons

9b2420f

pierrephz approved these changes Jan 31, 2024

View reviewed changes

ryaplots requested a review from kschiffer January 31, 2024 15:03

kschiffer requested changes Feb 1, 2024

View reviewed changes

pkg/webui/components/panel/panel.styl Outdated Show resolved Hide resolved

pkg/webui/components/plus-icon.js Outdated Show resolved Hide resolved

pkg/webui/components/star-icon.js Outdated Show resolved Hide resolved

ryaplots and others added 3 commits February 1, 2024 12:30

console: Remove comment

c020a1d

Co-authored-by: Kevin Schiffer <[email protected]>

console: Create the folder for the icon components

3271773

Merge branch 'feature/panel-component' of github.com:TheThingsNetwork…

0f02235

…/lorawan-stack into feature/panel-component

ryaplots requested a review from kschiffer February 1, 2024 11:37

console: Fix color

3a1f579

console: Introduce replacement icons as part of icon component

a9c609b

kschiffer force-pushed the feature/panel-component branch from 36356bc to a9c609b Compare February 2, 2024 03:35

kschiffer added 2 commits February 5, 2024 13:59

console: Add panel shadow token

1153cf2

dev: Add figma URLs to stories

98e9cd0

kschiffer approved these changes Feb 5, 2024

View reviewed changes

kschiffer merged commit bf45693 into feature/console-redesign Feb 5, 2024
4 of 6 checks passed

kschiffer deleted the feature/panel-component branch February 5, 2024 05:21

kschiffer restored the feature/panel-component branch February 6, 2024 03:42

kschiffer mentioned this pull request Feb 6, 2024

Add feature panel components (again) #6916

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Panel component #6809

Add Panel component #6809

ryaplots commented Jan 5, 2024 •

edited

Loading

pierrephz commented Jan 25, 2024

kschiffer left a comment

kschiffer commented Feb 2, 2024

kschiffer left a comment

kschiffer Feb 5, 2024

kschiffer Feb 5, 2024

Add Panel component #6809

Add Panel component #6809

Conversation

ryaplots commented Jan 5, 2024 • edited Loading

Summary

Changes

Testing

Notes for Reviewers

Checklist

pierrephz commented Jan 25, 2024

kschiffer left a comment

Choose a reason for hiding this comment

kschiffer commented Feb 2, 2024

kschiffer left a comment

Choose a reason for hiding this comment

kschiffer Feb 5, 2024

Choose a reason for hiding this comment

kschiffer Feb 5, 2024

Choose a reason for hiding this comment

ryaplots commented Jan 5, 2024 •

edited

Loading