[UPDATE] grommet-theme-hpe to v7 for sandbox/grommet-app

[Sulaymon333]

Deploy Preview

What does this PR do?

• update grommet-theme-hpe to v7 for sandbox/grommet-app
  • sandbox/grommet-app/src/components grommet theme hpe codemod migration v6 - v7
  • sandbox/grommet-app/src/pages grommet theme hpe codemod migration v6 - v7
  • sandbox/grommet-app/src/Login.jsx grommet theme hpe codemod migration v6 - v7
• closes Upgrade sandbox/grommet-app to use v7 of hpe theme #5327

Where should the reviewer start?

What testing has been done on this PR?

In addition to the feature you are implementing, have you checked the following:

General UX Checks

• Small, medium, and large screen sizes
• Cross-browsers (FireFox, Chrome, and Safari)
• Light & dark modes
• All hyperlinks route properly

Accessibility Checks

• Keyboard interactions
• Screen reader experience
• Run WAVE accessibility plugin (Chrome)

Code Quality Checks

• Console is free of warnings and errors
• Passes E2E commit checks
• Visual snapshots are reasonable

How should this be manually tested?

Any background context you want to provide?

What are the relevant issues?

Screenshots (if appropriate)

Should this PR be mentioned in Design System updates?

Is this change backwards compatible or is it a breaking change?

[changeset-bot]

⚠️ No Changeset found

Latest commit: 6f97d72

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[netlify]

✅ Deploy Preview for unrivaled-bublanina-3a9bae ready!

Name	Link
🔨 Latest commit	6c8b70c
🔍 Latest deploy log	https://app.netlify.com/projects/unrivaled-bublanina-3a9bae/deploys/68cdc8e9435c29000826078b
😎 Deploy Preview	https://deploy-preview-5333--unrivaled-bublanina-3a9bae.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for hpe-theme-preview ready!

Name	Link
🔨 Latest commit	6c8b70c
🔍 Latest deploy log	https://app.netlify.com/projects/hpe-theme-preview/deploys/68cdc8e9a98c5200085a7e7d
😎 Deploy Preview	https://deploy-preview-5333--hpe-theme-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Sulaymon333]

I noticed a small layout shift which seems to be resolved after running codemod LOCALLY with a very subtle height difference in the last card. See attached screenshots below for more details.

Before running codemod locally

After running codemod locally

[jcfilben]

I would expect us to need to re-map the t-shirt sizes. For the sticker sheet can we set it up to compare v6 theme to v7 (previously it was comparing v5 to v6)?

[Sulaymon333]

Sticker sheet looks OK to me after re-mapping to update tshirt sizes. But main page graphs are not in place for v0 theme (grommet theme hpe v6). See below.

V1 (grommet theme hpe v7) looks Ok

Sticker sheet looks OK on both versions of the theme

[Sulaymon333]

The v5 theme issue layout shift is now fixed.