[KOA-4848] Update padding in input and textarea components (Skyscanne…

…r#2309) * update padding in input and textarea components * add large property to textarea component * change failure threshold * refactor code Co-authored-by: Ana Belciug <[email protected]>
giriawu · Dec 9, 2021 · ce955d6 · ce955d6
1 parent 164e9b6
commit ce955d6
Show file tree

Hide file tree

Showing 51 changed files with 146 additions and 63 deletions.
diff --git a/..._/storyshots-test-js-visual-tests-bpk-component-fieldset-visual-test-1-snap.png b/..._/storyshots-test-js-visual-tests-bpk-component-fieldset-visual-test-1-snap.png
diff --git a/...shots-test-js-visual-tests-bpk-component-form-validation-visual-test-1-snap.png b/...shots-test-js-visual-tests-bpk-component-form-validation-visual-test-1-snap.png
diff --git a/...ts__/storyshots-test-js-visual-tests-bpk-component-input-visual-test-1-snap.png b/...ts__/storyshots-test-js-visual-tests-bpk-component-input-visual-test-1-snap.png
diff --git a/...toryshots-test-js-visual-tests-bpk-component-phone-input-visual-test-1-snap.png b/...toryshots-test-js-visual-tests-bpk-component-phone-input-visual-test-1-snap.png
diff --git a/..._/storyshots-test-js-visual-tests-bpk-component-textarea-visual-test-1-snap.png b/..._/storyshots-test-js-visual-tests-bpk-component-textarea-visual-test-1-snap.png
diff --git a/UNRELEASED.md b/UNRELEASED.md
@@ -3,5 +3,13 @@
 - bpk-component-autosuggest:
   - Updated component to use new spacing sizes.
 
+- bpk-component-input:
+- bpk-component-textarea:
+  - Updated padding horizontally in input and textarea components.
+
 - bpk-component-badge:
   - Fixed a misalignment of height of the badge when an icon variant is being used.
+
+**Added:**
+- bpk-component-textarea:
+  - Add new property `large` (optional) in textarea component with larger default height.
diff --git a/packages/bpk-animate-height/package.json b/packages/bpk-animate-height/package.json
@@ -20,7 +20,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.2.0",
+    "@skyscanner/bpk-foundations-web": "^4.3.0",
     "bpk-component-button": "^5.0.17"
   }
 }
diff --git a/packages/bpk-component-accordion/package.json b/packages/bpk-component-accordion/package.json
@@ -25,7 +25,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.2.0",
+    "@skyscanner/bpk-foundations-web": "^4.3.0",
     "bpk-component-checkbox": "^3.0.20"
   }
 }
diff --git a/packages/bpk-component-badge/package.json b/packages/bpk-component-badge/package.json
@@ -22,7 +22,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.2.0",
+    "@skyscanner/bpk-foundations-web": "^4.3.0",
     "bpk-component-icon": "^9.1.4",
     "bpk-storybook-utils": "^1.0.18"
   }

diff --git a/packages/bpk-component-banner-alert/package.json b/packages/bpk-component-banner-alert/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.2.0",
+    "@skyscanner/bpk-foundations-web": "^4.3.0",
     "bpk-animate-height": "^4.0.18",
     "bpk-component-close-button": "^3.0.20",
     "bpk-component-icon": "^9.1.4",

diff --git a/packages/bpk-component-barchart/package.json b/packages/bpk-component-barchart/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.2.0",
+    "@skyscanner/bpk-foundations-web": "^4.3.0",
     "bpk-component-mobile-scroll-container": "^3.0.19",
     "bpk-mixins": "^24.0.6",
     "bpk-react-utils": "^4.0.1",

diff --git a/packages/bpk-component-breakpoint/package.json b/packages/bpk-component-breakpoint/package.json
@@ -23,6 +23,6 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.2.0"
+    "@skyscanner/bpk-foundations-web": "^4.3.0"
   }
 }
diff --git a/packages/bpk-component-calendar/package.json b/packages/bpk-component-calendar/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.2.0",
+    "@skyscanner/bpk-foundations-web": "^4.3.0",
     "bpk-component-aria-live": "^2.0.31",
     "bpk-component-icon": "^9.1.4",
     "bpk-component-select": "^5.0.14",

