From 708d6f7fe1493363d40f49e61def0b8cc2f79ee9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=93=D1=80=D0=B8=D0=BD=D0=B5=D0=B2=D0=B8=D1=87=20=D0=90?= =?UTF-8?q?=D0=BB=D0=B5=D0=BA=D1=81=D0=B0=D0=BD=D0=B4=D1=80=20=D0=92=D0=B0?= =?UTF-8?q?=D1=81=D0=B8=D0=BB=D1=8C=D0=B5=D0=B2=D0=B8=D1=87?= Date: Thu, 1 Feb 2024 15:25:11 +0300 Subject: [PATCH] feat: icon button theme anr prepare release --- docs/changelog.md | 9 ++++- package.json | 2 +- src/components/Chip/styled.ts | 6 ++-- src/components/IconButton/IconButton.tsx | 16 ++++++--- src/components/IconButton/styled.ts | 45 +++++++++++------------- src/constants/theme.ts | 41 +++++++++++++++++++-- 6 files changed, 83 insertions(+), 36 deletions(-) diff --git a/docs/changelog.md b/docs/changelog.md index bb2ded8..3779e09 100644 --- 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 index ff37cc2..f2d8dd8 100644 --- 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 index 2a8a54a..0159128 100644 --- 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 index 25bae7a..f0eede0 100644 --- a/src/components/IconButton/IconButton.tsx +++ b/src/components/IconButton/IconButton.tsx @@ -1,9 +1,9 @@ -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 { children: ReactNode; size?: TSize; disabled?: boolean; @@ -11,9 +11,17 @@ export interface IIconButtonProps { 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 ( - + {children} ); diff --git a/src/components/IconButton/styled.ts b/src/components/IconButton/styled.ts index 6ae89f7..7250310 100644 --- 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 index fa91b03..099c852 100644 --- 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;