pixel-react 1.7.0 → 1.7.1

package/src/components/Input/types.ts

@@ -1,85 +1,85 @@
-export interface InputProps {
-  /**
-   * Name | name of the input field
-   */
-  name: string;
-  /**
-   * Label | field label to be displayed
-   */
-  label?: string;
-  /**
-   * value | input field value
-   */
-  value: string | number;
-  /**
-   * variants to set color/style of the input field
-   */
-  variant?: 'default' | 'primary';
-  /**
-   * type to set color/style of the input field
-   */
-  type: 'text' | 'password' | 'number' | 'email' | 'url' | 'time';
-  /**
-   * error | If true, error message will be displayed
-   */
-  error?: boolean;
-  /**
-   * helperText | error, success, warning message to be shown
-   */
-  helperText?: string;
-  /**
-   * to disable the input field
-   */
-  disabled?: boolean;
-  /**
-   * if true, input field will be mandatory
-   */
-  required?: boolean;
-  /**
-   * placeholder for the input field
-   */
-  placeholder?: string;
-  /**
-   * classnames to style the input field
-   */
-  className?: string;
-  /**
-   * noBorder prop 'true' removes border of input
-   */
-  noBorder?: boolean;
-  /**
-   * onChange, onKeyDown, onBlur, onFocus actions
-   */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-
-  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-
-  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-
-  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-  /**
-   * id to select the input field uniquely
-   */
-  id?: string;
-  /**
-   * if on, suggestion popup will be displayed
-   */
-  autoComplete?: 'on' | 'off';
-  /**
-   *  minimum and maximum values for the number type input field and their functions
-   */
-  minValue?: number;
-  maxValue?: number;
-  /**
-   * background of the input field prop
-   */
-  transparentBackground?: boolean;
-  /**
-   * size for the input field
-   */
-  size?: 'small' | 'medium';
-  /**
-   * isLabelRequired for the input field without label,showing placeholder
-   */
-  isLabelRequired?: boolean;
-}
+export interface InputProps {
+  /**
+   * Name | name of the input field
+   */
+  name: string;
+  /**
+   * Label | field label to be displayed
+   */
+  label?: string;
+  /**
+   * value | input field value
+   */
+  value: string | number;
+  /**
+   * variants to set color/style of the input field
+   */
+  variant?: 'default' | 'primary';
+  /**
+   * type to set color/style of the input field
+   */
+  type: 'text' | 'password' | 'number' | 'email' | 'url' | 'time';
+  /**
+   * error | If true, error message will be displayed
+   */
+  error?: boolean;
+  /**
+   * helperText | error, success, warning message to be shown
+   */
+  helperText?: string;
+  /**
+   * to disable the input field
+   */
+  disabled?: boolean;
+  /**
+   * if true, input field will be mandatory
+   */
+  required?: boolean;
+  /**
+   * placeholder for the input field
+   */
+  placeholder?: string;
+  /**
+   * classnames to style the input field
+   */
+  className?: string;
+  /**
+   * noBorder prop 'true' removes border of input
+   */
+  noBorder?: boolean;
+  /**
+   * onChange, onKeyDown, onBlur, onFocus actions
+   */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  /**
+   * id to select the input field uniquely
+   */
+  id?: string;
+  /**
+   * if on, suggestion popup will be displayed
+   */
+  autoComplete?: 'on' | 'off';
+  /**
+   *  minimum and maximum values for the number type input field and their functions
+   */
+  minValue?: number;
+  maxValue?: number;
+  /**
+   * background of the input field prop
+   */
+  transparentBackground?: boolean;
+  /**
+   * size for the input field
+   */
+  size?: 'small' | 'medium';
+  /**
+   * isLabelRequired for the input field without label,showing placeholder
+   */
+  isLabelRequired?: boolean;
+}

package/src/components/InputWithDropdown/InputWithDropdown.scss

