fix(Button): redesign of existing Button component for consistency (#3473)
This commit is contained in:
Joe Boccanfuso authored and GitHub committed
1 parent
3dce70e624
commit
cc73f15c8c
47 files changed
+738
-397
No files matched your search
@@ -1,181 +1,89 @@
|
||||
import React, { useRef } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import * as ButtonEnums from './ButtonEnums';
|
||||
|
||||
const baseClasses =
|
||||
'leading-none font-sans text-center justify-center items-center outline-none transition duration-300 ease-in-out focus:outline-none';
|
||||
const sizeClasses = {
|
||||
[ButtonEnums.size.small]: 'h-[26px] text-[13px]',
|
||||
[ButtonEnums.size.medium]: 'h-[32px] text-[14px]',
|
||||
};
|
||||
|
||||
const layoutClasses =
|
||||
'box-content inline-flex flex-row items-center justify-center gap-[5px] justify center px-[10px] outline-none rounded';
|
||||
|
||||
const baseFontTextClasses =
|
||||
'leading-[1.2] font-sans text-center whitespace-nowrap';
|
||||
|
||||
const fontTextClasses = {
|
||||
[ButtonEnums.type.primary]: classnames(baseFontTextClasses, 'font-semibold'),
|
||||
[ButtonEnums.type.secondary]: classnames(baseFontTextClasses, 'font-400'),
|
||||
};
|
||||
|
||||
const baseEnabledEffectClasses =
|
||||
'transition duration-300 ease-in-out focus:outline-none';
|
||||
|
||||
const enabledEffectClasses = {
|
||||
[ButtonEnums.type.primary]: classnames(
|
||||
baseEnabledEffectClasses,
|
||||
'hover:bg-customblue-80 active:bg-customblue-40'
|
||||
),
|
||||
[ButtonEnums.type.secondary]: classnames(
|
||||
baseEnabledEffectClasses,
|
||||
'hover:bg-customblue-50 active:bg-customblue-20'
|
||||
),
|
||||
};
|
||||
|
||||
const baseEnabledClasses = 'text-white';
|
||||
|
||||
const enabledClasses = {
|
||||
[ButtonEnums.type.primary]: classnames(
|
||||
'bg-primary-main',
|
||||
baseEnabledClasses,
|
||||
enabledEffectClasses[ButtonEnums.type.primary]
|
||||
),
|
||||
[ButtonEnums.type.secondary]: classnames(
|
||||
'bg-customblue-30',
|
||||
baseEnabledClasses,
|
||||
enabledEffectClasses[ButtonEnums.type.secondary]
|
||||
),
|
||||
};
|
||||
|
||||
const disabledClasses =
|
||||
'bg-inputfield-placeholder text-common-light cursor-default';
|
||||
|
||||
const defaults = {
|
||||
color: 'default',
|
||||
disabled: false,
|
||||
fullWidth: false,
|
||||
rounded: 'medium',
|
||||
border: 'none',
|
||||
size: 'medium',
|
||||
type: 'button',
|
||||
variant: 'contained',
|
||||
};
|
||||
|
||||
const roundedClasses = {
|
||||
none: '',
|
||||
small: 'rounded',
|
||||
medium: 'rounded-md',
|
||||
large: 'rounded-lg',
|
||||
full: 'rounded-full',
|
||||
};
|
||||
|
||||
const variants = {
|
||||
text: {
|
||||
default:
|
||||
'text-primary-light hover:bg-primary-light hover:text-white active:opacity-80 focus:bg-primary-light focus:text-white',
|
||||
primary:
|
||||
'text-primary-main hover:bg-primary-main hover:text-white active:opacity-80 focus:bg-primary-main focus:text-white',
|
||||
secondary:
|
||||
'text-secondary-light hover:bg-secondary-light hover:text-white active:opacity-80 focus:bg-secondary-light focus:text-white',
|
||||
white:
|
||||
'text-white hover:bg-white hover:text-black active:opacity-80 focus:bg-white focus:text-black',
|
||||
black:
|
||||
'text-black hover:bg-black hover:text-white focus:bg-black focus:text-white active:opacity-80',
|
||||
},
|
||||
outlined: {
|
||||
default:
|
||||
'text-primary-light hover:bg-primary-light hover:text-black focus:text-black focus:bg-primary-light active:opacity-80',
|
||||
primary:
|
||||
'text-primary-main hover:opacity-80 active:opacity-100 focus:opacity-80',
|
||||
secondary:
|
||||
'text-secondary-light hover:opacity-80 active:opacity-100 focus:opacity-80',
|
||||
translucent:
|
||||
'text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
|
||||
white:
|
||||
'text-black hover:bg-primary-main focus:bg-primary-main hover:border-black focus:border-black',
|
||||
black:
|
||||
'text-white hover:bg-primary-main focus:bg-primary-main hover:border-black focus:border-black',
|
||||
primaryActive:
|
||||
'text-primary-active hover:opacity-80 active:opacity-100 focus:opacity-80',
|
||||
primaryLight:
|
||||
'border bg-transparent border-primary-main text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
|
||||
},
|
||||
contained: {
|
||||
default: 'text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
|
||||
primary: 'text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
|
||||
primaryDark:
|
||||
'text-primary-active hover:opacity-80 active:opacity-100 focus:opacity-80',
|
||||
secondary:
|
||||
'text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
|
||||
white: 'text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
|
||||
black: 'text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
|
||||
light:
|
||||
'border text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
|
||||
},
|
||||
disabled: {
|
||||
default: 'cursor-not-allowed opacity-50 text-black',
|
||||
primary: 'cursor-not-allowed opacity-50 text-white',
|
||||
secondary: 'cursor-not-allowed opacity-50 text-white',
|
||||
white: 'cursor-not-allowed opacity-50 text-black',
|
||||
black: 'cursor-not-allowed opacity-50 text-white',
|
||||
light: 'cursor-not-allowed opacity-50 border text-black',
|
||||
},
|
||||
};
|
||||
|
||||
const defaultVariantBackGroundColor = {
|
||||
text: {
|
||||
default: '',
|
||||
primary: '',
|
||||
secondary: '',
|
||||
white: '',
|
||||
black: '',
|
||||
},
|
||||
outlined: {
|
||||
default: 'bg-transparent',
|
||||
primary: 'bg-transparent',
|
||||
secondary: 'bg-transparent',
|
||||
black: 'bg-black',
|
||||
white: '',
|
||||
},
|
||||
contained: {
|
||||
default: 'bg-primary-light',
|
||||
primary: 'bg-primary-main',
|
||||
primaryDark: 'bg-primary-dark',
|
||||
secondary: 'bg-secondary-light',
|
||||
white: 'bg-white',
|
||||
black: 'bg-black',
|
||||
light: 'bg-primary-light',
|
||||
},
|
||||
disabled: {
|
||||
default: 'bg-primary-light',
|
||||
primary: 'bg-primary-main',
|
||||
secondary: 'bg-secondary-light',
|
||||
white: 'bg-white',
|
||||
black: 'bg-black',
|
||||
light: 'bg-primary-light',
|
||||
},
|
||||
};
|
||||
|
||||
const _getVariantClass = (variant, color, bgColor = null) => {
|
||||
const defaultBackgroundColor = defaultVariantBackGroundColor[variant][color];
|
||||
|
||||
if (!bgColor) {
|
||||
bgColor = defaultBackgroundColor;
|
||||
}
|
||||
|
||||
return `${variants[variant][color]} ${bgColor}`;
|
||||
};
|
||||
|
||||
const borderClasses = {
|
||||
none: '',
|
||||
light: 'border border-primary-light',
|
||||
primary: 'border border-primary-main',
|
||||
primaryActive: 'border border-primary-active',
|
||||
secondary: 'border border-secondary-light',
|
||||
white: 'border border-white',
|
||||
black: 'border border-black',
|
||||
};
|
||||
|
||||
const sizeClasses = {
|
||||
small: 'py-2 px-2 text-sm min-w-md',
|
||||
medium: 'py-2 px-2 text-lg min-w-md',
|
||||
large: 'py-2 px-6 text-xl min-w-md',
|
||||
initial: '',
|
||||
};
|
||||
|
||||
const fullWidthClasses = {
|
||||
true: 'flex w-full',
|
||||
false: 'inline-flex',
|
||||
rounded: 'small',
|
||||
size: ButtonEnums.size.medium,
|
||||
type: ButtonEnums.type.primary,
|
||||
};
|
||||
|
||||
const Button = ({
|
||||
children,
|
||||
variant = defaults.variant,
|
||||
color = defaults.color,
|
||||
border = defaults.border,
|
||||
size = defaults.size,
|
||||
rounded = defaults.rounded,
|
||||
disabled = defaults.disabled,
|
||||
type = defaults.type,
|
||||
fullWidth = defaults.fullWidth,
|
||||
bgColor = null,
|
||||
startIcon: startIconProp,
|
||||
endIcon: endIconProp,
|
||||
name,
|
||||
className,
|
||||
onClick,
|
||||
/** TODO: All possible props should be explicitly defined -- avoid spreading props */
|
||||
...rest
|
||||
}) => {
|
||||
const startIcon = startIconProp && (
|
||||
<div className="mr-2">
|
||||
<>
|
||||
{React.cloneElement(startIconProp, {
|
||||
className: classnames('w-4 h-4 fill-current'),
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
const endIcon = endIconProp && (
|
||||
<div className="ml-2">
|
||||
<>
|
||||
{React.cloneElement(endIconProp, {
|
||||
className: classnames('w-4 h-4 fill-current'),
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
const buttonElement = useRef(null);
|
||||
|
||||
@@ -187,12 +95,11 @@ const Button = ({
|
||||
};
|
||||
|
||||
const finalClassName = classnames(
|
||||
baseClasses,
|
||||
_getVariantClass(variant, color, bgColor),
|
||||
borderClasses[border],
|
||||
roundedClasses[rounded],
|
||||
layoutClasses,
|
||||
fontTextClasses[type],
|
||||
disabled ? disabledClasses : enabledClasses[type],
|
||||
sizeClasses[size],
|
||||
fullWidthClasses[fullWidth],
|
||||
children ? 'min-w-[32px]' : '', // minimum width for buttons with text; icon only button does NOT get a minimum width
|
||||
className
|
||||
);
|
||||
|
||||
@@ -202,9 +109,7 @@ const Button = ({
|
||||
disabled={disabled}
|
||||
ref={buttonElement}
|
||||
onClick={handleOnClick}
|
||||
type={type}
|
||||
data-cy={`${name}-btn`}
|
||||
{...rest}
|
||||
>
|
||||
{startIcon}
|
||||
{children}
|
||||
@@ -214,10 +119,11 @@ const Button = ({
|
||||
};
|
||||
|
||||
Button.defaultProps = {
|
||||
color: defaults.color,
|
||||
disabled: false,
|
||||
children: '',
|
||||
onClick: () => {},
|
||||
type: defaults.type,
|
||||
size: defaults.size,
|
||||
};
|
||||
|
||||
Button.propTypes = {
|
||||
@@ -226,39 +132,11 @@ Button.propTypes = {
|
||||
/** Callback to be called when the button is clicked */
|
||||
onClick: PropTypes.func.isRequired,
|
||||
/** Button size */
|
||||
size: PropTypes.oneOf(['small', 'medium', 'large', 'initial', 'inherit']),
|
||||
/** Button corner roundness */
|
||||
rounded: PropTypes.oneOf(['none', 'small', 'medium', 'large', 'full']),
|
||||
variant: PropTypes.oneOf(['text', 'outlined', 'contained', 'disabled']),
|
||||
/* color prop must have all the possible keys of variants defined above */
|
||||
color: PropTypes.oneOf([
|
||||
'default',
|
||||
'primary',
|
||||
'primaryDark',
|
||||
'primaryActive',
|
||||
'secondary',
|
||||
'white',
|
||||
'black',
|
||||
'inherit',
|
||||
'light',
|
||||
'translucent',
|
||||
]),
|
||||
border: PropTypes.oneOf([
|
||||
'none',
|
||||
'light',
|
||||
'default',
|
||||
'primary',
|
||||
'primaryActive',
|
||||
'secondary',
|
||||
'white',
|
||||
'black',
|
||||
]),
|
||||
/** Whether the button should have full width */
|
||||
fullWidth: PropTypes.bool,
|
||||
size: PropTypes.oneOf([ButtonEnums.size.medium, ButtonEnums.size.small]),
|
||||
/** Whether the button should be disabled */
|
||||
disabled: PropTypes.bool,
|
||||
/** Button type */
|
||||
type: PropTypes.string,
|
||||
type: PropTypes.oneOf([ButtonEnums.type.primary, ButtonEnums.type.secondary]),
|
||||
name: PropTypes.string,
|
||||
/** Button start icon name - if any icon is specified */
|
||||
startIcon: PropTypes.node,
|
||||
@@ -266,8 +144,6 @@ Button.propTypes = {
|
||||
endIcon: PropTypes.node,
|
||||
/** Additional TailwindCSS classnames */
|
||||
className: PropTypes.string,
|
||||
/** Background color for the button to override*/
|
||||
bgColor: PropTypes.string,
|
||||
};
|
||||
|
||||
export default Button;
|
||||
@@ -0,0 +1,10 @@
|
||||
enum type {
|
||||
primary = 'primary',
|
||||
secondary = 'secondary',
|
||||
}
|
||||
enum size {
|
||||
medium = 'medium',
|
||||
small = 'small',
|
||||
}
|
||||
|
||||
export { type, size };
|
||||
@@ -1,4 +1,4 @@
|
||||
import Button from '../Button';
|
||||
import Button, {ButtonType, ButtonSize} from '../Button';
|
||||
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
|
||||
import {
|
||||
createComponentTemplate,
|
||||
@@ -24,7 +24,7 @@ export const buttonTemplate = createComponentTemplate(Button);
|
||||
## Overview
|
||||
|
||||
You can use the button component to create a button. It can be used in different
|
||||
ways, the default button is a simple button with a text.
|
||||
ways, the default button is a simple button with text.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Overview" args={{ children: 'Button', color: 'default' }}>
|
||||
@@ -38,37 +38,29 @@ ways, the default button is a simple button with a text.
|
||||
|
||||
## Usage
|
||||
|
||||
### Variants
|
||||
### Types
|
||||
|
||||
There can be different variants of buttons: `text`, `outlined`, `contained`, and
|
||||
`disabled`.
|
||||
There can be different types of buttons: `primary`, and `secondary`.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Variants">
|
||||
<Story name="Types">
|
||||
<div className="flex space-x-2">
|
||||
<Button variant="text">Text Button</Button>
|
||||
<Button variant="outlined">Outlined Button</Button>
|
||||
<Button variant="contained">Contained Button</Button>
|
||||
<Button variant="disabled">Disabled Button</Button>
|
||||
<Button type={ButtonType.primary}>Primary Button</Button>
|
||||
<Button type={ButtonType.secondary}>Secondary Button</Button>
|
||||
</div>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
### Colors
|
||||
### Sizes
|
||||
|
||||
There are different colors for the button: `default`, `primary`, `secondary`,
|
||||
`white`, `black`, `inherit`, `light`.
|
||||
There are different sizes for the button: `small`, and `medium`. The size refers
|
||||
to the button's height.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Colors">
|
||||
<div className="flex space-x-2">
|
||||
<Button color="default">Default Button</Button>
|
||||
<Button color="primary">Primary Button</Button>
|
||||
<Button color="secondary">Secondary Button</Button>
|
||||
<Button color="white">White Button</Button>
|
||||
<Button color="black">Black Button</Button>
|
||||
<Button color="inherit">Inherit Button</Button>
|
||||
<Button color="light">Light Button</Button>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button size={ButtonSize.small}>Small Button</Button>
|
||||
<Button size={ButtonSize.medium}>Medium Button</Button>
|
||||
</div>
|
||||
</Story>
|
||||
</Canvas>
|
||||
@@ -79,19 +71,19 @@ You can mix different props together to create a button.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Custom">
|
||||
<Button color="secondary" variant="outlined">
|
||||
Custom Button
|
||||
<Button type={ButtonType.secondary} size={ButtonSize.small}>
|
||||
Small, Secondary Button
|
||||
</Button>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
### Disabled
|
||||
|
||||
You can disable the button by setting the variant to `disabled`.
|
||||
You can disable the button by setting the `disabled` property to true.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Disabled">
|
||||
<Button variant="disabled">Disabled Button</Button>
|
||||
<Button disabled={true}>Disabled Button</Button>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
@@ -159,18 +151,6 @@ End Icon is the same as start icon, but for the end of the button.
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
### Full width
|
||||
|
||||
You can make the button full width by setting the `fullWidth` prop to `true`.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Full Width">
|
||||
<Button fullWidth color="secondary">
|
||||
Full Width Button
|
||||
</Button>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
## Contribute
|
||||
|
||||
<Footer componentRelativePath="Button/__stories__/button.stories.mdx" />
|
||||
@@ -1,2 +1,5 @@
|
||||
import Button from './Button';
|
||||
import * as ButtonEnums from './ButtonEnums';
|
||||
|
||||
export { ButtonEnums };
|
||||
export default Button;
|
||||
@@ -2,7 +2,7 @@ import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import Button from '../Button';
|
||||
import Button, { ButtonEnums } from '../Button';
|
||||
|
||||
const Footer = ({ actions, className, onSubmit, value }) => {
|
||||
const flex = 'flex items-center justify-end';
|
||||
@@ -12,7 +12,6 @@ const Footer = ({ actions, className, onSubmit, value }) => {
|
||||
<div className={classNames(flex, padding, className)}>
|
||||
{actions.map((action, index) => {
|
||||
const isFirst = index === 0;
|
||||
const isPrimary = action.type === 'primary';
|
||||
|
||||
const onClickHandler = event => onSubmit({ action, value, event });
|
||||
|
||||
@@ -20,9 +19,8 @@ const Footer = ({ actions, className, onSubmit, value }) => {
|
||||
<Button
|
||||
key={index}
|
||||
className={classNames({ 'ml-2': !isFirst }, action.classes)}
|
||||
color={isPrimary ? 'primary' : undefined}
|
||||
type={action.type}
|
||||
onClick={onClickHandler}
|
||||
style={{ transition: 'all .15s ease', height: 34 }}
|
||||
>
|
||||
{action.text}
|
||||
</Button>
|
||||
@@ -42,7 +40,10 @@ Footer.propTypes = {
|
||||
id: PropTypes.string.isRequired,
|
||||
text: PropTypes.string.isRequired,
|
||||
value: PropTypes.any,
|
||||
type: PropTypes.oneOf(['primary', 'secondary', 'cancel']).isRequired,
|
||||
type: PropTypes.oneOf([
|
||||
ButtonEnums.type.primary,
|
||||
ButtonEnums.type.secondary,
|
||||
]).isRequired,
|
||||
classes: PropTypes.arrayOf(PropTypes.string),
|
||||
})
|
||||
).isRequired,
|
||||
|
||||
@@ -0,0 +1,273 @@
|
||||
import React, { useRef } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
|
||||
const baseClasses =
|
||||
'leading-none font-sans text-center justify-center items-center outline-none transition duration-300 ease-in-out focus:outline-none';
|
||||
|
||||
const defaults = {
|
||||
color: 'default',
|
||||
disabled: false,
|
||||
fullWidth: false,
|
||||
rounded: 'medium',
|
||||
border: 'none',
|
||||
size: 'medium',
|
||||
type: 'button',
|
||||
variant: 'contained',
|
||||
};
|
||||
|
||||
const roundedClasses = {
|
||||
none: '',
|
||||
small: 'rounded',
|
||||
medium: 'rounded-md',
|
||||
large: 'rounded-lg',
|
||||
full: 'rounded-full',
|
||||
};
|
||||
|
||||
const variants = {
|
||||
text: {
|
||||
default:
|
||||
'text-primary-light hover:bg-primary-light hover:text-white active:opacity-80 focus:bg-primary-light focus:text-white',
|
||||
primary:
|
||||
'text-primary-main hover:bg-primary-main hover:text-white active:opacity-80 focus:bg-primary-main focus:text-white',
|
||||
secondary:
|
||||
'text-secondary-light hover:bg-secondary-light hover:text-white active:opacity-80 focus:bg-secondary-light focus:text-white',
|
||||
white:
|
||||
'text-white hover:bg-white hover:text-black active:opacity-80 focus:bg-white focus:text-black',
|
||||
black:
|
||||
'text-black hover:bg-black hover:text-white focus:bg-black focus:text-white active:opacity-80',
|
||||
},
|
||||
outlined: {
|
||||
default:
|
||||
'text-primary-light hover:bg-primary-light hover:text-black focus:text-black focus:bg-primary-light active:opacity-80',
|
||||
primary:
|
||||
'text-primary-main hover:opacity-80 active:opacity-100 focus:opacity-80',
|
||||
secondary:
|
||||
'text-secondary-light hover:opacity-80 active:opacity-100 focus:opacity-80',
|
||||
translucent:
|
||||
'text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
|
||||
white:
|
||||
'text-black hover:bg-primary-main focus:bg-primary-main hover:border-black focus:border-black',
|
||||
black:
|
||||
'text-white hover:bg-primary-main focus:bg-primary-main hover:border-black focus:border-black',
|
||||
primaryActive:
|
||||
'text-primary-active hover:opacity-80 active:opacity-100 focus:opacity-80',
|
||||
primaryLight:
|
||||
'border bg-transparent border-primary-main text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
|
||||
},
|
||||
contained: {
|
||||
default: 'text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
|
||||
primary: 'text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
|
||||
primaryDark:
|
||||
'text-primary-active hover:opacity-80 active:opacity-100 focus:opacity-80',
|
||||
secondary:
|
||||
'text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
|
||||
white: 'text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
|
||||
black: 'text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
|
||||
light:
|
||||
'border text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
|
||||
},
|
||||
disabled: {
|
||||
default: 'cursor-not-allowed opacity-50 text-black',
|
||||
primary: 'cursor-not-allowed opacity-50 text-white',
|
||||
secondary: 'cursor-not-allowed opacity-50 text-white',
|
||||
white: 'cursor-not-allowed opacity-50 text-black',
|
||||
black: 'cursor-not-allowed opacity-50 text-white',
|
||||
light: 'cursor-not-allowed opacity-50 border text-black',
|
||||
},
|
||||
};
|
||||
|
||||
const defaultVariantBackGroundColor = {
|
||||
text: {
|
||||
default: '',
|
||||
primary: '',
|
||||
secondary: '',
|
||||
white: '',
|
||||
black: '',
|
||||
},
|
||||
outlined: {
|
||||
default: 'bg-transparent',
|
||||
primary: 'bg-transparent',
|
||||
secondary: 'bg-transparent',
|
||||
black: 'bg-black',
|
||||
white: '',
|
||||
},
|
||||
contained: {
|
||||
default: 'bg-primary-light',
|
||||
primary: 'bg-primary-main',
|
||||
primaryDark: 'bg-primary-dark',
|
||||
secondary: 'bg-secondary-light',
|
||||
white: 'bg-white',
|
||||
black: 'bg-black',
|
||||
light: 'bg-primary-light',
|
||||
},
|
||||
disabled: {
|
||||
default: 'bg-primary-light',
|
||||
primary: 'bg-primary-main',
|
||||
secondary: 'bg-secondary-light',
|
||||
white: 'bg-white',
|
||||
black: 'bg-black',
|
||||
light: 'bg-primary-light',
|
||||
},
|
||||
};
|
||||
|
||||
const _getVariantClass = (variant, color, bgColor = null) => {
|
||||
const defaultBackgroundColor = defaultVariantBackGroundColor[variant][color];
|
||||
|
||||
if (!bgColor) {
|
||||
bgColor = defaultBackgroundColor;
|
||||
}
|
||||
|
||||
return `${variants[variant][color]} ${bgColor}`;
|
||||
};
|
||||
|
||||
const borderClasses = {
|
||||
none: '',
|
||||
light: 'border border-primary-light',
|
||||
primary: 'border border-primary-main',
|
||||
primaryActive: 'border border-primary-active',
|
||||
secondary: 'border border-secondary-light',
|
||||
white: 'border border-white',
|
||||
black: 'border border-black',
|
||||
};
|
||||
|
||||
const sizeClasses = {
|
||||
small: 'py-2 px-2 text-sm min-w-md',
|
||||
medium: 'py-2 px-2 text-lg min-w-md',
|
||||
large: 'py-2 px-6 text-xl min-w-md',
|
||||
initial: '',
|
||||
};
|
||||
|
||||
const fullWidthClasses = {
|
||||
true: 'flex w-full',
|
||||
false: 'inline-flex',
|
||||
};
|
||||
|
||||
const LegacyButton = ({
|
||||
children,
|
||||
variant = defaults.variant,
|
||||
color = defaults.color,
|
||||
border = defaults.border,
|
||||
size = defaults.size,
|
||||
rounded = defaults.rounded,
|
||||
disabled = defaults.disabled,
|
||||
type = defaults.type,
|
||||
fullWidth = defaults.fullWidth,
|
||||
bgColor = null,
|
||||
startIcon: startIconProp,
|
||||
endIcon: endIconProp,
|
||||
name,
|
||||
className,
|
||||
onClick,
|
||||
/** TODO: All possible props should be explicitly defined -- avoid spreading props */
|
||||
...rest
|
||||
}) => {
|
||||
const startIcon = startIconProp && (
|
||||
<div className="mr-2">
|
||||
{React.cloneElement(startIconProp, {
|
||||
className: classnames('w-4 h-4 fill-current'),
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
|
||||
const endIcon = endIconProp && (
|
||||
<div className="ml-2">
|
||||
{React.cloneElement(endIconProp, {
|
||||
className: classnames('w-4 h-4 fill-current'),
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
const buttonElement = useRef(null);
|
||||
|
||||
const handleOnClick = e => {
|
||||
buttonElement.current.blur();
|
||||
if (!disabled) {
|
||||
onClick(e);
|
||||
}
|
||||
};
|
||||
|
||||
const finalClassName = classnames(
|
||||
baseClasses,
|
||||
_getVariantClass(variant, color, bgColor),
|
||||
borderClasses[border],
|
||||
roundedClasses[rounded],
|
||||
sizeClasses[size],
|
||||
fullWidthClasses[fullWidth],
|
||||
className
|
||||
);
|
||||
|
||||
return (
|
||||
<button
|
||||
className={finalClassName}
|
||||
disabled={disabled}
|
||||
ref={buttonElement}
|
||||
onClick={handleOnClick}
|
||||
type={type}
|
||||
data-cy={`${name}-btn`}
|
||||
{...rest}
|
||||
>
|
||||
{startIcon}
|
||||
{children}
|
||||
{endIcon}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
LegacyButton.defaultProps = {
|
||||
color: defaults.color,
|
||||
disabled: false,
|
||||
children: '',
|
||||
onClick: () => {},
|
||||
};
|
||||
|
||||
LegacyButton.propTypes = {
|
||||
/** What is inside the button, can be text or react component */
|
||||
children: PropTypes.node,
|
||||
/** Callback to be called when the button is clicked */
|
||||
onClick: PropTypes.func.isRequired,
|
||||
/** Button size */
|
||||
size: PropTypes.oneOf(['small', 'medium', 'large', 'initial', 'inherit']),
|
||||
/** Button corner roundness */
|
||||
rounded: PropTypes.oneOf(['none', 'small', 'medium', 'large', 'full']),
|
||||
variant: PropTypes.oneOf(['text', 'outlined', 'contained', 'disabled']),
|
||||
/* color prop must have all the possible keys of variants defined above */
|
||||
color: PropTypes.oneOf([
|
||||
'default',
|
||||
'primary',
|
||||
'primaryDark',
|
||||
'primaryActive',
|
||||
'secondary',
|
||||
'white',
|
||||
'black',
|
||||
'inherit',
|
||||
'light',
|
||||
'translucent',
|
||||
]),
|
||||
border: PropTypes.oneOf([
|
||||
'none',
|
||||
'light',
|
||||
'default',
|
||||
'primary',
|
||||
'primaryActive',
|
||||
'secondary',
|
||||
'white',
|
||||
'black',
|
||||
]),
|
||||
/** Whether the button should have full width */
|
||||
fullWidth: PropTypes.bool,
|
||||
/** Whether the button should be disabled */
|
||||
disabled: PropTypes.bool,
|
||||
/** Button type */
|
||||
type: PropTypes.string,
|
||||
name: PropTypes.string,
|
||||
/** Button start icon name - if any icon is specified */
|
||||
startIcon: PropTypes.node,
|
||||
/** Button end icon name - if any icon is specified */
|
||||
endIcon: PropTypes.node,
|
||||
/** Additional TailwindCSS classnames */
|
||||
className: PropTypes.string,
|
||||
/** Background color for the button to override*/
|
||||
bgColor: PropTypes.string,
|
||||
};
|
||||
|
||||
export default LegacyButton;
|
||||
@@ -0,0 +1,176 @@
|
||||
import LegacyButton from '../LegacyButton';
|
||||
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
|
||||
import {
|
||||
createComponentTemplate,
|
||||
createStoryMetaSettings,
|
||||
} from '../../../storybook/functions/create-component-story';
|
||||
|
||||
export const argTypes = {
|
||||
component: LegacyButton,
|
||||
title: 'Components/LegacyButton',
|
||||
};
|
||||
|
||||
<Meta title="Components/LegacyButton" component={LegacyButton} />
|
||||
|
||||
export const buttonTemplate = createComponentTemplate(LegacyButton);
|
||||
|
||||
<Heading title="LegacyButton" componentRelativePath="LegacyButton/LegacyButton.tsx" />
|
||||
|
||||
- [Overview](#overview)
|
||||
- [Props](#props)
|
||||
- [Usage](#usage)
|
||||
- [Contribute](#contribute)
|
||||
|
||||
## Overview
|
||||
|
||||
You can use the legacy button component to create a button. It can be used in different
|
||||
ways, the default button is a simple button with a text.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Overview" args={{ children: 'LegacyButton', color: 'default' }}>
|
||||
{buttonTemplate.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
## Props
|
||||
|
||||
<ArgsTable of={LegacyButton} />
|
||||
|
||||
## Usage
|
||||
|
||||
### Variants
|
||||
|
||||
There can be different variants of buttons: `text`, `outlined`, `contained`, and
|
||||
`disabled`.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Variants">
|
||||
<div className="flex space-x-2">
|
||||
<LegacyButton variant="text">Text LegacyButton</LegacyButton>
|
||||
<LegacyButton variant="outlined">Outlined LegacyButton</LegacyButton>
|
||||
<LegacyButton variant="contained">Contained LegacyButton</LegacyButton>
|
||||
<LegacyButton variant="disabled">Disabled LegacyButton</LegacyButton>
|
||||
</div>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
### Colors
|
||||
|
||||
There are different colors for the legacy button: `default`, `primary`, `secondary`,
|
||||
`white`, `black`, `inherit`, `light`.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Colors">
|
||||
<div className="flex space-x-2">
|
||||
<LegacyButton color="default">Default LegacyButton</LegacyButton>
|
||||
<LegacyButton color="primary">Primary LegacyButton</LegacyButton>
|
||||
<LegacyButton color="secondary">Secondary LegacyButton</LegacyButton>
|
||||
<LegacyButton color="white">White LegacyButton</LegacyButton>
|
||||
<LegacyButton color="black">Black LegacyButton</LegacyButton>
|
||||
<LegacyButton color="inherit">Inherit LegacyButton</LegacyButton>
|
||||
<LegacyButton color="light">Light LegacyButton</LegacyButton>
|
||||
</div>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
### Mixing props
|
||||
|
||||
You can mix different props together to create a legacy button.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Custom">
|
||||
<LegacyButton color="secondary" variant="outlined">
|
||||
Custom LegacyButton
|
||||
</LegacyButton>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
### Disabled
|
||||
|
||||
You can disable the legacy button by setting the variant to `disabled`.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Disabled">
|
||||
<LegacyButton variant="disabled">Disabled LegacyButton</LegacyButton>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
### Start/End Icons
|
||||
|
||||
You can add an icon to the start of the legacy button. It accepts an icon component.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Start Icon">
|
||||
{() => {
|
||||
// svg icon for github
|
||||
const Github = () => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="feather feather-github"
|
||||
>
|
||||
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
return <LegacyButton startIcon={<Github />}>Start Icon LegacyButton</LegacyButton>;
|
||||
}}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
End Icon is the same as start icon, but for the end of the legacy button.
|
||||
|
||||
<Canvas>
|
||||
<Story name="End Icon">
|
||||
{() => {
|
||||
// svg icon for github
|
||||
const Github = () => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="feather feather-github"
|
||||
>
|
||||
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<LegacyButton startIcon={<Github />} endIcon={<Github />}>
|
||||
Start and End Icon LegacyButton
|
||||
</LegacyButton>
|
||||
);
|
||||
}}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
### Full width
|
||||
|
||||
You can make the legacy button full width by setting the `fullWidth` prop to `true`.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Full Width">
|
||||
<LegacyButton fullWidth color="secondary">
|
||||
Full Width LegacyButton
|
||||
</LegacyButton>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
## Contribute
|
||||
|
||||
<Footer componentRelativePath="LegacyButton/__stories__/legacyButton.stories.mdx" />
|
||||
@@ -0,0 +1,2 @@
|
||||
import LegacyButton from './LegacyButton';
|
||||
export default LegacyButton;
|
||||
@@ -6,7 +6,7 @@ import { StringNumber } from '../../types';
|
||||
import LegacyPatientInfo from '../LegacyPatientInfo';
|
||||
import Icon from '../Icon';
|
||||
import ButtonGroup from '../ButtonGroup';
|
||||
import Button from '../Button';
|
||||
import LegacyButton from '../LegacyButton';
|
||||
import LegacyCinePlayer from '../LegacyCinePlayer';
|
||||
|
||||
const LegacyViewportActionBar = ({
|
||||
@@ -104,23 +104,24 @@ const LegacyViewportActionBar = ({
|
||||
</div>
|
||||
{showNavArrows && !showCine && (
|
||||
<div className="mt-2" style={{ pointerEvents: 'all' }}>
|
||||
{/* TODO Revisit design of ButtonGroup later - for now use LegacyButton for its children.*/}
|
||||
<ButtonGroup>
|
||||
<Button
|
||||
<LegacyButton
|
||||
size="initial"
|
||||
className="px-2 py-1 bg-black"
|
||||
border="light"
|
||||
onClick={() => onArrowsClick('left')}
|
||||
>
|
||||
<Icon name="chevron-left" className="w-4 text-white" />
|
||||
</Button>
|
||||
<Button
|
||||
</LegacyButton>
|
||||
<LegacyButton
|
||||
size="initial"
|
||||
border="light"
|
||||
className="px-2 py-1 bg-black"
|
||||
onClick={() => onArrowsClick('right')}
|
||||
>
|
||||
<Icon name="chevron-right" className="w-4 text-white" />
|
||||
</Button>
|
||||
</LegacyButton>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react';
|
||||
import classnames from 'classnames';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import Button from '../Button';
|
||||
import Button, { ButtonEnums } from '../Button';
|
||||
import Icon from '../Icon';
|
||||
|
||||
const Notification = ({
|
||||
@@ -42,7 +42,7 @@ const Notification = ({
|
||||
color: 'text-yellow-500',
|
||||
},
|
||||
info: {
|
||||
icon: 'info',
|
||||
icon: 'notifications-info',
|
||||
color: 'text-primary-main',
|
||||
},
|
||||
success: {
|
||||
@@ -65,24 +65,23 @@ const Notification = ({
|
||||
return (
|
||||
<div
|
||||
ref={notificationRef}
|
||||
className="flex flex-col p-2 mx-2 mt-2 rounded bg-common-bright"
|
||||
className="flex flex-col p-2 mx-2 mt-2 border-2 rounded-md border-customblue-10 bg-customblue-400"
|
||||
data-cy={id}
|
||||
>
|
||||
<div className="flex grow">
|
||||
<Icon name={icon} className={classnames('w-5', color)} />
|
||||
<span className="ml-2 text-base text-black">{message}</span>
|
||||
<div className="flex items-center grow">
|
||||
<Icon name={icon} className={classnames('w-6 h-6', color)} />
|
||||
<span className="ml-2 text-[13px] text-black">{message}</span>
|
||||
</div>
|
||||
<div className="flex justify-end mt-2">
|
||||
<div className="flex flex-wrap gap-2 justify-end mt-2">
|
||||
{actions.map((action, index) => {
|
||||
const isFirst = index === 0;
|
||||
const isPrimary = action.type === 'primary';
|
||||
|
||||
return (
|
||||
<Button
|
||||
data-cy={action.id}
|
||||
name={action.id}
|
||||
key={index}
|
||||
className={classnames({ 'ml-2': !isFirst })}
|
||||
color={isPrimary ? 'primary' : undefined}
|
||||
type={action.type}
|
||||
size={action.size || ButtonEnums.size.small}
|
||||
onClick={() => {
|
||||
onSubmit(action.value);
|
||||
}}
|
||||
@@ -108,7 +107,11 @@ Notification.propTypes = {
|
||||
PropTypes.shape({
|
||||
text: PropTypes.string.isRequired,
|
||||
value: PropTypes.any.isRequired,
|
||||
type: PropTypes.oneOf(['primary', 'secondary', 'cancel']).isRequired,
|
||||
type: PropTypes.oneOf([
|
||||
ButtonEnums.type.primary,
|
||||
ButtonEnums.type.secondary,
|
||||
]).isRequired,
|
||||
size: PropTypes.oneOf([ButtonEnums.size.small, ButtonEnums.size.medium]),
|
||||
})
|
||||
).isRequired,
|
||||
onSubmit: PropTypes.func.isRequired,
|
||||
|
||||
@@ -13,7 +13,7 @@ import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
|
||||
import { PanelService, ServicesManager, Types } from '@ohif/core';
|
||||
|
||||
import Button from '../Button';
|
||||
import LegacyButton from '../LegacyButton';
|
||||
import Icon from '../Icon';
|
||||
import IconButton from '../IconButton';
|
||||
import Tooltip from '../Tooltip';
|
||||
@@ -234,7 +234,8 @@ const SidePanel = ({
|
||||
}}
|
||||
data-cy={`side-panel-header-${side}`}
|
||||
>
|
||||
<Button
|
||||
{/* TODO This should be redesigned to not be a button. */}
|
||||
<LegacyButton
|
||||
variant="text"
|
||||
color="inherit"
|
||||
border="none"
|
||||
@@ -254,7 +255,7 @@ const SidePanel = ({
|
||||
<span className="text-primary-active">
|
||||
{tabs.length === 1 && (t(tabs[activeTabIndex].label) as string)}
|
||||
</span>
|
||||
</Button>
|
||||
</LegacyButton>
|
||||
</div>
|
||||
{tabs.length > 1 &&
|
||||
_getMoreThanOneTabLayout(
|
||||
|
||||
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
|
||||
|
||||
import StudyItem from '../StudyItem';
|
||||
import ButtonGroup from '../ButtonGroup';
|
||||
import Button from '../Button';
|
||||
import LegacyButton from '../LegacyButton';
|
||||
import ThumbnailList from '../ThumbnailList';
|
||||
import { StringNumber } from '../../types';
|
||||
|
||||
@@ -81,6 +81,7 @@ const StudyBrowser = ({
|
||||
className="flex flex-row items-center justify-center h-16 p-4 border-b w-100 border-secondary-light bg-primary-dark"
|
||||
data-cy={'studyBrowser-panel'}
|
||||
>
|
||||
{/* TODO Revisit design of ButtonGroup later - for now use LegacyButton for its children.*/}
|
||||
<ButtonGroup variant="outlined" color="secondary" splitBorder={false}>
|
||||
{tabs.map(tab => {
|
||||
const { name, label, studies } = tab;
|
||||
@@ -95,7 +96,7 @@ const StudyBrowser = ({
|
||||
};
|
||||
const color = classStudyBrowser[`${isActive}`];
|
||||
return (
|
||||
<Button
|
||||
<LegacyButton
|
||||
key={name}
|
||||
className={'text-white text-base p-2 min-w-18'}
|
||||
size="initial"
|
||||
@@ -107,7 +108,7 @@ const StudyBrowser = ({
|
||||
disabled={isDisabled}
|
||||
>
|
||||
{t(label)}
|
||||
</Button>
|
||||
</LegacyButton>
|
||||
);
|
||||
})}
|
||||
</ButtonGroup>
|
||||
|
||||
@@ -2,7 +2,7 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import Button from '../Button';
|
||||
import LegacyButton from '../LegacyButton';
|
||||
import Icon from '../Icon';
|
||||
import Typography from '../Typography';
|
||||
import InputGroup from '../InputGroup';
|
||||
@@ -48,8 +48,9 @@ const StudyListFilter = ({
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-row">
|
||||
{/* TODO revisit the completely rounded style of button used for clearing the study list filter - for now use LegacyButton*/}
|
||||
{isFiltering && (
|
||||
<Button
|
||||
<LegacyButton
|
||||
rounded="full"
|
||||
variant="outlined"
|
||||
color="primaryActive"
|
||||
@@ -59,7 +60,7 @@ const StudyListFilter = ({
|
||||
onClick={clearFilters}
|
||||
>
|
||||
{t('ClearFilters')}
|
||||
</Button>
|
||||
</LegacyButton>
|
||||
)}
|
||||
<Typography
|
||||
variant="h4"
|
||||
|
||||
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import Button from '../Button';
|
||||
import LegacyButton from '../LegacyButton';
|
||||
import ButtonGroup from '../ButtonGroup';
|
||||
import Typography from '../Typography';
|
||||
import Select from '../Select';
|
||||
@@ -59,8 +59,9 @@ const StudyListPagination = ({
|
||||
<Typography className="opacity-60 mr-4 text-base">
|
||||
{t('Page')} {currentPage}
|
||||
</Typography>
|
||||
{/* TODO Revisit design of ButtonGroup later - for now use LegacyButton for its children.*/}
|
||||
<ButtonGroup>
|
||||
<Button
|
||||
<LegacyButton
|
||||
size="initial"
|
||||
className="px-4 py-2 text-base"
|
||||
color="translucent"
|
||||
@@ -69,8 +70,8 @@ const StudyListPagination = ({
|
||||
onClick={() => navigateToPage(1)}
|
||||
>
|
||||
{`<<`}
|
||||
</Button>
|
||||
<Button
|
||||
</LegacyButton>
|
||||
<LegacyButton
|
||||
size="initial"
|
||||
className="py-2 px-2 text-base"
|
||||
color="translucent"
|
||||
@@ -79,8 +80,8 @@ const StudyListPagination = ({
|
||||
onClick={() => navigateToPage(currentPage - 1)}
|
||||
>
|
||||
{t('Previous')}
|
||||
</Button>
|
||||
<Button
|
||||
</LegacyButton>
|
||||
<LegacyButton
|
||||
size="initial"
|
||||
className="py-2 px-4 text-base"
|
||||
color="translucent"
|
||||
@@ -89,7 +90,7 @@ const StudyListPagination = ({
|
||||
onClick={() => navigateToPage(currentPage + 1)}
|
||||
>
|
||||
{t('Next')}
|
||||
</Button>
|
||||
</LegacyButton>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,6 +6,7 @@ import Select from '../Select';
|
||||
import Typography from '../Typography';
|
||||
import Button from '../Button';
|
||||
import HotkeysPreferences from '../HotkeysPreferences';
|
||||
import { ButtonEnums } from '../Button';
|
||||
|
||||
const UserPreferences = ({
|
||||
availableLanguages,
|
||||
@@ -104,22 +105,18 @@ const UserPreferences = ({
|
||||
</Section>
|
||||
<div className="flex flex-row justify-between">
|
||||
<Button
|
||||
variant="outlined"
|
||||
border="light"
|
||||
type={ButtonEnums.type.secondary}
|
||||
onClick={onResetHandler}
|
||||
disabled={disabled}
|
||||
>
|
||||
{t('Reset to Defaults')}
|
||||
</Button>
|
||||
<div className="flex flex-row">
|
||||
<Button variant="outlined" border="light" onClick={onCancelHandler}>
|
||||
<Button type={ButtonEnums.type.secondary} onClick={onCancelHandler}>
|
||||
{t('Cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
disabled={state.isDisabled}
|
||||
color="light"
|
||||
border="light"
|
||||
className="ml-2"
|
||||
onClick={onSubmitHandler}
|
||||
>
|
||||
|
||||
@@ -14,7 +14,7 @@ import IconButton from '../IconButton';
|
||||
import Icon from '../Icon';
|
||||
import Select from '../Select';
|
||||
import InputLabelWrapper from '../InputLabelWrapper';
|
||||
import Button from '../Button';
|
||||
import Button, { ButtonEnums } from '../Button';
|
||||
|
||||
const FILE_TYPE_OPTIONS = [
|
||||
{
|
||||
@@ -401,13 +401,9 @@ const ViewportDownloadForm = ({
|
||||
|
||||
<div className="flex justify-end mt-4">
|
||||
<Button
|
||||
data-cy="cancel-btn"
|
||||
variant="outlined"
|
||||
size="initial"
|
||||
color="black"
|
||||
border="secondary"
|
||||
name="cancel"
|
||||
type={ButtonEnums.type.secondary}
|
||||
onClick={onClose}
|
||||
className="p-2"
|
||||
>
|
||||
{t('Cancel')}
|
||||
</Button>
|
||||
@@ -415,8 +411,8 @@ const ViewportDownloadForm = ({
|
||||
className="ml-2"
|
||||
disabled={hasError}
|
||||
onClick={downloadImage}
|
||||
color="primary"
|
||||
data-cy="download-btn"
|
||||
type={ButtonEnums.type.primary}
|
||||
name={'download'}
|
||||
>
|
||||
{t('Download')}
|
||||
</Button>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import AboutModal from './AboutModal';
|
||||
import Button from './Button';
|
||||
import ButtonGroup from './ButtonGroup';
|
||||
import { ButtonEnums } from './Button';
|
||||
import ContextMenu from './ContextMenu';
|
||||
import CinePlayer from './CinePlayer';
|
||||
import DateRange from './DateRange';
|
||||
@@ -18,6 +19,7 @@ import InputMultiSelect from './InputMultiSelect';
|
||||
import InputText from './InputText';
|
||||
import Label from './Label';
|
||||
import LayoutSelector from './LayoutSelector';
|
||||
import LegacyButton from './LegacyButton';
|
||||
import LegacyCinePlayer from './LegacyCinePlayer';
|
||||
import LegacyViewportActionBar from './LegacyViewportActionBar';
|
||||
import MeasurementTable from './MeasurementTable';
|
||||
@@ -80,6 +82,7 @@ export {
|
||||
HotkeysPreferences,
|
||||
Button,
|
||||
ButtonGroup,
|
||||
ButtonEnums,
|
||||
CheckBox,
|
||||
CinePlayer,
|
||||
ContextMenu,
|
||||
@@ -103,6 +106,7 @@ export {
|
||||
ImageScrollbar,
|
||||
Label,
|
||||
LayoutSelector,
|
||||
LegacyButton,
|
||||
LegacyCinePlayer,
|
||||
LegacyViewportActionBar,
|
||||
LoadingIndicatorProgress,
|
||||
|
||||
@@ -42,6 +42,7 @@ export {
|
||||
HotkeysPreferences,
|
||||
Button,
|
||||
ButtonGroup,
|
||||
ButtonEnums,
|
||||
ContextMenu,
|
||||
CinePlayer,
|
||||
DateRange,
|
||||
@@ -62,6 +63,7 @@ export {
|
||||
InputText,
|
||||
Label,
|
||||
LayoutSelector,
|
||||
LegacyButton,
|
||||
LegacyCinePlayer,
|
||||
LegacyViewportActionBar,
|
||||
LoadingIndicatorProgress,
|
||||
|
||||
@@ -63,9 +63,16 @@ module.exports = {
|
||||
},
|
||||
|
||||
customblue: {
|
||||
10: '#0A163F',
|
||||
20: '#0B1F54',
|
||||
30: '#09286e',
|
||||
40: '#0E307F',
|
||||
50: '#0F3A94',
|
||||
80: '#1454D4',
|
||||
100: '#c4fdff',
|
||||
200: '#38daff',
|
||||
300: '#1D204D',
|
||||
400: '#90A0C1',
|
||||
},
|
||||
|
||||
customgray: {
|
||||
|
||||
Reference in new issue
Block a user