refactor style

* refactor(react-button): complete Button style

* refactor(input): input style

* fix(button): button padding style

* refactor(select): select component

* refactor(select): select fuzzysearch

* fix(select): selectKey bug

* refactor(card): card style

* refactor(dialog): dialog style

* fix(card & sheet): scss deprecation warning

* refactor(radio): radio style

* refactor(radio): disable style

* update dependenices

* refactor(badge): change badge style

* refactor(navbar): navbar style

* feat: new version

* feat: pagination style

* feat: toast style

---------

Co-authored-by: 卜庆鑫 <buqingxin@xiaomi.com>

packages/ui-react/lib/Badge/Badge.module.scss

@@ -1,44 +1,67 @@
 @use '../variables' as *;
+
 @mixin color-badge($color-name) {
  background-color: $color-name;
- color: $white-color;
- font-weight: bold;
 }
 
-.base {
- border-radius: $radius-5;
- display: inline-flex;
- @include shadow;
- transition: all $duration-100 $cubic-bezier;
- &:hover {
- opacity: 0.8;
- }
+@mixin badge-color {
  &.info {
- @include color-badge($primary-color);
+ @include color-badge($info-color);
  }
+
  &.success {
  @include color-badge($success-color);
  }
+
  &.warning {
  @include color-badge($warning-color);
  }
+
  &.error {
  @include color-badge($danger-color);
  }
+
  &.ghost {
  @include color-badge($pale-white-color);
  color: $black-color;
  }
+}
+
+@mixin badge-size {
  &.medium {
- font-size: 14px;
- padding: 2px 11px;
+ font-size: 1rem;
+ padding: 0px 12px;
+ height: 28px;
+ border-radius: 14px;
  }
+
  &.large {
- font-size: 18px;
- padding: 3px 14px;
+ font-size: 1.2rem;
+ padding: 0px 16px;
+ height: 32px;
+ border-radius: 16px;
  }
+
  &.small {
- font-size: 10px;
- padding: 2px 8px;
+ padding: 0px 8px;
+ height: 24px;
+ border-radius: 12px;
+ font-size: 0.8rem;
+ }
+}
+
+.base {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: solid 1px $default-color;
+ cursor: pointer;
+
+ @include shadow;
+ @include badge-color;
+ @include badge-size;
+
+ span {
+ display: inline;
  }
 }

packages/ui-react/lib/Badge/Badge.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { type MouseEventHandler } from 'react';
 import styles from './Badge.module.scss';
 import classNames from 'classnames';
 
-export interface BadgeProps {
+export interface BadgeProps extends Omit<React.HtmlHTMLAttributes<HTMLDivElement>, 'onClick'> {
  /**
  * the type of the Badge
  */
@@ -27,6 +27,10 @@ export interface BadgeProps {
  * classname , the classname of the badge
  */
  className?: string;
+ /**
+ * onClick
+ */
+ onClick?: MouseEventHandler<HTMLDivElement>;
 }
 
 export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
@@ -38,6 +42,7 @@ export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
  clickCopy = false,
  shadow = 'none',
  className,
+ onClick,
  ...rest
  },
  ref,
@@ -50,16 +55,17 @@ export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
  className,
  );
 
- const handleBadge = () => {
+ const handleClickBadge: MouseEventHandler<HTMLDivElement> = (event) => {
  navigator.clipboard.writeText(content);
+ onClick && onClick(event);
  };
 
  return (
  <div
  ref={ref}
  className={badgeClass}
+ onClick={clickCopy ? handleClickBadge : undefined}
  {...rest}
- onClick={clickCopy ? handleBadge : undefined}
  >
  <span>{content}</span>
  </div>

packages/ui-react/lib/Button/Button.module.scss

@@ -1,85 +1,42 @@
 @use '../variables' as *;
 
 .base {
- background-color: $primary-color;
- color: $white-color;
- padding: 10px;
- border-radius: 5px;
+ display: block;
+ border-radius: 4px;
  border: none;
  cursor: pointer;
- font-size: 16px;
  font-weight: 400;
- transition: all 0.15s ease-in-out;
- @include shadow;
+ transition: box-shadow $animation-time-regular $cubic-bezier;
 
- &:hover {
- backdrop-filter: brightness(0.85);
- }
-
- &:active {
- transform: scale(0.98);
- }
+ @include color;
 
- &.primary {
- background-color: $primary-color;
- }
-
- &.secondary {
- background-color: $white-color;
- color: $primary-color;
- border: 1px solid $primary-color;
- }
-
- &.border {
- border: solid 1px $border-white-color;
+ &.disabled {
+ // all: unset;
+ @include disabled;
  background-color: $white-color;
- color: $black-color;
- font-weight: 500;
  }
 
- &.ghost {
- background-color: transparent;
- color: $primary-color;
- font-weight: 600;
-
- &:hover:not(.disabled) {
- filter: brightness(1);
- backdrop-filter: brightness(0.97);
- }
- }
-
- &.danger {
- background-color: $danger-color;
- }
-
- &.disabled {
- cursor: not-allowed;
-
- &:hover {
- backdrop-filter: none;
- }
-
- &:active {
- transform: none;
- }
+ &:hover {
+ @include shadow;
  }
 
- &.disabledShadow {
- filter: grayscale(1);
+ &:active {
+ transform: scale(0.98);
+ filter: blur(0.1px);
  }
 
  &.small {
- padding: 6px 7px;
- font-size: 12px;
+ padding: 6px 12px;
+ font-size: 0.8rem;
  }
 
  &.medium {
- padding: 8px 10px;
- font-size: 16px;
+ font-size: 1rem;
+ padding: 8px 16px;
  }
 
  &.large {
- padding: 15px 18px;
- font-size: 20px;
+ padding: 10px 20px;
+ font-size: 1.2rem;
  }
 }

packages/ui-react/lib/Button/Button.tsx

@@ -23,21 +23,16 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
  * className of the button
  */
  className?: string;
- /**
- * disabledShadow, when the button is disabled ,the shadow is or not
- */
- disabledShadow?: boolean;
 }
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  (
  {
  color = 'primary',
- shadow = 'none',
+ shadow = 'regular',
  size = 'medium',
  disabled = false,
  className,
- disabledShadow = true,
  ...rest
  },
  ref,
@@ -47,15 +42,14 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  styles[color],
  styles[size],
  styles[disabled ? 'disabled' : ''],
- styles[disabledShadow && disabled ? 'disabledShadow' : ''],
  styles[`shadow-${shadow}`],
  );
  return (
  <button
  ref={ref}
  className={`${btnClass} ${className}`}
- {...rest}
  disabled={disabled}
+ {...rest}
  />
  );
  },