Application form layout #1000

GaryRidgway · 2025-07-30T20:42:26Z

No description provided.

src/components/brand-bar/BrandBar.stories.js

…idebar.

…uld not render in the parent site slot.

bspeare · 2025-08-13T20:41:11Z

I moved this out of the draft state in order to get the documentation pages built. This is not ready for review, but the pages can be viewed at:

Copilot

Pull Request Overview

This PR adds application form layout components and styles for handling complex form structures within an application interface. The changes include responsive flexbox utilities, new component styles for pagination, menu navigation, and form filters, plus updated brand bar styling and corresponding Storybook showcases.

Adds comprehensive flexbox utility classes for responsive layout management
Introduces new component styles for pager, menu, and form-filters components
Creates Storybook showcase stories demonstrating application form layouts with directory listings

Reviewed Changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/scss/layout/_flexbox.scss	Adds flexbox utility classes for gaps, display, wrapping, and flex values 1-12
src/scss/components/pager.scss	New pagination component styles with responsive and theming support
src/scss/components/menu.scss	New menu component styles for both vertical and horizontal layouts
src/scss/components/form-filters.scss	Comprehensive form filter styles for search and advanced filtering interfaces
src/scss/components/brand-bar.scss	Updates font-weight reference and removes margin-left styling
src/scss/abstracts/_utility-classes.scss	Adds small padding utility class
src/scss/abstracts/_layout-main.scss	Fixes formatting by removing extra semicolons
src/components/showcase/ApplicationFormLayout.stories.js	New Storybook story showcasing application form layout
src/components/showcase/ApplicationFormDirectory.stories.js	New Storybook story showcasing directory listing with filters
src/components/brand-bar/BrandBar.vue	Updates import formatting and order
src/components/brand-bar/BrandBar.stories.js	Refactors story structure to use modern Storybook format

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-09-30T16:27:51Z

src/scss/layout/_flexbox.scss

+  @include utilities.breakpoint(sm) {
+    column-gap: var(--space-md-width-gutter);
+  }


Inconsistent indentation between .flex--gap__sm (4 spaces) and .flex--gap__md (2 spaces). Both should use the same indentation level for consistency.

Suggested change

@include utilities.breakpoint(sm) {

column-gap: var(--space-md-width-gutter);

}

@include utilities.breakpoint(sm) {

column-gap: var(--space-md-width-gutter);

}

@copilot. I think this should actually be the other way around with a 2 space indent.

Copilot · 2025-09-30T16:27:52Z

src/scss/components/menu.scss

