@charcoal-ui/react 3.5.0 → 3.7.0

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

@@ -17,6 +17,8 @@ exports[`Storyshots TextField 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;
@@ -86,33 +88,22 @@ exports[`Storyshots TextField 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);
 }
@@ -239,13 +230,13 @@ exports[`Storyshots TextField 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",
           }
         }
       >
@@ -253,8 +244,6 @@ exports[`Storyshots TextField Default 1`] = `
           className="c4"
           htmlFor="test-id"
           id="test-id"
-          onBlur={null}
-          onFocus={null}
         >
           Label
         </label>
@@ -264,7 +253,6 @@ exports[`Storyshots TextField Default 1`] = `
           <span>
             <button
               className="c7"
-              onClick={[Function]}
             >
               Text Link
             </button>
@@ -282,7 +270,9 @@ exports[`Storyshots TextField Default 1`] = `
           onChange={[Function]}
           placeholder="TextField"
           readOnly={false}
+          required={false}
           type="text"
+          value=""
         />
       </div>
     </div>
@@ -340,33 +330,22 @@ exports[`Storyshots TextField Has Affix 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);
 }
@@ -436,7 +415,6 @@ exports[`Storyshots TextField Has Affix 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  padding-left: 8px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -515,13 +493,13 @@ exports[`Storyshots TextField Has Affix 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",
         }
       }
     >
@@ -529,8 +507,6 @@ exports[`Storyshots TextField Has Affix 1`] = `
         className="c3"
         htmlFor="test-id"
         id="test-id"
-        onBlur={null}
-        onFocus={null}
       >
         Label
       </label>
@@ -557,7 +533,9 @@ exports[`Storyshots TextField Has Affix 1`] = `
         onChange={[Function]}
         placeholder="path/to/your/file"
         readOnly={false}
+        required={false}
         type="text"
+        value=""
       />
       <span
         className="c9"
@@ -591,6 +569,8 @@ exports[`Storyshots TextField 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;
@@ -660,33 +640,22 @@ exports[`Storyshots TextField 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);
 }
@@ -831,13 +800,13 @@ exports[`Storyshots TextField 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",
           }
         }
       >
@@ -845,8 +814,6 @@ exports[`Storyshots TextField Has Count 1`] = `
           className="c4"
           htmlFor="test-id"
           id="test-id"
-          onBlur={null}
-          onFocus={null}
         >
           Label
         </label>
@@ -856,7 +823,6 @@ exports[`Storyshots TextField Has Count 1`] = `
           <span>
             <button
               className="c7"
-              onClick={[Function]}
             >
               Text Link
             </button>
@@ -875,7 +841,9 @@ exports[`Storyshots TextField Has Count 1`] = `
           onChange={[Function]}
           placeholder="TextField"
           readOnly={false}
+          required={false}
           type="text"
+          value=""
         />
         <span
           className="c10"
@@ -909,6 +877,8 @@ exports[`Storyshots TextField 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;
@@ -1001,33 +971,22 @@ exports[`Storyshots TextField 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);
 }
@@ -1180,7 +1139,6 @@ exports[`Storyshots TextField Has Label 1`] = `
           <span>
             <button
               className="c9"
-              onClick={[Function]}
             >
               Text Link
             </button>
@@ -1199,7 +1157,9 @@ exports[`Storyshots TextField Has Label 1`] = `
           onChange={[Function]}
           placeholder="TextField"
           readOnly={false}
+          required={false}
           type="text"
+          value=""
         />
       </div>
       <p
@@ -1229,6 +1189,8 @@ exports[`Storyshots TextField Prefix Icon 1`] = `
   -ms-letter-spacing: inherit;
   letter-spacing: inherit;
   word-spacing: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   font: inherit;
   margin: 0;
   overflow: visible;
@@ -1298,33 +1260,22 @@ exports[`Storyshots TextField Prefix Icon 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);
 }
@@ -1370,40 +1321,29 @@ exports[`Storyshots TextField Prefix Icon 1`] = `
   transition: 0.2s background-color,0.2s box-shadow;
 }
 
-.c12:hover:not(:disabled):not([aria-disabled]),
-.c12:hover[aria-disabled=false] {
-  background-color: var(--charcoal-surface4-hover);
+.c12:not(:disabled):not([aria-disabled]):hover,
+.c12[aria-disabled='false']:hover {
+  background-color: var( --charcoal-surface4-hover );
 }
 
-.c12:active:not(:disabled):not([aria-disabled]),
-.c12:active[aria-disabled=false] {
-  background-color: var(--charcoal-surface4-press);
-}
-
-.c12:disabled,
-.c12[aria-disabled]:not([aria-disabled=false]) {
-  opacity: 0.32;
+.c12:not(:disabled):not([aria-disabled]):active,
+.c12[aria-disabled='false']:active {
+  background-color: var( --charcoal-surface4-press );
 }
 
 .c12:not(:disabled):not([aria-disabled]):focus,
-.c12[aria-disabled=false]:focus,
+.c12[aria-disabled='false']:focus,
 .c12:not(:disabled):not([aria-disabled]):active,
-.c12[aria-disabled=false]:active {
+.c12[aria-disabled='false']:active,
+.c12:not(:disabled):not([aria-disabled]):focus-visible,
+.c12[aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c12:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c12[aria-disabled=false]:focus:not(:focus-visible),
-.c12:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c12[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
-.c12:not(:disabled):not([aria-disabled]):focus-visible,
-.c12[aria-disabled=false]:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+.c12:disabled,
+.c12[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
 }
 
 .c0 {
@@ -1456,7 +1396,6 @@ exports[`Storyshots TextField Prefix Icon 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  padding-left: 8px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1517,7 +1456,14 @@ exports[`Storyshots TextField Prefix Icon 1`] = `
 }
 
 .c8 {
-  height: 16px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   color: #858585;
 }
 
@@ -1534,13 +1480,13 @@ exports[`Storyshots TextField Prefix Icon 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",
         }
       }
     >
@@ -1548,8 +1494,6 @@ exports[`Storyshots TextField Prefix Icon 1`] = `
         className="c3"
         htmlFor="test-id"
         id="test-id"
-        onBlur={null}
-        onFocus={null}
       >
         Label
       </label>
@@ -1581,16 +1525,16 @@ exports[`Storyshots TextField Prefix Icon 1`] = `
         onChange={[Function]}
         placeholder="作品を検索"
         readOnly={false}
+        required={false}
         type="text"
+        value=""
       />
       <span
         className="c10"
       >
         <button
           className="c11 c12"
-          height={20}
-          size="XS"
-          width={20}
+          onClick={[Function]}
         >
           <pixiv-icon
             name="16/Remove"

package/src/components/TextField/index.tsx

@@ -213,7 +213,6 @@ const StyledInputContainer = styled.div<{
 
 const PrefixContainer = styled.div`
   display: flex;
-  padding-left: 8px;
   align-items: center;
 `
 

package/dist/components/Checkbox/performance.test.d.ts

@@ -1,4 +0,0 @@
-import 'jest-styled-components';
-import renderer from 'react-test-renderer';
-export declare function render(children: JSX.Element): renderer.ReactTestRendererJSON | renderer.ReactTestRendererJSON[] | null;
-//# sourceMappingURL=performance.test.d.ts.map

package/dist/components/Checkbox/performance.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"performance.test.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/performance.test.tsx"],"names":[],"mappings":"AACA,OAAO,wBAAwB,CAAA;AAG/B,OAAO,QAAQ,MAAM,qBAAqB,CAAA;AAI1C,wBAAgB,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,4EAI3C"}

package/dist/components/Checkbox/snapshot.test.d.ts

@@ -1,2 +0,0 @@
-import 'jest-styled-components';
-//# sourceMappingURL=snapshot.test.d.ts.map

package/dist/components/Checkbox/snapshot.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"snapshot.test.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/snapshot.test.tsx"],"names":[],"mappings":"AAOA,OAAO,wBAAwB,CAAA"}