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(Form Inputs): hide label containers if no slot passed #569

Merged
merged 3 commits into from
Oct 11, 2023
Merged

fix(Form Inputs): hide label containers if no slot passed #569

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0ea04ff
fix(Form Inputs): apply `!important` to hidden labels
dgonzalezr Oct 10, 2023
8125de2
fix: typos and color token usages
dgonzalezr Oct 10, 2023
babb24f
test(Textarea): update e2e tests
dgonzalezr Oct 10, 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
4 changes: 2 additions & 2 deletions packages/beeq/src/components/checkbox/scss/bq-checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,10 @@

// Display background on hover (if enabled)
&.has-background:not(.is-disabled):hover {
@apply bg-ui-secondary-hover;
@apply bg-ui-primary-hover;
}

// Checked/Inderterminate hover state
// Checked/Indeterminate hover state
&.is-checked,
&.is-indeterminate {
&:not(.is-disabled):hover .bq-checkbox__checkbox {
Expand Down
4 changes: 2 additions & 2 deletions packages/beeq/src/components/dialog/bq-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -257,7 +257,7 @@ export class BqDialog {
</header>
<div
class={{
hidden: !this.hasContent,
'!hidden': !this.hasContent,
'overflow-y-auto px-[var(--bq-dialog--padding)]': this.hasContent,
'!pb-[var(--bq-dialog--padding)]': !this.hasFooter,
}}
Expand All @@ -269,7 +269,7 @@ export class BqDialog {
</main>
<footer
class={{
hidden: !this.hasFooter,
'!hidden': !this.hasFooter,
'bq-dialog--footer': this.hasFooter,
'bg-ui-primary-alt !py-s': this.footerApperance === 'highlight',
}}
Expand Down
2 changes: 1 addition & 1 deletion packages/beeq/src/components/divider/bq-divider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@ export class BqDivider {
<line {...strokeAttributes} part="dash-start-line" />
</svg>
<slot onSlotchange={this.handleSlotChange} />
<svg class={{ 'bq-divider--stroke end': true, hidden: !this.hasTitle }} part="dash-end">
<svg class={{ 'bq-divider--stroke end': true, '!hidden': !this.hasTitle }} part="dash-end">
<line {...strokeAttributes} part="dash-end-line" />
</svg>
</div>
Expand Down
11 changes: 7 additions & 4 deletions packages/beeq/src/components/input/bq-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -302,7 +302,7 @@ export class BqInput {
<div class="bq-input" part="base">
{/* Label */}
<label
class={{ 'bq-input--label': true, hidden: !this.hasLabel }}
class={{ 'bq-input--label': true, '!hidden': !this.hasLabel }}
htmlFor={this.name || this.fallbackInputId}
ref={(labelElem) => (this.labelElem = labelElem)}
part="label"
Expand All @@ -320,7 +320,7 @@ export class BqInput {
>
{/* Prefix */}
<span
class={{ 'bq-input--control__prefix': true, hidden: !this.hasPrefix }}
class={{ 'bq-input--control__prefix': true, '!hidden': !this.hasPrefix }}
ref={(spanElem) => (this.prefixElem = spanElem)}
part="prefix"
>
Expand Down Expand Up @@ -378,7 +378,7 @@ export class BqInput {
)}
{/* Suffix */}
<span
class={{ 'bq-input--control__suffix': true, hidden: !this.hasSuffix }}
class={{ 'bq-input--control__suffix': true, '!hidden': !this.hasSuffix }}
ref={(spanElem) => (this.suffixElem = spanElem)}
part="suffix"
>
Expand All @@ -387,7 +387,10 @@ export class BqInput {
</div>
{/* Helper text */}
<div
class={{ [`bq-input--helper-text validation-${this.validationStatus}`]: true, hidden: !this.hasHelperText }}
class={{
[`bq-input--helper-text validation-${this.validationStatus}`]: true,
'!hidden': !this.hasHelperText,
}}
ref={(divElem) => (this.helperTextElem = divElem)}
part="helper-text"
>
Expand Down
2 changes: 1 addition & 1 deletion packages/beeq/src/components/radio/scss/bq-radio.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
}

&.has-background:not(.is-disabled):hover {
@apply bg-ui-secondary-hover;
@apply bg-ui-primary-hover;
}

&.is-checked:not(.is-disabled) {
Expand Down
9 changes: 6 additions & 3 deletions packages/beeq/src/components/select/bq-select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,7 +274,7 @@ export class BqSelect {
{/* Label */}
<label
id={labelId}
class={{ 'bq-select__label': true, hidden: !this.hasLabel }}
class={{ 'bq-select__label': true, '!hidden': !this.hasLabel }}
htmlFor={this.name || this.fallbackInputId}
ref={(labelElem: HTMLSpanElement) => (this.labelElem = labelElem)}
part="label"
Expand Down Expand Up @@ -307,7 +307,7 @@ export class BqSelect {
>
{/* Prefix */}
<span
class={{ 'bq-select__control--prefix': true, hidden: !this.hasPrefix }}
class={{ 'bq-select__control--prefix': true, '!hidden': !this.hasPrefix }}
ref={(spanElem: HTMLSpanElement) => (this.prefixElem = spanElem)}
part="prefix"
>
Expand Down Expand Up @@ -374,7 +374,10 @@ export class BqSelect {
</bq-dropdown>
{/* Helper text */}
<div
class={{ [`bq-select__helper-text validation-${this.validationStatus}`]: true, hidden: !this.hasHelperText }}
class={{
[`bq-select__helper-text validation-${this.validationStatus}`]: true,
'!hidden': !this.hasHelperText,
}}
ref={(divElem: HTMLDivElement) => (this.helperTextElem = divElem)}
part="helper-text"
>
Expand Down
2 changes: 1 addition & 1 deletion packages/beeq/src/components/spinner/bq-spinner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ export class BqSpinner {
class={{
'bq-spinner--icon': true,
flex: this.hasIconSlot,
hidden: !this.hasIconSlot,
'!hidden': !this.hasIconSlot,
}}
ref={(spanElem) => (this.iconSlotElem = spanElem)}
part="custom-icon"
Expand Down
6 changes: 3 additions & 3 deletions packages/beeq/src/components/tab-group/bq-tab-group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,11 +118,11 @@ export class BqTabGroup {

switch (event.detail.key) {
case 'ArrowRight': {
await this.focusTabSibbling(target, 'forward');
await this.focusTabSibling(target, 'forward');
break;
}
case 'ArrowLeft': {
await this.focusTabSibbling(target, 'backward');
await this.focusTabSibling(target, 'backward');
break;
}
default:
Expand All @@ -146,7 +146,7 @@ export class BqTabGroup {
// These methods cannot be called from the host element.
// =======================================================

private focusTabSibbling = async (
private focusTabSibling = async (
currentTarget: HTMLBqTabElement,
direction: 'forward' | 'backward',
): Promise<void> => {
Expand Down
2 changes: 1 addition & 1 deletion packages/beeq/src/components/tab-group/scss/bq-tab-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
@apply relative;

&::after {
@apply absolute bottom-0 flex w-full border-0 border-b border-solid border-stroke-secondary content-empty;
@apply absolute bottom-0 flex w-full border-0 border-b border-solid border-bg-tertiary content-empty;
}
}

Expand Down
24 changes: 12 additions & 12 deletions packages/beeq/src/components/tab/scss/bq-tab-variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@
* @prop --bq-tab--font-weight - Font weight
* @prop --bq-tab--line-height - Line height
* @prop --bq-tab--label-icon-gap - Gap between label and icon
* @prop --bq-tab--pading-vertical-small - Vertical padding for small tab
* @prop --bq-tab--pading-horizontal-small - Horizontal padding for small tab
* @prop --bq-tab--pading-vertical-medium - Vertical padding for medium tab
* @prop --bq-tab--pading-horizontal-medium - Horizontal padding for medium tab
* @prop --bq-tab--pading-vertical-large - Vertical padding for large tab
* @prop --bq-tab--pading-horizontal-large - Horizontal padding for large tab
* @prop --bq-tab--padding-vertical-small - Vertical padding for small tab
* @prop --bq-tab--padding-horizontal-small - Horizontal padding for small tab
* @prop --bq-tab--padding-vertical-medium - Vertical padding for medium tab
* @prop --bq-tab--padding-horizontal-medium - Horizontal padding for medium tab
* @prop --bq-tab--padding-vertical-large - Vertical padding for large tab
* @prop --bq-tab--padding-horizontal-large - Horizontal padding for large tab
* @prop --bq-tab--icon-size-small - Icon size for small tab
* @prop --bq-tab--icon-size-medium - Icon size for medium tab
* @prop --bq-tab--icon-size-large - Icon size for large tab
Expand All @@ -24,14 +24,14 @@

--bq-tab--label-icon-gap: theme('spacing.xs');

--bq-tab--pading-vertical-small: theme('spacing.xs2');
--bq-tab--pading-horizontal-small: theme('spacing.m');
--bq-tab--padding-vertical-small: theme('spacing.xs2');
--bq-tab--padding-horizontal-small: theme('spacing.m');

--bq-tab--pading-vertical-medium: theme('spacing.xs');
--bq-tab--pading-horizontal-medium: theme('spacing.l');
--bq-tab--padding-vertical-medium: theme('spacing.xs');
--bq-tab--padding-horizontal-medium: theme('spacing.l');

--bq-tab--pading-vertical-large: theme('spacing.s');
--bq-tab--pading-horizontal-large: theme('spacing.l');
--bq-tab--padding-vertical-large: theme('spacing.s');
--bq-tab--padding-horizontal-large: theme('spacing.l');

--bq-tab--icon-size-small: 20px;
--bq-tab--icon-size-medium: 24px;
Expand Down
8 changes: 4 additions & 4 deletions packages/beeq/src/components/tab/scss/bq-tab.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

.bq-tab {
@apply relative flex cursor-pointer items-center justify-center rounded-s disabled:cursor-not-allowed;
@apply text-[length:--bq-tab--font-size] font-[--bq-tab--font-weight] leading-[--bq-tab--line-height] [&:not([disabled])]:hover:text-text-brand-hover;
@apply text-[length:--bq-tab--font-size] font-[--bq-tab--font-weight] leading-[--bq-tab--line-height] [&:not([disabled])]:hover:bg-ui-primary-hover [&:not([disabled])]:hover:text-text-brand-hover;
@apply border-0 bg-transparent focus-visible:focus;
@apply transition-[color,background-color,border-color,box-shadow] duration-300;

Expand All @@ -33,7 +33,7 @@
}

&--small {
@apply px-[--bq-tab--pading-horizontal-small] py-[--bq-tab--pading-vertical-small];
@apply px-[--bq-tab--padding-horizontal-small] py-[--bq-tab--padding-vertical-small];

::slotted(bq-icon) {
--bq-icon--size: var(--bq-tab--icon-size-small) #{!important};
Expand All @@ -42,7 +42,7 @@
}

&--medium {
@apply px-[--bq-tab--pading-horizontal-medium] py-[--bq-tab--pading-vertical-medium];
@apply px-[--bq-tab--padding-horizontal-medium] py-[--bq-tab--padding-vertical-medium];

::slotted(bq-icon) {
--bq-icon--size: var(--bq-tab--icon-size-medium) #{!important};
Expand All @@ -51,7 +51,7 @@
}

&--large {
@apply px-[--bq-tab--pading-horizontal-large] py-[--bq-tab--pading-vertical-large] text-l;
@apply px-[--bq-tab--padding-horizontal-large] py-[--bq-tab--padding-vertical-large] text-l;

::slotted(bq-icon) {
--bq-icon--size: var(--bq-tab--icon-size-large) #{!important};
Expand Down
6 changes: 3 additions & 3 deletions packages/beeq/src/components/textarea/__tests__/bq-textarea.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ describe('bq-textarea', () => {
});
const helperContainerElem = await page.find('bq-textarea >>> .bq-textarea__helper--counter');

expect(helperContainerElem).not.toHaveClass('hidden');
expect(helperContainerElem).not.toHaveClass('!hidden');
});

it('should hide helper content if no helper text and maxlenght counter', async () => {
Expand All @@ -70,7 +70,7 @@ describe('bq-textarea', () => {
});
const helperContainerElem = await page.find('bq-textarea >>> .bq-textarea__helper');

expect(helperContainerElem).toHaveClass('hidden');
expect(helperContainerElem).toHaveClass('!hidden');
});

it('should write and emit change event', async () => {
Expand Down Expand Up @@ -108,7 +108,7 @@ describe('bq-textarea', () => {
expect(bqInput).toHaveReceivedEventTimes(value.length);
});

it('shold show and count all characters', async () => {
it('should show and count all characters', async () => {
const value = 'Hello World!';
const maxlenght = 100;
const page = await newE2EPage({
Expand Down
6 changes: 3 additions & 3 deletions packages/beeq/src/components/textarea/bq-textarea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,7 +250,7 @@ export class BqTextarea {
return (
<div class="bq-textarea flex flex-auto flex-col">
<label
class={{ 'bq-textarea__label': true, hidden: !this.hasLabel }}
class={{ 'bq-textarea__label': true, '!hidden': !this.hasLabel }}
htmlFor={this.name ?? this.fallbackId}
ref={(label: HTMLLabelElement) => (this.labelElem = label)}
>
Expand Down Expand Up @@ -289,13 +289,13 @@ export class BqTextarea {
class={{
'bq-textarea__helper flex items-center justify-between': true,
[`validation-${this.validationStatus}`]: true,
hidden: !this.hasHelperText && !this.maxlength,
'!hidden': !this.hasHelperText && !this.maxlength,
}}
>
<span class="bq-textarea__helper--text" ref={(span: HTMLElement) => (this.helperTextElem = span)}>
<slot name="helper-text" onSlotchange={this.handleHelperTextSlotChange} />
</span>
<span class={{ 'bq-textarea__helper--counter': true, hidden: !this.maxlength }}>
<span class={{ 'bq-textarea__helper--counter': true, '!hidden': !this.maxlength }}>
{this.numberOfCharacters}/{this.maxlength}
</span>
</div>
Expand Down