Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
72 commits
Select commit Hold shift + click to select a range
621dc13
feat(input): add new js and css props
liamdebeasi Oct 31, 2022
d24428c
chore(): copy updates
liamdebeasi Oct 31, 2022
0402ae8
test(input): move old tests to legacy directory
liamdebeasi Oct 31, 2022
7643d2d
feat(input): add legacy vs modern template rendering
liamdebeasi Oct 31, 2022
259a3a2
refactor(form): add form controller
liamdebeasi Oct 31, 2022
a989e94
chore(): update comments
liamdebeasi Oct 31, 2022
2a80a5f
chore(): update tests
liamdebeasi Oct 31, 2022
08ea3a0
chore(): add moved screenshots
liamdebeasi Oct 31, 2022
bd80054
chore(): add moved screenshots
liamdebeasi Oct 31, 2022
19f4994
chore(): fix test file
liamdebeasi Oct 31, 2022
d02c144
chore(): prettier
liamdebeasi Oct 31, 2022
cea5615
feat(input): add base functionality and tests
liamdebeasi Oct 31, 2022
8d7f0c4
feat(input): add missing fixed label
liamdebeasi Oct 31, 2022
6eabc11
feat(input): add basic help text rendering
liamdebeasi Oct 31, 2022
0259004
feat(input): add helper and error text
liamdebeasi Oct 31, 2022
5f765a0
chore(): update descriptions for clarity
liamdebeasi Oct 31, 2022
3e4f70c
test(input): make sure correct content is rendered
liamdebeasi Oct 31, 2022
232d868
test(input): make sure error color can be customized
liamdebeasi Oct 31, 2022
2f6019b
chore(): update test
liamdebeasi Oct 31, 2022
5c3bb0c
chore(): add updated snapshots
Ionitron Oct 31, 2022
f8dc97f
refactor(item): deprecate helper and error slots
liamdebeasi Nov 1, 2022
23af9da
Merge branch '2591-helper' of https://github.com/ionic-team/ionic-fra…
liamdebeasi Nov 1, 2022
eeb7124
feat(input): add counter support
liamdebeasi Nov 1, 2022
b9da66c
refactor(item): deprecate counter and counterFormatter
liamdebeasi Nov 1, 2022
516a615
chore(): a few tweaks
liamdebeasi Nov 1, 2022
2d07367
test(input): clean up tests
liamdebeasi Nov 1, 2022
4a4aca7
Merge remote-tracking branch 'origin/2591-helper' into 2591-counter
liamdebeasi Nov 1, 2022
f855134
test(input): add counter tests
liamdebeasi Nov 1, 2022
a7e4426
chore(): update prop description
liamdebeasi Nov 1, 2022
fff8ed1
Merge remote-tracking branch 'origin/FW-2591' into 2591-props
liamdebeasi Nov 1, 2022
563f177
Update core/src/components/input/input.tsx
liamdebeasi Nov 1, 2022
e1696af
chore(): run build
liamdebeasi Nov 1, 2022
a17a9ae
Merge remote-tracking branch 'origin/2591-props' into 2591-template
liamdebeasi Nov 1, 2022
b458fe7
Merge remote-tracking branch 'origin/2591-template' into 2591-base
liamdebeasi Nov 1, 2022
eace2ec
Merge branch '2591-base' into 2591-helper
liamdebeasi Nov 1, 2022
8be3a58
Merge remote-tracking branch 'origin/2591-helper' into 2591-counter
liamdebeasi Nov 1, 2022
f556aee
chore(input): remove justify property
liamdebeasi Nov 1, 2022
f65f289
chore(): add updated snapshots
Ionitron Nov 1, 2022
e93d734
feat(input): add wip placement
liamdebeasi Nov 1, 2022
71cec98
chore(): clean up styles
liamdebeasi Nov 1, 2022
3a2e063
test(input): add label placement to a11y test
liamdebeasi Nov 1, 2022
d3d10db
test(input): add label placement template
liamdebeasi Nov 1, 2022
9ac44c1
fix(input): adjust input sizing for platform specs
liamdebeasi Nov 1, 2022
b2f5879
test(input): add tests for label placement
liamdebeasi Nov 1, 2022
55092f1
Merge remote-tracking branch 'origin/2591-counter' into 2591-placement
liamdebeasi Nov 1, 2022
661be60
chore(): add updated snapshots
Ionitron Nov 1, 2022
6b8131a
Update core/src/components/input/input.tsx
liamdebeasi Nov 2, 2022
e0b5cd6
feat(input): add missing fill property
liamdebeasi Nov 2, 2022
5a0f812
refactor(): explicitly add element type
liamdebeasi Nov 2, 2022
2bf7b10
test(input): mask test uses new syntax
liamdebeasi Nov 2, 2022
1cc337a
refactor(input): access props once
liamdebeasi Nov 2, 2022
9f04dd1
Merge branch '2591-base' into 2591-helper
liamdebeasi Nov 2, 2022
4272366
chore(): fix el type
liamdebeasi Nov 2, 2022
6d09ad6
Merge remote-tracking branch 'origin/2591-props' into 2591-template
liamdebeasi Nov 2, 2022
9632c22
Merge remote-tracking branch 'origin/2591-template' into 2591-base
liamdebeasi Nov 2, 2022
79ff704
Merge remote-tracking branch 'origin/2591-base' into 2591-helper
liamdebeasi Nov 2, 2022
aa7edae
Merge remote-tracking branch 'origin/2591-helper' into 2591-counter
liamdebeasi Nov 2, 2022
15b1ab6
chore(): sync
liamdebeasi Nov 2, 2022
7670a27
chore(): padding is set on wrapper
liamdebeasi Nov 2, 2022
0a66283
chore(): use mixin
liamdebeasi Nov 2, 2022
3408223
fix(input): padding applied to input wrapper
liamdebeasi Nov 2, 2022
10d2af3
fix(input): fixed label does not have end margin
liamdebeasi Nov 2, 2022
0dceaf6
chore(): add updated snapshots
Ionitron Nov 2, 2022
49c7563
refactor(input): move label class to host
liamdebeasi Nov 3, 2022
a85ca3b
Revert "chore(): add updated snapshots"
liamdebeasi Nov 3, 2022
e58033b
fix(input): adjust size and label offset
liamdebeasi Nov 3, 2022
04e17bb
chore(): add updated snapshots
Ionitron Nov 3, 2022
e845c1f
fix(input): label element is not rendered if no label is passed
liamdebeasi Nov 3, 2022
9557621
fix(input): label spacing uses padding
liamdebeasi Nov 3, 2022
690d36c
chore(): lint
liamdebeasi Nov 3, 2022
1c76776
Update core/src/components/input/test/input.e2e.ts
liamdebeasi Nov 4, 2022
56a04f8
chore(): sync
liamdebeasi Nov 8, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 11 additions & 8 deletions core/src/components/input/input.scss
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,7 @@

