Create DetailLayout View and Vue components

What does this MR do and why?

Background

!231646 (closed) explored adding DetailLayout Vue and ::Layouts::DetailLayout View components. It identified:

1. Layouts should be responsible for basic loading state and supporting <template #loading> slot for individual implementations to render <gl-skeleton-loader> as they set fit. The loading prop ensures consistent use of <gl-loading-icon> size and margin.
2. CSS styles duplicated between layout components could diverge over time and require manual work to keep in-sync. Using layout classes (like component classes in GitLab UI) allows us to keep styles consistent between Vue and View implementations.
3. A #before slot is required to render items in layouts before <page-heading>.
4. Some views require more complex implementations of a page heading. Wrapping <h1> in page heading component with <slot name="heading-wrapper"> allows complex implementations to override the <h1> with multiple element etc. This occurs in work item detail which renders multiple components.

Changes

• Add DetailLayout View and Vue components and layout styles

What the detail layout components currently do:

• Abstract basic CSS grid layout styles for sidebar to a single CSS class
• Provide before, heading, description, alerts, sidebar, and default slots

What the detail layout components currently do not do:

• Handle sidebar toggle button and state

Iterations

1. !233013 (merged) Add loading prop to IndexLayout components/Move styles to layout stylesheets
2. !233015 (merged) Detail layout Vue/View components 👈 you are here
3. !233016 Add detail layout to alerts detail page
4. !233018 (Draft) Add detail layout to work item detail page (coordinate with plan)
5. Base layout component??? (stretch goal) #597890

References

• gitlab-org#19509
• gitlab-org#19990
• gitlab-org/gitlab-services/design.gitlab.com#3187
• #596902 (closed)
• #596903 (closed)

Screenshots or screen recordings

How to set up and validate locally

• Run yarn storybook:start
• View http://localhost:6006/?path=/story/vue-shared-layouts-detail-layout--with-slots

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.