@skyscanner/backpack-web 36.5.1 → 36.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bpk-component-chip-group/src/BpkMultiSelectChipGroup.js +0 -1
- package/bpk-component-input/src/BpkInput.module.css +1 -1
- package/bpk-component-mobile-scroll-container/index.d.ts +2 -0
- package/bpk-component-mobile-scroll-container/index.js +3 -1
- package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.d.ts +33 -0
- package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js +17 -37
- package/bpk-component-select/src/BpkSelect.module.css +1 -1
- package/bpk-component-textarea/src/BpkTextarea.module.css +1 -1
- package/bpk-mixins/_forms.scss +3 -0
- package/package.json +3 -3
- package/unstable__bpk-mixins/_forms.scss +3 -0
|
@@ -20,7 +20,6 @@ import { useRef } from 'react';
|
|
|
20
20
|
import BpkBreakpoint, { BREAKPOINTS } from "../../bpk-component-breakpoint";
|
|
21
21
|
import BpkSelectableChip, { BpkDismissibleChip, BpkIconChip, BpkDropdownChip, CHIP_TYPES } from "../../bpk-component-chip";
|
|
22
22
|
import FilterIconSm from "../../bpk-component-icon/sm/filter";
|
|
23
|
-
// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
|
|
24
23
|
import BpkMobileScrollContainer from "../../bpk-component-mobile-scroll-container";
|
|
25
24
|
import BpkText, { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
|
|
26
25
|
import { cssModules } from "../../bpk-react-utils";
|
|
@@ -15,4 +15,4 @@
|
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
|
-
.bpk-input{display:inline-block;width:100%;height:2.25rem;padding:.5rem .5rem;border:solid .0625rem #c1c7cf;border-radius:.
|
|
18
|
+
.bpk-input{display:inline-block;width:100%;height:2.25rem;padding:.5rem .5rem;border:solid .0625rem #c1c7cf;border-radius:.5rem;background:#fff;color:#161616;appearance:none}.bpk-input::placeholder{color:#626971}.bpk-input:disabled{border-color:#eff3f8;background:#fff;color:rgba(0,0,0,.2);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[data-openable]{cursor:pointer}.bpk-input__container{position:relative;display:inline-block;width:100%}.bpk-input__clear-button{display:none;position:absolute;right:.5rem;height:2.25rem;padding:0;border:0;background-color:rgba(0,0,0,0);color:#626971;cursor:pointer;appearance:none}html[dir=rtl] .bpk-input__clear-button{right:inherit;left:.5rem}.bpk-no-touch-support .bpk-input__clear-button:hover:not(:active):not(:disabled){color:#161616}:global(.bpk-no-touch-support) .bpk-input__clear-button:hover:not(:active):not(:disabled){color:#161616}.bpk-input__clear-button:active{color:#161616}.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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMGM4MzhhICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDIyLjVDNi4yMDEgMjIuNSAxLjUgMTcuNzk5IDEuNSAxMlM2LjIwMSAxLjUgMTIgMS41IDIyLjUgNi4yMDEgMjIuNSAxMiAxNy43OTkgMjIuNSAxMiAyMi41em01LjU2LTEyLjQ0YTEuNSAxLjUgMCAwIDAtMi4xMi0yLjEybC00Ljk0IDQuOTM5LTEuOTQtMS45NGExLjUgMS41IDAgMCAwLTIuMTIgMi4xMjJsMyAzYTEuNSAxLjUgMCAwIDAgMi4xMiAwbDYtNnoiLz48L3N2Zz4=") no-repeat right .5rem center;background-size:1rem 1rem}html[dir=rtl] .bpk-input--valid{padding-right:.5rem;padding-left:2rem;background-position:left .5rem center}.bpk-input--invalid{padding-right:2rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjZTcwODY2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDEuNUExMC41IDEwLjUgMCAxIDAgMjIuNSAxMiAxMC41IDEwLjUgMCAwIDAgMTIgMS41ek0xMiAxOGExLjUgMS41IDAgMSAxIDEuNS0xLjVBMS41IDEuNSAwIDAgMSAxMiAxOHptMS41LTZhMS41IDEuNSAwIDAgMS0zIDBWNy41YTEuNSAxLjUgMCAwIDEgMyAweiIvPjwvc3ZnPg==") no-repeat right .5rem center;background-size:1rem 1rem;border-color:#e70866;border-color:var(--bpk-input-invalid-border-color, rgb(231, 8, 102))}html[dir=rtl] .bpk-input--invalid{padding-right:.5rem;padding-left:2rem;background-position:left .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;border-radius:.75rem}.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:.5rem 0 0 .5rem}html[dir=rtl] .bpk-input--docked:first-child{border-right-width:.0625rem;border-left-width:0;border-radius:0 .5rem .5rem 0}.bpk-input--docked:first-child:focus{position:relative}.bpk-input--docked:last-child{border-radius:0 .5rem .5rem 0}html[dir=rtl] .bpk-input--docked:last-child{border-radius:.5rem 0 0 .5rem}.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:.5rem 0 0 .5rem}html[dir=rtl] .bpk-input--docked-first{border-right-width:.0625rem;border-left-width:0;border-radius:0 .5rem .5rem 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 .5rem .5rem 0}html[dir=rtl] .bpk-input--docked-last{border-radius:.5rem 0 0 .5rem}.bpk-input--docked-last:focus{position:relative}
|
|
@@ -14,5 +14,7 @@
|
|
|
14
14
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
|
-
*/
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
import BpkMobileScrollContainer from "./src/BpkMobileScrollContainer";
|
|
18
20
|
export default BpkMobileScrollContainer;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import type { ReactNode, ElementType, CSSProperties } from 'react';
|
|
2
|
+
import { Component } from 'react';
|
|
3
|
+
declare const computeScrollBarAwareHeight: (scrollerEl: HTMLElement | null, innerEl: HTMLElement | null) => string | null;
|
|
4
|
+
declare const computeScrollIndicatorClassName: (scrollerEl: HTMLElement | null, leadingIndicatorClassName?: string, trailingIndicatorClassName?: string) => string[] | null;
|
|
5
|
+
type Props = {
|
|
6
|
+
ariaLabel?: string;
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
innerContainerTagName?: ElementType;
|
|
9
|
+
className?: string;
|
|
10
|
+
leadingIndicatorClassName?: string;
|
|
11
|
+
trailingIndicatorClassName?: string;
|
|
12
|
+
scrollerRef?: (el: HTMLElement | null) => void;
|
|
13
|
+
style?: CSSProperties;
|
|
14
|
+
showScrollbar?: boolean;
|
|
15
|
+
};
|
|
16
|
+
type State = {
|
|
17
|
+
computedHeight: string;
|
|
18
|
+
scrollIndicatorClassName: string | null;
|
|
19
|
+
};
|
|
20
|
+
declare class BpkMobileScrollContainer extends Component<Props, State> {
|
|
21
|
+
static defaultProps: Partial<Props>;
|
|
22
|
+
constructor(props: Props);
|
|
23
|
+
componentDidMount(): void;
|
|
24
|
+
componentWillUnmount(): void;
|
|
25
|
+
onWindowResize: import("lodash").DebouncedFunc<() => void>;
|
|
26
|
+
setScrollIndicatorClassName: () => void;
|
|
27
|
+
setScrollBarAwareHeight: () => void;
|
|
28
|
+
innerEl: HTMLElement | null;
|
|
29
|
+
scrollerEl: HTMLElement | null;
|
|
30
|
+
render(): import("react/jsx-runtime").JSX.Element;
|
|
31
|
+
}
|
|
32
|
+
export default BpkMobileScrollContainer;
|
|
33
|
+
export { computeScrollBarAwareHeight, computeScrollIndicatorClassName };
|
|
@@ -14,9 +14,10 @@
|
|
|
14
14
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
|
-
*/
|
|
17
|
+
*/
|
|
18
|
+
|
|
18
19
|
import { Component } from 'react';
|
|
19
|
-
import debounce from 'lodash
|
|
20
|
+
import debounce from 'lodash/debounce';
|
|
20
21
|
import { cssModules, isRTL } from "../../bpk-react-utils";
|
|
21
22
|
import STYLES from "./BpkMobileScrollContainer.module.css";
|
|
22
23
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -25,10 +26,10 @@ const computeScrollBarAwareHeight = (scrollerEl, innerEl) => {
|
|
|
25
26
|
if (!(scrollerEl && innerEl)) {
|
|
26
27
|
return null;
|
|
27
28
|
}
|
|
28
|
-
const
|
|
29
|
-
return
|
|
29
|
+
const scrollBarVisible = scrollerEl.offsetHeight - innerEl.offsetHeight > 0;
|
|
30
|
+
return scrollBarVisible ? `${innerEl.offsetHeight / 16}rem` : 'auto';
|
|
30
31
|
};
|
|
31
|
-
const computeScrollIndicatorClassName = (scrollerEl, leadingIndicatorClassName
|
|
32
|
+
const computeScrollIndicatorClassName = (scrollerEl, leadingIndicatorClassName, trailingIndicatorClassName) => {
|
|
32
33
|
if (!scrollerEl) {
|
|
33
34
|
return null;
|
|
34
35
|
}
|
|
@@ -50,30 +51,13 @@ const computeScrollIndicatorClassName = (scrollerEl, leadingIndicatorClassName =
|
|
|
50
51
|
}
|
|
51
52
|
return classNames;
|
|
52
53
|
};
|
|
53
|
-
const propTypes = {
|
|
54
|
-
ariaLabel: PropTypes.string,
|
|
55
|
-
children: PropTypes.node.isRequired,
|
|
56
|
-
scrollerRef: PropTypes.func,
|
|
57
|
-
innerContainerTagName: PropTypes.string,
|
|
58
|
-
className: PropTypes.string,
|
|
59
|
-
leadingIndicatorClassName: PropTypes.string,
|
|
60
|
-
trailingIndicatorClassName: PropTypes.string,
|
|
61
|
-
style: PropTypes.object,
|
|
62
|
-
showScrollbar: PropTypes.bool
|
|
63
|
-
};
|
|
64
|
-
const defaultProps = {
|
|
65
|
-
ariaLabel: null,
|
|
66
|
-
scrollerRef: null,
|
|
67
|
-
innerContainerTagName: 'div',
|
|
68
|
-
className: null,
|
|
69
|
-
leadingIndicatorClassName: null,
|
|
70
|
-
trailingIndicatorClassName: null,
|
|
71
|
-
style: null,
|
|
72
|
-
showScrollbar: false
|
|
73
|
-
};
|
|
74
54
|
class BpkMobileScrollContainer extends Component {
|
|
75
|
-
|
|
76
|
-
|
|
55
|
+
static defaultProps = {
|
|
56
|
+
innerContainerTagName: 'div',
|
|
57
|
+
showScrollbar: false
|
|
58
|
+
};
|
|
59
|
+
constructor(props) {
|
|
60
|
+
super(props);
|
|
77
61
|
this.state = {
|
|
78
62
|
computedHeight: 'auto',
|
|
79
63
|
scrollIndicatorClassName: null
|
|
@@ -110,17 +94,19 @@ class BpkMobileScrollContainer extends Component {
|
|
|
110
94
|
if (!computedHeight) {
|
|
111
95
|
return;
|
|
112
96
|
}
|
|
113
|
-
this.setState(
|
|
97
|
+
this.setState({
|
|
114
98
|
computedHeight
|
|
115
|
-
})
|
|
99
|
+
});
|
|
116
100
|
};
|
|
101
|
+
innerEl = null;
|
|
102
|
+
scrollerEl = null;
|
|
117
103
|
render() {
|
|
118
104
|
const classNames = [getClassName('bpk-mobile-scroll-container')];
|
|
119
105
|
const {
|
|
120
106
|
ariaLabel,
|
|
121
107
|
children,
|
|
122
108
|
className,
|
|
123
|
-
innerContainerTagName,
|
|
109
|
+
innerContainerTagName = 'div',
|
|
124
110
|
leadingIndicatorClassName,
|
|
125
111
|
scrollerRef,
|
|
126
112
|
showScrollbar,
|
|
@@ -164,11 +150,5 @@ class BpkMobileScrollContainer extends Component {
|
|
|
164
150
|
});
|
|
165
151
|
}
|
|
166
152
|
}
|
|
167
|
-
BpkMobileScrollContainer.propTypes = {
|
|
168
|
-
...propTypes
|
|
169
|
-
};
|
|
170
|
-
BpkMobileScrollContainer.defaultProps = {
|
|
171
|
-
...defaultProps
|
|
172
|
-
};
|
|
173
153
|
export default BpkMobileScrollContainer;
|
|
174
154
|
export { computeScrollBarAwareHeight, computeScrollIndicatorClassName };
|
|
@@ -15,4 +15,4 @@
|
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
|
-
.bpk-select{display:inline-block;width:100%;height:2.25rem;padding:.375rem .5rem;padding-right:2rem;border:solid .0625rem #c1c7cf;border-radius:.
|
|
18
|
+
.bpk-select{display:inline-block;width:100%;height:2.25rem;padding:.375rem .5rem;padding-right:2rem;border:solid .0625rem #c1c7cf;border-radius:.5rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMTYxNjE2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=") no-repeat right .5rem center;background-size:1.125rem;color:#161616;line-height:1.375rem;appearance:none}html[dir=rtl] .bpk-select{padding-right:.5rem;padding-left:2rem;background-position:left .5rem center}@media screen\0 {.bpk-select{padding:.5rem !important;background-image:none !important}}.bpk-select:disabled{border-color:#e0e4e9;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMDAwMDAwICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=") no-repeat right .5rem center;background-size:1.125rem;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-select--large{height:3rem;padding:.5rem 1rem;padding-right:2.5rem;border-radius:.75rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMTYxNjE2ICFpbXBvcnRhbnQgfTwvc3R5bGU+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:.5rem 0 0 .5rem}html[dir=rtl] .bpk-select--docked:first-child{border-right-width:.0625rem;border-left-width:0;border-radius:0 .5rem .5rem 0}.bpk-select--docked:last-child{border-radius:0 .5rem .5rem 0}html[dir=rtl] .bpk-select--docked:last-child{border-radius:.5rem 0 0 .5rem}.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:.5rem 0 0 .5rem}html[dir=rtl] .bpk-select--docked-first{border-right-width:.0625rem;border-left-width:0;border-radius:0 .5rem .5rem 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 .5rem .5rem 0}html[dir=rtl] .bpk-select--docked-last{border-radius:.5rem 0 0 .5rem}.bpk-select--invalid{padding-right:2rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMTYxNjE2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=") no-repeat right .5rem center;background-size:1.125rem;border-color:#e70866;border-color:var(--bpk-select-invalid-border-color, rgb(231, 8, 102))}html[dir=rtl] .bpk-select--invalid{padding-right:.5rem;padding-left:2rem;background-position:left .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:2.5rem}@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:.5rem;width:1.5rem;height:1rem;pointer-events:none}html[dir=rtl] .bpk-select-wrapper__image{right:.5rem;left:auto}.bpk-select-wrapper__image--large{top:.75rem;left:1rem;width:2rem;height:1.5rem}html[dir=rtl] .bpk-select-wrapper__image--large{right:1rem;left:auto}.bpk-select-wrapper__image--disabled{opacity:.5}
|
|
@@ -15,4 +15,4 @@
|
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
|
-
.bpk-textarea{display:inline-block;width:100%;max-width:100%;min-height:5.5rem;padding:.5rem .5rem;border:solid .0625rem #c1c7cf;border-radius:.
|
|
18
|
+
.bpk-textarea{display:inline-block;width:100%;max-width:100%;min-height:5.5rem;padding:.5rem .5rem;border:solid .0625rem #c1c7cf;border-radius:.5rem;background:#fff;color:#161616;appearance:none}.bpk-textarea::placeholder{color:#626971}.bpk-textarea:disabled{border-color:#eff3f8;background:#fff;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-textarea::-ms-clear{display:none}.bpk-textarea--invalid{padding-right:2rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjZTcwODY2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDEuNUExMC41IDEwLjUgMCAxIDAgMjIuNSAxMiAxMC41IDEwLjUgMCAwIDAgMTIgMS41ek0xMiAxOGExLjUgMS41IDAgMSAxIDEuNS0xLjVBMS41IDEuNSAwIDAgMSAxMiAxOHptMS41LTZhMS41IDEuNSAwIDAgMS0zIDBWNy41YTEuNSAxLjUgMCAwIDEgMyAweiIvPjwvc3ZnPg==") no-repeat right .5rem center;border-color:#e70866;border-color:var(--bpk-textarea-invalid-border-color, rgb(231, 8, 102))}html[dir=rtl] .bpk-textarea--invalid{padding-right:.5rem;padding-left:2rem;background-position:left .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;border-radius:.75rem}.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}
|
package/bpk-mixins/_forms.scss
CHANGED
|
@@ -231,6 +231,7 @@
|
|
|
231
231
|
height: $bpk-input-large-height;
|
|
232
232
|
padding-right: bpk-spacing-base();
|
|
233
233
|
padding-left: bpk-spacing-base();
|
|
234
|
+
border-radius: $bpk-input-large-border-radius;
|
|
234
235
|
|
|
235
236
|
&.bpk-input--valid,
|
|
236
237
|
&.bpk-input--invalid,
|
|
@@ -402,6 +403,7 @@
|
|
|
402
403
|
height: $bpk-input-large-height;
|
|
403
404
|
padding: bpk-spacing-md() bpk-spacing-base();
|
|
404
405
|
padding-right: bpk-spacing-xxl();
|
|
406
|
+
border-radius: $bpk-select-large-border-radius;
|
|
405
407
|
background: $bpk-surface-default-day
|
|
406
408
|
url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMTYxNjE2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=')
|
|
407
409
|
no-repeat right bpk-spacing-base() center;
|
|
@@ -1049,6 +1051,7 @@
|
|
|
1049
1051
|
min-height: 6 * bpk-spacing-base();
|
|
1050
1052
|
padding-right: bpk-spacing-base();
|
|
1051
1053
|
padding-left: bpk-spacing-base();
|
|
1054
|
+
border-radius: $bpk-input-large-border-radius;
|
|
1052
1055
|
|
|
1053
1056
|
&.bpk-textarea--invalid {
|
|
1054
1057
|
padding-right: bpk-spacing-xxl();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyscanner/backpack-web",
|
|
3
|
-
"version": "36.
|
|
3
|
+
"version": "36.7.0",
|
|
4
4
|
"description": "Backpack Design System web library",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -27,13 +27,12 @@
|
|
|
27
27
|
"@radix-ui/react-compose-refs": "^1.1.0",
|
|
28
28
|
"@radix-ui/react-slider": "^1.1.2",
|
|
29
29
|
"@react-google-maps/api": "^2.19.3",
|
|
30
|
-
"@skyscanner/bpk-foundations-web": "^
|
|
30
|
+
"@skyscanner/bpk-foundations-web": "^19.1.0",
|
|
31
31
|
"@skyscanner/bpk-svgs": "^20.0.0",
|
|
32
32
|
"a11y-focus-scope": "^1.1.3",
|
|
33
33
|
"a11y-focus-store": "^1.0.0",
|
|
34
34
|
"d3-path": "^2.0.0",
|
|
35
35
|
"d3-scale": "^4.0.2",
|
|
36
|
-
"date-fns": "^3.3.1",
|
|
37
36
|
"intersection-observer": "^0.7.0",
|
|
38
37
|
"lodash": "^4.17.20",
|
|
39
38
|
"lodash.clamp": "^4.0.3",
|
|
@@ -47,6 +46,7 @@
|
|
|
47
46
|
"react-window": "^1.8.7"
|
|
48
47
|
},
|
|
49
48
|
"peerDependencies": {
|
|
49
|
+
"date-fns": "3.3.1 - 4",
|
|
50
50
|
"node-sass": ">= 7",
|
|
51
51
|
"react": "17.0.2 - 18.3.1",
|
|
52
52
|
"react-dom": "17.0.2 - 18.3.1",
|
|
@@ -233,6 +233,7 @@
|
|
|
233
233
|
height: tokens.$bpk-input-large-height;
|
|
234
234
|
padding-right: tokens.bpk-spacing-base();
|
|
235
235
|
padding-left: tokens.bpk-spacing-base();
|
|
236
|
+
border-radius: tokens.$bpk-input-large-border-radius;
|
|
236
237
|
|
|
237
238
|
&.bpk-input--valid,
|
|
238
239
|
&.bpk-input--invalid,
|
|
@@ -404,6 +405,7 @@
|
|
|
404
405
|
height: tokens.$bpk-input-large-height;
|
|
405
406
|
padding: tokens.bpk-spacing-md() tokens.bpk-spacing-base();
|
|
406
407
|
padding-right: tokens.bpk-spacing-xxl();
|
|
408
|
+
border-radius: tokens.$bpk-select-large-border-radius;
|
|
407
409
|
background: tokens.$bpk-surface-default-day
|
|
408
410
|
url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMTYxNjE2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=')
|
|
409
411
|
no-repeat right tokens.bpk-spacing-base() center;
|
|
@@ -1051,6 +1053,7 @@
|
|
|
1051
1053
|
min-height: 6 * tokens.bpk-spacing-base();
|
|
1052
1054
|
padding-right: tokens.bpk-spacing-base();
|
|
1053
1055
|
padding-left: tokens.bpk-spacing-base();
|
|
1056
|
+
border-radius: tokens.$bpk-input-large-border-radius;
|
|
1054
1057
|
|
|
1055
1058
|
&.bpk-textarea--invalid {
|
|
1056
1059
|
padding-right: tokens.bpk-spacing-xxl();
|