@microsoft/atlas-css - npm Package Compare versions

Comparing version 3.67.0 to 4.0.0

package.json

 {
 	"name": "@microsoft/atlas-css",
-	"version": "3.67.0",
+	"version": "4.0.0",
 	"description": "Styles backing the Atlas Design System used by Microsoft's Developer Relations.",
@@ -5,0 +5,0 @@ "scripts": {

src/components/popover.scss

@@ -0,1 +1,3 @@
+/* stylelint-disable max-nesting-depth, selector-max-specificity  */
+
 $popover-background-color: $body-background !default;
@@ -7,2 +9,4 @@ $popover-border: $border-width solid $border !default;
 
+$popover-chevron-color: $border !default;
+
 .popover {
@@ -23,4 +27,5 @@ display: inline-block;
 		width: $popover-width;
-		margin-block-start: $spacer-3;
 		padding: $spacer-5;
+		transform: none;
+		inset-inline-start: 0;
 		border: $popover-border;
@@ -30,23 +35,72 @@ border-radius: $popover-border-radius;
 		box-shadow: $popover-shadow;
+
+		// hide popover until after position is calculated, then show
+		visibility: hidden;
 		z-index: $zindex-popover;
 	}
 
-	&.popover-right {
+	&.popover-top {
 		.popover-content {
-			inset-inline-end: 0;
+			inset-block-end: 100%;
+			margin-block-end: $spacer-3;
 		}
 	}
 
-	&.popover-center {
+	&.popover-caret {
 		.popover-content {
-			inset-inline-start: -25%;
+			margin-block-start: 0;
+			overflow: visible;
+
+			&::before {
+				@include chevron-up;
+
+				position: absolute;
+				inset-inline-start: var(--caret-left, 50%);
+				inset-inline-end: auto;
+				inset-block-start: calc($chevron-arrow-size / -1.75);
+				border-color: $popover-chevron-color;
+				background-color: $popover-background-color;
+				z-index: 2;
+			}
+
+			[dir='rtl'] & {
+				&::before {
+					transform: rotate(-135deg);
+					inset-inline-start: var(--caret-left, 50%);
+					inset-inline-end: var(--caret-left, 50%);
+				}
+			}
 		}
 	}
 
-	&.popover-top {
+	&.popover-caret.popover-caret-bottom {
 		.popover-content {
-			inset-block-end: 100%;
+			margin-block-start: 0;
 			margin-block-end: $spacer-3;
+			overflow: visible;
+
+			&::before {
+				@include chevron-down;
+
+				position: absolute;
+				inset-inline-start: var(--caret-left, 50%);
+				inset-inline-end: auto;
+				inset-block-start: auto;
+				inset-block-end: calc($chevron-arrow-size / -1.75);
+				border-color: $popover-chevron-color;
+				background-color: $popover-background-color;
+				z-index: 2;
+			}
+
+			[dir='rtl'] & {
+				&::before {
+					transform: rotate(45deg);
+					inset-inline-start: var(--caret-left, 50%);
+					inset-inline-end: var(--caret-left, 50%);
+				}
+			}
 		}
 	}
 }
+
+/* stylelint-enable selector-max-specificity, max-nesting-depth */

src/mixins/chevron.scss

@@ -49,1 +49,7 @@ $chevron-color: $text !default;
 }
+
+@mixin chevron-up {
+	@extend %chevron;
+
+	transform: $chevron-up-rotate;
+}

New alerts

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1114795

0.51%

Lines of code

3190

0.13%

No dependency changes