// Input Wrapper
// ----------------------------------------------------------------

.input-wrapper {
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));

Expand Down Expand Up @@ -294,11 +295,12 @@

.input-wrapper label {
/**
* The margin between the label and
* the input should be on the end
* when the label sits at the start.
* The padding on the label adds visual
* space between the label and the input.
* We use padding so that this space can still
* be clicked to focus the input.
*/
@include margin(0, 8px, 0, 0);
@include padding(0, 8px, 0, 0);

/**
* This causes the label to take up
Expand Down Expand Up @@ -341,12 +343,13 @@
}

/**
* The margin between the label and
* the input should be on the start
* when the label sits at the end.
* The padding on the label adds visual
* space between the label and the input.
* We use padding so that this space can still
* be clicked to focus the input.
*/
:host(.input-label-placement-end) label {
@include margin(0, 0, 0, 8px);
@include padding(0, 0, 0, 8px);
}

/**
Expand Down
4 changes: 2 additions & 2 deletions core/src/components/input/input.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -555,7 +555,7 @@ export class Input implements ComponentInterface {
}

private renderInput() {
const { disabled, readonly, inputId, labelPlacement } = this;
const { disabled, label, readonly, inputId, labelPlacement } = this;
const mode = getIonMode(this);
const value = this.getValue();

Expand All @@ -570,7 +570,7 @@ export class Input implements ComponentInterface {
})}
>
<div class="input-wrapper">
<label htmlFor={inputId}>{this.label}</label>
{label !== undefined && <label htmlFor={inputId}>{label}</label>}
<input
class="native-input"
ref={(input) => (this.nativeInput = input)}
Expand Down
16 changes: 16 additions & 0 deletions core/src/components/input/test/input.e2e.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';

test.describe('input: rendering', () => {
test.beforeEach(({ skip }) => {
skip.rtl();
skip.mode('ios', 'Rendering is the same across platforms');
});

test('should not render the label element if no label was passed', async ({ page }) => {
await page.setContent(`<ion-input aria-label="my hidden label"></ion-label>`);

const label = page.locator('ion-input label');
await expect(label).toBeHidden();
});
});