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

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

@@ -5,20 +5,32 @@
 @use "../../../form.scss";
 
 
-$default-padding: 0.75em;
-$default-margin: 1em;
+$default-spacing-size: 1em;
+$default-padding: .75em;
+$default-bg-gradient: var(--background-far);
+$default-input-border-radius: var(--theme-default-input-border-radius);
 
 .#{bem.$base}.select-input {
   display: flex;
   flex-direction: column;
 
   .#{bem.$base}.label {
-    margin-bottom: $default-margin
+    margin-bottom: $default-spacing-size;
   }
 
-  .select-wrapper {
+  >.select-wrapper {
+    background-color: var(--background-inputs);
+    border-radius: $default-input-border-radius;
+    padding: $default-padding;
     position: relative;
 
+    &::after {
+      border-radius: $default-input-border-radius;
+    }
+
+    &:not(:disabled):hover {
+      box-shadow: var(--default-input-box-shadow);
+    }
     >.#{bem.$base}.loading-circle {
       position: absolute;
       right: 0;
@@ -26,25 +38,23 @@ $default-margin: 1em;
       transform: translateY(-50%);
     }
 
-    >.input {
-      width: 100%;
-      border: var(--theme-border-style) var(--hard-y);
-      background: var(--soft-y);
-      color: var(--on-y);
-      padding: $default-padding;
-
-      &:not(:disabled):hover {
-        border: var(--theme-border-style) var(--soft-background4);
-      }
-
-      &:disabled {
-        background-color: var(--hard-y);
-        appearance: none;
-      }
-
-      &:focus {
-        background: var(--y);
+    select {
+      appearance: none;
+      background-color: inherit;
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAyMCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5IDEuNUwxMCAxMC41TDEgMS41IiBzdHJva2U9IiM0QzRENTMiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4=");
+      background-position: calc(100% - $default-spacing-size);
+      background-repeat: no-repeat;
+      background-size: $default-spacing-size;
+      padding-right: $default-spacing-size;
+
+      &.input {
+        width: 100%;
+
+        &:disabled {
+          appearance: none;
+          opacity: 35%;
+        }
       }
     }
   }
-}
+}

package/src/ui/f/fields/TextInput/TextInput.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useLayoutEffect, memo } from 'react'
+import { useInsertionEffect, memo } from 'react'
 
 import PropTypes from 'prop-types'
 
@@ -38,7 +38,7 @@ const TextInput = ({
   autoComplete,
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 
@@ -68,15 +68,17 @@ const TextInput = ({
       >
         { label }
       </FormLabel>
-      <input
-        id={name}
-        className="input"
-        type={type}
-        disabled={disabled}
-        placeholder={placeholder}
-        autoComplete={autoComplete}
-        {...field}
-      />
+      <div className="input-wrapper with-faded-border">
+        <input
+          id={name}
+          className="input"
+          type={type}
+          disabled={disabled}
+          placeholder={placeholder}
+          autoComplete={autoComplete}
+          {...field}
+        />
+      </div>
 
       <FormDescription className="v50 mt-v s-1" description={description} name={name} />
 

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

@@ -3,32 +3,41 @@
 @use "@pareto-engineering/bem";
 @use "../../../form.scss";
 
-$default-padding: 0.75em 0.75em 0.55em;
+$default-padding: .75em .75em .55em;
+$default-input-border-radius: var(--theme-default-input-border-radius);
+
 
 .#{bem.$base}.text-input {
   display: flex;
   flex-direction: column;
 
-  .input {
-    border: var(--theme-border-style) var(--hard-y);
-    background: var(--soft-y);
-    color: var(--on-y);
-    padding: $default-padding;
-
-    &::placeholder{
-      color: var(--metadata);
-    }
-
-    &:not(:disabled):hover{
-      border: var(--theme-border-style) var(--soft-background4);
-    }
+  >.input-wrapper {
+    position: relative;
 
-    &:disabled {
-      background-color: var(--hard-y);
+    &::after {
+      border-radius: $default-input-border-radius;
     }
 
-    &:focus {
-      background: var(--soft-background4);
+    > input {
+      background-color: var(--background-inputs);
+      border-radius: $default-input-border-radius;
+      color: var(--x);
+      height: 100%;
+      padding: $default-padding;
+      width: 100%;
+
+      &::placeholder {
+        color: var(--metadata);
+      }
+
+      &:disabled {
+        background-color: var(--hard-x);
+      }
+
+      &:not(:disabled):hover {
+        border-radius: $default-input-border-radius;
+        box-shadow: var(--theme-default-input-box-shadow);
+      }
     }
   }
 }

package/src/ui/f/fields/TextareaInput/TextareaInput.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useLayoutEffect, memo } from 'react'
+import { useInsertionEffect, memo } from 'react'
 
 import PropTypes from 'prop-types'
 
@@ -40,7 +40,7 @@ const TextareaInput = ({
   resize,
   // ...otherProps
 }) => {
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     import('./styles.scss')
   }, [])
 

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