feat(cxl-ui): add new team dashboard #352

freudFlintstone · 2023-10-27T01:31:50Z

https://app.clickup.com/t/86ayd0hrw

freudFlintstone · 2023-10-27T01:32:57Z

Starting Draft PR so we are able to start testing each component early. The header is available

github-actions · 2023-10-27T01:33:38Z

size-limit report 📦

Path	Size
packages/cxl-ui/pkg/dist-web/cxl-ui.js	66.81 KB (+2.56% 🔺)
packages/cxl-ui/pkg/dist-web/cxl-ui-jwplayer.js	11.87 KB (0%)
packages/cxl-ui/pkg/dist-web/cxl-ui-playbooks.js	27.77 KB (+0.03% 🔺)
packages/cxl-ui/pkg/dist-web/vendor.js	135.58 KB (0%)
packages/cxl-ui/pkg/dist-web/cxl-ui-jwplayer.js, packages/cxl-ui/pkg/dist-web/cxl-ui-playbooks.js, packages/cxl-ui/pkg/dist-web/cxl-ui.js, packages/cxl-ui/pkg/dist-web/manifest.js, packages/cxl-ui/pkg/dist-web/unresolved.js, packages/cxl-ui/pkg/dist-web/vendor.js	243.18 KB (+0.7% 🔺)

heshfekry · 2023-10-28T13:25:42Z

Solid thank you.

freudFlintstone · 2023-10-31T14:26:42Z

Task linked: CU-86ayd0hrw Team dashboard

pawelkmpt

Small mobile (320px):

missing side padding,
me need more space between stats and progress bar.

pawelkmpt · 2023-11-02T20:15:07Z

packages/cxl-ui/src/components/cxl-dashboard-team-header.js

+          <a href="my-account/teams/${this.teamId}/members/">
            <vaadin-button class="invite-manage" theme="secondary">
              Invite & manage team
            </vaadin-button>
          </a>
-          <a>
+          <a href="my-account/teams/${this.teamId}/settings/">


These links should be passed by attribute. We need flexibility just in case URL changes.

@freudFlintstone this is missing

packages/cxl-ui/src/components/cxl-dashboard-team-stats.js

pawelkmpt · 2023-11-02T20:16:21Z

