@pareto-engineering/design-system 3.0.0-alpha.29 → 4.0.0-alpha.4

package/src/ui/f/fields/QueryCombobox/styles.scss

@@ -10,82 +10,82 @@ $default-loading-circle-displacement: 1em;
 
 .#{bem.$base}.combobox,
 .#{bem.$base}.multiple-combobox {
-    position: relative;
+  position: relative;
 
-    .#{bem.$base}.label {
-        margin-bottom: $default-margin
-    }
+  .#{bem.$base}.label {
+    margin-bottom: $default-margin;
+  }
 
-    .#{bem.$base}.popover {
-        width: 100%;
+  .#{bem.$base}.popover {
+    width: 100%;
 
-        >.menu {
-            list-style: none;
-            margin: 0;
-            outline: 0;
-            padding: 0;
+    >.menu {
+      list-style: none;
+      margin: 0;
+      outline: 0;
+      padding: 0;
 
-            >.item {
-                padding: $default-padding / 2;
+      >.item {
+        padding: $default-padding / 2;
 
-                &.#{bem.$modifier-active} {
-                    background-color: var(--background2);
-                }
-            }
+        &.#{bem.$modifier-active} {
+          background-color: var(--background2);
         }
+      }
     }
+  }
 
-    >.input-wrapper {
-        position: relative;
+  >.input-wrapper {
+    position: relative;
 
-        >.#{bem.$base}.loading-circle,
-        >.#{bem.$base}.button {
-            position: absolute;
-            top: $default-loading-circle-displacement;
-            right: $default-loading-circle-displacement;
-        }
+    >.#{bem.$base}.loading-circle,
+    >.#{bem.$base}.button {
+      position: absolute;
+      right: $default-loading-circle-displacement;
+      top: $default-loading-circle-displacement;
+    }
 
-        >.input {
-            background: var(--soft-y);
-            border: var(--theme-border-style) var(--hard-y);
-            color: var(--on-y);
-            padding: $default-input-padding;
-            width: 100%;
+    >.input {
+      background: var(--soft-y);
+      border: var(--theme-border-style) var(--hard-y);
+      color: var(--on-y);
+      padding: $default-input-padding;
+      width: 100%;
 
-            &::placeholder {
-                color: var(--metadata);
-            }
+      &::placeholder {
+        color: var(--metadata);
+      }
 
-            &:not(:disabled):hover {
-                border: var(--theme-border-style) var(--soft-background4);
-            }
+      &:not(:disabled):hover {
+        border: var(--theme-border-style) var(--soft-background4);
+      }
 
-            &:disabled {
-                background-color: var(--hard-y);
-            }
+      &:disabled {
+        background-color: var(--hard-y);
+      }
 
-            &:focus {
-                background: var(--soft-background4);
-            }
-        }
+      &:focus {
+        background: var(--soft-background4);
+      }
     }
+  }
 }
 
 
 .#{bem.$base}.multiple-combobox {
-    >.selected-items {
-        display: flex;
-        gap: $default-gap / 2;
-        flex-wrap: wrap;
-        margin-bottom: $default-margin / 2;
-
-        >.item {
-            background-color: var(--main2);
-            padding: $default-padding / 4;
-
-            .close {
-                font-size: calc(var(--s-3) * 1em);
-            }
-        }
+  >.selected-items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $default-gap / 2;
+    margin-bottom: $default-margin / 2;
+
+    >.item {
+      background-color: var(--main2);
+      padding: $default-padding / 4;
+
+      .close {
+        font-size: calc(var(--s-3) * 1em);
+      }
     }
-}
+  }
+}

package/src/ui/f/fields/RatingsInput/styles.scss

@@ -1,4 +1,5 @@
 /* @pareto-engineering/generator-front 1.0.12 */
+
 @use "@pareto-engineering/bem";
 
 $default-rating-icon-margin: .5em;
@@ -19,34 +20,32 @@ $default-transition: all .2s;
     >:not(:last-child) {
       margin-right: $default-rating-icon-margin;
     }