diff --git a/packages/bpk-component-checkbox/package.json b/packages/bpk-component-checkbox/package.json
@@ -23,7 +23,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.2.0",
+    "@skyscanner/bpk-foundations-web": "^4.3.0",
     "bpk-storybook-utils": "^1.0.18"
   }
 }
diff --git a/packages/bpk-component-datatable/package.json b/packages/bpk-component-datatable/package.json
@@ -25,6 +25,6 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.2.0"
+    "@skyscanner/bpk-foundations-web": "^4.3.0"
   }
 }
diff --git a/packages/bpk-component-datepicker/package.json b/packages/bpk-component-datepicker/package.json
@@ -27,7 +27,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.2.0",
+    "@skyscanner/bpk-foundations-web": "^4.3.0",
     "bpk-storybook-utils": "^1.0.18"
   }
 }
diff --git a/packages/bpk-component-drawer/package.json b/packages/bpk-component-drawer/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.2.0",
+    "@skyscanner/bpk-foundations-web": "^4.3.0",
     "bpk-component-close-button": "^3.0.20",
     "bpk-component-icon": "^9.1.4",
     "bpk-component-link": "^3.0.18",

diff --git a/packages/bpk-component-form-validation/package.json b/packages/bpk-component-form-validation/package.json
@@ -23,7 +23,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.2.0",
+    "@skyscanner/bpk-foundations-web": "^4.3.0",
     "bpk-component-button": "^5.0.17",
     "bpk-component-checkbox": "^3.0.20",
     "bpk-component-icon": "^9.1.4",

diff --git a/packages/bpk-component-horizontal-nav/package.json b/packages/bpk-component-horizontal-nav/package.json
@@ -23,7 +23,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.2.0",
+    "@skyscanner/bpk-foundations-web": "^4.3.0",
     "bpk-component-text": "^4.0.20",
     "bpk-storybook-utils": "^1.0.18"
   }

diff --git a/packages/bpk-component-icon/package.json b/packages/bpk-component-icon/package.json
@@ -17,8 +17,8 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.2.0",
-    "@skyscanner/bpk-svgs": "^14.0.13",
+    "@skyscanner/bpk-foundations-web": "^4.3.0",
+    "@skyscanner/bpk-svgs": "^14.0.14",
     "bpk-mixins": "^24.0.6",
     "bpk-react-utils": "^4.0.1",
     "prop-types": "^15.7.2"

diff --git a/packages/bpk-component-image/package.json b/packages/bpk-component-image/package.json
@@ -24,7 +24,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.2.0",
+    "@skyscanner/bpk-foundations-web": "^4.3.0",
     "bpk-component-mobile-scroll-container": "^3.0.19",
     "bpk-component-text": "^4.0.20"
   }

diff --git a/packages/bpk-component-input/examples.module.css b/packages/bpk-component-input/examples.module.css
@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-forms__viewport-alert{display:none}@media (max-width: 50.25rem){.bpk-forms__viewport-alert{display:block}}.bpk-forms__form{margin-bottom:.75rem}@media (max-width: 50.25rem){.bpk-forms__form--desktop-only{display:none}}.bpk-forms__place{display:inline-block;width:32%;vertical-align:bottom}.bpk-forms__date{display:inline-block;width:18%;vertical-align:bottom}.bpk-forms__hotels-destination{display:inline-block;width:48%;vertical-align:bottom}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-forms__viewport-alert{display:none}@media (max-width: 50.25rem){.bpk-forms__viewport-alert{display:block}}.bpk-forms__form{margin-bottom:0.5rem}@media (max-width: 50.25rem){.bpk-forms__form--desktop-only{display:none}}.bpk-forms__place{display:inline-block;width:32%;vertical-align:bottom}.bpk-forms__date{display:inline-block;width:18%;vertical-align:bottom}.bpk-forms__hotels-destination{display:inline-block;width:48%;vertical-align:bottom}
diff --git a/packages/bpk-component-input/examples.module.scss b/packages/bpk-component-input/examples.module.scss
@@ -28,7 +28,7 @@
   }
 
   &__form {
-    margin-bottom: $bpk-spacing-sm;
+    margin-bottom: bpk-spacing-md();
 
     &--desktop-only {
       @include bpk-breakpoint-tablet {

diff --git a/packages/bpk-component-input/src/BpkInput.module.css b/packages/bpk-component-input/src/BpkInput.module.css
diff --git a/packages/bpk-component-input/src/BpkInput.module.scss b/packages/bpk-component-input/src/BpkInput.module.scss
@@ -18,6 +18,8 @@
 
 @import '~bpk-mixins/index';
 
+$bpk-spacing-v2: true;
+
 .bpk-input {
   @include bpk-input;
 
@@ -43,10 +45,6 @@
     @include bpk-input--invalid;
   }
 
-  &--large {
-    @include bpk-input--large;
-  }
-
   &--clearable {
     @include bpk-input--clearable;
 
@@ -56,6 +54,10 @@
     }
   }
 
+  &--large {
+    @include bpk-input--large;
+  }
+
   // When persistent, set background to override any validity icons
   // appearing and make the clear button always display.
   &--persistent-clearable {

diff --git a/packages/bpk-component-link/package.json b/packages/bpk-component-link/package.json
@@ -22,7 +22,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.2.0",
+    "@skyscanner/bpk-foundations-web": "^4.3.0",
     "bpk-storybook-utils": "^1.0.18"
   }
 }
diff --git a/packages/bpk-component-mobile-scroll-container/package.json b/packages/bpk-component-mobile-scroll-container/package.json
@@ -23,6 +23,6 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.2.0"
+    "@skyscanner/bpk-foundations-web": "^4.3.0"
   }
 }