+    line-height: 1.4;
+  }
+
+   >li:hover>a:after {


[nitpick] Missing spaces around the '>' child combinator. Should be '> li:hover > a:after' for better readability and consistency with CSS formatting standards.

Suggested change

>li:hover>a:after {

> li:hover > a:after {

Copilot · 2025-09-30T16:27:52Z

src/scss/components/menu.scss

+
+    a {
+      padding: 1.35rem 1.25rem;
+     // color: var(--brand-secondary);


Commented-out code should be removed rather than left in the codebase. If this styling might be needed later, consider using a CSS custom property or documenting the reasoning.

Suggested change

// color: var(--brand-secondary);

Copilot · 2025-09-30T16:27:52Z

src/components/showcase/ApplicationFormLayout.stories.js

+                  <input type="text" id="last" placeholder="Last">
+                </div>
+                <div class="form-item flex--1">
+                  <label for="suffix">Middle</label>


The label text 'Middle' is incorrect for a suffix field. It should be 'Suffix' to match the field purpose and placeholder text.

Suggested change

<label for="suffix">Middle</label>

<label for="suffix">Suffix</label>

@copilot I think the label should be changed to match the text, actually.

Copilot · 2025-09-30T16:27:53Z

src/components/showcase/ApplicationFormDirectory.stories.js

+
+                  <div class="form-actions form-wrapper" id="edit-actions">
+                    <input type="submit" id="edit-submit" value="Search" class="button form-submit">
+<!--                input type="submit" id="edit-reset" name="reset" value="Reset" class="button form-submit">-->


Commented-out HTML code should be removed from the template. If a reset button might be needed later, implement it as a conditional feature or remove the comment entirely.

Suggested change

Co-authored-by: pyrello <709009+pyrello@users.noreply.github.com>

…ch updated form styles.

…ariants (#1008) * Initial plan * Add menu component with horizontal and vertical variants Co-authored-by: pyrello <709009+pyrello@users.noreply.github.com> * Consolidate menu data into single menuItems array Co-authored-by: pyrello <709009+pyrello@users.noreply.github.com> * Remove theme prop from Menu component Co-authored-by: pyrello <709009+pyrello@users.noreply.github.com> * Update Menu stories to use new Storybook syntax Co-authored-by: pyrello <709009+pyrello@users.noreply.github.com> * Refactor menu to use PR #1000 styles with icon/arrow support Co-authored-by: pyrello <709009+pyrello@users.noreply.github.com> * Remove dark background story variants Co-authored-by: pyrello <709009+pyrello@users.noreply.github.com> * Implement recursive menu structure with MenuItems component Co-authored-by: pyrello <709009+pyrello@users.noreply.github.com> * Remove list markers and add icon spacing for nested menu items Co-authored-by: pyrello <709009+pyrello@users.noreply.github.com> * Some adjustments to get things looking more like existing menus. * Add Application Form Layout showcase stories Co-authored-by: pyrello <709009+pyrello@users.noreply.github.com> * Add missing pager and form-filters SCSS files from PR #1000 Co-authored-by: pyrello <709009+pyrello@users.noreply.github.com> * Pulled in flex styles from #1000. Adjusted showcase components to match updated form styles. * Remove Drupal-specific classes and attributes from showcase stories Co-authored-by: pyrello <709009+pyrello@users.noreply.github.com> * Cleaning up and refactoring. * Cleaned up things we are not ready for or artifacts from copilot. * Added fa-li wrapper and padding adjustments, switched from i to span tag and added presentation role. * Added container query for horizontal variant. * Moved variable inside container query. * More cleanup, simplification of CSS rules. * Added closing bracket. * Moved towards a visual pattern for vertical menus to indicate state (active, focus, hover) and nesting. * Refactored to make MenuItem vue component singular. * Added an extra icon to demonstrate better nested menus with items with both icons and no icons. Commented out some recent updates. * Cleaned up nested link highlighting. * Added suggestions for design changes. * Cleaned up recent changes. * Adjusted font-weight. * Added aria-label to menu component and stories. Active state is the same color at all nesting levels. Adjusted transitions for links to expand center out. Cleanup. * More cleanup and refinement. Added layout-container as an inline-size container. * Adjusting showcase example. Accessibility updates. * Moved application stories. Added comments and a little CSS cleanup. Set font-size for menus to avoid inconsistencies based on ul font-sizing. * Updated aria-labels based on outcome of SiteNow menu updates. * Same as last. * Update src/scss/components/menu.scss Co-authored-by: cory-skeers <49074566+cory-skeers@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: pyrello <709009+pyrello@users.noreply.github.com> Co-authored-by: Sean Adams-Hiett <sean-adams-hiett@uiowa.edu> Co-authored-by: Benjamin Speare <benjamin-speare@uiowa.edu> Co-authored-by: cory-skeers <49074566+cory-skeers@users.noreply.github.com>

Refactoring Brand bar for best practices.

c7b0921

GaryRidgway linked an issue Jul 30, 2025 that may be closed by this pull request

Create form example page in UIDS #995

Closed

1 task

GaryRidgway marked this pull request as draft July 30, 2025 20:42

GaryRidgway and others added 3 commits July 30, 2025 15:45

Ope, don't want old template.

3213628

Rename template.

0dac127

Merge branch '4.x' into application-form-layout

d783e1d

pyrello reviewed Jul 30, 2025

View reviewed changes

src/components/brand-bar/BrandBar.stories.js Outdated Show resolved Hide resolved

GaryRidgway added 3 commits July 31, 2025 11:29

Remove default.

42773e3

Pull the brand bar in.

65a6cca

Start on the user menu.

a2f3f9e

GaryRidgway linked an issue Jul 31, 2025 that may be closed by this pull request

Create application form layout in UIDS #997

Closed

2 tasks

pyrello and others added 10 commits August 1, 2025 09:24

Import cleanup.

4393cb9

Adding in more elements of layout and form.

4bea3da

Added the remaining initial markup.

b09f14c

Starting to pull in menu styles. Dynamic menu. Background color for s…

3133f54

…idebar.

Some refactoring and developing of basic menu styles.

de8db35

Added adjustments to get layout working a little better.

cc55407

Set story to fullscreen to remove default padding.

f438f26

Updated sidebar width.

a1453b2

Added adjustments so that duplicate site name and parent site name wo…

8245fd1

…uld not render in the parent site slot.

Added exposed filters example for application form.

0a62184

bspeare mentioned this pull request Aug 13, 2025

Create exposed form filter CSS that can be used in application form layouts #1003

Closed

Ajusted font-weight back to original.

b18e377

bspeare marked this pull request as ready for review August 13, 2025 16:09

bspeare added 4 commits August 13, 2025 11:13

Removed duplicate HTML comment.

c211508

Removed extra div tag that was creating compilation issues.

d42f1b4

Added adjustment to fix spacing on production build.

cd4a53b

Made a few adjustments after looking at the layouts on mobile.

59d34dc

bspeare marked this pull request as draft August 13, 2025 21:51

pyrello mentioned this pull request Sep 30, 2025

Add menu-related components and stories for horizontal and vertical variants #1008

Merged

Merged '4.x' branch and fixed merge conflicts.

faa99bc

pyrello requested a review from Copilot September 30, 2025 16:26

Copilot AI reviewed Sep 30, 2025

View reviewed changes

Copilot AI added a commit that referenced this pull request Sep 30, 2025

Refactor menu to use PR #1000 styles with icon/arrow support

5bae860

Co-authored-by: pyrello <709009+pyrello@users.noreply.github.com>

Copilot AI added a commit that referenced this pull request Oct 6, 2025

Add missing pager and form-filters SCSS files from PR #1000

9e3b2bd

Co-authored-by: pyrello <709009+pyrello@users.noreply.github.com>

pyrello added a commit that referenced this pull request Oct 6, 2025

Pulled in flex styles from #1000. Adjusted showcase components to mat…

34f7716

…ch updated form styles.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Application form layout #1000

Application form layout #1000

Uh oh!

GaryRidgway commented Jul 30, 2025

Uh oh!

Uh oh!

bspeare commented Aug 13, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Sep 30, 2025

Uh oh!

pyrello Sep 30, 2025

Uh oh!

Copilot AI Sep 30, 2025

Uh oh!

Copilot AI Sep 30, 2025

Uh oh!

Copilot AI Sep 30, 2025

Uh oh!

pyrello Sep 30, 2025

Uh oh!

Copilot AI Sep 30, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	<label for="suffix">Middle</label>
	<label for="suffix">Suffix</label>

Application form layout #1000

Are you sure you want to change the base?

Application form layout #1000

Uh oh!

Conversation

GaryRidgway commented Jul 30, 2025

Uh oh!

Uh oh!

bspeare commented Aug 13, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

pyrello Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

pyrello Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants