Idea Hub dashboard widget layout shift when switching tabs

Feature Description

Currently the Idea Hub dashboard widget has the potential to render different heights on different tabs resulting in a layout shift. This may only be possible in the zero-data state for Search Console, but we should try to keep the height stable regardless whether or not it has ideas or not.

https://user-images.githubusercontent.com/1621608/125916893-ba054fa5-bfff-48dc-b197-6eb4400fc960.mp4

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The Idea Hub dashboard widget should maintain the same height across all of its tabs once loaded
• Secondarily, the height may vary between viewport sizes (it should remain responsive to allow for wrapping text, etc)

Implementation Brief

• Go through three files below and:

  • Remove the block that returns null if the active prop is falsey
  • Remove the active prop altogether, along with the propTypes definition.

  assets/js/modules/idea-hub/components/dashboard/DashboardIdeasWidget/NewIdeas.js
  assets/js/modules/idea-hub/components/dashboard/DashboardIdeasWidget/SavedIdeas.js
  assets/js/modules/idea-hub/components/dashboard/DashboardIdeasWidget/DraftIdeas.js
  

• Inside assets/js/modules/idea-hub/components/dashboard/DashboardIdeasWidget/index.js, remove the assignments of the active prop to the above components.

• Inside assets/sass/components/idea-hub/_googlesitekit-idea-hub-dashboard-ideas-widget.scss:

  • Add display: flex to .googlesitekit-idea-hub__body
  • For the rule addressing .googlesitekit-idea-hub__content[aria-hidden="true"]:
    • Remove display: none, and replace with visibility: hidden. This will hide the inactive tab, but it will still take up the same space in the document flow that it would if it were visible.
    • Add margin-right: -100%;, which will move the visible tab into view.
  • Add a new visibility: visible rule for .googlesitekit-idea-hub__content[aria-hidden="false"]. This will make the active tab visible.
  • See the following gist if the above is unclear:

  +       .googlesitekit-idea-hub__body {
  +               display:flex;
  +       }
  +
          .googlesitekit-idea-hub__content {
  +                       width: 100%;
  
                  &[aria-hidden="true"] {
  -                       display: none;
  +                       visibility: hidden;
  +                       margin-right: -100%;
  +               }
  +
  +               &[aria-hidden="false"] {
  +                       visibility: visible;
                  }
  

• Merge #3746

Test Coverage

• No new tests required.

Visual Regression Changes

• Images dealing with this widget may need updating.

QA Brief

• Load the dashboard such that the Idea Hub widget is visible on the dashboard
• Click through each of the tabs; the height of the Idea Hub widget should not change

Changelog entry

• Improve the tab-switching UX in the Idea Hub dashboard widget.

[felixarntz]

@aaemnnosttv Great point. I like the idea of making it a dynamic widget footer. Can you open an issue for that?

[aaemnnosttv]

@felixarntz maybe worth a follow-up issue here, but looking at the component above, I feel like the “Updated every 2-3 days” should be closer to the bottom of the widget so that the layout fills the vertical space. As it is, it looks a little bit off to me. We could even move that part of the component to be a widget footer which would show on all tabs, although we could make it dynamic based on the selected tab. What do you think?