kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-02-02 17:18:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(button-group): add the border-color of light types

Browse Source 
chore: update snapshots
This commit is contained in:
unix
2020-05-15 20:41:51 +08:00
parent c57ee5b939
commit 0e0a43720c
3 changed files with 27 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/button-group/__tests__/__snapshots__/index.test.tsx.snap
View File

@@ -20,7 +20,7 @@ exports[`ButtonGroup buttons should be displayed vertically 1`] = `
text-align: center;
white-space: nowrap;
transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,
border 200ms ease 0ms;
border 200ms ease 0ms, color 200ms ease 0ms;
position: relative;
overflow: hidden;
color: #666;
@@ -80,7 +80,7 @@ exports[`ButtonGroup buttons should be displayed vertically 1`] = `
text-align: center;
white-space: nowrap;
transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,
border 200ms ease 0ms;
border 200ms ease 0ms, color 200ms ease 0ms;
position: relative;
overflow: hidden;
color: #666;
@@ -188,7 +188,7 @@ exports[`ButtonGroup props should be passed to each button 1`] = `
text-align: center;
white-space: nowrap;
transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,
border 200ms ease 0ms;
border 200ms ease 0ms, color 200ms ease 0ms;
position: relative;
overflow: hidden;
color: #fff;
@@ -296,7 +296,7 @@ exports[`ButtonGroup props should be passed to each button 2`] = `
text-align: center;
white-space: nowrap;
transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,
border 200ms ease 0ms;
border 200ms ease 0ms, color 200ms ease 0ms;
position: relative;
overflow: hidden;
color: #fff;
@@ -404,7 +404,7 @@ exports[`ButtonGroup should render correctly 1`] = `
text-align: center;
white-space: nowrap;
transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,
border 200ms ease 0ms;
border 200ms ease 0ms, color 200ms ease 0ms;
position: relative;
overflow: hidden;
color: #666;

39
components/button-group/button-group.tsx
View File

@@ -3,7 +3,7 @@ import useTheme from '../styles/use-theme'
import withDefaults from '../utils/with-defaults'
import { NormalSizes, ButtonTypes } from '../utils/prop-types'
import { ButtonGroupContext, ButtonGroupConfig } from './button-group-context'
import { getButtonColors } from '../button/styles'
import { ZeitUIThemesPalette } from 'components/styles/themes'
interface Props {
disabled?: boolean
@@ -26,16 +26,23 @@ const defaultProps = {
type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
export type ButtonGroupProps = Props & typeof defaultProps & NativeAttrs
const ButtonGroup: React.FC<React.PropsWithChildren<ButtonGroupProps>> = ({
disabled,
size,
type,
ghost,
vertical,
children,
className,
}) => {
const getGroupBorderColors = (palette: ZeitUIThemesPalette, props: ButtonGroupProps): string => {
const { ghost, type } = props
if (!ghost && type !== 'default') return palette.background
const colors: { [key in ButtonTypes]?: string } = {
default: palette.border,
success: palette.success,
secondary: palette.secondary,
error: palette.error,
warning: palette.warning,
}
const withoutLightType = type.replace('-light', '') as ButtonTypes
return colors[withoutLightType] || (colors.default as string)
}
const ButtonGroup: React.FC<React.PropsWithChildren<ButtonGroupProps>> = groupProps => {
const theme = useTheme()
const { disabled, size, type, ghost, vertical, children, className, ...props } = groupProps
const initialValue = useMemo<ButtonGroupConfig>(
() => ({
disabled,
@@ -47,19 +54,13 @@ const ButtonGroup: React.FC<React.PropsWithChildren<ButtonGroupProps>> = ({
[disabled, size, type],
)
const { border } = useMemo(() => {
const results = getButtonColors(theme, type, disabled, ghost)
if (!ghost && type !== 'default')
return {
...results,
border: theme.palette.background,
}
return results
const border = useMemo(() => {
return getGroupBorderColors(theme.palette, groupProps)
}, [theme, type, disabled, ghost])
return (
<ButtonGroupContext.Provider value={initialValue}>
<div className={`btn-group ${vertical ? 'vertical' : 'horizontal'} ${className}`}>
<div className={`btn-group ${vertical ? 'vertical' : 'horizontal'} ${className}`} {...props}>
{children}
<style jsx>{`
.btn-group {

4
components/toast/__tests__/__snapshots__/index.test.tsx.snap
View File

@@ -20,7 +20,7 @@ exports[`UseToast should render different actions 1`] = `
text-align: center;
white-space: nowrap;
transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,
border 200ms ease 0ms;
border 200ms ease 0ms, color 200ms ease 0ms;
position: relative;
overflow: hidden;
color: #fff;
@@ -80,7 +80,7 @@ exports[`UseToast should render different actions 1`] = `
text-align: center;
white-space: nowrap;
transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,
border 200ms ease 0ms;
border 200ms ease 0ms, color 200ms ease 0ms;
position: relative;
overflow: hidden;
color: #666;