@charcoal-ui/react 3.5.0 → 3.7.0

package/src/components/TextArea/__snapshots__/TextArea.story.storyshot

@@ -50,33 +50,22 @@ exports[`Storyshots TextArea Auto Height 1`] = `
   margin-bottom: -4px;
 }
 
-.c5:hover:not(:disabled):not([aria-disabled]),
-.c5:hover[aria-disabled=false] {
+.c5:not(:disabled):not([aria-disabled]):hover,
+.c5[aria-disabled='false']:hover {
   color: var(--charcoal-text3-hover);
 }
 
-.c5:active:not(:disabled):not([aria-disabled]),
-.c5:active[aria-disabled=false] {
+.c5:not(:disabled):not([aria-disabled]):active,
+.c5[aria-disabled='false']:active {
   color: var(--charcoal-text3-press);
 }
 
-.c5:not(:disabled):not([aria-disabled]):focus,
-.c5[aria-disabled=false]:focus,
 .c5:not(:disabled):not([aria-disabled]):active,
-.c5[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c5:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c5[aria-disabled=false]:focus:not(:focus-visible),
-.c5:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c5[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
+.c5[aria-disabled='false']:active,
+.c5:not(:disabled):not([aria-disabled]):focus,
+.c5[aria-disabled='false']:focus,
 .c5:not(:disabled):not([aria-disabled]):focus-visible,
-.c5[aria-disabled=false]:focus-visible {
+.c5[aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
@@ -184,13 +173,13 @@ exports[`Storyshots TextArea Auto Height 1`] = `
           "border": 0,
           "clip": "rect(0 0 0 0)",
           "clipPath": "inset(50%)",
-          "height": 1,
-          "margin": "0 -1px -1px 0",
+          "height": "1px",
+          "margin": "-1px",
           "overflow": "hidden",
           "padding": 0,
           "position": "absolute",
           "whiteSpace": "nowrap",
-          "width": 1,
+          "width": "1px",
         }
       }
     >
@@ -198,8 +187,6 @@ exports[`Storyshots TextArea Auto Height 1`] = `
         className="c3"
         htmlFor="test-id"
         id="test-id"
-        onBlur={null}
-        onFocus={null}
       >
         Label
       </label>
@@ -221,7 +208,9 @@ exports[`Storyshots TextArea Auto Height 1`] = `
         onChange={[Function]}
         placeholder="TextArea"
         readOnly={false}
+        required={false}
         rows={4}
+        value=""
       />
     </div>
   </div>
@@ -245,6 +234,8 @@ exports[`Storyshots TextArea Default 1`] = `
   -ms-letter-spacing: inherit;
   letter-spacing: inherit;
   word-spacing: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   font: inherit;
   margin: 0;
   overflow: visible;
@@ -314,33 +305,22 @@ exports[`Storyshots TextArea Default 1`] = `
   margin-bottom: -4px;
 }
 
