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

fix(input): focus style missing on consumer apps #371

Merged
merged 4 commits into from
Jul 20, 2023
Merged

fix(input): focus style missing on consumer apps #371

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ee366c3
refactor(tailwind config): focus style to allow override
dgonzalezr Jul 19, 2023
10fcdfa
fix(input): focus style to inherit from tailwind focus
dgonzalezr Jul 19, 2023
3ebaf26
fix(input): clear button display on focus (without hovering)
dgonzalezr Jul 19, 2023
9c990a5
fix(input): reset focus custom properties for the clear button
dgonzalezr Jul 20, 2023
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
5 changes: 3 additions & 2 deletions packages/bee-q/src/components/input/bq-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -270,6 +270,7 @@ export class BqInput {
this.value = this.inputElem.value;

this.bqClear.emit(this.el);
this.bqInput.emit({ value: this.value, el: this.el });
this.bqChange.emit({ value: this.value, el: this.el });
this.inputElem.focus();

Expand Down Expand Up @@ -311,7 +312,7 @@ export class BqInput {
{/* Input control group */}
<div
class={{
'bq-input--control group': true,
'bq-input--control': true,
[`validation-${this.validationStatus}`]: true,
disabled: this.disabled,
}}
Expand Down Expand Up @@ -362,7 +363,7 @@ export class BqInput {
// The clear button will be visible as long as the input has a value
// and the parent group is hovered or has focus-within
<bq-button
class="bq-input--control__clear ms-[--bq-input--gap] hidden group-hover:inline-block group-[&:has(:focus-within)]:inline-block"
class="bq-input--control__clear ms-[--bq-input--gap] hidden"
appearance="text"
aria-label={this.clearButtonLabel}
size="small"
Expand Down
47 changes: 40 additions & 7 deletions packages/bee-q/src/components/input/scss/bq-input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
@import './bq-input.variables';

:host {
@apply block;
@apply block w-full;
}

/* -------------------------------------------------------------------------- */
Expand Down Expand Up @@ -46,13 +46,25 @@
// Text
@apply text-[length:--bq-input--text-size] text-[color:--bq-input--text-color] placeholder:text-[color:--bq-input--text-placeholder-color];
// Hover
@apply [&:not(:focus-within):not(.disabled)]:hover:border-[color:--bq-input--border-color-hover];
@apply [&:not(.disabled):not(:focus-within)]:hover:border-[color:--bq-input--border-color-hover];

border-style: var(--bq-input--border-style);

// Focus
&:not(.disabled) {
@apply focus-within:border-[color:--bq-input--border-color-focus] focus-within:outline-none focus-within:ring-1 focus-within:ring-[color:--bq-input--border-color-focus];
&:not(.disabled):focus-within {
--bq-ring-width: 1px;
--bq-ring-offset-width: 0;
--bq-ring-color-focus: var(--bq-input--border-color-focus);

@apply focus border-[color:--bq-input--border-color-focus];
}

// Enable clear button whenever the input group control is hovered or has focus
&:not(.disabled):hover,
&:not(.disabled):focus-within {
.bq-input--control__clear {
@apply inline-block;
}
}
}

Expand All @@ -63,15 +75,30 @@
/* ------------------------------- Validation ------------------------------- */

.bq-input--control.validation-error {
@apply border-stroke-danger focus-within:border-stroke-danger-active focus-within:ring-stroke-danger-active [&:not(:focus-within)]:hover:border-stroke-danger-hover;
@apply border-stroke-danger [&:not(.disabled):not(:focus-within)]:hover:border-stroke-danger-hover;

&:not(.disabled):focus-within {
--bq-ring-color-focus: theme('colors.stroke.danger-active');
@apply border-stroke-danger-active;
}
}

.bq-input--control.validation-success {
@apply border-stroke-success focus-within:border-stroke-success-active focus-within:ring-stroke-success-active [&:not(:focus-within)]:hover:border-stroke-success-hover;
@apply border-stroke-success [&:not(.disabled):not(:focus-within)]:hover:border-stroke-success-hover;

&:not(.disabled):focus-within {
--bq-ring-color-focus: theme('colors.stroke.success-active');
@apply border-stroke-success-active;
}
}

.bq-input--control.validation-warning {
@apply border-stroke-warning focus-within:border-stroke-warning-active focus-within:ring-stroke-warning-active [&:not(:focus-within)]:hover:border-stroke-warning-hover;
@apply border-stroke-warning [&:not(.disabled):not(:focus-within)]:hover:border-stroke-warning-hover;

&:not(.disabled):focus-within {
--bq-ring-color-focus: theme('colors.stroke.warning-active');
@apply border-stroke-warning-active;
}
}

/* -------------------------------------------------------------------------- */
Expand All @@ -91,6 +118,12 @@
/* -------------------------------------------------------------------------- */

.bq-input--control__clear::part(button) {
// Since the clear button is inside the input group control,
// we need to reset the focus ring styles
--bq-ring-width: initial;
--bq-ring-offset-width: initial;
--bq-ring-color-focus: initial;

@apply h-auto rounded-xs border-none p-0;
}

Expand Down
7 changes: 2 additions & 5 deletions tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,11 +103,8 @@ const config: Config = {
* }
*/
'.focus': {
'--tw-ring-width': '2px',
'--tw-ring-offset-width': '1px',
'--tw-ring-color': theme('colors.focus'),
outline: `var(--tw-ring-width) solid ${String(theme('colors.focus'))}`,
outlineOffset: 'var(--tw-ring-offset-width)',
outline: `var(--bq-ring-width, 2px) solid var(--bq-ring-color-focus, ${String(theme('colors.focus'))})`,
outlineOffset: 'var(--bq-ring-offset-width, 1px)',
},
});
}),
Expand Down