From 8ed93360d9d64774372d351376470eee306b7463 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Mon, 13 Jul 2020 21:25:12 +0200 Subject: [PATCH] Rework Button (#3171) * Rework Button * Input dropdown buttons * Adjust cursor & border (InputNumber SI, disabled) * first/last-of-byte in Button.Group * Cleanup classes * Cleanup linting * Small cleanups * Swap to actual + /> )} {isTransferOpen && ( @@ -207,8 +194,6 @@ export default React.memo(styled(Sidebar)` position: absolute; right: 0.5rem; top: 0.5rem; - font-size: 1.2rem; - padding: 0.6rem !important; } .ui--AddressMenu-header { @@ -221,16 +206,8 @@ export default React.memo(styled(Sidebar)` margin: -1rem -1rem 1rem -1rem; padding: 1rem; - .ui.button { + .ui--Button { transition: 0.5s all; - - &.secondary { - background-color: #666; - } - } - - .ui.button+.ui.button { - margin-left: 0.5rem !important; } } diff --git a/packages/page-accounts/src/Vanity/Match.tsx b/packages/page-accounts/src/Vanity/Match.tsx index 8ca43d24f7..edc4892128 100644 --- a/packages/page-accounts/src/Vanity/Match.tsx +++ b/packages/page-accounts/src/Vanity/Match.tsx @@ -55,13 +55,11 @@ function Match ({ address, className = '', count, offset, onCreateToggle, onRemo icon='plus' isPrimary onClick={_onCreate} - size='tiny' /> ); } export default React.memo(styled(Button)` - border-radius: 10rem !important; + border: none; + font-size: 0.92857142857rem; // 13/14px + text-align: center; + + &:not(:disabled) { + cursor: pointer; + } + + &:not(.hasLabel) { + padding: 0.75em; - &:not(.icon) { > .ui--Icon { - margin-right: 0.25rem; + height: 1rem; + width: 1rem; } } - &.icon > .ui--Icon { - width: 1rem; + &:not(.isCircular) { + border-radius: 0.25rem; + } + + &:disabled { + cursor: not-allowed; + opacity: 0.15; + } + + &:focus { + outline:0; + } + + &.hasLabel { + padding: 0.75em 1.5em; + + > .ui--Icon { + margin-right: 0.75rem; + } + } + + &.isBasic { + background: white !important; + box-shadow: 0 0 0 1px #ddd; + color: inherit !important; + } + + &.isCircular { + border-radius: 10rem; + } + + &.isFull { + display: block; + width: 100%; } &.isIcon { - background: white !important; - margin: 0 !important; - padding: 0 !important; - - .ui--Icon { - margin: 0 0 0 0.25rem !important; - } + background: transparent; } `); diff --git a/packages/react-components/src/Button/Content.tsx b/packages/react-components/src/Button/Content.tsx deleted file mode 100644 index c8dbdcccdc..0000000000 --- a/packages/react-components/src/Button/Content.tsx +++ /dev/null @@ -1,19 +0,0 @@ -// Copyright 2017-2020 @polkadot/react-components authors & contributors -// This software may be modified and distributed under the terms -// of the Apache-2.0 license. See the LICENSE file for details. - -import React from 'react'; -import SUIButton from 'semantic-ui-react/dist/commonjs/elements/Button/Button'; - -import { ContentProps as Props } from './types'; - -export default function ButtonContent ({ children, hidden, visible }: Props): React.ReactElement { - return ( - - ); -} diff --git a/packages/react-components/src/Button/Group.tsx b/packages/react-components/src/Button/Group.tsx index 530ae9af63..e7f0fbc397 100644 --- a/packages/react-components/src/Button/Group.tsx +++ b/packages/react-components/src/Button/Group.tsx @@ -5,18 +5,12 @@ import { GroupProps } from './types'; import React from 'react'; -import SUIButton from 'semantic-ui-react/dist/commonjs/elements/Button/Button'; import styled from 'styled-components'; -function ButtonGroup ({ children, className = '', isBasic, isCentered }: GroupProps): React.ReactElement { +function ButtonGroup ({ children, className = '', isCentered }: GroupProps): React.ReactElement { return ( -
- - {children} - +
+ {children}
); } @@ -28,11 +22,7 @@ export default React.memo(styled(ButtonGroup)` margin-top: 0.75rem; } - > .ui.buttons { - vertical-align: middle; - } - - &.centered { + &.isCentered { margin-bottom: 0.5rem; text-align: center; } @@ -40,4 +30,18 @@ export default React.memo(styled(ButtonGroup)` &+.ui--Table { margin-top: 1.5rem; } + + .ui--Button { + margin-left: 1px !important; + + &:not(:first-of-type) { + border-bottom-left-radius: 0rem !important; + border-top-left-radius: 0rem !important; + } + + &:not(:last-of-type) { + border-bottom-right-radius: 0 !important; + border-top-right-radius: 0 !important; + } + } `); diff --git a/packages/react-components/src/Button/index.tsx b/packages/react-components/src/Button/index.tsx index f71288a691..2eac47cd0a 100644 --- a/packages/react-components/src/Button/index.tsx +++ b/packages/react-components/src/Button/index.tsx @@ -5,12 +5,10 @@ import { ButtonType } from './types'; import IButton from './Button'; -import Content from './Content'; import Group from './Group'; const Button = IButton as unknown as ButtonType; -Button.Content = Content; Button.Group = Group; export default Button; diff --git a/packages/react-components/src/Button/types.ts b/packages/react-components/src/Button/types.ts index 6dc0d57aea..d7100501eb 100644 --- a/packages/react-components/src/Button/types.ts +++ b/packages/react-components/src/Button/types.ts @@ -11,46 +11,32 @@ export type Button$Callback = () => void | Promise; export interface ButtonProps { children?: React.ReactNode; className?: string; - floated?: 'left' | 'right'; icon?: IconName; isAnimated?: SUIButtonProps['animated']; isBasic?: boolean; isCircular?: boolean; isDisabled?: boolean; - isFluid?: boolean; + isFull?: boolean; isIcon?: boolean; - isLoading?: boolean; isNegative?: boolean; isPositive?: boolean; isPrimary?: boolean; label?: React.ReactNode; - labelPosition?: 'left' | 'right'; onClick?: Button$Callback; onMouseEnter?: Button$Callback; onMouseLeave?: Button$Callback; - ref?: any; - size?: SUIButtonProps['size']; tabIndex?: number; tooltip?: React.ReactNode; } export type DividerProps = BareProps; -export interface ContentProps { - children?: React.ReactNode; - hidden?: boolean; - visible?: boolean; -} - export interface GroupProps { children?: React.ReactNode; className?: string; - isBasic?: boolean; isCentered?: boolean; } export type ButtonType = React.ComponentType & { - Content: React.ComponentType; Group: React.ComponentType; - Or: React.ComponentType; }; diff --git a/packages/react-components/src/Card.tsx b/packages/react-components/src/Card.tsx index eb0fd79541..b29102d562 100644 --- a/packages/react-components/src/Card.tsx +++ b/packages/react-components/src/Card.tsx @@ -15,7 +15,7 @@ interface Props { function Card ({ children, className = '', isError, isSuccess, withBottomMargin }: Props): React.ReactElement { return ( -
+
{children}
); diff --git a/packages/react-components/src/CopyButton.tsx b/packages/react-components/src/CopyButton.tsx index eef482cebb..1f2045c5cf 100644 --- a/packages/react-components/src/CopyButton.tsx +++ b/packages/react-components/src/CopyButton.tsx @@ -17,11 +17,10 @@ interface Props { className?: string; icon?: IconName; isAddress?: boolean; - size?: 'large' | 'small'; value: string; } -function CopyButton ({ children, className, icon = 'copy', isAddress = false, size = 'small', value }: Props): React.ReactElement { +function CopyButton ({ children, className, icon = 'copy', isAddress = false, value }: Props): React.ReactElement { const { t } = useTranslation(); const { queueAction } = useContext(StatusContext); @@ -50,7 +49,6 @@ function CopyButton ({ children, className, icon = 'copy', isAddress = false, si className='icon-button show-on-hover' icon={icon} isPrimary - size={size} />
diff --git a/packages/react-components/src/Dropdown.tsx b/packages/react-components/src/Dropdown.tsx index 2a450c6b89..f8e585a876 100644 --- a/packages/react-components/src/Dropdown.tsx +++ b/packages/react-components/src/Dropdown.tsx @@ -107,11 +107,7 @@ function BaseDropdown