Skip to content

get rid of MDC input fields (step 1) #3518

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

Merged
merged 10 commits into from
Apr 16, 2025
Merged

get rid of MDC input fields (step 1) #3518

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
8d029ce
chore(notched-outline): add new `@private` component
Kiarokh Apr 4, 2025
3a25170
chore(text-editor): remove unused styles
Kiarokh Apr 4, 2025
869172b
fix(text-editor): improve accessibility, using more aria roles
Kiarokh Apr 8, 2025
bb3a2a4
refactor(text-editor): use `limel-notched-outline` for rendering
Kiarokh Apr 7, 2025
4c02e54
refactor(input-field): use `limel-notched-outline` for rendering
Kiarokh Apr 7, 2025
047c4bd
refactor(chip-set): use randomly created id for linking label & input…
Kiarokh Apr 7, 2025
0131237
refactor(select): use `limel-notched-outline` for rendering
Kiarokh Apr 9, 2025
f718f66
refactor(select): use `limel-notched-outline` for rendering
Kiarokh Apr 9, 2025
d04fb0d
refactor(chip-set): use `limel-notched-outline` for rendering
Kiarokh Apr 10, 2025
9ac173a
Merge branch 'main' into limel-notched-outline
LucyChyzhova Apr 15, 2025
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
24 changes: 24 additions & 0 deletions etc/lime-elements.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -555,6 +555,17 @@ export namespace Components {
"allowClicksElement": HTMLElement;
"open": boolean;
}
export interface LimelNotchedOutline {
"disabled": boolean;
"hasFloatingLabel": boolean;
"hasLeadingIcon": boolean;
"hasValue": boolean;
"invalid": boolean;
"label"?: string;
"labelId"?: string;
"readonly": boolean;
"required": boolean;
}
// (undocumented)
export interface LimelPicker {
"actionPosition": ActionPosition;
Expand Down Expand Up @@ -1119,6 +1130,8 @@ export namespace JSX {
// (undocumented)
"limel-menu-surface": LimelMenuSurface;
// (undocumented)
"limel-notched-outline": LimelNotchedOutline;
// (undocumented)
"limel-picker": LimelPicker;
// (undocumented)
"limel-popover": LimelPopover;
Expand Down Expand Up @@ -1618,6 +1631,17 @@ export namespace JSX {
"onDismiss"?: (event: LimelMenuSurfaceCustomEvent<void>) => void;
"open"?: boolean;
}
export interface LimelNotchedOutline {
"disabled"?: boolean;
"hasFloatingLabel"?: boolean;
"hasLeadingIcon"?: boolean;
"hasValue"?: boolean;
"invalid"?: boolean;
"label"?: string;
"labelId"?: string;
"readonly"?: boolean;
"required"?: boolean;
}
// (undocumented)
export interface LimelPicker {
"actionPosition"?: ActionPosition;
Expand Down
4 changes: 3 additions & 1 deletion src/components/chip-set/chip-set.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,9 @@ describe('limel-chip-set', () => {
]);
await page.waitForChanges();

label = await page.find('limel-chip-set >>> .chip-set__label');
label = await page.find(
'limel-chip-set >>> .limel-notched-outline--notch label',
);
chips = await page.findAll('limel-chip-set >>> limel-chip');

spy = await chipSet.spyOnEvent('interact');
Expand Down
88 changes: 19 additions & 69 deletions src/components/chip-set/chip-set.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,6 @@

@use '@material/textfield';
@use '@material/textfield/icon';
@use '@material/notched-outline/mdc-notched-outline';
@use '@material/floating-label';
@use '@material/floating-label/mdc-floating-label';

/**
* @prop --icon-background-color: Background color of the icon. Defaults to transparent.
Expand All @@ -21,14 +18,7 @@
@include textfield.core-styles;
@include icon.icon-core-styles;

@include shared_input-select-picker.outlined-style-overrides;
@include shared_input-select-picker.floating-label-overrides;
@include shared_input-select-picker.cropped-label-hack;
@include shared_input-select-picker.disabled-overrides;
@include shared_input-select-picker.readonly-overrides;
@include shared_input-select-picker.leading-icon;
@include shared_input-select-picker.lime-empty-value-for-readonly;
@include shared_input-select-picker.lime-looks-like-input-value;

$height-of-chip-set-input: functions.pxToRem(36);
$leading-icon-space: 1.5rem;
Expand All @@ -37,6 +27,21 @@ $leading-icon-space: 1.5rem;
isolation: isolate;
}

:host(limel-chip-set[type='input']) {
limel-notched-outline {
[slot='content'] {
min-height: shared_input-select-picker.$height-of-mdc-text-field;
}
}
}

:host(limel-chip-set:not([type='input'])) {
.limel-notched-outline {
--limel-notched-outline-border-color: transparent;
--limel-notched-outline-background-color: transparent;
}
}

.mdc-chip-set {
display: flex;
flex-wrap: wrap;
Expand All @@ -45,12 +50,6 @@ $leading-icon-space: 1.5rem;
min-height: shared_input-select-picker.$height-of-mdc-text-field;
position: relative;

&.chip-set--with-label {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not particularly about this line, but could you take a look at the before and after:
before:
Screenshot 2025-04-10 at 10 25 36
after:
Screenshot 2025-04-10 at 10 23 08

Do you want it to have it that close - label and chips? i like more with some space :)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks fine in web-client though. Let's have it as an improvement 🥰
Screenshot 2025-04-10 at 13 55 38

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This new one is the "correct" placement of it 😊. So in case a readonly with type of input (like in the web client) is placed side-by-side of a type of choice for example, then the alignment of their labels and content will be correct.

.lime-floating-label--float-above {
padding-left: functions.pxToRem(4);
}
}

&.mdc-chip-set--input {
padding: 0.4rem 0.5rem;
width: 100%;
Expand All @@ -75,7 +74,7 @@ $leading-icon-space: 1.5rem;
@include shared_input-select-picker.input-field-placeholder;

width: auto;
padding: 0 functions.pxToRem(12);
padding: 0 0.5rem;

flex-grow: 1;
flex-shrink: 0;
Expand All @@ -100,39 +99,6 @@ $leading-icon-space: 1.5rem;
}
}

// used only in chipsets that do not have input
.chip-set__label {
@include mixins.truncate-text;
width: 120%; // `120%` instead of `100%`,
// because this class is always together with `mdc-floating-label--float-above`,
// which scales the label down. So there is more horizontal space to display the label in.
top: functions.pxToRem(13);
padding-left: functions.pxToRem(20);
}

// Because MDC removes some classes in chipset, we add custom
// classes with similar names and expected behavior & styles.
// These class names start with `lime-`, instead of `mdc-`.
.lime-notched-outline--notched {
.mdc-notched-outline__notch {
border-top: 1px solid transparent !important;

.lime-floating-label--float-above {
// This overrides MDC's original top value which is `top: 50%`.
// The reason is that a % value aligns the label in a wrong position
// vertically, when there are multiple rows of chips.
top: functions.pxToRem(27);

transform: translateY(-34.75px) scale(0.75) !important;
font-size: shared_input-select-picker.$cropped-label-hack--font-size;
}
}
}

.force-invalid {
@extend .mdc-text-field--invalid;
}

.clear-all-button {
@include mixins.clear-all-button;
@include mixins.visualize-keyboard-focus;
Expand All @@ -144,14 +110,14 @@ $leading-icon-space: 1.5rem;
opacity: 0; // Is hidden, but can receive focus (such as when navigating through tab indexes).

&:focus,
.has-chips:not(.mdc-text-field--disabled):hover &,
.has-chips:not(.mdc-text-field--disabled).mdc-text-field--focused & {
.has-chips:not(.disabled):hover &,
.has-chips:not(.disabled).mdc-text-field--focused & {
opacity: 1;
outline: none;
}

.mdc-chip-set:not(.has-chips) &,
.has-chips.mdc-text-field--disabled & {
.has-chips.disabled & {
display: none; // Won't receive focus when disabled
}
}
Expand All @@ -161,15 +127,6 @@ $leading-icon-space: 1.5rem;
.mdc-text-field__input {
padding-left: $leading-icon-space;
}

.mdc-floating-label {
&:not(.lime-floating-label--float-above) {
left: $leading-icon-space;
}
&.mdc-floating-label--float-above {
left: functions.pxToRem(4);
}
}
}

limel-chip {
Expand Down Expand Up @@ -207,10 +164,3 @@ limel-chip {

@import './partial-styles/_readonly';
@import './partial-styles/_helper-text';

// To make the input field render smaller than the default MDC UI
.mdc-text-field {
&.mdc-text-field--outlined {
min-height: shared_input-select-picker.$height-of-mdc-text-field;
}
}
Loading