brahma-ui - npm Package Compare versions

Comparing version 1.0.36 to 1.0.37

lib/assets/icons/index.d.ts

 import ChevronIcon from './ChevronIcon';
 import Close from './Close';
 import MobileNavIcon from './MobileNavIcon';
+import OpenNewIcon from './OpenNewIcon';
 import RightArrow from './RightArrow';
@@ -11,2 +12,2 @@ import TooltipIcon from './TooltipIcon';
 };
-export { Close, RightArrow, MobileNavIcon, ChevronIcon, TooltipIcon };
+export { Close, RightArrow, MobileNavIcon, ChevronIcon, TooltipIcon, OpenNewIcon };

lib/components/Input/Input.d.ts

@@ -8,5 +8,5 @@ import React, { InputHTMLAttributes } from 'react';
     icon?: React.ReactNode;
-    iconPosition?: 'left' | 'right';
+    tokenIcon?: React.ReactNode;
     disabled?: boolean;
 } & InputHTMLAttributes<HTMLInputElement>;
-export default function Input({ label, name, onChange, value, error, icon, iconPosition, disabled, ...props }: InputFieldProps): JSX.Element;
+export default function Input({ label, name, onChange, value, error, icon, tokenIcon, disabled, type, ...props }: InputFieldProps): JSX.Element;

lib/components/Input/styles.d.ts

 import { InputFieldProps } from './Input';
-declare type InputStyleType = Pick<InputFieldProps, 'disabled' | 'error'>;
 export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, InputStyleType, never>;
+export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, Pick<InputFieldProps, "disabled" | "error"> & {
+    hasTokenIcon?: boolean | undefined;
+}, never>;
 export declare const Icon: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Input: import("styled-components").StyledComponent<"input", any, InputStyleType, never>;
+export declare const Input: import("styled-components").StyledComponent<"input", any, Pick<InputFieldProps, "disabled" | "error"> & {
+    hasTokenIcon?: boolean | undefined;
+}, never>;
 export declare const Label: import("styled-components").StyledComponent<"label", any, {}, never>;
 export declare const Error: import("styled-components").StyledComponent<"p", any, {}, never>;
-export {};
+export declare const TokenIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

lib/index.d.ts

@@ -54,6 +54,6 @@ /// <reference types="react" />
     icon?: React$1.ReactNode;
-    iconPosition?: 'left' | 'right';
+    tokenIcon?: React$1.ReactNode;
     disabled?: boolean;
 } & InputHTMLAttributes<HTMLInputElement>;
-declare function Input({ label, name, onChange, value, error, icon, iconPosition, disabled, ...props }: InputFieldProps): JSX.Element;
+declare function Input({ label, name, onChange, value, error, icon, tokenIcon, disabled, type, ...props }: InputFieldProps): JSX.Element;
 
@@ -60,0 +60,0 @@ declare type breakpoint = keyof DefaultBreakpoints;

package.json

 {
   "name": "brahma-ui",
-  "version": "1.0.36",
+  "version": "1.0.37",
   "description": "Brahma ui package contained shared components",
@@ -5,0 +5,0 @@ "scripts": {

src/assets/icons/index.ts

 import ChevronIcon from './ChevronIcon'
 import Close from './Close'
 import MobileNavIcon from './MobileNavIcon'
+import OpenNewIcon from './OpenNewIcon'
 import RightArrow from './RightArrow'
@@ -13,2 +14,9 @@ import TooltipIcon from './TooltipIcon'
 
-export { Close, RightArrow, MobileNavIcon, ChevronIcon, TooltipIcon }
+export {
+  Close,
+  RightArrow,
+  MobileNavIcon,
+  ChevronIcon,
+  TooltipIcon,
+  OpenNewIcon
+}

src/components/Input/styles.ts

@@ -5,3 +5,5 @@ import styled, { css } from 'styled-components'
 
-type InputStyleType = Pick<InputFieldProps, 'disabled' | 'error'>
+type InputStyleType = Pick<InputFieldProps, 'disabled' | 'error'> & {
+  hasTokenIcon?: boolean
+}
 
@@ -42,3 +44,3 @@ const inputModifier = {
   disabled: (theme: Theme) => css`
-    color: ${theme.colors.lightGray};
+    color: ${theme.colors.gray300};
     cursor: not-allowed;
@@ -55,3 +57,3 @@ pointer-events: none;
 export const InputWrapper = styled.div<InputStyleType>`
-  ${({ theme, error, disabled }) => css`
+  ${({ theme, error, disabled, hasTokenIcon = false }) => css`
     @property --a {
@@ -67,14 +69,15 @@ syntax: '<angle>';
     color: ${theme.colors.mainText};
-    background: ${theme.colors.lightGray}22;
+    background: ${theme.colors.gray100};
     border-radius: 0.2rem;
-    padding: 1px 1px 0 1px;
+    padding: 0.1rem 0.1rem 0 ${hasTokenIcon ? '6.8rem' : '0.1rem'};
+    border: 1px solid ${theme.border.color};
     height: 6.2rem;
     transition: --a 1s;
 
-    &:hover,
+    &:hover {
+      background: #f5f5f5;
+    }
+
     &:focus-within {
-      background: ${error
-        ? ''
-        : 'conic-gradient(from var(--a) at 50% 50%, #ffffff 0deg, rgba(255, 255, 255, 0) 360deg)'};
-      --a: 180deg;
+      border: 1px solid ${theme.colors.gray700};
     }
@@ -103,4 +106,4 @@
   ${({ theme, error, disabled }) => css`
-    background: ${theme.colors.lightGray}22;
-    color: ${error ? theme.colors.error : theme.colors.mainText};
+    background: ${theme.colors.gray100};
+    color: ${error ? theme.colors.error : theme.colors.black};
     border: 0;
@@ -117,2 +120,6 @@ height: 5.9rem;
 
+    &:hover {
+      background: #f5f5f5;
+    }
+
     ${disabled && inputModifier.disabled(theme)};
@@ -125,3 +132,3 @@ `}
     font-family: ${theme.font.family.neue};
-    color: ${theme.colors.lightGray};
+    color: ${theme.colors.black};
     font-size: ${theme.font.sizes.xxsmall};
@@ -141,1 +148,15 @@ margin-bottom: ${theme.spacings.xxsmall};
 `
+
+export const TokenIconWrapper = styled.div`
+  ${({ theme }) => css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+
+    position: absolute;
+    left: 2.6rem;
+    top: 25%;
+    z-index: ${theme.layers.menu};
+  `}
+`

src/components/Tag/styles.ts

@@ -33,3 +33,3 @@ import { Typography } from 'components/Typography'
     padding: 1rem 1.6rem;
-    background: ${theme.colors.mainBg};
+    background: transparent;
     color: ${theme.colors.primary};
@@ -36,0 +36,0 @@

src/components/Tooltip/styles.ts

@@ -66,3 +66,3 @@ import styled, { css } from 'styled-components'
 export const ContentWrapper = styled.div<ContentWrapperProps>`
-  ${({ theme, width = 240, placeBottom }) => css`
+  ${({ theme, width = 280, placeBottom }) => css`
     visibility: hidden;
@@ -69,0 +69,0 @@ width: ${width}px;

No alert changes

Improved metrics

Total package byte prevSize

880940

increased by0.39%

Lines of code

6438

increased by0.99%

No dependency changes