Core Components and APIs: list Pressable (#4713)

Author: Simek

docs/components-and-apis.md

@@ -43,6 +43,12 @@ Most apps will end up using one or more of these basic components.
       <p>A component for inputting text into the app via a keyboard.</p>
     </a>
   </div>
+  <div className="component">
+    <a href="./pressable">
+      <h3>Pressable</h3>
+      <p>A wrapper component that can detect various stages of press interactions on any of its children.</p>
+    </a>
+  </div>
   <div className="component">
     <a href="./scrollview">
       <h3>ScrollView</h3>

website/src/css/customTheme.scss

@@ -1770,8 +1770,9 @@ td .label {
 /* Components grid */
 
 article .component-grid {
-  max-width: 800px;
   margin-bottom: 22px;
+  display: grid;
+  grid-column-gap: 22px;
 
   .component {
     border: 1px solid var(--ifm-color-emphasis-500);
@@ -1783,21 +1784,22 @@ article .component-grid {
     overflow: hidden;
 
     &:hover {
-      transform: scale(1.05);
+      transform: scale(1.033);
     }
 
     > a {
       display: block;
       height: 100%;
       border-bottom: none;
+      background: none !important;
     }
 
     h3 {
       font-size: 16px;
       font-weight: 600;
       margin: 0;
       padding: 0 10px;
-      background-color: var(--home-button-primary);
+      background-color: var(--ifm-color-info-darkest);
       color: var(--home-button-primary-text);
       line-height: 36px;
 
@@ -1807,14 +1809,15 @@ article .component-grid {
     }
 
     p {
-      padding: 10px;
+      padding: 6px 10px 8px;
       font-size: 15px;
       margin: 2px;
       color: var(--ifm-font-color-base);
 
       code {
         font-size: 15px;
         padding: 0 1px;
+        top: 0;
       }
     }
   }
@@ -1824,13 +1827,6 @@ html[data-theme="dark"] .component {
   border: 1px solid var(--ifm-color-emphasis-200);
 }
 
-@supports (display: grid) {
-  article .component-grid {
-    display: grid;
-    grid-column-gap: 22px;
-  }
-}
-
 @media only screen and (min-width: 768px) {
   article .component-grid.component-grid-border {
     border-bottom: 1px solid var(--ifm-table-border-color);
@@ -1843,22 +1839,20 @@ html[data-theme="dark"] .component {
     vertical-align: top;
   }
 
-  @supports (display: grid) {
-    article .component-grid {
-      grid-template-columns: repeat(2, 1fr);
-    }
+  article .component-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
 
-    @media only screen and (min-width: 1440px) {
-      article .component-grid {
-        grid-template-columns: repeat(3, 1fr);
-      }
+  @media only screen and (min-width: 1440px) {
+    article .component-grid {
+      grid-template-columns: repeat(3, 1fr);
     }
+  }
 
-    article .component {
-      width: auto;
-      height: auto;
-      margin: 0;
-    }
+  article .component {
+    width: auto;
+    height: auto;
+    margin: 0;
   }
 }
 

website/versioned_docs/version-0.77/components-and-apis.md

@@ -43,6 +43,12 @@ Most apps will end up using one or more of these basic components.
       <p>A component for inputting text into the app via a keyboard.</p>
     </a>
   </div>
+  <div className="component">
+    <a href="./pressable">
+      <h3>Pressable</h3>
+      <p>A wrapper component that can detect various stages of press interactions on any of its children.</p>
+    </a>
+  </div>
   <div className="component">
     <a href="./scrollview">
       <h3>ScrollView</h3>

website/versioned_docs/version-0.78/components-and-apis.md

@@ -43,6 +43,12 @@ Most apps will end up using one or more of these basic components.
       <p>A component for inputting text into the app via a keyboard.</p>
     </a>
   </div>
+  <div className="component">
+    <a href="./pressable">
+      <h3>Pressable</h3>
+      <p>A wrapper component that can detect various stages of press interactions on any of its children.</p>
+    </a>
+  </div>
   <div className="component">
     <a href="./scrollview">
       <h3>ScrollView</h3>

website/versioned_docs/version-0.79/components-and-apis.md

@@ -43,6 +43,12 @@ Most apps will end up using one or more of these basic components.
       <p>A component for inputting text into the app via a keyboard.</p>
     </a>
   </div>
+  <div className="component">
+    <a href="./pressable">
+      <h3>Pressable</h3>
+      <p>A wrapper component that can detect various stages of press interactions on any of its children.</p>
+    </a>
+  </div>
   <div className="component">
     <a href="./scrollview">
       <h3>ScrollView</h3>

website/versioned_docs/version-0.80/components-and-apis.md

@@ -43,6 +43,12 @@ Most apps will end up using one or more of these basic components.
       <p>A component for inputting text into the app via a keyboard.</p>
     </a>
   </div>
+  <div className="component">
+    <a href="./pressable">
+      <h3>Pressable</h3>
+      <p>A wrapper component that can detect various stages of press interactions on any of its children.</p>
+    </a>
+  </div>
   <div className="component">
     <a href="./scrollview">
       <h3>ScrollView</h3>

website/versioned_docs/version-0.81/components-and-apis.md

@@ -43,6 +43,12 @@ Most apps will end up using one or more of these basic components.
       <p>A component for inputting text into the app via a keyboard.</p>
     </a>
   </div>
+  <div className="component">
+    <a href="./pressable">
+      <h3>Pressable</h3>
+      <p>A wrapper component that can detect various stages of press interactions on any of its children.</p>
+    </a>
+  </div>
   <div className="component">
     <a href="./scrollview">
       <h3>ScrollView</h3>