Add more stories for text inputs

Add stories for components inside fieldsets.

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/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 && (

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,
+}