Skip to content

Commit be5bb43

Browse files
npeters-devNino Peters
authored andcommitted
feat(textfield): make required asterisk optional
1 parent 7f3d9d1 commit be5bb43

File tree

3 files changed

+27
-1
lines changed

3 files changed

+27
-1
lines changed

field/internal/field.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export class Field extends LitElement {
2525
@property({type: Boolean}) error = false;
2626
@property({type: Boolean}) focused = false;
2727
@property() label = '';
28+
@property({type: Boolean, attribute: 'no-asterisk'}) noAsterisk = false;
2829
@property({type: Boolean}) populated = false;
2930
@property({type: Boolean}) required = false;
3031
@property({type: Boolean}) resizable = false;
@@ -242,7 +243,9 @@ export class Field extends LitElement {
242243
};
243244

244245
// Add '*' if a label is present and the field is required
245-
const labelText = `${this.label}${this.required ? '*' : ''}`;
246+
const labelText = `${this.label}${
247+
this.required && !this.noAsterisk ? '*' : ''
248+
}`;
246249

247250
return html`
248251
<span class="label ${classMap(classes)}" aria-hidden=${!visible}

field/internal/field_test.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ describe('Field', () => {
5252
const template = html`
5353
<md-test-field
5454
.label=${props.label ?? ''}
55+
?no-asterisk=${props.noAsterisk ?? false}
5556
?disabled=${props.disabled ?? false}
5657
.error=${props.error ?? false}
5758
.populated=${props.populated ?? false}
@@ -334,6 +335,21 @@ describe('Field', () => {
334335
)
335336
.toBe('');
336337
});
338+
339+
it('should not render asterisk if required, but noAsterisk', async () => {
340+
// Setup.
341+
// Test case.
342+
const labelValue = 'Label';
343+
const {instance} = await setupTest({
344+
required: true, label: labelValue, noAsterisk: true
345+
});
346+
//Assertion
347+
expect(instance.labelText)
348+
.withContext(
349+
'label test should equal label without asterisk, when required and noAsterisk',
350+
)
351+
.toBe(labelValue);
352+
});
337353
});
338354

339355
describe('supporting text', () => {

textfield/internal/text-field.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,12 @@ export abstract class TextField extends textFieldBaseClass {
132132
*/
133133
@property() label = '';
134134

135+
/**
136+
* Disables the asterisk on the floating label, when the text field is
137+
* required.
138+
*/
139+
@property({type: Boolean, attribute: 'no-asterisk'}) noAsterisk = false;
140+
135141
/**
136142
* Indicates that the user must specify a value for the input before the
137143
* owning form can be submitted and will render an error state when
@@ -554,6 +560,7 @@ export abstract class TextField extends textFieldBaseClass {
554560
?has-end=${this.hasTrailingIcon}
555561
?has-start=${this.hasLeadingIcon}
556562
label=${this.label}
563+
?no-asterisk=${this.noAsterisk}
557564
max=${this.maxLength}
558565
?populated=${!!this.value}
559566
?required=${this.required}

0 commit comments

Comments
 (0)