diff --git a/packages/bpk-component-navigation-bar/package.json b/packages/bpk-component-navigation-bar/package.json
@@ -25,7 +25,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.2.0",
+    "@skyscanner/bpk-foundations-web": "^4.3.0",
     "bpk-component-icon": "^9.1.4",
     "bpk-storybook-utils": "^1.0.18"
   }

diff --git a/packages/bpk-component-navigation-stack/package.json b/packages/bpk-component-navigation-stack/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.2.0",
+    "@skyscanner/bpk-foundations-web": "^4.3.0",
     "bpk-mixins": "^24.0.6",
     "bpk-react-utils": "^4.0.1",
     "prop-types": "^15.7.2",

diff --git a/packages/bpk-component-nudger/package.json b/packages/bpk-component-nudger/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.2.0",
+    "@skyscanner/bpk-foundations-web": "^4.3.0",
     "bpk-component-button": "^5.0.17",
     "bpk-component-icon": "^9.1.4",
     "bpk-mixins": "^24.0.6",

diff --git a/packages/bpk-component-phone-input/package.json b/packages/bpk-component-phone-input/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.2.0",
+    "@skyscanner/bpk-foundations-web": "^4.3.0",
     "bpk-component-input": "^6.0.30",
     "bpk-component-label": "^5.0.18",
     "bpk-component-select": "^5.0.14",

diff --git a/packages/bpk-component-progress/package.json b/packages/bpk-component-progress/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.2.0",
+    "@skyscanner/bpk-foundations-web": "^4.3.0",
     "bpk-mixins": "^24.0.6",
     "bpk-react-utils": "^4.0.1",
     "lodash.clamp": "^4.0.3",

diff --git a/packages/bpk-component-radio/package.json b/packages/bpk-component-radio/package.json
@@ -22,7 +22,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.2.0",
+    "@skyscanner/bpk-foundations-web": "^4.3.0",
     "bpk-storybook-utils": "^1.0.18"
   }
 }
diff --git a/packages/bpk-component-rating/package.json b/packages/bpk-component-rating/package.json
@@ -23,7 +23,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.2.0",
+    "@skyscanner/bpk-foundations-web": "^4.3.0",
     "bpk-component-text": "^4.0.20"
   }
 }
diff --git a/packages/bpk-component-scrollable-calendar/package.json b/packages/bpk-component-scrollable-calendar/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.2.0",
+    "@skyscanner/bpk-foundations-web": "^4.3.0",
     "bpk-component-calendar": "^11.0.0",
     "bpk-component-text": "^4.0.20",
     "bpk-mixins": "^24.0.6",

diff --git a/packages/bpk-component-section-list/package.json b/packages/bpk-component-section-list/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.2.0",
+    "@skyscanner/bpk-foundations-web": "^4.3.0",
     "bpk-component-icon": "^9.1.4",
     "bpk-component-text": "^4.0.20",
     "bpk-mixins": "^24.0.6",