Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

InlineMessage with PortalContent #2947

Merged
merged 7 commits into from
Aug 21, 2024
Merged

InlineMessage with PortalContent #2947

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
029cf4a
inlineMessage-statusIcon
vvalentin-lucca Jul 12, 2024
915859a
portalContent
vvalentin-lucca Jul 12, 2024
bdca956
cleanup
vvalentin-lucca Jul 12, 2024
7a48931
stories
vvalentin-lucca Jul 15, 2024
243e8f6
feedbacks
vvalentin-lucca Aug 21, 2024
44a912f
cleanup
vvalentin-lucca Aug 21, 2024
40bac06
portalContent
vvalentin-lucca Aug 21, 2024
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
7 changes: 6 additions & 1 deletion packages/ng/inline-message/inline-message.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,6 @@
<lu-icon [icon]="state" *ngIf="state && state !== 'default'" [alt]="state"></lu-icon>{{label}}
<span *ngIf="state && state !== 'default'" class="lucca-icon inlineMessage-statusIcon" aria-hidden="true"></span>
@if (isStringPortalContent(label)) {
<p class="inlineMessage-content">{{label}}</p>
} @else {
<div class="inlineMessage-content"><ng-container *luPortal="label"></ng-container></div>
}
12 changes: 8 additions & 4 deletions packages/ng/inline-message/inline-message.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { ChangeDetectionStrategy, Component, inject, Input, OnChanges, ViewEncapsulation } from '@angular/core';
import { NgIf } from '@angular/common';
import { InlineMessageState } from './inline-message-state';
import { LuClass } from '@lucca-front/ng/core';
import { ChangeDetectionStrategy, Component, inject, Input, OnChanges, ViewEncapsulation } from '@angular/core';
import { LuClass, PortalContent } from '@lucca-front/ng/core';
import { IconComponent } from '@lucca-front/ng/icon';
import { InlineMessageState } from './inline-message-state';

@Component({
selector: 'lu-inline-message',
Expand All @@ -21,7 +21,7 @@ export class InlineMessageComponent implements OnChanges {
#luClass = inject(LuClass);

@Input({ required: true })
label: string;
label: PortalContent;

@Input()
state: InlineMessageState;
Expand All @@ -35,4 +35,8 @@ export class InlineMessageComponent implements OnChanges {
[`is-${this.state}`]: true,
});
}

public isStringPortalContent(message: PortalContent): message is string {
return typeof message === 'string';
}
}
22 changes: 16 additions & 6 deletions packages/scss/src/components/inlineMessage/component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,27 @@
@use '@lucca-front/icons/src/icon/exports' as icon;