-.c6:hover:not(:disabled):not([aria-disabled]),
-.c6:hover[aria-disabled=false] {
+.c6:not(:disabled):not([aria-disabled]):hover,
+.c6[aria-disabled='false']:hover {
   color: var(--charcoal-text3-hover);
 }
 
-.c6:active:not(:disabled):not([aria-disabled]),
-.c6:active[aria-disabled=false] {
+.c6:not(:disabled):not([aria-disabled]):active,
+.c6[aria-disabled='false']:active {
   color: var(--charcoal-text3-press);
 }
 
-.c6:not(:disabled):not([aria-disabled]):focus,
-.c6[aria-disabled=false]:focus,
 .c6:not(:disabled):not([aria-disabled]):active,
-.c6[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c6:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c6[aria-disabled=false]:focus:not(:focus-visible),
-.c6:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c6[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
+.c6[aria-disabled='false']:active,
+.c6:not(:disabled):not([aria-disabled]):focus,
+.c6[aria-disabled='false']:focus,
 .c6:not(:disabled):not([aria-disabled]):focus-visible,
-.c6[aria-disabled=false]:focus-visible {
+.c6[aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
@@ -456,13 +436,13 @@ exports[`Storyshots TextArea Default 1`] = `
             "border": 0,
             "clip": "rect(0 0 0 0)",
             "clipPath": "inset(50%)",
-            "height": 1,
-            "margin": "0 -1px -1px 0",
+            "height": "1px",
+            "margin": "-1px",
             "overflow": "hidden",
             "padding": 0,
             "position": "absolute",
             "whiteSpace": "nowrap",
-            "width": 1,
+            "width": "1px",
           }
         }
       >
@@ -470,8 +450,6 @@ exports[`Storyshots TextArea Default 1`] = `
           className="c4"
           htmlFor="test-id"
           id="test-id"
-          onBlur={null}
-          onFocus={null}
         >
           Label
         </label>
@@ -500,7 +478,9 @@ exports[`Storyshots TextArea Default 1`] = `
           onChange={[Function]}
           placeholder="Text Area"
           readOnly={false}
+          required={false}
           rows={4}
+          value=""
         />
       </div>
     </div>
@@ -525,6 +505,8 @@ exports[`Storyshots TextArea Has Count 1`] = `
   -ms-letter-spacing: inherit;
   letter-spacing: inherit;
   word-spacing: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   font: inherit;
   margin: 0;
   overflow: visible;
@@ -594,33 +576,22 @@ exports[`Storyshots TextArea Has Count 1`] = `
   margin-bottom: -4px;
 }
 
-.c6:hover:not(:disabled):not([aria-disabled]),
-.c6:hover[aria-disabled=false] {
+.c6:not(:disabled):not([aria-disabled]):hover,
+.c6[aria-disabled='false']:hover {
   color: var(--charcoal-text3-hover);
 }
 
-.c6:active:not(:disabled):not([aria-disabled]),
-.c6:active[aria-disabled=false] {
+.c6:not(:disabled):not([aria-disabled]):active,
+.c6[aria-disabled='false']:active {
   color: var(--charcoal-text3-press);
 }
 
-.c6:not(:disabled):not([aria-disabled]):focus,
-.c6[aria-disabled=false]:focus,
 .c6:not(:disabled):not([aria-disabled]):active,
-.c6[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c6:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c6[aria-disabled=false]:focus:not(:focus-visible),
-.c6:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c6[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
+.c6[aria-disabled='false']:active,
+.c6:not(:disabled):not([aria-disabled]):focus,
+.c6[aria-disabled='false']:focus,
 .c6:not(:disabled):not([aria-disabled]):focus-visible,
-.c6[aria-disabled=false]:focus-visible {
+.c6[aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
@@ -745,13 +716,13 @@ exports[`Storyshots TextArea Has Count 1`] = `
             "border": 0,
             "clip": "rect(0 0 0 0)",
             "clipPath": "inset(50%)",
-            "height": 1,
-            "margin": "0 -1px -1px 0",
+            "height": "1px",
+            "margin": "-1px",
             "overflow": "hidden",
             "padding": 0,
             "position": "absolute",
             "whiteSpace": "nowrap",
-            "width": 1,
+            "width": "1px",
           }
         }
       >
@@ -759,8 +730,6 @@ exports[`Storyshots TextArea Has Count 1`] = `
           className="c4"
           htmlFor="test-id"
           id="test-id"
-          onBlur={null}
-          onFocus={null}
         >
           Label
         </label>
@@ -790,7 +759,9 @@ exports[`Storyshots TextArea Has Count 1`] = `
           onChange={[Function]}
           placeholder="Text Area"
           readOnly={false}
+          required={false}
           rows={4}
+          value=""
         />
         <span
           className="c10"
@@ -820,6 +791,8 @@ exports[`Storyshots TextArea Has Label 1`] = `
   -ms-letter-spacing: inherit;
   letter-spacing: inherit;
   word-spacing: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   font: inherit;
   margin: 0;
   overflow: visible;
@@ -912,33 +885,22 @@ exports[`Storyshots TextArea Has Label 1`] = `
   margin-bottom: -4px;
 }
 
-.c8:hover:not(:disabled):not([aria-disabled]),
-.c8:hover[aria-disabled=false] {
+.c8:not(:disabled):not([aria-disabled]):hover,
+.c8[aria-disabled='false']:hover {
   color: var(--charcoal-text3-hover);
 }
 
-.c8:active:not(:disabled):not([aria-disabled]),
-.c8:active[aria-disabled=false] {
+.c8:not(:disabled):not([aria-disabled]):active,
+.c8[aria-disabled='false']:active {
   color: var(--charcoal-text3-press);
 }
 
-.c8:not(:disabled):not([aria-disabled]):focus,
-.c8[aria-disabled=false]:focus,
 .c8:not(:disabled):not([aria-disabled]):active,
-.c8[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c8:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c8[aria-disabled=false]:focus:not(:focus-visible),
-.c8:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c8[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
+.c8[aria-disabled='false']:active,
+.c8:not(:disabled):not([aria-disabled]):focus,
+.c8[aria-disabled='false']:focus,
 .c8:not(:disabled):not([aria-disabled]):focus-visible,
-.c8[aria-disabled=false]:focus-visible {
+.c8[aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
@@ -1100,7 +1062,9 @@ exports[`Storyshots TextArea Has Label 1`] = `
           onChange={[Function]}
           placeholder="Text Area"
           readOnly={false}
+          required={false}
           rows={4}
+          value=""
         />
       </div>
       <p

package/src/components/TextField/TextField.story.tsx

@@ -1,10 +1,10 @@
-import { action } from '@storybook/addon-actions'
 import styled from 'styled-components'
 import { Story } from '../../_lib/compat'
 import Clickable from '../Clickable'
 import TextField, { TextFieldProps } from '.'
 import { px } from '@charcoal-ui/utils'
 import IconButton from '../IconButton'
+import { useCallback, useState } from 'react'
 
 export default {
   title: 'TextField',
@@ -30,9 +30,7 @@ const Template: Story<Partial<TextFieldProps>> = (args) => (
     <TextField
       label="Label"
       requiredText="*必須"
-      subLabel={
-        <Clickable onClick={action('label-click')}>Text Link</Clickable>
-      }
+      subLabel={<Clickable>Text Link</Clickable>}
       placeholder="TextField"
       {...args}
     />
@@ -64,21 +62,40 @@ HasAffix.args = {
   suffix: '.png',
 }
 
-export const PrefixIcon: Story<Partial<TextFieldProps>> = (args) => (
-  <TextField
-    label="Label"
-    placeholder="作品を検索"
-    prefix={
-      <PrefixIconWrap>
-        <pixiv-icon name="16/Search" />
-      </PrefixIconWrap>
-    }
-    suffix={<IconButton variant="Overlay" icon={'16/Remove'} size="XS" />}
-    {...args}
-  />
-)
+export const PrefixIcon: Story<Partial<TextFieldProps>> = (args) => {
+  const [value, setValue] = useState('')
+  const handleChange = useCallback((value: string) => {
+    setValue(value)
+  }, [])
+  const handleClear = useCallback(() => {
+    setValue('')
+  }, [])
+  return (
+    <TextField
+      {...args}
+      label="Label"
+      placeholder="作品を検索"
+      value={value}
+      onChange={handleChange}
+      prefix={
+        <PrefixIconWrap>
+          <pixiv-icon name="16/Search" />
+        </PrefixIconWrap>
+      }
+      suffix={
+        <IconButton
+          variant="Overlay"
+          icon={'16/Remove'}
+          size="XS"
+          onClick={handleClear}
+        />
+      }
+    />
+  )
+}
 
 const PrefixIconWrap = styled.div`
-  height: 16px;
+  display: flex;
+  align-items: center;
   color: ${({ theme }) => theme.color.text3};
 `