feat: add BottomSheetFooter component#899
Conversation
|
@georgewrmarshall this PR is ready for review 👀 |
bce21f3 to
78f58e4
Compare
brianacnguyen
left a comment
There was a problem hiding this comment.
can you make sure the footer has 16px bottom margin for ios and 0 for android?
Hey @brianacnguyen I don't see such code in mobile repo. Could you point me to the code or a decision where it has been made, please? 🙏 |
| export enum ButtonsAlignment { | ||
| Horizontal = 'Horizontal', | ||
| Vertical = 'Vertical', | ||
| } |
There was a problem hiding this comment.
Enum name breaks design system naming convention
Low Severity
The exported enum ButtonsAlignment doesn't follow the established ComponentNamePropertyName naming convention used by every other enum in this design system (e.g., BadgeWrapperPosition, AvatarBaseShape, BoxFlexDirection, ButtonVariant). The name is especially confusing because it reads like it belongs to the Button component, which already exports ButtonVariant and ButtonSize nearby. Since this is a public API, renaming later would be a breaking change — something like BottomSheetFooterButtonsAlignment would be consistent with the rest of the system.
Additional Locations (1)
brianacnguyen
left a comment
There was a problem hiding this comment.
can you remove the constants file?
|
Done @brianacnguyen |
|
|
||
| export const Default: Story = { | ||
| args: { | ||
| buttonsAlignment: ButtonsAlignment.Vertical, |
There was a problem hiding this comment.
Default story uses non-default alignment value
Low Severity
The Default story explicitly sets buttonsAlignment: ButtonsAlignment.Vertical, but the component's actual default is ButtonsAlignment.Horizontal (as declared in the component and documented in the README). Meanwhile, the Horizontal story showcases what is actually the default behavior. This makes Storybook documentation misleading — developers viewing the Default story would incorrectly assume the component defaults to vertical layout.
Additional Locations (1)
## Summary Reverts the failed Release 20.0.0 (#921) to redo it properly with complete changelogs and correct yarn.lock. ## Context Release 20.0.0 was merged to main but the publish workflow failed due to a yarn.lock issue: - **Failed workflow:** https://github.com/MetaMask/metamask-design-system/actions/runs/22198282954 - **Root cause:** yarn.lock not updated when peer dependency changed After the release was merged, 7 additional PRs were merged to main: 1. Label component (#907) 2. HeaderBase component (#902) 3. Skeleton (#891) 4. Card (#923) 5. BottomSheetFooter (#899) 6. Toast (#892) 7. Input component (#909) ## Why Revert? To maintain clean version history and proper changelogs: - Release 20.0.0 was never published to NPM (latest is 19.0.0) - The 7 PRs merged after are not documented in Release 20.0.0 changelog - Reverting allows us to create a proper Release 20.0.0 that includes ALL changes ## Changes This PR reverts commit `45004196` which: - Restores package versions to pre-release state (8.1.1, 0.7.0, 0.6.0, etc.) - Restores root package.json version from 20.0.0 to 19.0.0 - Removes Release 20.0.0 changelog entries ## Next Steps After this is merged: 1. Create new `release/20.0.0` branch using standard release process 2. Include all changes (original + 7 PRs) in changelogs 3. **Run `yarn install` to update yarn.lock** 4. Merge new Release 20.0.0 PR 5. Publish workflow will succeed with correct lockfile 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Description
Added
BottomSheetFootercomponent.Related issues
Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-277
Manual testing steps
BottomSheetFooterspecsScreenshots/Recordings
Before
After
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Low Risk
Additive UI component with no changes to existing business logic; risk is limited to potential styling/layout regressions where adopted.
Overview
Adds a new
BottomSheetFootercomponent that renders an optional primary and/or secondary action button, enforces button variants, supports horizontal/vertical alignment, and returnsnullwhen no actions are provided.Includes Storybook stories for common configurations, a unit test suite covering rendering/layout/prop spreading, documentation (
README.md), and exports the component and related types/enums from the design system index (plus Storybook autoload registration).Written by Cursor Bugbot for commit 3d41db4. This will update automatically on new commits. Configure here.