瀏覽代碼

Add more stories for text inputs

Add stories for components inside fieldsets.
refactor/pridepack-storybook
TheoryOfNekomata 3 年之前
父節點
當前提交
a330c7ffdd
共有 4 個檔案被更改,包括 46 行新增39 行删除
  1. +16
    -0
      packages/react-common/src/components/MultilineTextInput/MultilineTextInput.stories.tsx
  2. +0
    -0
      packages/react-common/src/components/MultilineTextInput/MultilineTextInput.test.tsx
  3. +14
    -39
      packages/react-common/src/components/MultilineTextInput/index.tsx
  4. +16
    -0
      packages/react-common/src/components/TextInput/TextInput.stories.tsx

+ 16
- 0
packages/react-common/src/components/MultilineTextInput/MultilineTextInput.stories.tsx 查看文件

@@ -123,3 +123,19 @@ WithLabelHintAndIndicatorLarge.args = {
indicator: 'A',
size: MultilineTextInputSize.LARGE,
}

export const DisabledWithinFieldset: Story<Props> = ({ ref, disabled, ...args }) => (
<fieldset
disabled={disabled}
>
<MultilineTextInput
{...args}
/>
</fieldset>
)
DisabledWithinFieldset.args = {
border: true,
label: 'Foo',
hint: '(example value)',
disabled: true,
}

packages/react-common/src/components/MultilineTextInput/TextInput.test.tsx → packages/react-common/src/components/MultilineTextInput/MultilineTextInput.test.tsx 查看文件


+ 14
- 39
packages/react-common/src/components/MultilineTextInput/index.tsx 查看文件

@@ -48,6 +48,9 @@ const ComponentBase = styled('div')({
':focus-within': {
'--color-accent': 'var(--color-active, Highlight)',
},
'fieldset[disabled] &': {
opacity: 0.5,
},
})

ComponentBase.displayName = 'div'
@@ -114,38 +117,6 @@ const Border = styled('span')({
},
})

const Input = styled('input')({
display: 'block',
verticalAlign: 'top',
paddingTop: 0,
paddingBottom: 0,
boxSizing: 'border-box',
position: 'relative',
border: 0,
borderRadius: 'inherit',
margin: 0,
font: 'inherit',
minHeight: '4rem',
minWidth: '8rem',
maxWidth: '100%',
width: '100%',
zIndex: 1,
transitionProperty: 'background-color, color',
':focus': {
outline: 0,
color: 'var(--color-fg, black)',
},
':disabled': {
cursor: 'not-allowed',
},
'@media only screen': {
backgroundColor: 'var(--color-bg, white)',
color: 'var(--color-fg, black)',
},
})

Input.displayName = 'input'

const TextArea = styled('textarea')({
display: 'block',
verticalAlign: 'top',
@@ -164,10 +135,16 @@ const TextArea = styled('textarea')({
zIndex: 1,
transitionProperty: 'background-color, color',
resize: 'none',
lineHeight: 'normal',
':focus': {
outline: 0,
color: 'var(--color-fg, black)',
},
':disabled': {
cursor: 'not-allowed',
},
'@media only screen': {
backgroundColor: 'var(--color-bg, white)',
color: 'var(--color-fg, black)',
},
})
@@ -259,19 +236,16 @@ export const MultilineTextInput = React.forwardRef<HTMLTextAreaElement, Props>(
{
label = '',
hint = '',
indicator = null,
size = MultilineTextInputSize.MEDIUM,
disabled = false,
rows = 3,
indicator = null,
border = false,
onChange,
onFocus,
onBlur,
alternate = false,
block = false,
disabled = false,
rows = 3,
defaultValue,
value,
name,
block = false,
...etcProps
},
ref,
@@ -320,6 +294,7 @@ export const MultilineTextInput = React.forwardRef<HTMLTextAreaElement, Props>(
defaultValue={defaultValue}
value={value}
name={name}
rows={rows}
/>
</CaptureArea>
{hint && (


+ 16
- 0
packages/react-common/src/components/TextInput/TextInput.stories.tsx 查看文件

@@ -123,3 +123,19 @@ WithLabelHintAndIndicatorLarge.args = {
indicator: 'A',
size: TextInputSize.LARGE,
}

export const DisabledWithinFieldset: Story<Props> = ({ ref, disabled, ...args }) => (
<fieldset
disabled={disabled}
>
<TextInput
{...args}
/>
</fieldset>
)
DisabledWithinFieldset.args = {
border: true,
label: 'Foo',
hint: '(example value)',
disabled: true,
}

Loading…
取消
儲存