Skip to content

Commit

Permalink
Merge pull request #477 from kiwicom/fix/ie-form-components
Browse files Browse the repository at this point in the history 
FIX: IE Form components
  • Loading branch information
@tomashapl
tomashapl authored Oct 11, 2018
2 parents 66719ea + f7b2a92 commit d9b07aa
Show file tree
Hide file tree
Showing 9 changed files with 141 additions and 91 deletions.
48 changes: 24 additions & 24 deletions src/InputField/__snapshots__/InputField.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ exports[`Storyshots InputField Compact input 1`] = `
</span>
</div>
<input
className="InputField__Input-iRjCvp gvOITt"
className="InputField__Input-iRjCvp lilXhY"
disabled={undefined}
max={undefined}
maxLength={undefined}
Expand All @@ -134,7 +134,7 @@ exports[`Storyshots InputField Compact input 1`] = `
value=""
/>
<div
className="InputField__FakeInput-eneioc dxPio"
className="InputField__FakeInput-eneioc jmDeFv"
/>
</div>
</label>
Expand Down Expand Up @@ -524,7 +524,7 @@ exports[`Storyshots InputField Default input 1`] = `
className="InputField__InputContainer-evnRDD bHPfak"
>
<input
className="InputField__Input-iRjCvp gvOITt"
className="InputField__Input-iRjCvp lilXhY"
disabled={undefined}
max={undefined}
maxLength={undefined}
Expand All @@ -539,7 +539,7 @@ exports[`Storyshots InputField Default input 1`] = `
value=""
/>
<div
className="InputField__FakeInput-eneioc dxPio"
className="InputField__FakeInput-eneioc jmDeFv"
/>
</div>
</label>
Expand Down Expand Up @@ -856,7 +856,7 @@ exports[`Storyshots InputField Email input 1`] = `
className="InputField__InputContainer-evnRDD bHPfak"
>
<input
className="InputField__Input-iRjCvp gvOITt"
className="InputField__Input-iRjCvp lilXhY"
disabled={undefined}
max={undefined}
maxLength={undefined}
Expand All @@ -871,7 +871,7 @@ exports[`Storyshots InputField Email input 1`] = `
value="name@example.co"
/>
<div
className="InputField__FakeInput-eneioc dxPio"
className="InputField__FakeInput-eneioc jmDeFv"
/>
</div>
<div
Expand Down Expand Up @@ -1268,7 +1268,7 @@ exports[`Storyshots InputField Number input 1`] = `
className="InputField__InputContainer-evnRDD bHPfak"
>
<input
className="InputField__Input-iRjCvp gvOITt"
className="InputField__Input-iRjCvp lilXhY"
disabled={undefined}
max={3}
maxLength={undefined}
Expand All @@ -1283,7 +1283,7 @@ exports[`Storyshots InputField Number input 1`] = `
value={2}
/>
<div
className="InputField__FakeInput-eneioc dxPio"
className="InputField__FakeInput-eneioc jmDeFv"
/>
</div>
</label>
Expand Down Expand Up @@ -1693,7 +1693,7 @@ exports[`Storyshots InputField Password input 1`] = `
className="InputField__InputContainer-evnRDD bHPfak"
>
<input
className="InputField__Input-iRjCvp gvOITt"
className="InputField__Input-iRjCvp lilXhY"
disabled={undefined}
max={undefined}
maxLength={undefined}
Expand All @@ -1708,7 +1708,7 @@ exports[`Storyshots InputField Password input 1`] = `
value="p422W0rd"
/>
<div
className="InputField__FakeInput-eneioc dxPio"
className="InputField__FakeInput-eneioc jmDeFv"
/>
</div>
</label>
Expand Down Expand Up @@ -2069,7 +2069,7 @@ exports[`Storyshots InputField Playground 1`] = `
</svg>
</div>
<input
className="InputField__Input-iRjCvp eQklut"
className="InputField__Input-iRjCvp jqecau"
disabled={false}
max={undefined}
maxLength={undefined}
Expand Down Expand Up @@ -2113,7 +2113,7 @@ exports[`Storyshots InputField Playground 1`] = `
</button>
</div>
<div
className="InputField__FakeInput-eneioc VrXqj"
className="InputField__FakeInput-eneioc dlSlqu"
/>
</div>
</label>
Expand Down Expand Up @@ -2958,7 +2958,7 @@ exports[`Storyshots InputField Required field 1`] = `
className="InputField__InputContainer-evnRDD bHPfak"
>
<input
className="InputField__Input-iRjCvp gvOITt"
className="InputField__Input-iRjCvp lilXhY"
disabled={undefined}
max={undefined}
maxLength={undefined}
Expand All @@ -2973,7 +2973,7 @@ exports[`Storyshots InputField Required field 1`] = `
value=""
/>
<div
className="InputField__FakeInput-eneioc dxPio"
className="InputField__FakeInput-eneioc jmDeFv"
/>
</div>
</label>
Expand Down Expand Up @@ -3301,7 +3301,7 @@ exports[`Storyshots InputField Small input 1`] = `
className="InputField__InputContainer-evnRDD cirwSX"
>
<input
className="InputField__Input-iRjCvp eQklut"
className="InputField__Input-iRjCvp jqecau"
disabled={undefined}
max={undefined}
maxLength={undefined}
Expand All @@ -3316,7 +3316,7 @@ exports[`Storyshots InputField Small input 1`] = `
value=""
/>
<div
className="InputField__FakeInput-eneioc VrXqj"
className="InputField__FakeInput-eneioc dlSlqu"
/>
</div>
</label>
Expand Down Expand Up @@ -3663,7 +3663,7 @@ exports[`Storyshots InputField With ButtonLink suffix 1`] = `
className="InputField__InputContainer-evnRDD bHPfak"
>
<input
className="InputField__Input-iRjCvp gvOITt"
className="InputField__Input-iRjCvp lilXhY"
disabled={undefined}
max={undefined}
maxLength={undefined}
Expand Down Expand Up @@ -3706,7 +3706,7 @@ exports[`Storyshots InputField With ButtonLink suffix 1`] = `
</button>
</div>
<div
className="InputField__FakeInput-eneioc dxPio"
className="InputField__FakeInput-eneioc jmDeFv"
/>
</div>
</label>
Expand Down Expand Up @@ -4068,7 +4068,7 @@ exports[`Storyshots InputField With Icon prefix 1`] = `
</svg>
</div>
<input
className="InputField__Input-iRjCvp gvOITt"
className="InputField__Input-iRjCvp lilXhY"
disabled={undefined}
max={undefined}
maxLength={undefined}
Expand All @@ -4083,7 +4083,7 @@ exports[`Storyshots InputField With Icon prefix 1`] = `
value=""
/>
<div
className="InputField__FakeInput-eneioc dxPio"
className="InputField__FakeInput-eneioc jmDeFv"
/>
</div>
</label>
Expand Down Expand Up @@ -4431,7 +4431,7 @@ exports[`Storyshots InputField With ServiceLogo prefix 1`] = `
className="InputField__InputContainer-evnRDD bHPfak"
>
<input
className="InputField__Input-iRjCvp gvOITt"
className="InputField__Input-iRjCvp lilXhY"
disabled={undefined}
max={undefined}
maxLength={undefined}
Expand All @@ -4457,7 +4457,7 @@ exports[`Storyshots InputField With ServiceLogo prefix 1`] = `
/>
</div>
<div
className="InputField__FakeInput-eneioc dxPio"
className="InputField__FakeInput-eneioc jmDeFv"
/>
</div>
</label>
Expand Down Expand Up @@ -4810,7 +4810,7 @@ exports[`Storyshots InputField With text prefix 1`] = `
$
</div>
<input
className="InputField__Input-iRjCvp gvOITt"
className="InputField__Input-iRjCvp lilXhY"
disabled={undefined}
max={undefined}
maxLength={undefined}
Expand All @@ -4825,7 +4825,7 @@ exports[`Storyshots InputField With text prefix 1`] = `
value=""
/>
<div
className="InputField__FakeInput-eneioc dxPio"
className="InputField__FakeInput-eneioc jmDeFv"
/>
</div>
</label>
Expand Down
8 changes: 7 additions & 1 deletion src/InputField/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,8 @@ export const FakeInput = styled(({ children, className }) => (
width: 100%;
position: absolute;
z-index: 1;
top: 0;
left: 0;
box-sizing: border-box;
height: ${getToken(TOKENS.heightInput)};
border-radius: ${({ theme }) => theme.orbit.borderRadiusNormal};
Expand Down Expand Up @@ -172,7 +174,7 @@ export const Input = styled(({ theme, size, suffix, error, help, ...props }) =>
padding: 0 0 ${getToken(TOKENS.paddingInput)};
font-size: inherit;
color: inherit;
background-color: inherit;
background-color: transparent;
cursor: inherit;
flex: 1 auto;
width: 100%;
Expand Down Expand Up @@ -205,6 +207,10 @@ export const Input = styled(({ theme, size, suffix, error, help, ...props }) =>
&::-ms-input-placeholder {
color: ${({ theme }) => theme.orbit.colorPlaceholderInput};
}
&::-ms-clear {
display: none;
}
`;

Input.defaultProps = {
Expand Down
2 changes: 1 addition & 1 deletion src/InputGroup/InputGroup.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ storiesOf("InputGroup", module)
.addWithChapters("Phone number", () => {
const label = text("Label", "Phone number");
const flex = array("Flex", ["0 0 130px", "1 1 100%"]);
const error = text("Error", undefined);
const error = text("Error", "error");
const help = text("Help", undefined);

const selectOptions = [{ value: 1, label: "+420" }, { value: 2, label: "+421" }];
Expand Down
Loading

0 comments on commit d9b07aa

Please sign in to comment.