feat: icon button theme anr prepare release

ostis-ai · Feb 1, 2024 · 708d6f7 · 708d6f7
1 parent 5ed924a
commit 708d6f7
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 36 deletions.
diff --git a/docs/changelog.md b/docs/changelog.md
@@ -106,9 +106,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Custom Toast positions
 - Tooltip classname
 
-## [v0.2.0] - 13.12.2023
+## [v0.2.0] - 01.02.2024
+
+### Fixed
+
+- Console errors
 
 ### Added
 
 - Theming for Chips, Popup, DropdownOption
 - Select mobile version
+- IconButton component
+- Possibility to change password icon in password input
+- Easy popup styling via className
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ostis-ui-lib",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "",
   "main": "./build/ostis-ui-lib.js",
   "types": "./build/index.d.ts",

diff --git a/src/components/Chip/styled.ts b/src/components/Chip/styled.ts
@@ -29,9 +29,9 @@ export const Wrapper = styled.div<{ $disabled?: boolean; $size: TChipSize; $hasC
 
 export const Text = styled.div<{ size: TChipSize }>`
   font-family: ${({ theme }) => theme.chip.font.fontFamily};
-  font-weight: ${({ theme }) => theme.chip.size.fontWeight};
-  font-size: ${({ theme }) => theme.chip.size.fontWeight};
-  line-height: ${({ theme }) => theme.chip.size.lineHeight};
+  font-weight: ${({ theme }) => theme.chip.font.fontWeight};
+  font-size: ${({ theme }) => theme.chip.font.fontSize};
+  line-height: ${({ theme }) => theme.chip.font.lineHeight};
   max-width: ${({ theme }) => theme.chip.size.maxWidthText};
   text-overflow: ellipsis;
   overflow: hidden;

diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
@@ -1,19 +1,27 @@
-import { MouseEventHandler, ReactNode } from 'react';
+import { ButtonHTMLAttributes, MouseEventHandler, ReactNode } from 'react';
 
 import { TSize } from './model';
 import { Wrapper } from './styled';
 
-export interface IIconButtonProps {
+export interface IIconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   children: ReactNode;
   size?: TSize;
   disabled?: boolean;
   className?: string;
   onClick?: MouseEventHandler;
 }
 
-export const IconButton = ({ children, className, size = 'l', disabled, onClick }: IIconButtonProps) => {
+export const IconButton = ({
+  children,
+  className,
+  disabled,
+  size = 'l',
+  type = 'button',
+  onClick,
+  ...restButtonProps
+}: IIconButtonProps) => {
   return (
-    <Wrapper className={className} $size={size} disabled={disabled} onClick={onClick} type="button">
+    <Wrapper className={className} $size={size} disabled={disabled} onClick={onClick} type={type} {...restButtonProps}>
       {children}
     </Wrapper>
   );

diff --git a/src/components/IconButton/styled.ts b/src/components/IconButton/styled.ts
@@ -10,24 +10,24 @@ export const Wrapper = styled.button<{ $size: TSize }>`
   outline: none;
   border: none;
   cursor: pointer;
-  border-radius: 10px;
+  border-radius: ${({ theme }) => theme.iconButton.borderRadius};
 
-  background: #fff;
+  background-color: ${({ theme }) => theme.iconButton.colors.background};
 
   flex-shrink: 0;
   box-sizing: border-box;
 
   &:hover {
-    background-color: #ebebeb;
+    background-color: ${({ theme }) => theme.iconButton.colors.backgroundHover};
   }
 
   &:active {
-    box-shadow: inset 0 0 0 2px #dadada;
+    box-shadow: inset 0 0 0 2px ${({ theme }) => theme.iconButton.colors.borderActive};
   }
 
   &:disabled {
     opacity: 0.5;
-    background-color: #ebebeb;
+    background-color: ${({ theme }) => theme.iconButton.colors.backgroundDisabled};
 
     pointer-events: none;
   }
@@ -36,43 +36,40 @@ export const Wrapper = styled.button<{ $size: TSize }>`
   ${(props) =>
     props.$size === 's' &&
     css`
-      width: 24px;
-      height: 24px;
+      width: ${({ theme }) => theme.iconButton.size.small.width};
+      height: ${({ theme }) => theme.iconButton.size.small.height};
 
-      border-radius: 4px;
+      border-radius: ${({ theme }) => theme.iconButton.size.small.borderRadius};
 
       &:active {
-        border: 1px solid #dadada;
+        box-shadow: inset 0 0 0 1px ${({ theme }) => theme.iconButton.colors.borderActive};
       }
     `}
 
   ${(props) =>
     props.$size === 'm' &&
     css`
-      width: 36px;
-      height: 36px;
-
-      padding: 6px;
-      border-radius: 8px;
+      width: ${({ theme }) => theme.iconButton.size.medium.width};
+      height: ${({ theme }) => theme.iconButton.size.medium.height};
+      padding: ${({ theme }) => theme.iconButton.size.medium.padding};
+      border-radius: ${({ theme }) => theme.iconButton.size.medium.borderRadius};
     `}
   
 	${(props) =>
     props.$size === 'l' &&
     css`
-      width: 42px;
-      height: 42px;
-      padding: 9px;
-
-      border-radius: 10px;
+      width: ${({ theme }) => theme.iconButton.size.large.width};
+      height: ${({ theme }) => theme.iconButton.size.large.height};
+      padding: ${({ theme }) => theme.iconButton.size.large.padding};
+      border-radius: ${({ theme }) => theme.iconButton.size.large.borderRadius};
     `}
   
 	${(props) =>
     props.$size === 'xl' &&
     css`
-      width: 48px;
-      height: 48px;
-      padding: 12px;
-
-      border-radius: 10px;
+      width: ${({ theme }) => theme.iconButton.size.xlarge.width};
+      height: ${({ theme }) => theme.iconButton.size.xlarge.height};
+      padding: ${({ theme }) => theme.iconButton.size.xlarge.padding};
+      border-radius: ${({ theme }) => theme.iconButton.size.xlarge.borderRadius};
     `}
 `;
diff --git a/src/constants/theme.ts b/src/constants/theme.ts
@@ -188,14 +188,14 @@ export const defaultLightTheme = {
   chip: {
     font: {
       fontFamily: 'Roboto',
+      fontWeight: 400,
+      fontSize: '20px',
+      lineHeight: '24px',
     },
     size: {
       maxWidth: '190px',
       width: 'fit-content',
       gap: '4px',
-      fontWeight: 400,
-      fontSize: '20px',
-      lineHeight: '24px',
       maxWidthText: 'fit-content',
       padding: '3px 7px',
       paddingWithIcon: '3px 3px 3px 7px',
@@ -222,6 +222,41 @@ export const defaultLightTheme = {
       },
     },
   },
+  iconButton: {
+    borderRadius: '10px',
+    colors: {
+      background: '#ffffff',
+      backgroundHover: '#ebebeb',
+      borderActive: '#dadada',
+      backgroundDisabled: '#ebebeb',
+    },
+    size: {
+      xlarge: {
+        width: '48px',
+        height: '48px',
+        borderRadius: '10px',
+        padding: '12px',
+      },
+      large: {
+        width: '42px',
+        height: '42px',
+        borderRadius: '10px',
+        padding: '9px',
+      },
+      medium: {
+        width: '36px',
+        height: '36px',
+        borderRadius: '8px',
+        padding: '6px',
+      },
+      small: {
+        width: '24px',
+        height: '24px',
+        borderRadius: '4px',
+        padding: 'unset',
+      },
+    },
+  },
 };
 
 export type Theme = typeof defaultLightTheme;