-  
+
     .#{bem.$base}.rating {
       display: flex;
-  
+
       input {
         opacity: 0;
         position: absolute;
         visibility: none;
         z-index: -1;
       }
-  
+
       label {
+        align-items: center;
+        cursor: pointer;
         display: flex;
         flex-direction: column;
-        align-items: center;
         padding: $default-padding;
         transition: $default-transition;
-        cursor: pointer;
       }
     }
-  
+
     .label-text {
-      margin-bottom: 0;
       align-self: flex-end;
+      margin-bottom: 0;
     }
   }
 }
 
 
-
-

package/src/ui/f/fields/SelectInput/styles.scss

@@ -5,7 +5,7 @@
 @use "../../../form.scss";
 
 
-$default-padding: 0.75em;
+$default-padding: .75em;
 $default-margin: 1em;
 
 .#{bem.$base}.select-input {
@@ -13,7 +13,7 @@ $default-margin: 1em;
   flex-direction: column;
 
   .#{bem.$base}.label {
-    margin-bottom: $default-margin
+    margin-bottom: $default-margin;
   }
 
   .select-wrapper {
@@ -27,19 +27,19 @@ $default-margin: 1em;
     }
 
     >.input {
-      width: 100%;
-      border: var(--theme-border-style) var(--hard-y);
       background: var(--soft-y);
+      border: var(--theme-border-style) var(--hard-y);
       color: var(--on-y);
       padding: $default-padding;
+      width: 100%;
 
       &:not(:disabled):hover {
         border: var(--theme-border-style) var(--soft-background4);
       }
 
       &:disabled {
-        background-color: var(--hard-y);
         appearance: none;
+        background-color: var(--hard-y);
       }
 
       &:focus {
@@ -47,4 +47,4 @@ $default-margin: 1em;
       }
     }
   }
-}
+}

package/src/ui/f/fields/TextInput/styles.scss

@@ -3,23 +3,23 @@
 @use "@pareto-engineering/bem";
 @use "../../../form.scss";
 
-$default-padding: 0.75em 0.75em 0.55em;
+$default-padding: .75em .75em .55em;
 
 .#{bem.$base}.text-input {
   display: flex;
   flex-direction: column;
 
   .input {
-    border: var(--theme-border-style) var(--hard-y);
     background: var(--soft-y);
+    border: var(--theme-border-style) var(--hard-y);
     color: var(--on-y);
     padding: $default-padding;
 
-    &::placeholder{
+    &::placeholder {
       color: var(--metadata);
     }
 
-    &:not(:disabled):hover{
+    &:not(:disabled):hover {
       border: var(--theme-border-style) var(--soft-background4);
     }
 

package/src/ui/f/fields/TextareaInput/styles.scss

@@ -1,27 +1,28 @@
 /* @pareto-engineering/generator-front 1.0.12 */
+
 @use "@pareto-engineering/bem";
 
 $default-padding: .5em;
 
-.#{bem.$base}.text-area-input{
+.#{bem.$base}.text-area-input {
   display: flex;
   flex-direction: column;
 
   .textarea {
-    border: var(--theme-border-style) var(--hard-y);
     background: var(--soft-y);
+    border: var(--theme-border-style) var(--hard-y);
     color: var(--on-y);
     padding: $default-padding;
 
-    &::placeholder{
+    &::placeholder {
       color: var(--metadata);
     }
 
-    &:not(:disabled):hover{
+    &:not(:disabled):hover {
       border: var(--theme-border-style) var(--soft-background4);
     }
 
-     &:disabled {
+    &:disabled {
       background-color: var(--hard-y);
     }
 
@@ -29,4 +30,4 @@ $default-padding: .5em;
       background: var(--soft-background4);
     }
   }
-}
+}

package/src/ui/test/QueryLoader/QueryLoader.jsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 
 import { useEffect, Suspense } from 'react'
 
-import { useQueryLoader } from 'react-relay'
+import { useQueryLoader, graphql } from 'react-relay'
 
 // Local Definitions