agora-ui-foundation 1.0.0

package/lib/components/button/index.css

@@ -0,0 +1,576 @@
+.fcr-button {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  cursor: pointer;
+  outline: none;
+  box-sizing: border-box;
+  position: relative;
+  width: fit-content;
+  flex-shrink: 0;
+}
+.fcr-button-block {
+  width: 100%;
+}
+
+.fcr-button:focus {
+  outline: none;
+}
+.fcr-button.fcr-button-disabled,
+.fcr-button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.fcr-button-extra {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.fcr-button-extra-active {
+  pointer-events: none;
+}
+.fcr-button-extra-inner {
+  pointer-events: all;
+}
+/** primary button **/
+.fcr-button-primary {
+  background: var(--fcr_ui_scene_ramp_brand6);
+  color: var(--fcr_ui_scene_white10);
+  --effect-color: var(--fcr_ui_scene_ramp_brand4);
+}
+
+.fcr-button-primary:not(:disabled, .fcr-button-extra-active):hover {
+  background: var(--fcr_ui_scene_ramp_brand7);
+}
+.fcr-button-primary:not(:disabled, .fcr-button-extra-active):active {
+  background: var(--fcr_ui_scene_ramp_brand8);
+}
+.fcr-button-primary:not(:disabled) .fcr-button-extra-inner-active {
+  background: var(--fcr_ui_scene_ramp_brand7);
+}
+/** primary danger **/
+.fcr-button-primary.fcr-button-danger {
+  color: var(--fcr_ui_scene_white10);
+  background: var(--fcr_ui_scene_ramp_red6);
+  --effect-color: var(--fcr_ui_scene_ramp_red4);
+}
+
+.fcr-button-primary.fcr-button-danger:not(:disabled, .fcr-button-extra-active):hover {
+  background: var(--fcr_ui_scene_ramp_red7);
+}
+.fcr-button-primary.fcr-button-danger:not(:disabled, .fcr-button-extra-active):active {
+  background: var(--fcr_ui_scene_ramp_red8);
+}
+.fcr-button-primary.fcr-button-danger:not(:disabled) .fcr-button-extra-inner-active {
+  background: var(--fcr_ui_scene_ramp_red7);
+}
+/** primary success **/
+.fcr-button-primary.fcr-button-success {
+  color: var(--fcr_ui_scene_white10);
+  background: var(--fcr_ui_scene_ramp_green6);
+  --effect-color: var(--fcr_ui_scene_ramp_green6);
+}
+.fcr-button-primary.fcr-button-success:not(:disabled, .fcr-button-extra-active):hover {
+  background: var(--fcr_ui_scene_ramp_green7);
+}
+.fcr-button-primary.fcr-button-success:not(:disabled, .fcr-button-extra-active):active {
+  background: var(--fcr_ui_scene_ramp_green7);
+}
+.fcr-button-primary.fcr-button-success:not(:disabled) .fcr-button-extra-inner-active {
+  background: var(--fcr_ui_scene_ramp_green7);
+}
+/** primary white **/
+.fcr-button-primary.fcr-button-white {
+  color: var(--fcrUiSceneBlack10);
+  background: var(--fcr_ui_scene_white10);
+  --effect-color: var(--fcr_ui_scene_ramp_brand7);
+}
+.fcr-button-primary.fcr-button-white:not(:disabled, .fcr-button-extra-active):hover {
+  color: var(--fcr_ui_scene_white10);
+  background: var(--fcr_ui_scene_ramp_brand6);
+}
+.fcr-button-primary.fcr-button-white:not(:disabled, .fcr-button-extra-active):active {
+  color: var(--fcr_ui_scene_white10);
+  background: var(--fcr_ui_scene_ramp_brand7);
+}
+.fcr-button-primary.fcr-button-white:not(:disabled) .fcr-button-extra-inner-active {
+  background: var(--fcr_ui_scene_ramp_brand6);
+}
+/** secondary button **/
+
+.fcr-button-secondary {
+  color: var(--fcr_ui_scene_icontext1);
+  box-shadow: 0 0 0 0.3px #ffffffcc;
+  background: transparent;
+
+  --effect-color: var(--fcr_ui_scene_ramp_brand4);
+}
+.fcr-button-secondary:not(:disabled):hover {
+  color: var(--fcr_web_ui_scene_mainicon2);
+  background: var(--fcr_web_ui_scene_hover);
+}
+.fcr-button-secondary:not(:disabled):active {
+  color: var(--fcr_web_ui_scene_mainicon2);
+  background: var(--fcr_web_ui_scene_click);
+}
+/** secondary-bordered button **/
+
+.fcr-button-secondary-bordered {
+  color: var(--fcr_ui_scene_icontext1);
+  border: 0.5px solid var(--fcr_web_ui_scene_line4);
+  background: var(--fcr_web_ui_scene_fill2);
+}
+.fcr-button-secondary-bordered:not(:disabled):hover {
+  border: 0.5px solid var(--fcr_ui_scene_ramp_brand6);
+  background: var(--fcr_web_ui_scene_hover);
+  color: var(--fcr_web_ui_scene_mainicon2);
+}
+.fcr-button-secondary-bordered:not(:disabled):active {
+  border: 0.5px solid var(--fcr_ui_scene_ramp_brand6);
+  background: var(--fcr_web_ui_scene_click);
+  color: var(--fcr_web_ui_scene_mainicon2);
+}
+/** gray button **/
+
+.fcr-button-gray {
+  border: 0.5px solid var(--fcr_ui_scene_btn2);
+  color: var(--fcr_ui_scene_icontext1);
+  background: var(--fcr_ui_scene_btn2);
+}
+.fcr-button-gray:not(:disabled):hover {
+  border: 0.5px solid var(--fcr_web_ui_scene_hover);
+  color: var(--fcr_web_ui_scene_mainicon2);
+  background: var(--fcr_web_ui_scene_hover);
+}
+.fcr-button-gray:not(:disabled):active {
+  border: 0.5px solid var(--fcr_web_ui_scene_click);
+  color: var(--fcr_web_ui_scene_mainicon2);
+  background: var(--fcr_web_ui_scene_click);
+}
+/** secondary danger **/
+
+.fcr-button-secondary.fcr-button-danger {
+  color: var(--fcr_ui_scene_ramp_red6);
+  box-shadow: 0 0 0 0.3px var(--fcr_ui_scene_ramp_red6);
+  background: transparent;
+  --effect-color: var(--fcr_ui_scene_ramp_red4);
+}
+.fcr-button-secondary.fcr-button-danger:not(:disabled):hover {
+  box-shadow: 0 0 0 0.3px var(--fcr_ui_scene_ramp_red6);
+  color: var(--fcr_ui_scene_white10);
+  background: var(--fcr_ui_scene_ramp_red6);
+}
+.fcr-button-secondary.fcr-button-danger:not(:disabled):active {
+  box-shadow: 0 0 0 0.3px var(--fcr_ui_scene_ramp_red8);
+  background: var(--fcr_ui_scene_ramp_red8);
+  color: var(--fcr_ui_scene_white10);
+}
+/** secondary white **/
+.fcr-button-secondary.fcr-button-white {
+  box-shadow: 0 0 0 0.3px #ffffffcc;
+  color: var(--fcr_ui_scene_white10);
+  background: transparent;
+  --effect-color: var(--fcr_ui_scene_ramp_brand7);
+}
+.fcr-button-secondary.fcr-button-white:not(:disabled):hover {
+  box-shadow: 0 0 0 0.3px var(--fcr_ui_scene_ramp_brand6);
+  color: var(--fcr_ui_scene_white10);
+  background: var(--fcr_ui_scene_ramp_brand6);
+}
+.fcr-button-secondary.fcr-button-white:not(:disabled):active {
+  box-shadow: 0 0 0 0.3px var(--fcr_ui_scene_ramp_brand8);
+  color: var(--fcr_ui_scene_white10);
+  background: var(--fcr_ui_scene_ramp_brand8);
+}
+/** text button **/
+.fcr-button-text {
+  color: var(--fcr_ui_scene_white10);
+}
+.fcr-button-text:not(:disabled):hover {
+  background: var(--fcr_mobile_ui_scene_fill3);
+}
+.fcr-button-text.fcr-button-danger {
+  color: var(--fcr_ui_scene_ramp_red6);
+}
+.fcr-button-text.fcr-button-danger:not(:disabled):hover {
+  color: var(--fcr_ui_scene_white10);
+  background: var(--fcr_ui_scene_ramp_red6);
+}
+.fcr-button-text.fcr-button-gray {
+  color: var(--fcr_ui_scene_white8);
+}
+.fcr-button-text.fcr-button-gray:not(:disabled):hover {
+  color: var(--fcr_ui_scene_btn2);
+}
+/** link button **/
+.fcr-button-link {
+  color: var(--fcr_ui_scene_ramp_brand6);
+  min-width: auto;
+}
+.fcr-button-link.fcr-button-danger {
+  color: var(--fcr_ui_scene_ramp_red6);
+  min-width: auto;
+}
+.fcr-button-link.fcr-button-gray {
+  color: var(--fcr_ui_scene_white8);
+  min-width: auto;
+}
+.fcr-button-link.fcr-button-white {
+  color: var(--fcr_ui_scene_white10);
+  min-width: auto;
+}
+.fcr-button-link:not(:disabled):hover {
+  text-decoration: underline;
+}
+
+/** Size **/
+.fcr-button-XL > p {
+  font-weight: var(--fcr_font_weight_x);
+  line-height: 30px;
+  font-size: 20px;
+}
+
+.fcr-button-XL:not(.fcr-button-link) {
+  min-width: 200px;
+  height: 56px;
+  padding: 0 24px;
+}
+.fcr-button-XL:not(.fcr-button-link).fcr-button-with-extra {
+  padding-right: 60px;
+}
+.fcr-button-XL:not(.fcr-button-icon-only) > div:first-child {
+  padding-right: 10px;
+}
+.fcr-button-XL:not(.fcr-button-icon-only) > div:last-child:not(.fcr-button-extra) {
+  padding-left: 10px;
+}
+.fcr-button-XL:not(.fcr-button-icon-only) svg.fcr-button-icon {
+  width: 30px;
+  height: 30px;
+}
+.fcr-button-XL.fcr-button-icon-only svg.fcr-button-icon {
+  width: 56px;
+  height: 56px;
+}
+.fcr-button-XL .fcr-button-extra {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+  right: 5px;
+  height: 40px;
+  padding-left: 5px;
+}
+.fcr-button-XL .fcr-button-extra-inner {
+  border-radius: var(--fcr_cornerradius_round);
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fcr-button-L > p {
+  font-weight: var(--fcr_font_weight_x);
+  font-size: 16px;
+  line-height: 30px;
+}
+.fcr-button-L:not(.fcr-button-link) {
+  min-width: 100px;
+  height: 48px;
+  padding: 0 24px;
+}
+.fcr-button-L:not(.fcr-button-icon-only) > div:first-child {
+  padding-right: 10px;
+}
+.fcr-button-L:not(.fcr-button-icon-only, .fcr-button-with-extra) > div:last-child {
+  padding-left: 10px;
+}
+.fcr-button-L:not(.fcr-button-icon-only) svg.fcr-button-icon {
+  width: 30px;
+  height: 30px;
+}
+.fcr-button-L.fcr-button-icon-only svg.fcr-button-icon {
+  width: 48px;
+  height: 48px;
+}
+.fcr-button-L:not(.fcr-button-link).fcr-button-with-extra {
+  min-width: 160px;
+  padding-right: 40px;
+}
+.fcr-button-L .fcr-button-extra {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+  right: 5px;
+  height: 40px;
+  padding-left: 5px;
+}
+.fcr-button-L .fcr-button-extra-inner {
+  border-radius: var(--fcr_cornerradius_round);
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fcr-button-M > p {
+  font-weight: var(--fcr_font_weight_s);
+  line-height: 24px;
+  font-size: 16px;
+}
+.fcr-button-M:not(.fcr-button-link) {
+  min-width: 100px;
+  height: 42px;
+  padding: 0 24px;
+}
+.fcr-button-M:not(.fcr-button-icon-only) > div:first-child {
+  padding-right: 10px;
+}
+.fcr-button-M:not(.fcr-button-icon-only) > div:last-child {
+  padding-left: 10px;
+}
+.fcr-button-M:not(.fcr-button-icon-only) svg.fcr-button-icon {
+  width: 24px;
+  height: 24px;
+}
+.fcr-button-M.fcr-button-icon-only svg.fcr-button-icon {
+  width: 42px;
+  height: 42px;
+}
+.fcr-button-M:not(.fcr-button-link).fcr-button-with-extra {
+  min-width: 160px;
+  padding-right: 40px;
+}
+.fcr-button-M .fcr-button-extra {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+  right: 5px;
+  height: 30px;
+  padding-left: 5px;
+}
+.fcr-button-M .fcr-button-extra-inner {
+  border-radius: var(--fcr_cornerradius_round);
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fcr-button-S > p {
+  font-weight: 400;
+  line-height: 20px;
+  font-size: 13px;
+}
+.fcr-button-S:not(.fcr-button-link) {
+  min-width: 90px;
+  height: 36px;
+  padding: 0 20px;
+}
+.fcr-button-S:not(.fcr-button-icon-only) > div:first-child {
+  padding-right: 10px;
+}
+.fcr-button-S:not(.fcr-button-icon-only) > div:last-child {
+  padding-left: 10px;
+}
+.fcr-button-S:not(.fcr-button-icon-only) svg.fcr-button-icon {
+  width: 24px;
+  height: 24px;
+}
+.fcr-button-S.fcr-button-icon-only svg.fcr-button-icon {
+  width: 36px;
+  height: 36px;
+}
+.fcr-button-S:not(.fcr-button-link).fcr-button-with-extra {
+  min-width: 160px;
+  padding-right: 40px;
+}
+.fcr-button-S .fcr-button-extra {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+  right: 5px;
+  height: 30px;
+  padding-left: 5px;
+}
+.fcr-button-S .fcr-button-extra-inner {
+  border-radius: var(--fcr_cornerradius_round);
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fcr-button-XS > p {
+  font-weight: 400;
+  line-height: 16px;
+  font-size: 12px;
+}
+.fcr-button-XS:not(.fcr-button-icon-only) > div:first-child {
+  padding-right: 8px;
+}
+.fcr-button-XS:not(.fcr-button-icon-only, .fcr-button-with-extra) > div:last-child {
+  padding-left: 8px;
+}
+.fcr-button-XS:not(.fcr-button-link) {
+  min-width: 90px;
+  height: 32px;
+  padding: 0 20px;
+}
+.fcr-button-XS:not(.fcr-button-icon-only) svg.fcr-button-icon {
+  width: 20px;
+  height: 20px;
+}
+.fcr-button-XS.fcr-button-icon-only svg.fcr-button-icon {
+  width: 32px;
+  height: 32px;
+}
+.fcr-button-XS:not(.fcr-button-link).fcr-button-with-extra {
+  min-width: 140px;
+  padding-right: 36px;
+  padding-left: 10px;
+}
+.fcr-button-XS .fcr-button-extra {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+  right: 5px;
+  height: 26px;
+  padding-left: 5px;
+}
+.fcr-button-XS .fcr-button-extra-inner {
+  border-radius: var(--fcr_cornerradius_round);
+  width: 26px;
+  height: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fcr-button-XXS > p {
+  line-height: 14px;
+  font-size: 12px;
+}
+.fcr-button-XXS:not(.fcr-button-link) {
+  min-width: 50px;
+  height: 28px;
+  padding: 0 10px;
+}
+.fcr-button-XXS:not(.fcr-button-link).fcr-button-rounded {
+  border-radius: var(--fcr_cornerradius_xs);
+}
+.fcr-button-XXS:not(.fcr-button-icon-only) > div:first-child {
+  padding-right: 2px;
+}
+.fcr-button-XXS:not(.fcr-button-icon-only) > div:last-child {
+  padding-left: 2px;
+}
+.fcr-button-XXS:not(.fcr-button-icon-only) svg.fcr-button-icon {
+  width: 14px;
+  height: 14px;
+}
+.fcr-button-XXS.fcr-button-icon-only svg.fcr-button-icon {
+  width: 24px;
+  height: 24px;
+}
+.fcr-button-XXS:not(.fcr-button-link).fcr-button-with-extra {
+  min-width: 160px;
+  padding-right: 40px;
+}
+.fcr-button-XXS .fcr-button-extra {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+  right: 5px;
+  height: 30px;
+  padding-left: 5px;
+}
+.fcr-button-XXS .fcr-button-extra-inner {
+  border-radius: var(--fcr_cornerradius_round);
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/** rounded **/
+.fcr-button-rounded {
+  border-radius: var(--fcr_cornerradius_s);
+}
+.fcr-button-circle {
+  border-radius: var(--fcr_cornerradius_round);
+}
+
+.fcr-button.fcr-button-icon-only {
+  max-width: none;
+  min-width: 0;
+  padding: 0 12px;
+}
+.fcr-button.fcr-button-XXS.fcr-button-icon-only,
+.fcr-button.fcr-button-XS.fcr-button-icon-only {
+  max-width: none;
+  min-width: 0;
+  padding: 0 8px;
+}
+.fcr-button-loading {
+  animation: loadingCircle 1s infinite linear;
+}
+@keyframes loadingCircle {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/** action button **/
+.fcr-button.fcr-action-button svg.fcr-button-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.fcr-button.fcr-action-button {
+  background: var(--fcr_web_ui_scene_hover3);
+  color: var(--fcr_ui_scene_icontext1);
+  box-shadow: var(--fcr_web_light_dropup);
+}
+.fcr-action-button.fcr-action-button.fcr-action-button-show-icon {
+  padding-right: 6px;
+}
+.fcr-button.fcr-action-button-small {
+  height: 26px;
+  padding: 0 6px;
+}
+.fcr-button.fcr-action-button:not(
+    .fcr-action-button-active,
+    .fcr-action-button.fcr-action-button-primary
+  ):hover {
+  background: var(--fcr_web_ui_scene_hover3);
+  color: var(--fcr_web_ui_scene_mainicon2);
+}
+.fcr-action-button.fcr-action-button-active,
+.fcr-action-button.fcr-action-button-primary {
+  background: var(--fcr_ui_scene_ramp_brand6);
+  color: var(--fcr_ui_scene_white10);
+}
+.fcr-action-button.fcr-action-button.fcr-action-button-icon-only svg.fcr-button-icon {
+  width: 20px;
+  height: 20px;
+}
+.fcr-action-button.fcr-action-button.fcr-action-button-icon-only {
+  padding: 6px;
+}
+
+.fcr-action-button.fcr-action-button.fcr-action-button-icon-only.fcr-action-button-small {
+  padding: 4px;
+}

package/lib/components/button/index.d.ts

@@ -0,0 +1,87 @@
+import React, { FC } from 'react';
+import './index.css';
+import { PopoverProps } from '../popover';
+import { FcrIconProps } from '../icon';
+import { FcrIconType } from '../icon/type';
+export type ButtonSize = 'XL' | 'L' | 'M' | 'S' | 'XS' | 'XXS';
+export type ButtonType = 'primary' | 'secondary' | 'secondary-bordered' | 'gray' | 'text' | 'link';
+export type ButtonShape = 'circle' | 'rounded';
+export type ButtonStyleType = 'danger' | 'white' | 'normal' | 'success';
+export interface ButtonProps {
+    /**
+     * 按钮尺寸，可选值为 'XL' | 'L' | 'M' | 'S' | 'XS' | 'XXS'，默认为'L'
+     */
+    /** @en
+     * Set the size of button, can be set to 'XL' | 'L' | 'M' | 'S' | 'XS' | 'XXS', default value is 'L'.
+     */
+    size?: ButtonSize;
+    /**
+     * 按钮类型，可选值为 'primary' | 'secondary' | 'secondary-bordered' | 'gray' | 'text' | 'link'，默认为'primary'
+     */
+    /** @en
+     * Set the type of button,can be set to 'primary' | 'secondary' | 'secondary-bordered' | 'gray' | 'text' | 'link', default value is 'primary'.
+     */
+    type?: ButtonType;
+    /**
+     * 按钮形状，可选值为 'circle' | 'rounded'，默认为'circle'
+     */
+    /** @en
+     * Set the shape of button,can be set to 'circle' | 'rounded', default value is 'circle'.
+     */
+    shape?: ButtonShape;
+    /**
+     * 按钮样式类型，可选值为 'danger' | 'white'
+     */
+    /** @en
+     * Set the style type of button, can be set to 'danger' | 'white'.
+     */
+    styleType?: ButtonStyleType;
+    /**
+     * 设置按钮前置图标
+     */
+    /** @en
+     * Set the icon before the button text.
+     */
+    preIcon?: FcrIconType;
+    preIconProps?: Omit<FcrIconProps, 'type'>;
+    /**
+     * 设置按钮后置图标
+     */
+    /** @en
+     * Set the icon after the button text.
+     */
+    postIcon?: FcrIconType;
+    postIconProps?: Omit<FcrIconProps, 'type'>;
+    /**
+     * 设置按钮加载状态
+     */
+    /** @en
+     * Set the loading status of button.
+     */
+    loading?: boolean;
+    /**
+     * 按钮禁用状态
+     */
+    /** @en
+     * Disabled state of button.
+     */
+    disabled?: boolean;
+    /**
+     * 点击按钮时的回调
+     */
+    /** @en
+     * Set the handler to handle click event.
+     */
+    onClick?: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /**
+     * 将按钮宽度调整为其父宽度的选项，默认为false
+     */
+    /** @en
+     * Option to fit button width to its parent width, default value is false.
+     */
+    block?: boolean;
+    extra?: Partial<PopoverProps>;
+    className?: string;
+    onHover?: (hover: boolean) => void;
+}
+export declare const FcrButton: FC<React.PropsWithChildren<ButtonProps>>;