fix(core/menu|content): align menu button and content margins to align with figma#2522
fix(core/menu|content): align menu button and content margins to align with figma#2522lakshmi-priya-b wants to merge 4 commits into
Conversation
🦋 Changeset detectedLatest commit: 7c57dcc The changes in this PR will be included in the next version bump. This PR includes changesets to release 5 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request adjusts the top margin of the menu buttons in menu.scss to align with Figma designs. Feedback indicates that a changeset is required for this user-facing styling change, which should include a reference to Jira issue IX-4151. Additionally, the pull request title needs to be corrected to include a space after the colon to comply with the repository's naming convention.
lakshmi-priya-b
changed the title
lakshmi-priya-b
changed the title
lakshmi-priya-b
force-pushed
the
fix-4151/align-menu-top-margin
branch
from
4327e38 to
30c90bb
Compare
lakshmi-priya-b
force-pushed
the
fix-4151/align-menu-top-margin
branch
from
30c90bb to
ec9b7ed
Compare
|
|
||
| .menu-buttons > :last-child { | ||
| margin-bottom: 1rem; | ||
| margin-bottom: 0.75rem; |
There was a problem hiding this comment.
Although changing the top margin is correct in Figma the bottom margin is still 16px
There was a problem hiding this comment.
Bottom margin has been updated according to the latest Figma design changes for the expand/collapse menu, reducing it from 60px to 56px to align consistently with the pane and breadcrumb spacing, as specified in user story: IX-3872.
The changes have been implemented based on the Figma design attached in the ticket [IX-3872]:
https://www.figma.com/design/6kx7Knql4UZo255fwk0gXq/Application-menu?node-id=2023-2349&m=dev
✅ Deploy Preview for ix-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
2 participants
💡 What is the current behavior?
When ix-pane and ix-menu are used together, the collapse buttons are misaligned.
The top margin for the menu expand/collapse button is 8px (0.5rem) which mismatches the Figma spec of 12px.
The total height of the menu is not maintained 56px while updating the margin buttom according to the new figma.
The ix-content top padding is 24px (1.5rem) instead of 12px, meaning the content header does not align with the menu button at the same vertical position.
The gap between the content header and the content body is also mismatching with figma.
JIRA : [IX-4151]
🆕 What is the new behavior?
All four misalignment were handled and now it is maintained according to the figma
🏁 Checklist
A pull request can only be merged if all of these conditions are met (where applicable):
pnpm test)pnpm lint)pnpm build, changes pushed)👨💻 Help & support