packages/cxl-ui/src/components/cxl-dashboard-team-stats.js

  render() {
    return html`
      <div class="container">
        <header>
          <h1 class="title">Team progress & stats</h1>
          <div class="actions">
-            <a>
+            <a href="roadmap/team/?team_id=${this.teamId}">


Should be passed by attribute

@freudFlintstone this is missing

pawelkmpt

Commit message changes:

- feat(cxl-ui): add new team dashboard header
+ feat(cxl-ui): add cxl-dashboard-team-header component

- feat(cxl-ui): add new team dashboard stats
+ feat(cxl-ui): add cxl-dashboard-team-stats component

- feat(cxl-ui): handle cta links in header and stats components
+ feat(cxl-ui): team dashboard - CTA links in header and stats components

Broken on small mobile and tablet:

pawelkmpt · 2023-11-08T13:18:04Z

Resolve conflicts

freudFlintstone · 2023-11-08T14:22:16Z

@pawelkmpt It's not broken. You probably forgot to run yarn build-styling after changing branches.

pawelkmpt · 2023-11-09T10:03:02Z

@pawelkmpt It's not broken. You probably forgot to run yarn build-styling after changing branches.

I visually test mostly on the Storybook attached to the PR. I just tested in two ways: dev tools and Storybook mobile control and both are fixed for tablet but still broken for small mobile (missing padding). We do style things starting at 320 px width. You seem to keep forgetting it.

pawelkmpt

Small mobile 320px

freudFlintstone · 2023-11-09T13:34:54Z

@pawelkmpt I try to use a mobile first approach on style, as it's simpler and our standard media queries (in the _mq.scss file) all use min-width thresholds. That way I don't forget about it, but I'll check more sizes next time.

The problem here was that the cxl-stats component is not properly responsive, and it pushes the boundaries of the container on the smallest screen.

Fixed by forcing different box-sizing on inner container div.

pawelkmpt · 2023-11-14T12:34:35Z

@freudFlintstone please rebase on top of master

Already fixed

https://app.clickup.com/t/86ayd0hrw

…ntainer

…tage

freudFlintstone requested review from pawelkmpt and anoblet October 27, 2023 01:31

freudFlintstone self-assigned this Oct 27, 2023

freudFlintstone force-pushed the raphael/feat/dashboard/team branch from fbc9372 to 7024d04 Compare October 28, 2023 02:33

freudFlintstone requested a review from lkraav October 31, 2023 14:27

freudFlintstone marked this pull request as ready for review October 31, 2023 14:27

freudFlintstone force-pushed the raphael/feat/dashboard/team branch from abb9bb4 to 46f20bd Compare October 31, 2023 14:28

pawelkmpt added the CXL 2.0 label Nov 2, 2023

freudFlintstone force-pushed the raphael/feat/dashboard/team branch from f92a705 to dab9b00 Compare November 2, 2023 20:15

pawelkmpt reviewed Nov 2, 2023

View reviewed changes

freudFlintstone force-pushed the raphael/feat/dashboard/team branch 2 times, most recently from 37b1fd5 to c33e988 Compare November 7, 2023 13:33

freudFlintstone requested a review from pawelkmpt November 7, 2023 13:34

pawelkmpt requested changes Nov 8, 2023

View reviewed changes

freudFlintstone force-pushed the raphael/feat/dashboard/team branch from c33e988 to 712297c Compare November 8, 2023 14:48

freudFlintstone requested a review from pawelkmpt November 8, 2023 17:25

pawelkmpt previously requested changes Nov 9, 2023

View reviewed changes

freudFlintstone requested a review from pawelkmpt November 9, 2023 13:34

freudFlintstone force-pushed the raphael/feat/dashboard/team branch 2 times, most recently from c4084fd to 2058249 Compare November 14, 2023 11:58

freudFlintstone force-pushed the raphael/feat/dashboard/team branch from 2058249 to 201fa9a Compare November 14, 2023 19:42

freudFlintstone and others added 7 commits November 15, 2023 10:50

feat(cxl-ui): add cxl-dashboard-team-header component

aec1b2a

feat(cxl-ui): add cxl-dashboard-team-stats component

38c1c45

feat(cxl-ui): index-core include team header and team stats

f54d517

https://app.clickup.com/t/86ayd0hrw

feat(cxl-ui): team dashboard - CTA links in header and stats components

6d2b63e

https://app.clickup.com/t/86ayd0hrw

feat(cxl-ui): prevent unresponsive slotted content from stretching co…

c05e8d7

…ntainer

fix(cxl-ui): cxl-stats layout for team dashboard

b85d24a

feat(cxl-ui): add cxl-section-dashboard-team-header theme to cxl-section

a3d0fe2

pawelkmpt force-pushed the raphael/feat/dashboard/team branch from 201fa9a to bf74455 Compare November 15, 2023 09:52

fix(cxl-ui): cxl-dashboard-team-stats use integer for complete percen…

340684f

…tage

pawelkmpt force-pushed the raphael/feat/dashboard/team branch from bf74455 to 340684f Compare November 15, 2023 09:52

pawelkmpt approved these changes Nov 15, 2023

View reviewed changes

pawelkmpt merged commit a7519de into master Nov 15, 2023
5 checks passed

pawelkmpt deleted the raphael/feat/dashboard/team branch January 9, 2024 12:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(cxl-ui): add new team dashboard #352

feat(cxl-ui): add new team dashboard #352

freudFlintstone commented Oct 27, 2023

freudFlintstone commented Oct 27, 2023 •

edited

Loading

github-actions bot commented Oct 27, 2023 •

edited

Loading

heshfekry commented Oct 28, 2023

freudFlintstone commented Oct 31, 2023

pawelkmpt left a comment

pawelkmpt Nov 2, 2023

pawelkmpt Nov 6, 2023

pawelkmpt Nov 2, 2023

pawelkmpt Nov 6, 2023

pawelkmpt left a comment •

edited

Loading

pawelkmpt commented Nov 8, 2023

freudFlintstone commented Nov 8, 2023

pawelkmpt commented Nov 9, 2023 •

edited

Loading

pawelkmpt left a comment

freudFlintstone commented Nov 9, 2023 •

edited

Loading

pawelkmpt commented Nov 14, 2023

feat(cxl-ui): add new team dashboard #352

feat(cxl-ui): add new team dashboard #352

Conversation

freudFlintstone commented Oct 27, 2023

freudFlintstone commented Oct 27, 2023 • edited Loading

github-actions bot commented Oct 27, 2023 • edited Loading

size-limit report 📦

heshfekry commented Oct 28, 2023

freudFlintstone commented Oct 31, 2023

pawelkmpt left a comment

Choose a reason for hiding this comment

pawelkmpt Nov 2, 2023

Choose a reason for hiding this comment

pawelkmpt Nov 6, 2023

Choose a reason for hiding this comment

pawelkmpt Nov 2, 2023

Choose a reason for hiding this comment

pawelkmpt Nov 6, 2023

Choose a reason for hiding this comment

pawelkmpt left a comment • edited Loading

Choose a reason for hiding this comment

pawelkmpt commented Nov 8, 2023

freudFlintstone commented Nov 8, 2023

pawelkmpt commented Nov 9, 2023 • edited Loading

pawelkmpt left a comment

Choose a reason for hiding this comment

freudFlintstone commented Nov 9, 2023 • edited Loading

pawelkmpt commented Nov 14, 2023

freudFlintstone commented Oct 27, 2023 •

edited

Loading

github-actions bot commented Oct 27, 2023 •

edited

Loading

pawelkmpt left a comment •

edited

Loading

pawelkmpt commented Nov 9, 2023 •

edited

Loading

freudFlintstone commented Nov 9, 2023 •

edited

Loading