feat: tests & autosave improvements

src/admin/components/elements/Pill/index.scss

@@ -11,6 +11,7 @@
   border-radius: $style-radius-s;
   padding: 0 base(.25);
   padding-left: base(.0875 + .25);
+  cursor: default;
 
   &:active,
   &:focus {
@@ -37,12 +38,14 @@
   }
 
   &--style-light {
-    &:hover {
-      background: lighten($color-light-gray, 3%);
-    }
+    &.pill--has-action {
+      &:hover {
+        background: lighten($color-light-gray, 3%);
+      }
 
-    &:active {
-      background: lighten($color-light-gray, 5%);
+      &:active {
+        background: lighten($color-light-gray, 5%);
+      }
     }
   }
 
@@ -51,6 +54,14 @@
     color: $color-dark-gray;
   }
 
+  &--style-warning {
+    background: $color-yellow;
+  }
+
+  &--style-success {
+    background: $color-green;
+  }
+
   &--style-dark {
     background: $color-dark-gray;
     color: white;
@@ -59,12 +70,14 @@
       @include color-svg(white);
     }
 
-    &:hover {
-      background: lighten($color-dark-gray, 3%);
-    }
+    &.pill--has-action {
+      &:hover {
+        background: lighten($color-dark-gray, 3%);
+      }
 
-    &:active {
-      background: lighten($color-dark-gray, 5%);
+      &:active {
+        background: lighten($color-dark-gray, 5%);
+      }
     }
   }
 }

src/admin/components/elements/Pill/types.ts

@@ -4,7 +4,7 @@ export type Props = {
   icon?: React.ReactNode,
   alignIcon?: 'left' | 'right',
   onClick?: () => void,
-  pillStyle?: 'light' | 'dark' | 'light-gray',
+  pillStyle?: 'light' | 'dark' | 'light-gray' | 'warning' | 'success',
 }
 
 export type RenderedTypeProps = {