Skip to content

Commit

Permalink
fix(Alert): height and alignment
Browse files Browse the repository at this point in the history
### Overview
Two Issues:
1. The Alert's alignments were off (not centered and stretched out):
The alignment Alert wasn't rendering properly because the alert was stretched vertically.
Upon investigation, it was the X button that had a large height, despite the button seemingly set to "small"

Looking into IconButton, seems like the size prop wasn't used, adding this prop back in seemed to fix the issue.
--- 
2. The border radius of both inline and general alerts should be 3px. 

### PR Checklist

- [ ] Related to designs: https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=30186-40358&m=dev 
- [ ] Related to JIRA ticket: [ABC-123]
- [X] I have run this code to verify it works
- [ ] This PR includes unit tests for the code change
- [ ] This PR includes testing instructions tests for the code change
- [ ] The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

#### Testing Instructions

1. Go to `/docs/molecules-alert--usage-guidelines#alert-types` 
2. Check that the height alignment matches [figma](https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=30186-40358&m=dev)

#### PR Links and Envs

| Repository   | PR Link                                                  | PR Env                                                   |
| :----------- | :------------------------------------------------------- | :------------------------------------------------------- |
| Monolith     | [Monolith PR](http://www.google.fr/ 'Named link title')  | [Monolith Env](http://www.google.fr/ 'Named link title') |
| Portal       | [Portal Link](codecademy-engineering/mono#6915)  | [Portal Env](http://www.google.fr/ 'Named link title')   |
| Another Repo | [Another Link](http://www.google.fr/ 'Named link title') | [Another Env](http://www.google.fr/ 'Named link title')  |

<!--
Merging your changes

1. Follow the [PR Title Guide](https://github.com/Codecademy/gamut#pr-title-guide), the title (which becomes the commit message) determines the version bump for the packages you changed.

3. Wrap the text describing your change in more detail in the "CHANGELOG-DESCRIPTION" comment tags above, this is what will show up in the changelog!

4. DO NOT MERGE MANUALLY! When you are ready to merge and publish your changes, add the "Ship It" label to your Pull Request. This will trigger the merge process as long as all checks have completed, if the checks haven't completed the branch will be merged when they all pass.

**IMPORTANT:** If your PR contains breaking changes, please remember to follow the instructions for breaking changes!
-->
  • Loading branch information
LinKCoding authored Jul 8, 2024
1 parent e8553c5 commit fae2fb7
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 2 deletions.
3 changes: 1 addition & 2 deletions packages/gamut/src/Alert/variants.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export const placementVariants = variant({
prop: 'placement',
base: {
alignItems: 'start',
borderRadius: '3px',
columnGap: { _: 4, xs: 8, sm: 12 },
display: 'grid',
maxWidth: `calc(${breakpoints.md} - 4rem)`,
Expand All @@ -52,12 +53,10 @@ export const placementVariants = variant({
variants: {
inline: {
border: 'none',
borderRadius: '3px',
py: 8,
},
floating: {
borderColor: 'navy',
borderRadius: '5px',
borderStyle: 'solid',
borderWidth: '2px',
py: 4,
Expand Down
1 change: 1 addition & 0 deletions packages/gamut/src/Button/IconButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ export const IconButton = forwardRef<ButtonBaseElements, IconButtonProps>(
aria-describedby={tipId}
aria-label={trueAriaLabel}
ref={ref}
size={size}
variant={variant}
>
<Icon size={iconSize} />
Expand Down

0 comments on commit fae2fb7

Please sign in to comment.