"
`;
+
+exports[`Toggle should work with different status 1`] = `
+"
"
+`;
diff --git a/components/toggle/__tests__/index.test.tsx b/components/toggle/__tests__/index.test.tsx
index 5dfffc593..41520d7cc 100644
--- a/components/toggle/__tests__/index.test.tsx
+++ b/components/toggle/__tests__/index.test.tsx
@@ -31,6 +31,18 @@ describe('Toggle', () => {
expect(() => wrapper.unmount()).not.toThrow()
})
+ it('should work with different status', () => {
+ const wrapper = mount(
+
+
+
+
+
+
,
+ )
+ expect(wrapper.html()).toMatchSnapshot()
+ })
+
it('should set toggle follow checked prop', async () => {
const wrapper = mount(
)
expectToggleIsChecked(wrapper)
diff --git a/components/toggle/styles.ts b/components/toggle/styles.ts
new file mode 100644
index 000000000..fbd1ef6f1
--- /dev/null
+++ b/components/toggle/styles.ts
@@ -0,0 +1,32 @@
+import { GeistUIThemesPalette } from '../themes/presets'
+import { NormalTypes } from '../utils/prop-types'
+
+export type SelectColor = {
+ bg: string
+}
+
+export const getColors = (
+ palette: GeistUIThemesPalette,
+ status?: NormalTypes,
+): SelectColor => {
+ const colors: { [key in NormalTypes]: SelectColor } = {
+ default: {
+ bg: palette.success,
+ },
+ secondary: {
+ bg: palette.secondary,
+ },
+ success: {
+ bg: palette.success,
+ },
+ warning: {
+ bg: palette.warning,
+ },
+ error: {
+ bg: palette.error,
+ },
+ }
+
+ if (!status) return colors.default
+ return colors[status]
+}
diff --git a/components/toggle/toggle.tsx b/components/toggle/toggle.tsx
index 82336b380..d932df9c6 100644
--- a/components/toggle/toggle.tsx
+++ b/components/toggle/toggle.tsx
@@ -1,7 +1,8 @@
import React, { useCallback, useEffect, useMemo, useState } from 'react'
import withDefaults from '../utils/with-defaults'
import useTheme from '../use-theme'
-import { NormalSizes } from '../utils/prop-types'
+import { NormalSizes, NormalTypes } from '../utils/prop-types'
+import { getColors } from './styles'
interface ToggleEventTarget {
checked: boolean
@@ -20,11 +21,13 @@ interface Props {
onChange?: (ev: ToggleEvent) => void
disabled?: boolean
size?: NormalSizes
+ type?: NormalTypes
className?: string
}
const defaultProps = {
size: 'medium' as NormalSizes,
+ type: 'default' as NormalTypes,
disabled: false,
initialChecked: false,
className: '',
@@ -66,6 +69,7 @@ const Toggle: React.FC
= ({
disabled,
onChange,
size,
+ type,
className,
...props
}) => {
@@ -91,6 +95,8 @@ const Toggle: React.FC = ({
[disabled, selfChecked, onChange],
)
+ const { bg } = useMemo(() => getColors(theme.palette, type), [theme.palette, type])
+
useEffect(() => {
if (checked === undefined) return
setSelfChecked(checked)
@@ -175,7 +181,7 @@ const Toggle: React.FC = ({
}
.checked {
- background-color: ${theme.palette.success};
+ background-color: ${bg};
}
.checked > .inner {
diff --git a/components/tree/__tests__/index.test.tsx b/components/tree/__tests__/index.test.tsx
index cde755707..5db7f0b1e 100644
--- a/components/tree/__tests__/index.test.tsx
+++ b/components/tree/__tests__/index.test.tsx
@@ -2,7 +2,7 @@ import React from 'react'
import { mount } from 'enzyme'
import { Tree } from 'components'
import { nativeEvent } from 'tests/utils'
-import { FileTreeValue } from 'components/tree/tree'
+import { FileTreeValue } from '../tree'
const mockFiles: Array = [
{
diff --git a/pages/en-us/components/auto-complete.mdx b/pages/en-us/components/auto-complete.mdx
index a971b24b0..4672250f6 100644
--- a/pages/en-us/components/auto-complete.mdx
+++ b/pages/en-us/components/auto-complete.mdx
@@ -26,6 +26,28 @@ AutoComplete control of input field.
`}
/>
+ {
+ const options = [
+ { label: 'London', value: 'london' },
+ { label: 'Sydney', value: 'sydney' },
+ { label: 'Shanghai', value: 'shanghai' },
+ ]
+ return (<>
+
+
+
+
+
+ )
+}
+`}
+/>
+
+
+ default
+
+ success
+
+ warning
+
+ error
+
+`}
+/>
+
Checkbox.Props
-| Attribute | Description | Type | Accepted values | Default |
-| ------------------ | ------------------------------------------- | --------------------- | --------------------------- | ------- |
-| **checked** | checked or not | `boolean` | - | - |
-| **initialChecked** | checked or not on initial | `boolean` | - | `false` |
-| **onChange** | change event handler | `CheckboxEvent` | - | - |
-| **value** | unique identification value (only in group) | `string` | - | - |
-| **disabled** | disable checkbox | `boolean` | - | `false` |
-| **size** | checkbox size | `NormalSizes` | [NormalSizes](#normalsizes) | `small` |
-| ... | native props | `LabelHTMLAttributes` | `'form', 'className', ...` | - |
+| Attribute | Description | Type | Accepted values | Default |
+| ------------------ | ------------------------------------------- | ---------------------------------------------- | ----------------------------- | --------- |
+| **checked** | checked or not | `boolean` | - | - |
+| **initialChecked** | checked or not on initial | `boolean` | - | `false` |
+| **onChange** | change event handler | `CheckboxEvent` | - | - |
+| **value** | unique identification value (only in group) | `string` | - | - |
+| **disabled** | disable checkbox | `boolean` | - | `false` |
+| **size** | checkbox size | `NormalSizes` | [NormalSizes](#normalsizes) | `small` |
+| **type** | current type | `NormalTypes` | [CheckboxType](#checkboxtype) | `default` |
+| **ref** | forwardRef | Ref | - | - |
+| ... | native props | `LabelHTMLAttributes` | `'form', 'className', ...` | - |
Checkbox.Group.Props
@@ -97,6 +116,12 @@ Displays a boolean value.
type NormalSizes = 'mini' | 'small' | 'medium' | 'large'
```
+CheckboxType
+
+```ts
+type CheckboxType = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+```
+
CheckboxEvent
```ts
diff --git a/pages/en-us/components/input.mdx b/pages/en-us/components/input.mdx
index 57bfa55a1..394a3addc 100644
--- a/pages/en-us/components/input.mdx
+++ b/pages/en-us/components/input.mdx
@@ -93,18 +93,18 @@ Retrieve text input from a user.
/>
-
+
-
+
-
+
-
+
`}
/>
@@ -216,7 +216,8 @@ Retrieve text input from a user.
| **initialValue** | initial value | `string` | - | - |
| **placeholder** | placeholder | `string` | - | - |
| **size** | input size | `NormalSizes` | [InputSizes](#inputsizes) | `medium` |
-| **status** | current status | `NormalTypes` | [InputStatus](#inputstatus) | `default` |
+| **type** | current type | `NormalTypes` | [InputType](#inputtype) | `default` |
+| **htmlType** | native type attr | `string` | - | `text` |
| **readOnly** | native attr | `boolean` | - | `false` |
| **disabled** | disable input | `boolean` | - | `false` |
| **clearable** | show clear icon | `boolean` | - | `false` |
@@ -244,10 +245,10 @@ Retrieve text input from a user.
type InputSizes = 'mini' | 'small' | 'medium' | 'large'
```
-InputStatus
+InputType
```ts
-type InputStatus = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+type InputType = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```
useInput
diff --git a/pages/en-us/components/radio.mdx b/pages/en-us/components/radio.mdx
index 304ebd078..6c7ba9ffe 100644
--- a/pages/en-us/components/radio.mdx
+++ b/pages/en-us/components/radio.mdx
@@ -67,6 +67,23 @@ Provides single user input from a selection of options.
`}
/>
+
+ default
+
+ success
+
+ warning
+
+ error
+
+`}
+/>
+
Radio.Props
-| Attribute | Description | Type | Accepted values | Default |
-| ------------ | ----------------------------- | ------------------------- | --------------------------- | -------- |
-| **checked** | selected or not (in single) | `boolean` | - | `false` |
-| **value** | unique ident value (in group) | `string` | - | - |
-| **id** | native attr | `string` | - | - |
-| **disabled** | disable current radio | `boolean` | - | `false` |
-| **size** | radio size | `NormalSizes` | [NormalSizes](#normalsizes) | `medium` |
-| **onChange** | change event | `(e: RadioEvent) => void` | - | - |
-| ... | native props | `InputHTMLAttributes` | `'id', 'className', ...` | - |
+| Attribute | Description | Type | Accepted values | Default |
+| ------------ | ----------------------------- | ---------------------------------------------- | --------------------------- | --------- |
+| **checked** | selected or not (in single) | `boolean` | - | `false` |
+| **value** | unique ident value (in group) | `string` | - | - |
+| **id** | native attr | `string` | - | - |
+| **disabled** | disable current radio | `boolean` | - | `false` |
+| **size** | radio size | `NormalSizes` | [NormalSizes](#normalsizes) | `medium` |
+| **type** | current type | `NormalTypes` | [RadioType](#radiotype) | `default` |
+| **onChange** | change event | `(e: RadioEvent) => void` | - | - |
+| **ref** | forwardRef | Ref | - | - |
+| ... | native props | `InputHTMLAttributes` | `'id', 'className', ...` | - |
Radio.Group.Props
@@ -152,6 +171,12 @@ Provides single user input from a selection of options.
type NormalSizes = 'mini' | 'small' | 'medium' | 'large'
```
+RadioType
+
+```ts
+type RadioType = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+```
+
export default ({ children }) => {children}
diff --git a/pages/en-us/components/select.mdx b/pages/en-us/components/select.mdx
index 3c145ce3c..721934ff8 100644
--- a/pages/en-us/components/select.mdx
+++ b/pages/en-us/components/select.mdx
@@ -26,6 +26,37 @@ Display a dropdown list of items.
`}
/>
+ (
+ <>
+
+
+
+
+
+
+
+
+)
+`}
+/>
+
SelectType
+
+```ts
+type SelectType = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+```
+
export default ({ children }) => {children}
diff --git a/pages/en-us/components/slider.mdx b/pages/en-us/components/slider.mdx
index 1c56f9e94..1f52cbdef 100644
--- a/pages/en-us/components/slider.mdx
+++ b/pages/en-us/components/slider.mdx
@@ -19,6 +19,23 @@ Display the current value and an inputable range.
`}
/>
+
+
+
+
+
+
+
+
+
+`}
+/>
+
Slider.Props
-| Attribute | Description | Type | Accepted values | Default |
-| ---------------- | -------------------------------------------------- | ----------------------- | -------------------------------- | ------- |
-| **initialValue** | initial value | `number` | - | 0 |
-| **value** | slider value | `number` | - | 0 |
-| **step** | the granularity the slider can step through values | `number` | - | 1 |
-| **max** | the maximum value of slider | `number` | - | 100 |
-| **min** | the minimum value of slider | `number` | - | 0 |
+| Attribute | Description | Type | Accepted values | Default |
+| ---------------- | -------------------------------------------------- | ----------------------- | -------------------------------- | --------- |
+| **initialValue** | initial value | `number` | - | 0 |
+| **value** | slider value | `number` | - | 0 |
+| **type** | current type | `NormalTypes` | [SliderType](#slidertype) | `default` |
+| **step** | the granularity the slider can step through values | `number` | - | 1 |
+| **max** | the maximum value of slider | `number` | - | 100 |
+| **min** | the minimum value of slider | `number` | - | 0 |
| **disabled** | disable slider interaction | `boolean` | `false` |
-| **showMarkers** | show each marker | `boolean` | - | `false` |
-| **hideValue** | hide slider value | `boolean` | - | `false` |
-| **onChange** | called when the value of silder changes | `(val: number) => void` | - | - |
-| ... | native props | `HTMLAttributes` | `'id', 'name', 'className', ...` | - |
+| **showMarkers** | show each marker | `boolean` | - | `false` |
+| **hideValue** | hide slider value | `boolean` | - | `false` |
+| **onChange** | called when the value of silder changes | `(val: number) => void` | - | - |
+| ... | native props | `HTMLAttributes` | `'id', 'name', 'className', ...` | - |
+
+SliderType
+
+```ts
+type SliderType = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+```
diff --git a/pages/en-us/components/textarea.mdx b/pages/en-us/components/textarea.mdx
index 2fdb6afd1..df7a3e5c5 100644
--- a/pages/en-us/components/textarea.mdx
+++ b/pages/en-us/components/textarea.mdx
@@ -38,18 +38,18 @@ Retrieve multi-line user input.
/>
-
+
-
+
-
+
-
+
`}
/>
@@ -129,7 +129,7 @@ Retrieve multi-line user input.
| **value** | textarea value | `string` | - | - |
| **initialValue** | textarea value | `string` | - | - |
| **placeholder** | placeholder | `string` | - | - |
-| **status** | current status | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
+| **type** | current type | `NormalTypes` | [TextareaType](#textareatype) | `default` |
| **readOnly** | native attr | `boolean` | - | `false` |
| **disabled** | disable input | `boolean` | - | `false` |
| **width** | set width string | `string` | - | `initial` |
@@ -155,6 +155,12 @@ type useInput = (
}
```
+TextareaType
+
+```ts
+type TextareaType = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+```
+
export default ({ children }) => {children}
diff --git a/pages/en-us/components/toggle.mdx b/pages/en-us/components/toggle.mdx
index fbb0598f2..809024e16 100644
--- a/pages/en-us/components/toggle.mdx
+++ b/pages/en-us/components/toggle.mdx
@@ -21,6 +21,25 @@ Displays a boolean value.
`}
/>
+
+
+
+
+
+
+
+
+
+
+
+`}
+/>
+
Toggle.Props
-| Attribute | Description | Type | Accepted values | Default |
-| ------------------ | ------------------------- | --------------------- | ------------------------------------ | -------- |
-| **checked** | checked or not | `boolean` | - | - |
-| **initialChecked** | checked or not on initial | `boolean` | - | `false` |
-| **onChange** | change event handler | `ToggleEvent` | - | - |
-| **size** | input size | `NormalSizes` | `'mini', 'small', 'medium', 'large'` | `medium` |
-| **disabled** | disable toggle | `boolean` | - | `false` |
-| ... | native props | `LabelHTMLAttributes` | `'from', 'name', 'className', ...` | - |
+| Attribute | Description | Type | Accepted values | Default |
+| ------------------ | ------------------------- | --------------------- | ------------------------------------ | --------- |
+| **checked** | checked or not | `boolean` | - | - |
+| **initialChecked** | checked or not on initial | `boolean` | - | `false` |
+| **onChange** | change event handler | `ToggleEvent` | - | - |
+| **size** | input size | `NormalSizes` | `'mini', 'small', 'medium', 'large'` | `medium` |
+| **type** | current type | `NormalTypes` | [ToggleType](#toggletype) | `default` |
+| **disabled** | disable toggle | `boolean` | - | `false` |
+| ... | native props | `LabelHTMLAttributes` | `'from', 'name', 'className', ...` | - |
ToggleEvent
@@ -88,6 +108,12 @@ export interface ToggleEvent {
}
```
+ToggleType
+
+```ts
+type ToggleType = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+```
+
export default ({ children }) => {children}