addition of "will-change" CSS prop to lib components and storybook components

Author: based-ghost

__stories__/helpers/components/Checkbox.tsx

@@ -73,6 +73,7 @@ const CheckIcon = styled.i`
   border-width: 1.5px;
   box-sizing: border-box;
   border-radius: 0.0625rem;
+  will-change: border-color;
   background-color: transparent;
   border-color: rgba(0, 0, 0, 0.54);
   transition: border-color 0.365s ease;
@@ -88,6 +89,7 @@ const CheckIcon = styled.i`
     border-radius: 3px;
     transform-origin: left top;
     background-color: ${CHECK_COLOR};
+    will-change: opacity, height, transform;
     transition: opacity 0.365s ease, height 0s linear 0.365s;
   }
 

__stories__/helpers/components/PackageLink.tsx

@@ -19,6 +19,7 @@ const Link = styled.a`
   text-align: center;
   text-decoration: none;
   display: inline-block;
+  will-change: transform;
   background-color: transparent;
   transition: transform 0.25s ease-out;
   transform: translate3d(0px, 0px, 0px);

__stories__/helpers/styled/index.ts

@@ -184,6 +184,7 @@ export const Button = styled.button`
   background-color: #eaebec;
   padding: 0.375rem 0.75rem;
   -webkit-appearance: button;
+  will-change: color, background-color;
   transition: color 0.2s ease-out, background-color 0.2s ease-out;
 
   :focus {
@@ -333,6 +334,7 @@ export const MenuPortalElement = styled.div<{ menuOpen: boolean; }>`
   min-height: 115px;
   position: relative;
   border-radius: 3px;
+  will-change: background-color;
   transition: background-color 0.2s ease-out;
   background-color: ${({ menuOpen }) => menuOpen ? 'white' : 'whitesmoke'};
 
@@ -373,6 +375,7 @@ export const ChevronDownSvg = styled.svg<{ menuOpen: boolean }>`
   width: 14px;
   height: 14px;
   fill: currentColor;
+  will-change: transform;
   transition: transform 0.25s ease-in-out;
   ${({ menuOpen }) => menuOpen && css`transform: rotate(180deg);`}
 `;

__stories__/index.stories.tsx

@@ -492,7 +492,9 @@ export const Events = () => {
       <Hr />
       <Card>
         <CardHeader>
-          <Label>Events trigger a toast notification (demo only)</Label>
+          <Label>
+            Events trigger a toast notification (demo only)
+          </Label>
           <Checkboxes>
             <Checkbox
               label='onOptionChange'
@@ -798,7 +800,10 @@ export const Advanced = () => {
   const renderOptionLabel = useCallback(
     (option: PackageOption): ReactNode => (
       <OptionContainer>
-        <ReactSvg {...REACT_SVG_PROPS} isDisabled={getIsOptionDisabled(option)}>
+        <ReactSvg
+          {...REACT_SVG_PROPS}
+          isDisabled={getIsOptionDisabled(option)}
+        >
           <path {...REACT_SVG_PATH_PROPS} />
           <circle {...REACT_SVG_CIRCLE_PROPS} />
         </ReactSvg>
@@ -810,7 +815,10 @@ export const Advanced = () => {
 
   const customCaretIcon = useCallback(
     ({ menuOpen }): ReactNode => (
-      <ChevronDownSvg {...CHEVRON_SVG_PROPS} menuOpen={menuOpen}>
+      <ChevronDownSvg
+        menuOpen={menuOpen}
+        {...CHEVRON_SVG_PROPS}
+      >
         <path {...CHEVRON_DOWN_PATH_PROPS} />
       </ChevronDownSvg>
     ),
@@ -855,7 +863,9 @@ export const Advanced = () => {
       <Hr />
       <Card>
         <CardHeader>
-          <Label>JSX labels, custom caret icon, and disabled option</Label>
+          <Label>
+            JSX labels, custom caret icon, and disabled option
+          </Label>
         </CardHeader>
         <CardBody>
           <SelectContainer>
@@ -1001,7 +1011,9 @@ export const Async = () => {
       <Hr />
       <Card>
         <CardHeader>
-          <Label>Search debounced 500ms and mock HTTP call resolves after {delay}ms</Label>
+          <Label>
+            Search debounced 500ms and mock HTTP call resolves after {delay}ms
+          </Label>
         </CardHeader>
         <CardBody>
           <SelectContainer>

docs/asset-manifest.json

@@ -1,6 +1,6 @@
 {
   "files": {
-    "main.js": "./main.5ac201dc.iframe.bundle.js",
+    "main.js": "./main.f629e0d6.iframe.bundle.js",
     "runtime~main.js": "./runtime~main.f398e60b.iframe.bundle.js",
     "vendors~main.js": "./vendors~main.31a06b8d.iframe.bundle.js",
     "vendors~main.js.map": "./vendors~main.31a06b8d.iframe.bundle.js.map",
@@ -10,6 +10,6 @@
   "entrypoints": [
     "runtime~main.f398e60b.iframe.bundle.js",
     "vendors~main.31a06b8d.iframe.bundle.js",
-    "main.5ac201dc.iframe.bundle.js"
+    "main.f629e0d6.iframe.bundle.js"
   ]
 }

docs/iframe.html

@@ -130,4 +130,4 @@
 
 
 
-              window['FRAMEWORK_OPTIONS'] = {"fastRefresh":true};</script><script src="runtime~main.f398e60b.iframe.bundle.js"></script><script src="vendors~main.31a06b8d.iframe.bundle.js"></script><script src="main.5ac201dc.iframe.bundle.js"></script></body></html>
+              window['FRAMEWORK_OPTIONS'] = {"fastRefresh":true};</script><script src="runtime~main.f398e60b.iframe.bundle.js"></script><script src="vendors~main.31a06b8d.iframe.bundle.js"></script><script src="main.f629e0d6.iframe.bundle.js"></script></body></html>

docs/main.5ac201dc.iframe.bundle.js

@@ -192,6 +192,7 @@ const ControlWrapper = styled.div<ControlWrapperProps>`
   align-items: center;
   box-sizing: border-box;
   justify-content: space-between;
+  will-change: box-shadow, border-color;
 
   ${({ isDisabled, isFocused, isInvalid, theme: { control, color } }) => css`
     transition: ${control.transition};

docs/main.f629e0d6.iframe.bundle.js

@@ -6,6 +6,8 @@ import type { FunctionComponent } from 'react';
 
 const ClearSvg = styled.svg`
   fill: currentColor;
+  will-change: opacity, color;
+
   ${({ theme }) => css`
     width: ${theme.icon.clear.width};
     height: ${theme.icon.clear.height};