Unverified Commit e3d7d7d1 authored by Guilherme Gazzo's avatar Guilherme Gazzo Committed by GitHub
Browse files

Revert "chore: Refactor button, add missing variants. (#120)" (#178)

This reverts commit 2ff6d9d5.
parent 2ff6d9d5
import PropTypes from 'prop-types';
import React, { forwardRef } from 'react';
import { ButtonVariant } from '..';
import { Box } from '../Box';
const Container = Box.extend('rcx-button', 'button');
export const Button = forwardRef(function Button({
danger,
external,
nude,
ghost,
is = 'button',
primary,
rel,
small,
square,
...props
}, ref) {
const extraProps = (is === 'a' && {
......@@ -22,20 +25,16 @@ export const Button = forwardRef(function Button({
})
|| {};
const mapVariant = () => (primary && danger && 'primary-danger')
|| (primary && ghost && 'ghost-primary')
|| (primary && nude && 'nude-primary')
|| (primary && 'primary')
|| (ghost && danger && 'ghost-danger')
|| (ghost && 'ghost')
|| (nude && danger && 'nude-danger')
|| (nude && danger && 'ghost')
|| (danger && 'danger')
|| 'secondary';
return <ButtonVariant
return <Container
is={is}
variant={mapVariant()}
mod-danger={!primary && danger && !ghost}
mod-ghost={!primary && !danger && ghost}
mod-ghost-danger={!primary && danger && ghost}
mod-primary={primary && !danger && !ghost}
mod-primary-danger={primary && danger && !ghost}
mod-small={small}
mod-square={square}
mod-small-square={small && square}
ref={ref}
{...extraProps}
{...props}
......
%button-text-style {
@include use-text-ellipsis;
@include use-text-style(c2);
%button-secondary-color { // TODO: primitive atomic component
@include as-button (
$background-color: $button-colors-secondary-background-color,
$border-color: $button-colors-secondary-border-color,
$color: $button-colors-secondary-color,
$hover-background-color: $button-colors-secondary-hover-background-color,
$hover-border-color: $button-colors-secondary-hover-border-color,
$active-background-color: $button-colors-secondary-active-background-color,
$active-border-color: $button-colors-secondary-active-border-color,
$focus-background-color: $button-colors-secondary-focus-background-color,
$focus-border-color: $button-colors-secondary-focus-border-color,
$focus-shadow-color: $button-colors-secondary-focus-shadow-color,
$disabled-background-color: $button-colors-secondary-disabled-background-color,
$disabled-border-color: $button-colors-secondary-disabled-border-color,
$disabled-color: $button-colors-secondary-disabled-color,
);
}
.rcx-button {
......@@ -37,36 +49,24 @@
text-decoration: none;
@include clickable;
@include use-text-style(p2);
@include use-text-ellipsis;
&--large {
@include use-text-ellipsis;
@include use-text-style(p2);
@include with-rectangular-size(
$height: $sizes-x40,
$padding-x: $spaces-x16,
$line-height: $text-styles-p1-line-height,
);
@include with-rectangular-size(
$height: $sizes-x40,
$padding-x: calc( #{$spaces-x12} ),
$line-height: $text-styles-p2-line-height,
);
}
@extend %button--secondary;
&--small {
@extend %button-text-style;
@include use-text-style(c2);
@include with-rectangular-size(
$height: $sizes-x28,
$padding-x: #{$spaces-x8},
$line-height: $text-styles-c2-line-height,
);
}
&--medium {
@extend %button-text-style;
@include with-rectangular-size(
$height: $sizes-x36,
$height: $sizes-x32,
$padding-x: $spaces-x12,
$line-height: $text-styles-c2-line-height,
$line-height: $text-styles-c1-line-height,
);
}
......@@ -77,52 +77,41 @@
}
&--small-square {
@include with-squared-size(
$size: $spaces-x28,
);
}
&--medium-square {
@include with-squared-size(
$size: $spaces-x32,
);
}
&--variant {
&-secondary {
@extend %button--secondary;
}
&-danger {
@extend %button--danger;
}
&--danger {
color: $colors-r500;
&-primary {
@extend %button--primary;
}
&-nude-primary {
@extend %button--nude--primary;
&.disabled,
&:disabled {
color: $colors-r100;
}
}
&-nude-danger {
@extend %button--nude--danger;
}
&--primary {
@extend %button--primary;
}
&-primary-danger {
@extend %button--primary--danger;
}
&--primary-danger {
@extend %button--danger;
}
&-ghost {
@extend %button--ghost;
}
&--ghost {
border-color: transparent;
background-color: transparent;
}
&-ghost-danger {
@extend %button--ghost--danger;
}
&--ghost-danger {
color: $colors-r500;
border-color: transparent;
background-color: transparent;
&-ghost-primary {
@extend %button--ghost--primary;
&.disabled,
&:disabled {
color: $colors-r100;
}
}
}
import PropTypes from 'prop-types';
import React, { forwardRef } from 'react';
import { Box } from '../Box';
export const ButtonBase = forwardRef(function ButtonBase({
external,
is = 'button',
rel,
...props
}, ref) {
const extraProps = (is === 'a' && {
rel: external && 'noopener noreferrer',
target: external && '_blank',
})
|| (is === 'button' && {
type: 'button',
})
|| {};
return <Box
componentClassName='rcx-button'
is={is}
ref={ref}
{...extraProps}
{...props}
/>;
});
ButtonBase.displayName = 'ButtonBase';
ButtonBase.propTypes = {
external: PropTypes.bool,
};
export * from './base.js';
export * from './variants.js';
import React from 'react';
import ReactDOM from 'react-dom';
import { ButtonVariant } from '.';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<ButtonVariant />, div);
ReactDOM.unmountComponentAtNode(div);
});
import { action } from '@storybook/addon-actions';
import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
import { PropsVariationSection } from '../../../.storybook/helpers';
// import { Button, Icon } from '../..';
import { ButtonVariant } from '.';
import { Icon } from '../..';
<Meta title='ButtonsNew|ButtonNew' parameters={{ jest: ['Button2/spec'] }} />
# ButtonNew
Indicates an actionable user action.
<Preview>
<Story name='Default'>
<ButtonVariant onClick={action('click')}>Button</ButtonVariant>
</Story>
</Preview>
<Props of={ButtonVariant} />
## Variants
### Primary
<Preview>
<Story name='Primary'>
<ButtonVariant variant="primary">Button</ButtonVariant>
</Story>
</Preview>
### Danger
<Preview>
<Story name='Primary Danger'>
<ButtonVariant variant="primary-danger">Button</ButtonVariant>
</Story>
</Preview>
### Small
<Preview>
<Story name='Small'>
<ButtonVariant small>Button</ButtonVariant>
</Story>
</Preview>
### Medium
<Preview>
<Story name='Medium'>
<ButtonVariant medium>Button</ButtonVariant>
</Story>
</Preview>
### Square
<Preview>
<Story name='Square'>
<ButtonVariant square>
<Icon name='plus' size='20' />
</ButtonVariant>
</Story>
</Preview>
## With icon
<Preview>
<Story name='With Icon'>
<ButtonVariant>
<Icon name='edit' size='16' /> Edit
</ButtonVariant>
</Story>
</Preview>
## As link
<Preview>
<Story name='As Link'>
<ButtonVariant is='a' href='https://rocket.chat' external>Button</ButtonVariant>
</Story>
</Preview>
## States
### Basic
<Story name='States'>
<PropsVariationSection
component={ButtonVariant}
common={{ onClick: action('click') }}
xAxis={{
text: { children: 'Button' },
'square + icon': { square: true, children: <Icon name='circled-arrow-down' size='20' /> },
'text + icon': { children: <><Icon name='circled-arrow-down' size='16' /> Button</> },
}}
yAxis={{
default: {},
hover: { className: 'hover' },
active: { className: 'active' },
focus: { className: 'focus focus-visible' },
disabled: { disabled: true },
}}
/>
</Story>
#### Size Comparison
<Story name='All Sizes'>
<PropsVariationSection
component={ButtonVariant}
common={{ onClick: action('click') }}
xAxis={{
text: { children: 'Button' },
'square + icon': { square: true, children: <Icon name='circled-arrow-down' size='16' /> },
'text + icon': { children: <><Icon name='circled-arrow-down' size='12' /> Button</> },
}}
yAxis={{
small: { small: true },
medium: { medium: true },
default: { },
}}
/>
</Story>
### Danger
<Story name='States of Danger'>
<PropsVariationSection
component={ButtonVariant}
common={{ onClick: action('click'), variant: 'danger' }}
xAxis={{
text: { children: 'Button' },
'square + icon': { square: true, children: <Icon name='circled-arrow-down' size='20' /> },
'text + icon': { children: <><Icon name='circled-arrow-down' size='16' /> Button</> },
}}
yAxis={{
default: {},
hover: { className: 'hover' },
active: { className: 'active' },
focus: { className: 'focus focus-visible' },
disabled: { disabled: true },
}}
/>
</Story>
### Primary
<Story name='States Of Primary Variant'>
<PropsVariationSection
component={ButtonVariant}
common={{ onClick: action('click'), variant: 'primary'}}
xAxis={{
text: { children: 'Button' },
'square + icon': { square: true, children: <Icon name='circled-arrow-down' size='20' /> },
'text + icon': { children: <><Icon name='circled-arrow-down' size='16' /> Button</> },
}}
yAxis={{
default: {},
hover: { className: 'hover' },
active: { className: 'active' },
focus: { className: 'focus focus-visible' },
disabled: { disabled: true },
}}
/>
</Story>
### Primary Danger
<Story name='States Of Primary Danger Variant'>
<PropsVariationSection
component={ButtonVariant}
common={{ onClick: action('click'), variant: 'primary-danger' }}
xAxis={{
text: { children: 'Button' },
'square + icon': { square: true, children: <Icon name='circled-arrow-down' size='x20' /> },
'text + icon': { children: <><Icon name='circled-arrow-down' size='x16' /> Button</> },
}}
yAxis={{
default: {},
hover: { className: 'hover' },
active: { className: 'active' },
focus: { className: 'focus focus-visible' },
disabled: { disabled: true },
}}
/>
</Story>
### Ghost
<Story name='States Of Ghost Variant'>
<PropsVariationSection
component={ButtonVariant}
common={{ onClick: action('click'), variant: 'ghost' }}
xAxis={{
text: { children: 'Button' },
'square + icon': { square: true, children: <Icon name='circled-arrow-down' size='20' /> },
'text + icon': { children: <><Icon name='circled-arrow-down' size='16' /> Button</> },
}}
yAxis={{
default: {},
hover: { className: 'hover' },
active: { className: 'active' },
focus: { className: 'focus focus-visible' },
disabled: { disabled: true },
}}
/>
</Story>
### Ghost Danger
<Story name='States Of Ghost Danger Variant'>
<PropsVariationSection
component={ButtonVariant}
common={{ onClick: action('click'), variant: 'ghost-danger' }}
xAxis={{
text: { children: 'Button' },
'square + icon': { square: true, children: <Icon name='circled-arrow-down' size='20' /> },
'text + icon': { children: <><Icon name='circled-arrow-down' size='16' /> Button</> },
}}
yAxis={{
default: {},
hover: { className: 'hover' },
active: { className: 'active' },
focus: { className: 'focus focus-visible' },
disabled: { disabled: true },
}}
/>
</Story>
### Ghost Primary
<Story name='States Of Ghost Primary Variant'>
<PropsVariationSection
component={ButtonVariant}
common={{ onClick: action('click'), variant: 'ghost-primary' }}
xAxis={{
text: { children: 'Button' },
'square + icon': { square: true, children: <Icon name='circled-arrow-down' size='20' /> },
'text + icon': { children: <><Icon name='circled-arrow-down' size='16' /> Button</> },
}}
yAxis={{
default: {},
hover: { className: 'hover' },
active: { className: 'active' },
focus: { className: 'focus focus-visible' },
disabled: { disabled: true },
}}
/>
</Story>
### Nude Primary
<Story name='States Of Nude Primary Variant'>
<PropsVariationSection
component={ButtonVariant}
common={{ onClick: action('click'), variant: 'nude-primary' }}
xAxis={{
text: { children: 'Button' },
'square + icon': { square: true, children: <Icon name='circled-arrow-down' size='20' /> },
'text + icon': { children: <><Icon name='circled-arrow-down' size='16' /> Button</> },
}}
yAxis={{
default: {},
hover: { className: 'hover' },
active: { className: 'active' },
focus: { className: 'focus focus-visible' },
disabled: { disabled: true },
}}
/>
</Story>
### Nude Danger
<Story name='States Of Nude Danger Variant'>
<PropsVariationSection
component={ButtonVariant}
common={{ onClick: action('click'), variant: 'nude-danger' }}
xAxis={{
text: { children: 'Button' },
'square + icon': { square: true, children: <Icon name='circled-arrow-down' size='20' /> },
'text + icon': { children: <><Icon name='circled-arrow-down' size='16' /> Button</> },
}}
yAxis={{
default: {},
hover: { className: 'hover' },
active: { className: 'active' },
focus: { className: 'focus focus-visible' },
disabled: { disabled: true },
}}
/>
</Story>
import React, { forwardRef } from 'react';
import PropTypes from 'prop-types';
import { ButtonBase } from '.';