From 07d3c72d8d25a3cbdda3de3e0451fc35c2e1b59f Mon Sep 17 00:00:00 2001 From: Navin Moorthy Date: Mon, 19 Jul 2021 19:37:55 +0530 Subject: [PATCH] =?UTF-8?q?refactor(button):=20=E2=99=BB=EF=B8=8F=20=20upd?= =?UTF-8?q?ate=20button=20rendering=20issue?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 10 +++---- src/theme/defaultTheme/button.ts | 2 +- tailwindPlugins/utilities.js | 10 ++----- yarn.lock | 49 ++++++++++++++++++-------------- 4 files changed, 35 insertions(+), 36 deletions(-) diff --git a/package.json b/package.json index 59f6e229..a1ada4de 100644 --- a/package.json +++ b/package.json @@ -105,10 +105,10 @@ "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^12.0.0", "@testing-library/react-hooks": "^7.0.1", - "@testing-library/user-event": "^13.1.9", + "@testing-library/user-event": "^13.2.0", "@types/jest": "^26.0.24", "@types/jest-axe": "^3.5.2", - "@types/node": "^16.3.2", + "@types/node": "^16.3.3", "@types/react": "^17.0.14", "@types/react-dom": "^17.0.9", "@types/tailwindcss": "^2.2.1", @@ -126,7 +126,7 @@ "cross-env": "^7.0.3", "date-fns": "^2.22.1", "deepmerge": "^4.2.2", - "eslint": "^7.30.0", + "eslint": "^7.31.0", "eslint-config-prettier": "^8.3.0", "eslint-config-react-app": "^6.0.0", "eslint-plugin-flowtype": "^5.8.0", @@ -136,7 +136,7 @@ "eslint-plugin-prettier": "^3.4.0", "eslint-plugin-react": "^7.24.0", "eslint-plugin-react-hooks": "^4.2.0", - "eslint-plugin-testing-library": "^4.9.0", + "eslint-plugin-testing-library": "^4.9.1", "focus-visible": "^5.2.0", "gacp": "^2.10.2", "husky": "^7.0.1", @@ -151,7 +151,7 @@ "prettier": "^2.3.2", "react": "^17.0.2", "react-dom": "^17.0.2", - "react-hook-form": "^7.11.0", + "react-hook-form": "^7.11.1", "react-icons": "^4.2.0", "reakit-test-utils": "^0.15.1", "release-it": "^14.10.0", diff --git a/src/theme/defaultTheme/button.ts b/src/theme/defaultTheme/button.ts index 85650f79..88ffbdea 100644 --- a/src/theme/defaultTheme/button.ts +++ b/src/theme/defaultTheme/button.ts @@ -1,5 +1,5 @@ export const button = { - base: "lib:relative lib:inline-flex lib:items-center lib:justify-center lib:font-medium lib:w-auto button-transform lib:outline-none focus-visible:lib:ring-2 disabled:lib:text-gray-400 disabled:cursor-not-allowed lib:space-x-1.5 lib:appearance-none lib:whitespace-nowrap lib:align-middle lib:select-none lib:transition-all", + base: "lib:relative lib:inline-flex lib:items-center lib:justify-center lib:font-medium lib:w-auto lib:translate-y-0 hover:lib:-translate-y-px active:lib:translate-y-0 lib:outline-none focus-visible:lib:ring-2 disabled:lib:text-gray-400 disabled:cursor-not-allowed lib:space-x-1.5 lib:appearance-none lib:whitespace-nowrap lib:align-middle lib:select-none lib:will-change-transform lib:transition-all", size: { sm: "lib:h-[26px] lib:min-w-[26px] lib:px-2 lib:rounded-lg lib:text-cxs pb-px", md: "lib:h-[30px] lib:min-w-[30px] lib:px-2.5 lib:rounded-lg lib:text-sm", diff --git a/tailwindPlugins/utilities.js b/tailwindPlugins/utilities.js index b9068894..9674f7e8 100644 --- a/tailwindPlugins/utilities.js +++ b/tailwindPlugins/utilities.js @@ -20,14 +20,8 @@ const utilities = plugin(function ({ addUtilities }) { ".touch-action-none": { "touch-action": "none", }, - ".button-transform": { - transform: "translateY(0px)", - }, - ".button-transform:hover": { - transform: "translateY(-1px)", - }, - ".button-transform:active": { - transform: "translateY(0px)", + ".will-change-transform": { + "will-change": "transform", }, }; diff --git a/yarn.lock b/yarn.lock index 5f599800..50833373 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1474,10 +1474,10 @@ resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46" integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA== -"@eslint/eslintrc@^0.4.2": - version "0.4.2" - resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.2.tgz#f63d0ef06f5c0c57d76c4ab5f63d3835c51b0179" - integrity sha512-8nmGq/4ycLpIwzvhI4tNDmQztZ8sp+hI7cyG8i1nQDhkAbRzHpXPidRAHlNvCZQpJTKw5ItIpMw9RSToGF00mg== +"@eslint/eslintrc@^0.4.3": + version "0.4.3" + resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c" + integrity sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw== dependencies: ajv "^6.12.4" debug "^4.1.1" @@ -3027,10 +3027,10 @@ "@babel/runtime" "^7.12.5" "@testing-library/dom" "^8.0.0" -"@testing-library/user-event@^13.1.9": - version "13.1.9" - resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-13.1.9.tgz#29e49a42659ac3c1023565ff56819e0153a82e99" - integrity sha512-NZr0zL2TMOs2qk+dNlqrAdbaRW5dAmYwd1yuQ4r7HpkVEOj0MWuUjDWwKhcLd/atdBy8ZSMHSKp+kXSQe47ezg== +"@testing-library/user-event@^13.2.0": + version "13.2.0" + resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-13.2.0.tgz#8d63aaae1f5ec1d683d3afe57acd5f175f819f0f" + integrity sha512-wDEuKkkChNfA02Fpd9A39AXmdmxkvRcHyt/cK3WWiPAQTyMhcKFNM51aQgpEDJUcdj7uPsOaDEESoW/L1b2kZA== dependencies: "@babel/runtime" "^7.12.5" @@ -3289,7 +3289,7 @@ "@types/node" "*" form-data "^3.0.0" -"@types/node@*", "@types/node@^16.3.2": +"@types/node@*": version "16.3.2" resolved "https://registry.yarnpkg.com/@types/node/-/node-16.3.2.tgz#655432817f83b51ac869c2d51dd8305fb8342e16" integrity sha512-jJs9ErFLP403I+hMLGnqDRWT0RYKSvArxuBVh2veudHV7ifEC1WAmjJADacZ7mRbA2nWgHtn8xyECMAot0SkAw== @@ -3299,6 +3299,11 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.5.tgz#b59daf6a7ffa461b5648456ca59050ba8e40ed54" integrity sha512-bjqH2cX/O33jXT/UmReo2pM7DIJREPMnarixbQ57DOOzzFaI6D2+IcwaJQaJpv0M1E9TIhPCYVxrkcityLjlqA== +"@types/node@^16.3.3": + version "16.3.3" + resolved "https://registry.yarnpkg.com/@types/node/-/node-16.3.3.tgz#0c30adff37bbbc7a50eb9b58fae2a504d0d88038" + integrity sha512-8h7k1YgQKxKXWckzFCMfsIwn0Y61UK6tlD6y2lOb3hTOIMlK3t9/QwHOhc81TwU+RMf0As5fj7NPjroERCnejQ== + "@types/normalize-package-data@^2.4.0": version "2.4.1" resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301" @@ -6716,10 +6721,10 @@ eslint-plugin-react@^7.24.0: resolve "^2.0.0-next.3" string.prototype.matchall "^4.0.5" -eslint-plugin-testing-library@^4.9.0: - version "4.9.0" - resolved "https://registry.yarnpkg.com/eslint-plugin-testing-library/-/eslint-plugin-testing-library-4.9.0.tgz#be65bab6cf20725c6a503974f134a65deea02de9" - integrity sha512-pnWco+Gi8I77K3DAusOmt9MMA1BG1/sbztkEptB4VbNeVxE0ju5sOyLETJ03CIx8eMNbQAZNeiLQB7hT5D0L3A== +eslint-plugin-testing-library@^4.9.1: + version "4.9.1" + resolved "https://registry.yarnpkg.com/eslint-plugin-testing-library/-/eslint-plugin-testing-library-4.9.1.tgz#cf16eba21e8fa6179811ac0e488cd36842f5cae5" + integrity sha512-K8mWyx2MiHJ4CN3DJ62aUe2oUjO7LwvOEVVRhh0GPYLuQNPEYooxlcWK/aW/M6j9CrSCGuaZCPHWXUSramRkFg== dependencies: "@typescript-eslint/experimental-utils" "^4.24.0" @@ -6768,13 +6773,13 @@ eslint-visitor-keys@^2.0.0: resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303" integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw== -eslint@^7.30.0: - version "7.30.0" - resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.30.0.tgz#6d34ab51aaa56112fd97166226c9a97f505474f8" - integrity sha512-VLqz80i3as3NdloY44BQSJpFw534L9Oh+6zJOUaViV4JPd+DaHwutqP7tcpkW3YiXbK6s05RZl7yl7cQn+lijg== +eslint@^7.31.0: + version "7.31.0" + resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.31.0.tgz#f972b539424bf2604907a970860732c5d99d3aca" + integrity sha512-vafgJpSh2ia8tnTkNUkwxGmnumgckLh5aAbLa1xRmIn9+owi8qBNGKL+B881kNKNTy7FFqTEkpNkUvmw0n6PkA== dependencies: "@babel/code-frame" "7.12.11" - "@eslint/eslintrc" "^0.4.2" + "@eslint/eslintrc" "^0.4.3" "@humanwhocodes/config-array" "^0.5.0" ajv "^6.10.0" chalk "^4.0.0" @@ -12016,10 +12021,10 @@ react-helmet-async@^1.0.7: react-fast-compare "^3.2.0" shallowequal "^1.1.0" -react-hook-form@^7.11.0: - version "7.11.0" - resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.11.0.tgz#9cae5e21ba1c1a98a40c65cfee07db9e677edc21" - integrity sha512-aJVvL5VV6JqUWvwx9fbrhc6La83aQAfXfqQr+TD/sWy3LPdqYBgBIHBt8WAKWzKRm3g29YV2CLfn4wkhNB9b+g== +react-hook-form@^7.11.1: + version "7.11.1" + resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.11.1.tgz#936f8a14bdf02b0791c2130d7c78c49c10e6de09" + integrity sha512-lBt428oU03dNUF5qZy5xqEdANaH3L/ilKWQS2t8wD6zF7FypOv46kEkZmg+oHf3n2xgeGYJgbMIGtYExsfKJ8A== react-icons@^4.2.0: version "4.2.0"