fix(components): alert component icon position (#1881)

* fix(components): revert Alert icon translateY to 2px

* fix(components): adjust dismiss button size and placement to better align with other elements

* fix(components): tweaking the padding and dismiss sizing and position

* chore(changeset): add empty changeset

* fix(components): remove commented out CSS

* fix(components): use a token for translateY of icon

* chore: make changeset a patch instead of being empty

* chore(stories): fix typo

Author: cmwinters

.changeset/cyan-garlics-ask.md

@@ -0,0 +1,5 @@
+---
+'@launchpad-ui/components': patch
+---
+
+Update Alert padding and icon position

packages/components/src/styles/Alert.module.css

@@ -50,7 +50,7 @@
 
 .default,
 .inline {
-	padding: var(--lp-spacing-400);
+	padding: var(--lp-spacing-500);
 	background-color: var(--alert-color-bg-neutral);
 	border: 1px solid var(--alert-color-border-neutral);
 	position: relative;
@@ -79,7 +79,7 @@
 	&:has(.heading) {
 		/* biome-ignore lint/style/noDescendingSpecificity: ignore */
 		& .icon {
-			transform: translateY(4px);
+			transform: translateY(var(--lp-size-2));
 		}
 	}
 
@@ -92,6 +92,7 @@
 .inline {
 	align-items: center;
 	gap: var(--lp-spacing-300);
+	padding: var(--lp-spacing-400) var(--lp-spacing-500);
 
 	& .close {
 		margin-left: var(--lp-spacing-300);
@@ -106,7 +107,7 @@
 	/* Adjust padding so the alert maintains the same height if there's an inline action or close button. We have to hardcode the vertical values because of the way borders get calculated as a part of an element's dimensions. */
 	&:has(.inlineAction),
 	&:has(.close) {
-		padding: 7px var(--lp-spacing-300) 7px var(--lp-spacing-400);
+		padding: 7px var(--lp-spacing-300) 7px var(--lp-spacing-500);
 	}
 
 	&:has(.inlineAction) {
@@ -138,6 +139,11 @@
 	margin-top: var(--lp-spacing-500);
 }
 
+.default .close {
+	bottom: var(--lp-spacing-300);
+	left: var(--lp-spacing-300);
+}
+
 /* Sometimes we want to make text bold, but we need to make sure this maps to the correct font weight. */
 .content strong,
 .content b {

packages/components/stories/Alert.stories.tsx

@@ -55,7 +55,7 @@ export const InlineDefault: Story = {
 	args: {
 		children: (
 			<Text>
-				Flag a prerequisite of <strong>1 other flag</strong> in <strong>production</strong>
+				Flag is a prerequisite of <strong>1 other flag</strong> in <strong>production</strong>
 			</Text>
 		),
 		variant: 'inline',
@@ -103,11 +103,10 @@ export const InlineInfo: Story = {
 	args: {
 		children: (
 			<Text>
-				Flag a prerequisite of <strong>1 other flag</strong> in <strong>production</strong>
+				Flag is a prerequisite of <strong>1 other flag</strong> in <strong>production</strong>
 			</Text>
 		),
 		variant: 'inline',
-		isDismissable: true,
 		status: 'info',
 	},
 };