diff --git a/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-fieldset-visual-test-1-snap.png b/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-fieldset-visual-test-1-snap.png index 3418ee6556..f57ff5c98c 100644 Binary files a/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-fieldset-visual-test-1-snap.png and b/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-fieldset-visual-test-1-snap.png differ diff --git a/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-form-validation-visual-test-1-snap.png b/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-form-validation-visual-test-1-snap.png index a0b83b4b08..07e76a5296 100644 Binary files a/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-form-validation-visual-test-1-snap.png and b/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-form-validation-visual-test-1-snap.png differ diff --git a/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-input-visual-test-1-snap.png b/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-input-visual-test-1-snap.png index 518049227f..985e063786 100644 Binary files a/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-input-visual-test-1-snap.png and b/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-input-visual-test-1-snap.png differ diff --git a/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-phone-input-visual-test-1-snap.png b/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-phone-input-visual-test-1-snap.png index 941e86141d..5bc0e0b57f 100644 Binary files a/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-phone-input-visual-test-1-snap.png and b/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-phone-input-visual-test-1-snap.png differ diff --git a/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-textarea-visual-test-1-snap.png b/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-textarea-visual-test-1-snap.png index 25b61d8f95..38264f55b6 100644 Binary files a/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-textarea-visual-test-1-snap.png and b/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-textarea-visual-test-1-snap.png differ diff --git a/UNRELEASED.md b/UNRELEASED.md index c3dfd663e9..13712f2d18 100644 --- 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. \ No newline at end of file diff --git a/packages/bpk-animate-height/package.json b/packages/bpk-animate-height/package.json index 2ecb6b3132..82e704a15c 100644 --- 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 index 87bc11d859..3370778f5f 100644 --- 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 index 1c6597008b..06caeebdf3 100644 --- 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 index 074e76dbaa..e360ef231c 100644 --- 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 index 2e984169d1..dea14ebbed 100644 --- 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 index 3b785e7be5..82c117fca8 100644 --- 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 index 04826cffcc..e54b663289 100644 --- 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 index b68079ff17..12794fc28d 100644 --- 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 index 31bba3887f..2903fb13b4 100644 --- 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 index 4c1992dc10..b5e5377410 100644 --- 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 index a5ce9d92f1..0002bba4f0 100644 --- 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 index 8b3cc8c222..7906e5f41b 100644 --- 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 index 17ae6c6a8d..8ed75607c9 100644 --- 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 index 0393db6462..3bfcd75a2c 100644 --- 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 index 8f55d43650..a9cebae5e4 100644 --- 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 index 3e917bb761..be49dbe49f 100644 --- 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 index 8f4a92c217..479f95c894 100644 --- 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 index 4208f49c19..e51c9ffcd9 100644 --- a/packages/bpk-component-input/src/BpkInput.module.css +++ b/packages/bpk-component-input/src/BpkInput.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-input{display:inline-block;width:100%;height:2.25rem;padding:.5rem 1rem;border:solid 0.0625rem #B2B2BF;border-radius:.25rem;background:#fff;color:#111236;appearance:none}.bpk-input::placeholder{color:#68697f}.bpk-input:disabled{border-color:#f1f2f8;background:#fff;color:#b2b2bf;cursor:not-allowed}.bpk-input[type='number']{-moz-appearance:textfield}.bpk-input[type='number']::-webkit-inner-spin-button,.bpk-input[type='number']::-webkit-outer-spin-button{appearance:none}html[dir='rtl'] .bpk-input[type='number'],html[dir='rtl'] .bpk-input[type='tel'],html[dir='rtl'] .bpk-input[type='email']{text-align:right;direction:ltr}.bpk-input::-ms-clear{display:none}.bpk-input__container{position:relative;display:inline-block;width:100%}.bpk-input__clear-button{display:none;position:absolute;right:1rem;height:2.25rem}html[dir='rtl'] .bpk-input__clear-button{right:inherit;left:1rem}.bpk-input__clear-button--large{height:3rem}.bpk-input__clear-button--persistent{display:inherit}.bpk-input--valid{padding-right:2.5rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMDBhNjk4ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDIyLjVDNi4yMDEgMjIuNSAxLjUgMTcuNzk5IDEuNSAxMlM2LjIwMSAxLjUgMTIgMS41IDIyLjUgNi4yMDEgMjIuNSAxMiAxNy43OTkgMjIuNSAxMiAyMi41em01LjU2LTEyLjQ0YTEuNSAxLjUgMCAwIDAtMi4xMi0yLjEybC00Ljk0IDQuOTM5LTEuOTQtMS45NGExLjUgMS41IDAgMCAwLTIuMTIgMi4xMjJsMyAzYTEuNSAxLjUgMCAwIDAgMi4xMiAwbDYtNnoiLz48L3N2Zz4=") no-repeat right 1rem center;background-size:1.125rem 1.125rem}html[dir='rtl'] .bpk-input--valid{padding-right:1rem;padding-left:2.5rem;background-position:left 1rem center}.bpk-input--invalid{padding-right:2.5rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjZDE0MzViICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDEuNUExMC41IDEwLjUgMCAxIDAgMjIuNSAxMiAxMC41IDEwLjUgMCAwIDAgMTIgMS41ek0xMiAxOGExLjUgMS41IDAgMSAxIDEuNS0xLjVBMS41IDEuNSAwIDAgMSAxMiAxOHptMS41LTZhMS41IDEuNSAwIDAgMS0zIDBWNy41YTEuNSAxLjUgMCAwIDEgMyAweiIvPjwvc3ZnPg==") no-repeat right 1rem center;background-size:1.125rem 1.125rem;border-color:#d1435b;border-color:var(--bpk-input-invalid-border-color, #d1435b)}html[dir='rtl'] .bpk-input--invalid{padding-right:1rem;padding-left:2.5rem;background-position:left 1rem center}.bpk-input--large{height:3rem}.bpk-input--clearable{padding-right:2.5rem}html[dir='rtl'] .bpk-input--clearable{padding-right:1rem;padding-left:2.5rem}.bpk-input--clearable:focus{background:#fff}.bpk-input--clearable:focus+.bpk-input__clear-button{display:inherit}.bpk-input--persistent-clearable{background:#fff}.bpk-input--docked:first-child{border-right-width:0;border-radius:.25rem 0 0 .25rem}html[dir='rtl'] .bpk-input--docked:first-child{border-right-width:.0625rem;border-left-width:0;border-radius:0 .25rem .25rem 0}.bpk-input--docked:first-child:focus{position:relative}.bpk-input--docked:last-child{border-radius:0 .25rem .25rem 0}html[dir='rtl'] .bpk-input--docked:last-child{border-radius:.25rem 0 0 .25rem}.bpk-input--docked:last-child:focus{position:relative}.bpk-input--docked:not(:first-child):not(:last-child){border-right-width:0;border-radius:0}html[dir='rtl'] .bpk-input--docked:not(:first-child):not(:last-child){border-right-width:.0625rem;border-left-width:0}.bpk-input--docked:not(:first-child):not(:last-child):focus{position:relative}.bpk-input--docked-first{border-right-width:0;border-radius:.25rem 0 0 .25rem}html[dir='rtl'] .bpk-input--docked-first{border-right-width:.0625rem;border-left-width:0;border-radius:0 .25rem .25rem 0}.bpk-input--docked-first:focus{position:relative}.bpk-input--docked-middle{border-right-width:0;border-radius:0}html[dir='rtl'] .bpk-input--docked-middle{border-right-width:.0625rem;border-left-width:0}.bpk-input--docked-middle:focus{position:relative}.bpk-input--docked-last{border-radius:0 .25rem .25rem 0}html[dir='rtl'] .bpk-input--docked-last{border-radius:.25rem 0 0 .25rem}.bpk-input--docked-last:focus{position:relative}.bpk-input--with-open-events{cursor:pointer} +@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-input{display:inline-block;width:100%;height:2.25rem;padding:.5rem .5rem;border:solid 0.0625rem #B2B2BF;border-radius:.25rem;background:#fff;color:#111236;appearance:none}.bpk-input::placeholder{color:#68697f}.bpk-input:disabled{border-color:#f1f2f8;background:#fff;color:#b2b2bf;cursor:not-allowed}.bpk-input[type='number']{-moz-appearance:textfield}.bpk-input[type='number']::-webkit-inner-spin-button,.bpk-input[type='number']::-webkit-outer-spin-button{appearance:none}html[dir='rtl'] .bpk-input[type='number'],html[dir='rtl'] .bpk-input[type='tel'],html[dir='rtl'] .bpk-input[type='email']{text-align:right;direction:ltr}.bpk-input::-ms-clear{display:none}.bpk-input__container{position:relative;display:inline-block;width:100%}.bpk-input__clear-button{display:none;position:absolute;right:0.5rem;height:2.25rem}html[dir='rtl'] .bpk-input__clear-button{right:inherit;left:0.5rem}.bpk-input__clear-button--large{right:1rem;height:3rem}html[dir='rtl'] .bpk-input__clear-button--large{left:1rem}.bpk-input__clear-button--persistent{display:inherit}.bpk-input--valid{padding-right:2rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMDBhNjk4ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDIyLjVDNi4yMDEgMjIuNSAxLjUgMTcuNzk5IDEuNSAxMlM2LjIwMSAxLjUgMTIgMS41IDIyLjUgNi4yMDEgMjIuNSAxMiAxNy43OTkgMjIuNSAxMiAyMi41em01LjU2LTEyLjQ0YTEuNSAxLjUgMCAwIDAtMi4xMi0yLjEybC00Ljk0IDQuOTM5LTEuOTQtMS45NGExLjUgMS41IDAgMCAwLTIuMTIgMi4xMjJsMyAzYTEuNSAxLjUgMCAwIDAgMi4xMiAwbDYtNnoiLz48L3N2Zz4=") no-repeat right 0.5rem center;background-size:1.125rem 1.125rem}html[dir='rtl'] .bpk-input--valid{padding-right:.5rem;padding-left:2rem;background-position:left 0.5rem center}.bpk-input--invalid{padding-right:2rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjZDE0MzViICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDEuNUExMC41IDEwLjUgMCAxIDAgMjIuNSAxMiAxMC41IDEwLjUgMCAwIDAgMTIgMS41ek0xMiAxOGExLjUgMS41IDAgMSAxIDEuNS0xLjVBMS41IDEuNSAwIDAgMSAxMiAxOHptMS41LTZhMS41IDEuNSAwIDAgMS0zIDBWNy41YTEuNSAxLjUgMCAwIDEgMyAweiIvPjwvc3ZnPg==") no-repeat right 0.5rem center;background-size:1.125rem 1.125rem;border-color:#d1435b;border-color:var(--bpk-input-invalid-border-color, #d1435b)}html[dir='rtl'] .bpk-input--invalid{padding-right:.5rem;padding-left:2rem;background-position:left 0.5rem center}.bpk-input--clearable{padding-right:2rem}html[dir='rtl'] .bpk-input--clearable{padding-right:.5rem;padding-left:2rem}.bpk-input--clearable:focus{background:#fff}.bpk-input--clearable:focus+.bpk-input__clear-button{display:inherit}.bpk-input--large{height:3rem;padding-right:1rem;padding-left:1rem}.bpk-input--large.bpk-input--valid,.bpk-input--large.bpk-input--invalid,.bpk-input--large.bpk-input--clearable{padding-right:2.5rem;background-position:right 1rem center}html[dir='rtl'] .bpk-input--large.bpk-input--valid,html[dir='rtl'] .bpk-input--large.bpk-input--invalid,html[dir='rtl'] .bpk-input--large.bpk-input--clearable{padding-right:1rem;padding-left:2.5rem;background-position:left 1rem center}.bpk-input--persistent-clearable{background:#fff}.bpk-input--docked:first-child{border-right-width:0;border-radius:.25rem 0 0 .25rem}html[dir='rtl'] .bpk-input--docked:first-child{border-right-width:.0625rem;border-left-width:0;border-radius:0 .25rem .25rem 0}.bpk-input--docked:first-child:focus{position:relative}.bpk-input--docked:last-child{border-radius:0 .25rem .25rem 0}html[dir='rtl'] .bpk-input--docked:last-child{border-radius:.25rem 0 0 .25rem}.bpk-input--docked:last-child:focus{position:relative}.bpk-input--docked:not(:first-child):not(:last-child){border-right-width:0;border-radius:0}html[dir='rtl'] .bpk-input--docked:not(:first-child):not(:last-child){border-right-width:.0625rem;border-left-width:0}.bpk-input--docked:not(:first-child):not(:last-child):focus{position:relative}.bpk-input--docked-first{border-right-width:0;border-radius:.25rem 0 0 .25rem}html[dir='rtl'] .bpk-input--docked-first{border-right-width:.0625rem;border-left-width:0;border-radius:0 .25rem .25rem 0}.bpk-input--docked-first:focus{position:relative}.bpk-input--docked-middle{border-right-width:0;border-radius:0}html[dir='rtl'] .bpk-input--docked-middle{border-right-width:.0625rem;border-left-width:0}.bpk-input--docked-middle:focus{position:relative}.bpk-input--docked-last{border-radius:0 .25rem .25rem 0}html[dir='rtl'] .bpk-input--docked-last{border-radius:.25rem 0 0 .25rem}.bpk-input--docked-last:focus{position:relative}.bpk-input--with-open-events{cursor:pointer} diff --git a/packages/bpk-component-input/src/BpkInput.module.scss b/packages/bpk-component-input/src/BpkInput.module.scss index 6d7edc45b6..a070f3e95a 100644 --- 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 index f7c8183a35..613ff37726 100644 --- 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 index 78588f6feb..9c8abbd1fe 100644 --- 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 index aae42495f5..0e44f90815 100644 --- 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 index ea490c23f2..b786e3c19f 100644 --- 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 index 28fc31b688..92fb34d447 100644 --- 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 index 941ddb6ccf..0fa9ec5939 100644 --- 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 index 2844cfd53b..a625694abb 100644 --- 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 index 1f940c6ebb..0fc6cd7dc9 100644 --- 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 index a4219d20ce..ad077d5517 100644 --- 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 index c2ef3957dc..5eb6697613 100644 --- 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 index df4931641a..1d892bfbdc 100644 --- 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", diff --git a/packages/bpk-component-select/src/BpkSelect.module.css b/packages/bpk-component-select/src/BpkSelect.module.css index 7ccb151225..3d8cff0a88 100644 --- a/packages/bpk-component-select/src/BpkSelect.module.css +++ b/packages/bpk-component-select/src/BpkSelect.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-select{display:inline-block;width:100%;height:2.25rem;padding:0.5rem 2rem 0.5rem 0.5rem;border:solid 0.0625rem #B2B2BF;border-radius:.25rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjNDQ0NTYwICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=") no-repeat right 0.5rem center;background-size:1.125rem;color:#111236;line-height:1.125rem;appearance:none}html[dir='rtl'] .bpk-select{padding-right:0.5rem;padding-left:2rem;background-position:left 0.5rem center}@media screen\0 {.bpk-select{padding:0.5rem !important;background-image:none !important}}.bpk-select:disabled{border-color:#f1f2f8;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjYjJiMmJmICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=") no-repeat right 0.5rem center;background-size:1.125rem;color:#b2b2bf;cursor:not-allowed}.bpk-select--large{height:3rem;padding:0.5rem 2.5rem 0.5rem 1rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjNDQ0NTYwICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=") no-repeat right 1rem center}html[dir='rtl'] .bpk-select--large{padding-right:1rem;padding-left:2rem;background-position:left 1rem center}.bpk-select--docked:first-child{border-right-width:0;border-radius:.25rem 0 0 .25rem}html[dir='rtl'] .bpk-select--docked:first-child{border-right-width:.0625rem;border-left-width:0;border-radius:0 .25rem .25rem 0}.bpk-select--docked:last-child{border-radius:0 .25rem .25rem 0}html[dir='rtl'] .bpk-select--docked:last-child{border-radius:.25rem 0 0 .25rem}.bpk-select--docked:not(:first-child):not(:last-child){border-right-width:0;border-radius:0}html[dir='rtl'] .bpk-select--docked:not(:first-child):not(:last-child){border-right-width:.0625rem;border-left-width:0}.bpk-select--docked-first{border-right-width:0;border-radius:.25rem 0 0 .25rem}html[dir='rtl'] .bpk-select--docked-first{border-right-width:.0625rem;border-left-width:0;border-radius:0 .25rem .25rem 0}.bpk-select--docked-middle{border-right-width:0;border-radius:0}html[dir='rtl'] .bpk-select--docked-middle{border-right-width:.0625rem;border-left-width:0}.bpk-select--docked-last{border-radius:0 .25rem .25rem 0}html[dir='rtl'] .bpk-select--docked-last{border-radius:.25rem 0 0 .25rem}.bpk-select--invalid{padding-right:2rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjNDQ0NTYwICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=") no-repeat right 0.5rem center;background-size:1.125rem;border-color:#d1435b;border-color:var(--bpk-select-invalid-border-color, #d1435b)}html[dir='rtl'] .bpk-select--invalid{padding-right:0.5rem;padding-left:2rem;background-position:left 0.5rem center}.bpk-select--with-image{padding-left:2.5rem}html[dir='rtl'] .bpk-select--with-image{padding-right:2.5rem;padding-left:2.5rem}@media screen\0 {html[dir='rtl'] .bpk-select--with-image{padding-right:2.5rem !important;padding-left:1rem !important}}@media screen\0 {.bpk-select--with-image{padding-left:2.5rem !important}}.bpk-select--with-image-large{padding-left:3.5rem}html[dir='rtl'] .bpk-select--with-image-large{padding-right:3.5rem;padding-left:1.875rem}@media screen\0 {html[dir='rtl'] .bpk-select--with-image-large{padding-right:2.75rem !important;padding-left:1rem !important}}@media screen\0 {.bpk-select--with-image-large{padding-left:2.75rem !important}}.bpk-select-wrapper{position:relative}.bpk-select-wrapper__image{position:absolute;top:.625rem;left:0.5rem;width:1.5rem;height:1rem;pointer-events:none}html[dir='rtl'] .bpk-select-wrapper__image{right:0.5rem;left:auto}.bpk-select-wrapper__image--large{top:.75rem;left:1rem;width:2rem;height:1.5rem}.bpk-select-wrapper__image--disabled{opacity:0.5} +@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-select{display:inline-block;width:100%;height:2.25rem;padding:0.5rem 2rem 0.5rem 0.5rem;border:solid 0.0625rem #B2B2BF;border-radius:.25rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjNDQ0NTYwICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=") no-repeat right 0.5rem center;background-size:1.125rem;color:#111236;line-height:1.125rem;appearance:none}html[dir='rtl'] .bpk-select{padding-right:0.5rem;padding-left:2rem;background-position:left 0.5rem center}@media screen\0 {.bpk-select{padding:0.5rem !important;background-image:none !important}}.bpk-select:disabled{border-color:#f1f2f8;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjYjJiMmJmICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=") no-repeat right 0.5rem center;background-size:1.125rem;color:#b2b2bf;cursor:not-allowed}.bpk-select--large{height:3rem;padding:0.5rem 2.5rem 0.5rem 1rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjNDQ0NTYwICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=") no-repeat right 1rem center}html[dir='rtl'] .bpk-select--large{padding-right:1rem;padding-left:2.5rem;background-position:left 1rem center}.bpk-select--docked:first-child{border-right-width:0;border-radius:.25rem 0 0 .25rem}html[dir='rtl'] .bpk-select--docked:first-child{border-right-width:.0625rem;border-left-width:0;border-radius:0 .25rem .25rem 0}.bpk-select--docked:last-child{border-radius:0 .25rem .25rem 0}html[dir='rtl'] .bpk-select--docked:last-child{border-radius:.25rem 0 0 .25rem}.bpk-select--docked:not(:first-child):not(:last-child){border-right-width:0;border-radius:0}html[dir='rtl'] .bpk-select--docked:not(:first-child):not(:last-child){border-right-width:.0625rem;border-left-width:0}.bpk-select--docked-first{border-right-width:0;border-radius:.25rem 0 0 .25rem}html[dir='rtl'] .bpk-select--docked-first{border-right-width:.0625rem;border-left-width:0;border-radius:0 .25rem .25rem 0}.bpk-select--docked-middle{border-right-width:0;border-radius:0}html[dir='rtl'] .bpk-select--docked-middle{border-right-width:.0625rem;border-left-width:0}.bpk-select--docked-last{border-radius:0 .25rem .25rem 0}html[dir='rtl'] .bpk-select--docked-last{border-radius:.25rem 0 0 .25rem}.bpk-select--invalid{padding-right:2rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjNDQ0NTYwICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=") no-repeat right 0.5rem center;background-size:1.125rem;border-color:#d1435b;border-color:var(--bpk-select-invalid-border-color, #d1435b)}html[dir='rtl'] .bpk-select--invalid{padding-right:0.5rem;padding-left:2rem;background-position:left 0.5rem center}.bpk-select--with-image{padding-left:2.5rem}html[dir='rtl'] .bpk-select--with-image{padding-right:2.5rem;padding-left:2.5rem}@media screen\0 {html[dir='rtl'] .bpk-select--with-image{padding-right:2.5rem !important;padding-left:1rem !important}}@media screen\0 {.bpk-select--with-image{padding-left:2.5rem !important}}.bpk-select--with-image-large{padding-left:3.5rem}html[dir='rtl'] .bpk-select--with-image-large{padding-right:3.5rem;padding-left:1.875rem}@media screen\0 {html[dir='rtl'] .bpk-select--with-image-large{padding-right:2.75rem !important;padding-left:1rem !important}}@media screen\0 {.bpk-select--with-image-large{padding-left:2.75rem !important}}.bpk-select-wrapper{position:relative}.bpk-select-wrapper__image{position:absolute;top:.625rem;left:0.5rem;width:1.5rem;height:1rem;pointer-events:none}html[dir='rtl'] .bpk-select-wrapper__image{right:0.5rem;left:auto}.bpk-select-wrapper__image--large{top:.75rem;left:1rem;width:2rem;height:1.5rem}.bpk-select-wrapper__image--disabled{opacity:0.5} diff --git a/packages/bpk-component-slider/package.json b/packages/bpk-component-slider/package.json index e3949b564f..b3e2063a08 100644 --- a/packages/bpk-component-slider/package.json +++ b/packages/bpk-component-slider/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", "prop-types": "^15.7.2", diff --git a/packages/bpk-component-spinner/package.json b/packages/bpk-component-spinner/package.json index a11aecb859..0366c29af9 100644 --- a/packages/bpk-component-spinner/package.json +++ b/packages/bpk-component-spinner/package.json @@ -14,7 +14,7 @@ }, "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e", "dependencies": { - "@skyscanner/bpk-svgs": "^14.0.13", + "@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-textarea/README.md b/packages/bpk-component-textarea/README.md index a638988823..5f0d0bf919 100644 --- a/packages/bpk-component-textarea/README.md +++ b/packages/bpk-component-textarea/README.md @@ -31,3 +31,4 @@ export default () => ( | name | string | true | - | | value | string | true | - | | valid | bool | false | null | +| large | bool | false | false | diff --git a/packages/bpk-component-textarea/examples.js b/packages/bpk-component-textarea/examples.js index a33dd2a24e..784727fa7b 100644 --- a/packages/bpk-component-textarea/examples.js +++ b/packages/bpk-component-textarea/examples.js @@ -82,12 +82,27 @@ const InvalidExample = () => ( ); +const LargeExample = () => ( +
+ Textarea + + +); + const MixedExample = () => (
+
); @@ -96,5 +111,6 @@ export { PlaceholderExample, DisabledExample, InvalidExample, + LargeExample, MixedExample, }; diff --git a/packages/bpk-component-textarea/src/BpkTextarea.js b/packages/bpk-component-textarea/src/BpkTextarea.js index c63cec4dce..6e64ba00c0 100644 --- a/packages/bpk-component-textarea/src/BpkTextarea.js +++ b/packages/bpk-component-textarea/src/BpkTextarea.js @@ -32,10 +32,11 @@ type Props = { value: string, className: ?string, valid: ?boolean, + large: ?boolean, }; const BpkTextarea = (props: Props) => { - const { className, valid, ...rest } = props; + const { className, valid, large, ...rest } = props; // Explicit check for false primitive value as undefined is // treated as neither valid nor invalid @@ -47,6 +48,7 @@ const BpkTextarea = (props: Props) => { className={getClassName( 'bpk-textarea', isInvalid && 'bpk-textarea--invalid', + large && 'bpk-textarea--large', className, )} aria-invalid={isInvalid} @@ -61,11 +63,13 @@ BpkTextarea.propTypes = { value: PropTypes.string.isRequired, className: PropTypes.string, valid: PropTypes.bool, + large: PropTypes.bool, }; BpkTextarea.defaultProps = { className: null, valid: null, + large: false, }; export default BpkTextarea; diff --git a/packages/bpk-component-textarea/src/BpkTextarea.module.css b/packages/bpk-component-textarea/src/BpkTextarea.module.css index 8a697dbbb8..2e8428468e 100644 --- a/packages/bpk-component-textarea/src/BpkTextarea.module.css +++ b/packages/bpk-component-textarea/src/BpkTextarea.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-textarea{display:inline-block;width:100%;max-width:100%;min-height:5.5rem;padding:.5rem 1rem;border:solid 0.0625rem #B2B2BF;border-radius:.25rem;background:#fff;color:#111236;appearance:none}.bpk-textarea::placeholder{color:#68697f}.bpk-textarea:disabled{border-color:#f1f2f8;background:#fff;color:#b2b2bf;cursor:not-allowed}.bpk-textarea::-ms-clear{display:none}.bpk-textarea--invalid{background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjZDE0MzViICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDEuNUExMC41IDEwLjUgMCAxIDAgMjIuNSAxMiAxMC41IDEwLjUgMCAwIDAgMTIgMS41ek0xMiAxOGExLjUgMS41IDAgMSAxIDEuNS0xLjVBMS41IDEuNSAwIDAgMSAxMiAxOHptMS41LTZhMS41IDEuNSAwIDAgMS0zIDBWNy41YTEuNSAxLjUgMCAwIDEgMyAweiIvPjwvc3ZnPg==") no-repeat right 1rem center;border-color:#d1435b;border-color:var(--bpk-textarea-invalid-border-color, #d1435b)}html[dir='rtl'] .bpk-textarea--invalid{padding-right:1rem;background-position:left 1rem center} +@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-textarea{display:inline-block;width:100%;max-width:100%;min-height:5.5rem;padding:.5rem .5rem;border:solid 0.0625rem #B2B2BF;border-radius:.25rem;background:#fff;color:#111236;appearance:none}.bpk-textarea::placeholder{color:#68697f}.bpk-textarea:disabled{border-color:#f1f2f8;background:#fff;color:#b2b2bf;cursor:not-allowed}.bpk-textarea::-ms-clear{display:none}.bpk-textarea--invalid{padding-right:2rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjZDE0MzViICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDEuNUExMC41IDEwLjUgMCAxIDAgMjIuNSAxMiAxMC41IDEwLjUgMCAwIDAgMTIgMS41ek0xMiAxOGExLjUgMS41IDAgMSAxIDEuNS0xLjVBMS41IDEuNSAwIDAgMSAxMiAxOHptMS41LTZhMS41IDEuNSAwIDAgMS0zIDBWNy41YTEuNSAxLjUgMCAwIDEgMyAweiIvPjwvc3ZnPg==") no-repeat right 0.5rem center;border-color:#d1435b;border-color:var(--bpk-textarea-invalid-border-color, #d1435b)}html[dir='rtl'] .bpk-textarea--invalid{padding-right:.5rem;padding-left:2rem;background-position:left 0.5rem center}html[dir='rtl'] .bpk-textarea--invalid.bpk-textarea--large{padding-right:1rem;padding-left:2.5rem;background-position:right 1rem center}.bpk-textarea--large{min-height:6rem;padding-right:1rem;padding-left:1rem}.bpk-textarea--large.bpk-textarea--invalid{padding-right:2.5rem;background-position:right 1rem center}html[dir='rtl'] .bpk-textarea--large.bpk-textarea--invalid{padding-right:1rem;padding-left:2.5rem;background-position:left 1rem center} diff --git a/packages/bpk-component-textarea/src/BpkTextarea.module.scss b/packages/bpk-component-textarea/src/BpkTextarea.module.scss index 6b370dabcb..1f034502b7 100644 --- a/packages/bpk-component-textarea/src/BpkTextarea.module.scss +++ b/packages/bpk-component-textarea/src/BpkTextarea.module.scss @@ -18,10 +18,16 @@ @import '~bpk-mixins/index'; +$bpk-spacing-v2: true; + .bpk-textarea { @include bpk-textarea; &--invalid { @include bpk-textarea--invalid; } + + &--large { + @include bpk-textarea--large; + } } diff --git a/packages/bpk-component-textarea/stories.js b/packages/bpk-component-textarea/stories.js index 6adc3133ba..c3843f6505 100644 --- a/packages/bpk-component-textarea/stories.js +++ b/packages/bpk-component-textarea/stories.js @@ -25,6 +25,7 @@ import { PlaceholderExample, DisabledExample, InvalidExample, + LargeExample, MixedExample, } from './examples'; @@ -33,4 +34,5 @@ storiesOf('bpk-component-textarea', module) .add('Placeholder', PlaceholderExample) .add('Disabled', DisabledExample) .add('Invalid', InvalidExample) + .add('Large', LargeExample) .add('Visual test', MixedExample); diff --git a/packages/bpk-component-theme-toggle/package.json b/packages/bpk-component-theme-toggle/package.json index ee6ce7add3..e8f657bf2d 100644 --- a/packages/bpk-component-theme-toggle/package.json +++ b/packages/bpk-component-theme-toggle/package.json @@ -14,7 +14,7 @@ }, "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e", "dependencies": { - "@skyscanner/bpk-foundations-web": "^4.2.0", + "@skyscanner/bpk-foundations-web": "^4.3.0", "bpk-component-label": "^5.0.18", "bpk-component-select": "^5.0.14", "bpk-mixins": "^24.0.6", diff --git a/packages/bpk-component-tooltip/package.json b/packages/bpk-component-tooltip/package.json index 6a1829bb94..f67c15f9e5 100644 --- a/packages/bpk-component-tooltip/package.json +++ b/packages/bpk-component-tooltip/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-mixins/package.json b/packages/bpk-mixins/package.json index f8c2b3a34b..5b755b9d94 100644 --- a/packages/bpk-mixins/package.json +++ b/packages/bpk-mixins/package.json @@ -14,8 +14,8 @@ }, "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e", "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" }, "peerDependencies": { "node-sass": "^4.12.0" diff --git a/packages/bpk-mixins/src/mixins/_forms.scss b/packages/bpk-mixins/src/mixins/_forms.scss index 7f336dcfff..70d46f1722 100644 --- a/packages/bpk-mixins/src/mixins/_forms.scss +++ b/packages/bpk-mixins/src/mixins/_forms.scss @@ -87,16 +87,16 @@ $bpk-spacing-v2: true; /// } @mixin bpk-input--valid { - padding-right: bpk-spacing-xxl(); + padding-right: bpk-spacing-xl(); background: $bpk-color-white url(map-get($bpk-icons-sm, tick-circle-monteverde)) no-repeat right - bpk-spacing-base() center; + bpk-spacing-md() center; background-size: $bpk-icon-size-sm $bpk-icon-size-sm; @include bpk-rtl { padding-right: $bpk-input-padding-x; - padding-left: bpk-spacing-xxl(); - background-position: left bpk-spacing-base() center; + padding-left: bpk-spacing-xl(); + background-position: left bpk-spacing-md() center; } } @@ -111,10 +111,10 @@ $bpk-spacing-v2: true; /// } @mixin bpk-input--invalid { - padding-right: bpk-spacing-xxl(); + padding-right: bpk-spacing-xl(); background: $bpk-color-white url(map-get($bpk-icons-sm, exclamation-circle-panjin)) no-repeat right - bpk-spacing-base() center; + bpk-spacing-md() center; background-size: $bpk-icon-size-sm $bpk-icon-size-sm; @include bpk-themeable-property( @@ -125,8 +125,8 @@ $bpk-spacing-v2: true; @include bpk-rtl { padding-right: $bpk-input-padding-x; - padding-left: bpk-spacing-xxl(); - background-position: left bpk-spacing-base() center; + padding-left: bpk-spacing-xl(); + background-position: left bpk-spacing-md() center; } } @@ -141,11 +141,11 @@ $bpk-spacing-v2: true; /// } @mixin bpk-input--clearable { - padding-right: bpk-spacing-xxl(); + padding-right: bpk-spacing-xl(); @include bpk-rtl { padding-right: $bpk-input-padding-x; - padding-left: bpk-spacing-xxl(); + padding-left: bpk-spacing-xl(); } &:focus { @@ -181,16 +181,21 @@ $bpk-spacing-v2: true; @mixin bpk-input__clear-button { position: absolute; - right: bpk-spacing-base(); + right: bpk-spacing-md(); height: $bpk-input-height; @include bpk-rtl { right: inherit; - left: bpk-spacing-base(); + left: bpk-spacing-md(); } &--large { - @include bpk-input--large; + right: bpk-spacing-base(); + height: $bpk-input-large-height; + + @include bpk-rtl { + left: bpk-spacing-base(); + } } } @@ -206,6 +211,21 @@ $bpk-spacing-v2: true; @mixin bpk-input--large { height: $bpk-input-large-height; + padding-right: bpk-spacing-base(); + padding-left: bpk-spacing-base(); + + &.bpk-input--valid, + &.bpk-input--invalid, + &.bpk-input--clearable { + padding-right: bpk-spacing-xxl(); + background-position: right bpk-spacing-base() center; + + @include bpk-rtl { + padding-right: bpk-spacing-base(); + padding-left: bpk-spacing-xxl(); + background-position: left bpk-spacing-base() center; + } + } } /// Docked (first-child) form input. Modifies the bpk-input mixin. @@ -369,7 +389,7 @@ $bpk-spacing-v2: true; @include bpk-rtl { padding-right: bpk-spacing-base(); - padding-left: bpk-spacing-xl(); + padding-left: bpk-spacing-xxl(); background-position: left bpk-spacing-base() center; } } @@ -761,8 +781,6 @@ $bpk-spacing-v2: true; /// } @mixin bpk-radio__input { - $bpk-radio-size: bpk-spacing-lg() - ($bpk-one-pixel-rem * 4); - position: absolute; top: 0; left: 0; @@ -801,6 +819,7 @@ $bpk-spacing-v2: true; &:disabled { border-color: $bpk-color-sky-gray-tint-04; } + $bpk-radio-size: bpk-spacing-lg() - ($bpk-one-pixel-rem * 4); } /// Form label. @@ -978,9 +997,10 @@ $bpk-spacing-v2: true; /// } @mixin bpk-textarea--invalid { + padding-right: bpk-spacing-xl(); background: $bpk-color-white url(map-get($bpk-icons-sm, exclamation-circle-panjin)) no-repeat right - bpk-spacing-base() center; + bpk-spacing-md() center; @include bpk-themeable-property( border-color, @@ -990,6 +1010,30 @@ $bpk-spacing-v2: true; @include bpk-rtl { padding-right: $bpk-input-padding-x; - background-position: left bpk-spacing-base() center; + padding-left: bpk-spacing-xl(); + background-position: left bpk-spacing-md() center; + + &.bpk-textarea--large { + padding-right: bpk-spacing-base(); + padding-left: bpk-spacing-xxl(); + background-position: right bpk-spacing-base() center; + } + } +} + +@mixin bpk-textarea--large { + min-height: 6 * bpk-spacing-base(); + padding-right: bpk-spacing-base(); + padding-left: bpk-spacing-base(); + + &.bpk-textarea--invalid { + padding-right: bpk-spacing-xxl(); + background-position: right bpk-spacing-base() center; + + @include bpk-rtl { + padding-right: bpk-spacing-base(); + padding-left: bpk-spacing-xxl(); + background-position: left bpk-spacing-base() center; + } } } diff --git a/packages/bpk-stylesheets/package.json b/packages/bpk-stylesheets/package.json index 8d0c0280f3..cf902e56c3 100644 --- a/packages/bpk-stylesheets/package.json +++ b/packages/bpk-stylesheets/package.json @@ -17,7 +17,7 @@ }, "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e", "dependencies": { - "@skyscanner/bpk-foundations-web": "^4.2.0", + "@skyscanner/bpk-foundations-web": "^4.3.0", "bpk-mixins": "^24.0.6", "normalize.css": "4.2.0" } diff --git a/packages/bpk-theming/package.json b/packages/bpk-theming/package.json index a100617fbe..9f6d219625 100644 --- a/packages/bpk-theming/package.json +++ b/packages/bpk-theming/package.json @@ -14,7 +14,7 @@ }, "gitHead": "c2217d61875a1f3aa2bb9ed9583c50e3f1523501", "dependencies": { - "@skyscanner/bpk-foundations-web": "^4.2.0", + "@skyscanner/bpk-foundations-web": "^4.3.0", "prop-types": "^15.7.2" }, "peerDependencies": {