Skip to content

Commit

Permalink
LOOM-1307 BpkPhoneInput Class 2 Overrides (#3386)
Browse files Browse the repository at this point in the history 
* LOOM-1307 BpkPhoneInput Class 2 Overrides

* Redundant class overrides removed

* Commented-out code removed

* Revert Input and Select changes

* Added extra tab by a mistake - now removed
  • Loading branch information
@jronald01
jronald01 authored Apr 26, 2024
1 parent c51c030 commit 971a7e6
Show file tree
Hide file tree
Showing 2 changed files with 142 additions and 88 deletions.
34 changes: 16 additions & 18 deletions packages/bpk-component-phone-input/src/BpkPhoneInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,15 +149,14 @@ const BpkPhoneInput = (props: Props) => {
className={getClassName('bpk-phone-input', wrapperProps.className)}
>
<div>
<BpkLabel
htmlFor={dialingCodeProps.id}
disabled={disabled}
// TODO: className to be removed
// eslint-disable-next-line @skyscanner/rules/forbid-component-props
className={getClassName('bpk-phone-input__label')}
>
{dialingCodeProps.label}
</BpkLabel>
<div className={getClassName('bpk-phone-input__label')}>
<BpkLabel
htmlFor={dialingCodeProps.id}
disabled={disabled}
>
{dialingCodeProps.label}
</BpkLabel>
</div>
{/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
<BpkSelect
{...commonProps}
Expand All @@ -178,15 +177,14 @@ const BpkPhoneInput = (props: Props) => {
</BpkSelect>
</div>
<div className={getClassName('bpk-phone-input__phone-number')}>
<BpkLabel
htmlFor={id}
disabled={disabled}
// TODO: className to be removed
// eslint-disable-next-line @skyscanner/rules/forbid-component-props
className={getClassName('bpk-phone-input__label')}
>
{label}
</BpkLabel>
<div className={getClassName('bpk-phone-input__label')}>
<BpkLabel
htmlFor={id}
disabled={disabled}
>
{label}
</BpkLabel>
</div>
{/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
<BpkInput
{...commonProps}
Expand Down
196 changes: 126 additions & 70 deletions packages/bpk-component-phone-input/src/__snapshots__/BpkPhoneInput-test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,16 @@ exports[`BpkPhoneInput should render correctly 1`] = `
class="bpk-phone-input"
>
<div>
<label
class="bpk-label bpk-phone-input__label"
for="dialing-code"
<div
class="bpk-phone-input__label"
>
Dialing code
</label>
<label
class="bpk-label"
for="dialing-code"
>
Dialing code
</label>
</div>
<select
aria-invalid="false"
class="bpk-select dialing-code"
Expand All @@ -36,12 +40,16 @@ exports[`BpkPhoneInput should render correctly 1`] = `
<div
class="bpk-phone-input__phone-number"
>
<label
class="bpk-label bpk-phone-input__label"
for="phone-input-id"
<div
class="bpk-phone-input__label"
>
Telephone number
</label>
<label
class="bpk-label"
for="phone-input-id"
>
Telephone number
</label>
</div>
<input
aria-invalid="false"
class="bpk-input fancy-input"
Expand All @@ -61,12 +69,16 @@ exports[`BpkPhoneInput should render correctly with a "disabled" attribute 1`] =
class="bpk-phone-input"
>
<div>
<label
class="bpk-label bpk-label--disabled bpk-phone-input__label"
for="dialing-code"
<div
class="bpk-phone-input__label"
>
Dialing code
</label>
<label
class="bpk-label bpk-label--disabled"
for="dialing-code"
>
Dialing code
</label>
</div>
<select
aria-invalid="false"
class="bpk-select dialing-code"
Expand All @@ -92,12 +104,16 @@ exports[`BpkPhoneInput should render correctly with a "disabled" attribute 1`] =
<div
class="bpk-phone-input__phone-number"
>
<label
class="bpk-label bpk-label--disabled bpk-phone-input__label"
for="phone-input-id"
<div
class="bpk-phone-input__label"
>
Telephone number
</label>
<label
class="bpk-label bpk-label--disabled"
for="phone-input-id"
>
Telephone number
</label>
</div>
<input
aria-invalid="false"
class="bpk-input fancy-input"
Expand All @@ -118,12 +134,16 @@ exports[`BpkPhoneInput should render correctly with a "large" attribute 1`] = `
class="bpk-phone-input"
>
<div>
<label
class="bpk-label bpk-phone-input__label"
for="dialing-code"
<div
class="bpk-phone-input__label"
>
Dialing code
</label>
<label
class="bpk-label"
for="dialing-code"
>
Dialing code
</label>
</div>
<select
aria-invalid="false"
class="bpk-select bpk-select--large dialing-code"
Expand All @@ -148,12 +168,16 @@ exports[`BpkPhoneInput should render correctly with a "large" attribute 1`] = `
<div
class="bpk-phone-input__phone-number"
>
<label
class="bpk-label bpk-phone-input__label"
for="phone-input-id"
<div
class="bpk-phone-input__label"
>
Telephone number
</label>
<label
class="bpk-label"
for="phone-input-id"
>
Telephone number
</label>
</div>
<input
aria-invalid="false"
class="bpk-input bpk-input--large fancy-input"
Expand All @@ -173,12 +197,16 @@ exports[`BpkPhoneInput should render correctly with a "valid" attribute 1`] = `
class="bpk-phone-input"
>
<div>
<label
class="bpk-label bpk-phone-input__label"
for="dialing-code"
<div
class="bpk-phone-input__label"
>
Dialing code
</label>
<label
class="bpk-label"
for="dialing-code"
>
Dialing code
</label>
</div>
<select
aria-invalid="false"
class="bpk-select dialing-code"
Expand All @@ -203,12 +231,16 @@ exports[`BpkPhoneInput should render correctly with a "valid" attribute 1`] = `
<div
class="bpk-phone-input__phone-number"
>
<label
class="bpk-label bpk-phone-input__label"
for="phone-input-id"
<div
class="bpk-phone-input__label"
>
Telephone number
</label>
<label
class="bpk-label"
for="phone-input-id"
>
Telephone number
</label>
</div>
<input
aria-invalid="false"
class="bpk-input bpk-input--valid fancy-input"
Expand All @@ -229,12 +261,16 @@ exports[`BpkPhoneInput should render correctly with a "wrapperProps" attribute 1
class="bpk-phone-input container"
>
<div>
<label
class="bpk-label bpk-phone-input__label"
for="dialing-code"
<div
class="bpk-phone-input__label"
>
Dialing code
</label>
<label
class="bpk-label"
for="dialing-code"
>
Dialing code
</label>
</div>
<select
aria-invalid="false"
class="bpk-select dialing-code"
Expand All @@ -259,12 +295,16 @@ exports[`BpkPhoneInput should render correctly with a "wrapperProps" attribute 1
<div
class="bpk-phone-input__phone-number"
>
<label
class="bpk-label bpk-phone-input__label"
for="phone-input-id"
<div
class="bpk-phone-input__label"
>
Telephone number
</label>
<label
class="bpk-label"
for="phone-input-id"
>
Telephone number
</label>
</div>
<input
aria-invalid="false"
class="bpk-input fancy-input"
Expand All @@ -284,12 +324,16 @@ exports[`BpkPhoneInput should render correctly with a dialing code image attribu
class="bpk-phone-input"
>
<div>
<label
class="bpk-label bpk-phone-input__label"
for="dialing-code"
<div
class="bpk-phone-input__label"
>
Dialing code
</label>
<label
class="bpk-label"
for="dialing-code"
>
Dialing code
</label>
</div>
<div
class="bpk-select-wrapper dialing-wrapper"
>
Expand Down Expand Up @@ -322,12 +366,16 @@ exports[`BpkPhoneInput should render correctly with a dialing code image attribu
<div
class="bpk-phone-input__phone-number"
>
<label
class="bpk-label bpk-phone-input__label"
for="phone-input-id"
<div
class="bpk-phone-input__label"
>
Telephone number
</label>
<label
class="bpk-label"
for="phone-input-id"
>
Telephone number
</label>
</div>
<input
aria-invalid="false"
class="bpk-input fancy-input"
Expand All @@ -347,12 +395,16 @@ exports[`BpkPhoneInput should render correctly with the "dialingCodeMask" attrib
class="bpk-phone-input"
>
<div>
<label
class="bpk-label bpk-phone-input__label"
for="dialing-code"
<div
class="bpk-phone-input__label"
>
Dialing code
</label>
<label
class="bpk-label"
for="dialing-code"
>
Dialing code
</label>
</div>
<select
aria-invalid="false"
class="bpk-select dialing-code"
Expand All @@ -377,12 +429,16 @@ exports[`BpkPhoneInput should render correctly with the "dialingCodeMask" attrib
<div
class="bpk-phone-input__phone-number"
>
<label
class="bpk-label bpk-phone-input__label"
for="phone-input-id"
<div
class="bpk-phone-input__label"
>
Telephone number
</label>
<label
class="bpk-label"
for="phone-input-id"
>
Telephone number
</label>
</div>
<input
aria-invalid="false"
class="bpk-input fancy-input"
Expand Down

0 comments on commit 971a7e6

Please sign in to comment.