@@ -1,220 +1,220 @@
-@use '../../assets/styles/fonts';
-
-.ff-input-with-dropdown-container {
-  display: flex;
-  flex-direction: column;
-
-  .ff-input-with-dropdown {
-    display: flex;
-    border: 1px solid var(--input-default-border-color);
-    border-radius: 4px;
-    padding: 0;
-    position: relative;
-    justify-content: space-between;
-
-    .ff-input-with-dropdown--left {
-      display: flex;
-      flex-direction: row-reverse;
-    }
-
-    .ff-input-with-dropdown--right {
-      display: flex;
-      flex-direction: row;
-    }
-    .ff-floating-input--left-dropdown {
-      width: 698px;
-    }
-
-    .ff-floating-label-input-container {
-      display: flex;
-      flex: 1;
-      .ff-floating-label {
-        position: absolute;
-        z-index: 9;
-        color: var(--input-default-border-color);
-        top: 6px;
-        left: 7px;
-        @extend .fontSm;
-        transition: all 0.3s ease-in-out;
-
-        .ff-required-asterisk {
-          color: var(--input-error-text-color);
-        }
-        &--filled {
-          color: var(--input-active-text-color);
-        }
-        &--no-hover {
-          color: var(--input-default-border-color);
-        }
-        &--error {
-          color: var(--input-error-text-color);
-        }
-      }
-
-      .ff-floating-input {
-        width: 100%;
-        padding: 6px 7px;
-        line-height: 18px;
-        border: none;
-        outline: none;
-        border-right: 1px solid var(--input-default-border-color);
-        border-radius: 4px 0 0 4px;
-        @extend .fontSm;
-
-        &::-webkit-outer-spin-button,
-        &::-webkit-inner-spin-button {
-          -webkit-appearance: none;
-          margin: 0;
-        }
-        &::placeholder {
-          opacity: 0;
-        }
-        &:disabled {
-          cursor: not-allowed;
-          background: transparent;
-        }
-        &--error {
-          border-color: var(--input-error-text-color);
-        }
-        &--left-dropdown {
-          &::placeholder {
-            opacity: 1;
-          }
-        }
-      }
-    }
-
-    &--no-hover {
-      border-color: var(--input-default-border-color);
-    }
-    &--disabled {
-      cursor: not-allowed;
-      opacity: 0.5;
-    }
-    &--error {
-      border-color: var(--input-error-text-color);
-    }
-
-    .ff-floating-dropdown {
-      width: 100%;
-      border: none;
-      outline: none;
-      margin: 0;
-
-      &:disabled {
-        cursor: not-allowed;
-      }
-      &:hover {
-        background-color: var(--dropdown-bg-color);
-      }
-    }
-
-    .ff-floating-dropdown--left {
-      min-width: 94px;
-    }
-    .seperatorline {
-      height: 26px;
-      margin-top: 3px;
-      border-right: 0.5px solid var(--brand-color);
-      flex-shrink: 0;
-      border-radius: 2px;
-    }
-  }
-  &:hover {
-    .ff-input-with-dropdown {
-      border-color: var(--brand-color);
-
-      &--filled {
-        border-color: var(--input-default-border-color);
-      }
-      &--disabled {
-        border-color: var(--input-default-border-color);
-      }
-      &--error {
-        border-color: var(--input-error-text-color);
-      }
-      &--left .ff-floating-label {
-        color: var(--input-hover-border-color);
-        &--filled {
-          color: var(--input-default-border-color);
-        }
-        &--disabled {
-          color: var(--input-default-border-color);
-        }
-        &--error {
-          color: var(--input-error-text-color);
-        }
-      }
-      .ff-floating-input {
-        border-color: var(--brand-color);
-        &--filled {
-          border-color: var(--input-default-border-color);
-        }
-        &--disabled {
-          border-color: var(--input-default-border-color);
-        }
-        &--error {
-          border-color: var(--input-error-text-color);
-        }
-      }
-    }
-  }
-
-  &:focus-within {
-    .ff-input-with-dropdown {
-      border-color: var(--input-active-text-color);
-      &--error {
-        border-color: var(--input-error-text-color);
-      }
-
-      .ff-floating-label {
-        top: -9px;
-        background-color: var(--input-label-bg-color);
-        padding: 0px 2px;
-        color: var(--input-active-text-color);
-        line-height: 15px;
-        font-size: 10px !important;
-
-        &--error {
-          color: var(--input-error-text-color);
-        }
-      }
-      .ff-floating-input {
-        border-color: var(--input-active-text-color);
-        &--error {
-          border-color: var(--input-error-text-color);
-        }
-        &::placeholder {
-          opacity: 1;
-        }
-      }
-    }
-  }
-  &--filled {
-    .ff-input-with-dropdown {
-      .ff-floating-label-input-container {
-        border-color: var(--input-active-text-color);
-        .ff-floating-label {
-          //re-written label container code to place it at on border
-          top: -9px;
-          background-color: var(--input-label-bg-color);
-          padding: 0px 2px;
-          line-height: 15px;
-          font-size: 10px !important;
-        }
-      }
-    }
-    span {
-      font-size: 8px;
-    }
-    .required-asterisk {
-      color: var(--input-error-text-color);
-    }
-  }
-
-  .ff-helper-text {
-    color: var(--input-error-text-color);
-    @extend .fontXs;
-    padding: 0 11px;
-  }
-}
+@use '../../assets/styles/fonts';
+
+.ff-input-with-dropdown-container {
+  display: flex;
+  flex-direction: column;
+
+  .ff-input-with-dropdown {
+    display: flex;
+    border: 1px solid var(--input-default-border-color);
+    border-radius: 4px;
+    padding: 0;
+    position: relative;
+    justify-content: space-between;
+
+    .ff-input-with-dropdown--left {
+      display: flex;
+      flex-direction: row-reverse;
+    }
+
+    .ff-input-with-dropdown--right {
+      display: flex;
+      flex-direction: row;
+    }
+    .ff-floating-input--left-dropdown {
+      width: 698px;
+    }
+
+    .ff-floating-label-input-container {
+      display: flex;
+      flex: 1;
+      .ff-floating-label {
+        position: absolute;
+        z-index: 9;
+        color: var(--input-default-border-color);
+        top: 6px;
+        left: 7px;
+        @extend .fontSm;
+        transition: all 0.3s ease-in-out;
+
+        .ff-required-asterisk {
+          color: var(--input-error-text-color);
+        }
+        &--filled {
+          color: var(--input-active-text-color);
+        }
+        &--no-hover {
+          color: var(--input-default-border-color);
+        }
+        &--error {
+          color: var(--input-error-text-color);
+        }
+      }
+
+      .ff-floating-input {
+        width: 100%;
+        padding: 6px 7px;
+        line-height: 18px;
+        border: none;
+        outline: none;
+        border-right: 1px solid var(--input-default-border-color);
+        border-radius: 4px 0 0 4px;
+        @extend .fontSm;
+
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+          -webkit-appearance: none;
+          margin: 0;
+        }
+        &::placeholder {
+          opacity: 0;
+        }
+        &:disabled {
+          cursor: not-allowed;
+          background: transparent;
+        }
+        &--error {
+          border-color: var(--input-error-text-color);
+        }
+        &--left-dropdown {
+          &::placeholder {
+            opacity: 1;
+          }
+        }
+      }
+    }
+
+    &--no-hover {
+      border-color: var(--input-default-border-color);
+    }
+    &--disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+    &--error {
+      border-color: var(--input-error-text-color);
+    }
+
+    .ff-floating-dropdown {
+      width: 100%;
+      border: none;
+      outline: none;
+      margin: 0;
+
+      &:disabled {
+        cursor: not-allowed;
+      }
+      &:hover {
+        background-color: var(--dropdown-bg-color);
+      }
+    }
+
+    .ff-floating-dropdown--left {
+      min-width: 94px;
+    }
+    .seperatorline {
+      height: 26px;
+      margin-top: 3px;
+      border-right: 0.5px solid var(--brand-color);
+      flex-shrink: 0;
+      border-radius: 2px;
+    }
+  }
+  &:hover {
+    .ff-input-with-dropdown {
+      border-color: var(--brand-color);
+
+      &--filled {
+        border-color: var(--input-default-border-color);
+      }
+      &--disabled {
+        border-color: var(--input-default-border-color);
+      }
+      &--error {
+        border-color: var(--input-error-text-color);
+      }
+      &--left .ff-floating-label {
+        color: var(--input-hover-border-color);
+        &--filled {
+          color: var(--input-default-border-color);
+        }
+        &--disabled {
+          color: var(--input-default-border-color);
+        }
+        &--error {
+          color: var(--input-error-text-color);
+        }
+      }
+      .ff-floating-input {
+        border-color: var(--brand-color);
+        &--filled {
+          border-color: var(--input-default-border-color);
+        }
+        &--disabled {
+          border-color: var(--input-default-border-color);
+        }
+        &--error {
+          border-color: var(--input-error-text-color);
+        }
+      }
+    }
+  }
+
+  &:focus-within {
+    .ff-input-with-dropdown {
+      border-color: var(--input-active-text-color);
+      &--error {
+        border-color: var(--input-error-text-color);
+      }
+
+      .ff-floating-label {
+        top: -9px;
+        background-color: var(--input-label-bg-color);
+        padding: 0px 2px;
+        color: var(--input-active-text-color);
+        line-height: 15px;
+        font-size: 10px !important;
+
+        &--error {
+          color: var(--input-error-text-color);
+        }
+      }
+      .ff-floating-input {
+        border-color: var(--input-active-text-color);
+        &--error {
+          border-color: var(--input-error-text-color);
+        }
+        &::placeholder {
+          opacity: 1;
+        }
+      }
+    }
+  }
+  &--filled {
+    .ff-input-with-dropdown {
+      .ff-floating-label-input-container {
+        border-color: var(--input-active-text-color);
+        .ff-floating-label {
+          //re-written label container code to place it at on border
+          top: -9px;
+          background-color: var(--input-label-bg-color);
+          padding: 0px 2px;
+          line-height: 15px;
+          font-size: 10px !important;
+        }
+      }
+    }
+    span {
+      font-size: 8px;
+    }
+    .required-asterisk {
+      color: var(--input-error-text-color);
+    }
+  }
+
+  .ff-helper-text {
+    color: var(--input-error-text-color);
+    @extend .fontXs;
+    padding: 0 11px;
+  }
+}