@mixin component {
@mixin component($atRoot: 'without: rule') {
display: flex;
gap: var(--components-inlineMessage-gap);
grid-column: 2;
font-size: var(--components-inlineMessage-fontSize);
line-height: var(--components-inlineMessage-lineHeight);
color: var(--components-inlineMessage-color);
grid-column: 2;

.lucca-icon {
@include icon.XS;
@at-root ($atRoot) {
.inlineMessage-content {
vvalentin-lucca marked this conversation as resolved.
Show resolved Hide resolved
display: flex;
gap: var(--components-inlineMessage-gap);
margin: 0;
}

// .lucca-icon:first-child is deprecated
.inlineMessage-statusIcon,
.inlineMessage > .lucca-icon:first-child {
@include icon.XS;

color: var(--components-inlineMessage-icon-color);
margin-top: 2px;
color: var(--components-inlineMessage-icon-color);
margin-top: 2px;
}
}
}
4 changes: 3 additions & 1 deletion packages/scss/src/components/inlineMessage/mods.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@
--components-inlineMessage-fontSize: var(--sizes-XS-fontSize);
--components-inlineMessage-lineHeight: var(--sizes-XS-lineHeight);

.lucca-icon {
vvalentin-lucca marked this conversation as resolved.
Show resolved Hide resolved
// .lucca-icon:first-child is deprecated
.inlineMessage-statusIcon,
& > .lucca-icon:first-child {
@include icon.XXS;
}
}
26 changes: 16 additions & 10 deletions packages/scss/src/components/inlineMessage/states.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
@mixin success {
--components-inlineMessage-icon-color: var(--palettes-success-700);
--components-inlineMessage-gap: var(--pr-t-spacings-50);
--components-inlineMessage-icon-color: var(--palettes-success-700);
--components-inlineMessage-gap: var(--pr-t-spacings-50);

.lucca-icon {
vvalentin-lucca marked this conversation as resolved.
Show resolved Hide resolved
// .lucca-icon:first-child is deprecated
.inlineMessage-statusIcon,
& > .lucca-icon:first-child {
&::before {
content: '\e9ed'; // Remove when content alternative will have a good support
content: '\e9ed'/ '';
Expand All @@ -11,10 +13,12 @@
}

@mixin warning {
--components-inlineMessage-icon-color: var(--palettes-warning-700);
--components-inlineMessage-gap: var(--pr-t-spacings-50);
--components-inlineMessage-icon-color: var(--palettes-warning-700);
--components-inlineMessage-gap: var(--pr-t-spacings-50);

.lucca-icon {
vvalentin-lucca marked this conversation as resolved.
Show resolved Hide resolved
// .lucca-icon:first-child is deprecated
.inlineMessage-statusIcon,
& > .lucca-icon:first-child {
&::before {
content: '\e992'; // Remove when content alternative will have a good support
content: '\e992'/ '';
Expand All @@ -23,11 +27,13 @@
}

@mixin error {
--components-inlineMessage-icon-color: var(--palettes-error-700);
--components-inlineMessage-color: var(--palettes-error-700);
--components-inlineMessage-gap: var(--pr-t-spacings-50);
--components-inlineMessage-icon-color: var(--palettes-error-700);
--components-inlineMessage-color: var(--palettes-error-700);
--components-inlineMessage-gap: var(--pr-t-spacings-50);

.lucca-icon {
vvalentin-lucca marked this conversation as resolved.
Show resolved Hide resolved
// .lucca-icon:first-child is deprecated
.inlineMessage-statusIcon,
& > .lucca-icon:first-child {
&::before {
content: '\e92c'; // Remove when content alternative will have a good support
content: '\e92c'/ '';
Expand Down
7 changes: 6 additions & 1 deletion stories/documentation/forms/checkbox/checkbox-basic.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,12 @@ function getTemplate(args: CheckboxBasicStory): string {
<input type="checkbox" class="checkboxField-input" id="${id}" aria-labelledby="${id}label" aria-describedby="${id}message"${checked}${mixed}${disabled}${required}${invalid} />
<span class="checkboxField-icon" aria-hidden="true"><span class="checkboxField-icon-check"></span></span>
</span>
<div class="inlineMessage${messageState}" id="${id}message" *ngIf="message"><span aria-hidden="true" class="lucca-icon"></span>${message}</div>
<div class="inlineMessage ${messageState}" id="${id}message" *ngIf="message">
<span aria-hidden="true" class="lucca-icon inlineMessage-statusIcon"></span>
<p class="inlineMessage-content">
${message}
</p>
</div>
</div>`;
}

Expand Down
14 changes: 12 additions & 2 deletions stories/documentation/forms/examples/html&css/form-basic.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,12 @@ function getTemplate(args: FieldsetBasicStory): string {
<input type="text" id="ID1" class="textField-input-value" aria-labelledby="IDlabel1" aria-describedby="IDmessage1" placeholder="Placeholder" aria-invalid="false" />
</div>
</div>
<div class="inlineMessage" id="IDmessage1"><span aria-hidden="true" class="lucca-icon"></span>Helper text</div>
<div class="inlineMessage" id="IDmessage1">
<span aria-hidden="true" class="lucca-icon inlineMessage-statusIcon"></span>
<p class="inlineMessage-content">
Helper text
</p>
</div>
</div>
</div>
<div class="grid-column" style="--grid-colspanAtMediaMinXXS: 2">
Expand Down Expand Up @@ -118,7 +123,12 @@ function getTemplate(args: FieldsetBasicStory): string {
<input type="text" id="ID8" class="textField-input-value" aria-labelledby="IDlabel8" aria-describedby="IDmessage8" placeholder="Placeholder" aria-invalid="false" />
</div>
</div>
<div class="inlineMessage" id="IDmessage8"><span aria-hidden="true" class="lucca-icon"></span>Helper text</div>
<div class="inlineMessage" id="IDmessage8">
<span aria-hidden="true" class="lucca-icon inlineMessage-statusIcon"></span>
<p class="inlineMessage-content">
Helper text
</p>
</div>
</div>
</div>
<div class="grid-column" style="--grid-colspanAtMediaMinXXS: 2">
Expand Down
4 changes: 3 additions & 1 deletion stories/documentation/forms/fields/checkbox/html&css/checkboxfield-disabled.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ function getTemplate(args: CheckboxDisabledStory): string {
<input type="checkbox" class="checkboxField-input" id="ID" aria-describedby="IDmessage" aria-required="true" disabled />
<span class="checkboxField-icon" aria-hidden="true"><span class="checkboxField-icon-check"></span></span>
</span>
<div class="inlineMessage" id="IDmessage">Helper text</div>
<div class="inlineMessage" id="IDmessage">
<p class="inlineMessage-content">Helper text</p>
</div>
</div>`;
}

Expand Down
4 changes: 3 additions & 1 deletion stories/documentation/forms/fields/checkbox/html&css/checkboxfield-invalid.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ function getTemplate(args: CheckboxInvalidStory): string {
<input type="checkbox" class="checkboxField-input" id="ID" aria-describedby="IDmessage" aria-required="true" aria-invalid="true" />
<span class="checkboxField-icon" aria-hidden="true"><span class="checkboxField-icon-check"></span></span>
</span>
<div class="inlineMessage" id="IDmessage">Helper text</div>
<div class="inlineMessage" id="IDmessage">
<p class="inlineMessage-content">Helper text</p>
</div>
</div>`;
}

Expand Down
4 changes: 3 additions & 1 deletion stories/documentation/forms/fields/checkbox/html&css/checkboxfield-mixed.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ function getTemplate(args: CheckboxMixedStory): string {
<input type="checkbox" class="checkboxField-input" id="ID" aria-describedby="IDmessage" aria-required="true" aria-checked="mixed" checked />
<span class="checkboxField-icon" aria-hidden="true"><span class="checkboxField-icon-check"></span></span>
</span>
<div class="inlineMessage" id="IDmessage">Helper text</div>
<div class="inlineMessage" id="IDmessage">
<p class="inlineMessage-content">Helper text</p>
</div>
</div>`;
}

Expand Down
4 changes: 3 additions & 1 deletion stories/documentation/forms/fields/checkbox/html&css/checkboxfield-size.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ function getTemplate(args: CheckboxSizeStory): string {
<input type="checkbox" class="checkboxField-input" id="ID" aria-describedby="IDmessage" aria-required="true" />
<span class="checkboxField-icon" aria-hidden="true"><span class="checkboxField-icon-check"></span></span>
</span>
<div class="inlineMessage" id="IDmessage">Helper text</div>
<div class="inlineMessage" id="IDmessage">
<p class="inlineMessage-content">Helper text</p>
</div>
</div>`;
}

Expand Down
4 changes: 3 additions & 1 deletion stories/documentation/forms/fields/checkbox/html&css/checkboxfield.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@ function getTemplate(args: CheckboxBasicStory): string {
<input type="checkbox" class="checkboxField-input" id="ID" aria-describedby="IDmessage" aria-required="true" />
<span class="checkboxField-icon" aria-hidden="true"><span class="checkboxField-icon-check"></span></span>
</span>
<div class="inlineMessage" id="IDmessage">Helper text</div>
<div class="inlineMessage" id="IDmessage">
<p class="inlineMessage-content">Helper text</p>
</div>
</div>
`;
}
Expand Down
8 changes: 6 additions & 2 deletions stories/documentation/forms/fields/radio/html&css/radiofield-disabled.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,19 @@ function getTemplate(args: RadioDisabledStory): string {
<input disabled="disabled" type="radio" class="radioField-input" id="IDradioA" name="radioName1" aria-describedby="IDmessageRadioA" checked />
<span class="radioField-icon" aria-hidden="true"><span class="radioField-icon-check"></span></span>
</span>
<div class="inlineMessage" id="IDmessageRadioA">Option text</div>
<div class="inlineMessage" id="IDmessageRadioA">
<p class="inlineMessage-content">Option text</p>
</div>
</div>
<div class="form-field">
<label class="formLabel" for="IDradioB">Option B</label>
<span class="radioField">
<input disabled="disabled" type="radio" class="radioField-input" id="IDradioB" name="radioName1" aria-describedby="IDmessageRadioB" />
<span class="radioField-icon" aria-hidden="true"><span class="radioField-icon-check"></span></span>
</span>
<div class="inlineMessage" id="IDmessageRadioB">Option text</div>
<div class="inlineMessage" id="IDmessageRadioB">
<p class="inlineMessage-content">Option text</p>
</div>
</div>
</fieldset>`;
}
Expand Down
12 changes: 9 additions & 3 deletions stories/documentation/forms/fields/radio/html&css/radiofield-invalid.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,23 @@ function getTemplate(args: RadioInvalidStory): string {
<input aria-invalid="true" type="radio" class="radioField-input" id="IDradioA" name="radioName1" aria-describedby="IDmessageRadioA IDmessageRadioGlobal" checked />
<span class="radioField-icon" aria-hidden="true"><span class="radioField-icon-check"></span></span>
</span>
<div class="inlineMessage" id="IDmessageRadioA">Option text</div>
<div class="inlineMessage" id="IDmessageRadioA">
<p class="inlineMessage-content">Option text</p>
</div>
</div>
<div class="form-field">
<label class="formLabel" for="IDradioB">Option B</label>
<span class="radioField">
<input aria-invalid="true" type="radio" class="radioField-input" id="IDradioB" name="radioName1" aria-describedby="IDmessageRadioB IDmessageRadioGlobal" />
<span class="radioField-icon" aria-hidden="true"><span class="radioField-icon-check"></span></span>
</span>
<div class="inlineMessage" id="IDmessageRadioB">Option text</div>
<div class="inlineMessage" id="IDmessageRadioB">
<p class="inlineMessage-content">Option text</p>
</div>
</div>
<div class="inlineMessage is-error" id="IDmessageRadioGlobal">
<p class="inlineMessage-content">Helper message</p>
</div>
<div class="inlineMessage is-error" id="IDmessageRadioGlobal">Helper message</div>
</fieldset>`;
}

Expand Down
8 changes: 6 additions & 2 deletions stories/documentation/forms/fields/radio/html&css/radiofield-size.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,19 @@ function getTemplate(args: RadioSizeStory): string {
<input type="radio" class="radioField-input" id="IDradioA" name="radioName1" aria-describedby="IDmessageRadioA" checked />
<span class="radioField-icon" aria-hidden="true"><span class="radioField-icon-check"></span></span>
</span>
<div class="inlineMessage" id="IDmessageRadioA">Option text</div>
<div class="inlineMessage" id="IDmessageRadioA">
<p class="inlineMessage-content">Option text</p>
</div>
</div>
<div class="form-field">
<label class="formLabel" for="IDradioB">Option B</label>
<span class="radioField">
<input type="radio" class="radioField-input" id="IDradioB" name="radioName1" aria-describedby="IDmessageRadioB" />
<span class="radioField-icon" aria-hidden="true"><span class="radioField-icon-check"></span></span>
</span>
<div class="inlineMessage" id="IDmessageRadioB">Option text</div>
<div class="inlineMessage" id="IDmessageRadioB">
<p class="inlineMessage-content">Option text</p>
</div>
</div>
</fieldset>`;
}
Expand Down
8 changes: 6 additions & 2 deletions stories/documentation/forms/fields/radio/html&css/radiofield.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,19 @@ function getTemplate(args: RadioBasicStory): string {
<input type="radio" class="radioField-input" id="IDradioA" name="radioName1" aria-describedby="IDmessageRadioA" checked />
<span class="radioField-icon" aria-hidden="true"><span class="radioField-icon-check"></span></span>
</span>
<div class="inlineMessage" id="IDmessageRadioA">Option text</div>
<div class="inlineMessage" id="IDmessageRadioA">
<p class="inlineMessage-content">Option text</p>
</div>
</div>
<div class="form-field">
<label class="formLabel" for="IDradioB">Option B</label>
<span class="radioField">
<input type="radio" class="radioField-input" id="IDradioB" name="radioName1" aria-describedby="IDmessageRadioB" />
<span class="radioField-icon" aria-hidden="true"><span class="radioField-icon-check"></span></span>
</span>
<div class="inlineMessage" id="IDmessageRadioB">Option text</div>
<div class="inlineMessage" id="IDmessageRadioB">
<p class="inlineMessage-content">Option text</p>
</div>
</div>
</fieldset>`;
}
Expand Down
4 changes: 3 additions & 1 deletion stories/documentation/forms/fields/switch/html&css/switchfield-disabled.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ function getTemplate(args: SwitchDisabledStory): string {
<input type="checkbox" class="switchField-input" id="ID" aria-describedby="IDmessage" disabled />
<span class="switchField-icon" aria-hidden="true"><span class="switchField-icon-check"></span></span>
</span>
<div class="inlineMessage" id="IDmessage">Helper text</div>
<div class="inlineMessage" id="IDmessage">
<p class="inlineMessage-content">Helper text</p>
</div>
</div>`;
}

Expand Down
4 changes: 3 additions & 1 deletion stories/documentation/forms/fields/switch/html&css/switchfield-invalid.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ function getTemplate(args: SwitchInvalidStory): string {
<input type="checkbox" class="switchField-input" id="ID" aria-describedby="IDmessage" aria-invalid="true" />
<span class="switchField-icon" aria-hidden="true"><span class="switchField-icon-check"></span></span>
</span>
<div class="inlineMessage" id="IDmessage">Helper text</div>
<div class="inlineMessage" id="IDmessage">
<p class="inlineMessage-content">Helper text</p>
</div>
</div>`;
}

Expand Down
4 changes: 3 additions & 1 deletion stories/documentation/forms/fields/switch/html&css/switchfield-size.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ function getTemplate(args: SwitchSizeStory): string {
<input type="checkbox" class="switchField-input" id="ID" aria-describedby="IDmessage" />
<span class="switchField-icon" aria-hidden="true"><span class="switchField-icon-check"></span></span>
</span>
<div class="inlineMessage" id="IDmessage">Helper text</div>
<div class="inlineMessage" id="IDmessage">
<p class="inlineMessage-content">Helper text</p>
</div>
</div>`;
}

Expand Down
4 changes: 3 additions & 1 deletion stories/documentation/forms/fields/switch/html&css/switchfield.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ function getTemplate(args: SwitchBasicStory): string {
<input type="checkbox" class="switchField-input" id="ID" aria-describedby="IDmessage" />
<span class="switchField-icon" aria-hidden="true"><span class="switchField-icon-check"></span></span>
</span>
<div class="inlineMessage" id="IDmessage">Helper text</div>
<div class="inlineMessage" id="IDmessage">
<p class="inlineMessage-content">Helper text</p>
</div>
</div>`;
}

Expand Down
7 changes: 6 additions & 1 deletion stories/documentation/forms/fields/text/html&css/textfield-counter.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,12 @@ function getTemplate(args: TextfieldCounterStory): string {
<input type="text" id="ID" class="textField-input-value" aria-labelledby="IDlabel" aria-describedby="IDcounter IDmessage" placeholder="Placeholder" aria-invalid="false" />
</div>
</div>
<div class="inlineMessage" id="IDmessage"><span aria-hidden="true" class="lucca-icon"></span>Helper text</div>
<div class="inlineMessage" id="IDmessage">
<span aria-hidden="true" class="lucca-icon inlineMessage-statusIcon"></span>
<p class="inlineMessage-content">
Helper text
</p>
</div>
</div>
`;
}
Expand Down
7 changes: 6 additions & 1 deletion stories/documentation/forms/fields/text/html&css/textfield-disabled.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,12 @@ function getTemplate(args: TextfieldDisabledStory): string {
<input type="text" id="ID" class="textField-input-value" aria-labelledby="IDlabel" aria-describedby="IDmessage" placeholder="Placeholder" aria-invalid="false" disabled />
</div>
</div>
<div class="inlineMessage" id="IDmessage"><span aria-hidden="true" class="lucca-icon"></span>Helper text</div>
<div class="inlineMessage" id="IDmessage">
<span aria-hidden="true" class="lucca-icon inlineMessage-statusIcon"></span>
<p class="inlineMessage-content">
Helper text
</p>
</div>
</div>`;
}

Expand Down
Loading