fix: radius

launchdarkly · Nov 21, 2024 · dfa8eea · dfa8eea
1 parent 3b9b6f0
commit dfa8eea
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 25 deletions.
diff --git a/packages/alert/src/Alert.tsx b/packages/alert/src/Alert.tsx
@@ -129,6 +129,8 @@ const Alert = ({
 			data-test-id={testId}
 			role={['info', 'success', 'notification'].includes(kind) ? 'status' : 'alert'}
 		>
+			{!isInline && <div role="presentation" className={styles.bar} />}
+			<div role="presentation" className={styles.bar} />
 			{!noIcon && (
 				<StatusIcon
 					kind={kind}

diff --git a/packages/alert/src/styles/Alert.module.css b/packages/alert/src/styles/Alert.module.css
@@ -16,20 +16,19 @@
 	width: 100%;
 	background-color: var(--lp-color-bg-ui-primary);
 	box-sizing: border-box;
-	border-radius: var(--lp-border-radius-regular);
+	border-radius: var(--lp-border-radius-medium);
 	border: 1px solid var(--lp-color-border-ui-primary);
+}
 
-	&::before {
-		position: absolute;
-		background: linear-gradient(91deg, var(--color-1) 0%, var(--color-2) 100%);
-		border-radius: calc(var(--lp-border-radius-regular) - 1px)
-			calc(var(--lp-border-radius-regular) - 1px) 0 0;
-		width: 100%;
-		height: var(--lp-size-8);
-		top: 0;
-		left: 0;
-		content: '';
-	}
+.bar {
+	position: absolute;
+	background: linear-gradient(91deg, var(--color-1) 0%, var(--color-2) 100%);
+	border-radius: calc(var(--lp-border-radius-medium) - 1px)
+		calc(var(--lp-border-radius-medium) - 1px) 0 0;
+	width: 100%;
+	height: var(--lp-size-8);
+	top: 0;
+	left: 0;
 }
 
 .Alert-heading {

diff --git a/packages/components/src/Alert.tsx b/packages/components/src/Alert.tsx
@@ -55,6 +55,7 @@ const _Alert = (
 
 	return open ? (
 		<div ref={ref} {...props} role="alert" className={alert({ status, variant, className })}>
+			{variant === 'default' && <div role="presentation" className={styles.bar} />}
 			{status !== 'neutral' && <StatusIcon kind={status || 'info'} className={styles.icon} />}
 			<div className={styles.content}>
 				<Provider values={[[HeadingContext, { className: styles.heading }]]}>{children}</Provider>

diff --git a/packages/components/src/styles/Alert.module.css b/packages/components/src/styles/Alert.module.css
@@ -1,6 +1,6 @@
 .base {
 	display: flex;
-	border-radius: var(--lp-border-radius-regular);
+	border-radius: var(--lp-border-radius-medium);
 	gap: var(--lp-spacing-500);
 	align-items: flex-start;
 
@@ -53,18 +53,6 @@
 		}
 	}
 
-	&::before {
-		position: absolute;
-		background: linear-gradient(91deg, var(--color-1) 0%, var(--color-2) 100%);
-		border-radius: calc(var(--lp-border-radius-regular) - 1px)
-			calc(var(--lp-border-radius-regular) - 1px) 0 0;
-		width: 100%;
-		height: var(--lp-size-8);
-		top: 0;
-		left: 0;
-		content: '';
-	}
-
 	& .close {
 		position: absolute;
 		right: var(--lp-spacing-300);
@@ -81,6 +69,17 @@
 	}
 }
 
+.bar {
+	position: absolute;
+	background: linear-gradient(91deg, var(--color-1) 0%, var(--color-2) 100%);
+	border-radius: calc(var(--lp-border-radius-medium) - 1px)
+		calc(var(--lp-border-radius-medium) - 1px) 0 0;
+	width: 100%;
+	height: var(--lp-size-8);
+	top: 0;
+	left: 0;
+}
+
 .content {
 	flex: 1;
 	display: flex;