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

Jump to bottom

fix(storybook): Input field number adjustment #1152

Open
wants to merge 11 commits into
base: develop
Choose a base branch
from
Open

fix(storybook): Input field number adjustment #1152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
1eccc8e
fix(storybook): readonly & disabled state
bar-tay Aug 26, 2024
4396843
fix(storybook): readonly & disabled state
bar-tay Sep 3, 2024
02d560f
Merge branch 'develop' into fix/915_input-number-fix
bar-tay Sep 3, 2024
16a1f04
fix(storybook): button tests
bar-tay Sep 3, 2024
809798d
fix(storybook): width of horizontal stepper
bar-tay Sep 3, 2024
666d690
fix(storybook): fix background, value & unit color
bar-tay Sep 6, 2024
320d8ce
fix(storybook): native stepper is shown in firefox
bar-tay Sep 6, 2024
efd58d6
Merge branch 'develop' into fix/915_input-number-fix
bar-tay Sep 18, 2024
c332842
fix(ui): test issue
bar-tay Sep 19, 2024
77da501
Merge branch 'develop' into fix/915_input-number-fix
larserbach Sep 23, 2024
da96243
fix(ui): apply lowercase tokens
larserbach Sep 23, 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
65 changes: 20 additions & 45 deletions packages/ui-library/src/components/button-icon/index.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import '@boiler/ui-library';

import { BlrButtonIconRenderFunction } from './renderFunction.js';

import { fixture, expect } from '@open-wc/testing';
import { querySelectorDeep } from 'query-selector-shadow-dom';
import type { BlrButtonIconType } from './index.js';
Expand All @@ -26,24 +24,6 @@ describe('blr-button-icon', () => {
expect(className).to.contain('blr-button-icon');
});

/*
it('is having a visible icon', async () => {
const element = await fixture(BlrButtonIconRenderFunction(sampleParams));

const button = querySelectorDeep('span', element.getRootNode() as HTMLElement);
const icon = querySelectorDeep('blr-icon', button?.getRootNode() as HTMLElement);
const svg = querySelectorDeep('svg', icon?.getRootNode() as HTMLElement);

const rect = svg?.getBoundingClientRect();

expect(rect).have.property('width');
expect(rect).have.property('height');

expect(rect?.width).to.be.greaterThan(0);
expect(rect?.height).to.be.greaterThan(0);
});
*/

it('has a size md by default', async () => {
const element = await fixture(BlrButtonIconRenderFunction(sampleParams));

Expand Down Expand Up @@ -136,25 +116,22 @@ describe('blr-button-icon', () => {
expect(fired).to.be.false;
});

it('fires blrfocus event if focused and not disabled', async () => {
it('fires blrfocus event if focused and not disabled', async function () {
this.timeout(5000);
const element = await fixture(BlrButtonIconRenderFunction({ ...sampleParams, disabled: false }));

const button = querySelectorDeep('span', element.getRootNode() as HTMLElement);
let fired = false;

element.addEventListener('blrFocus', () => {
fired = true;
const focusPromise = new Promise<void>((resolve) => {
element.addEventListener('blrFocus', () => resolve());
});

// Simulate the focus event
if (button) {
button.dispatchEvent(new FocusEvent('focus'));
}
button?.dispatchEvent(new FocusEvent('focus'));

expect(fired).to.be.true;
await focusPromise;
expect(true).to.be.true;
});

it('doesnt fires blrfocus event if focused and disabled', async () => {
it('doesnt fire blrfocus event if focused and disabled', async () => {
const element = await fixture(BlrButtonIconRenderFunction({ ...sampleParams, disabled: true }));

const button = querySelectorDeep('span', element.getRootNode() as HTMLElement);
Expand All @@ -166,31 +143,27 @@ describe('blr-button-icon', () => {

button?.focus();

await new Promise((resolve) => setTimeout(resolve, 0));

expect(fired).to.be.false;
});

it('fires blrblur event if blurred and not disabled', async () => {
it('fires blrblur event if blurred and not disabled', async function () {
this.timeout(5000);
const element = await fixture(BlrButtonIconRenderFunction({ ...sampleParams, disabled: false }));

const button = querySelectorDeep('span', element.getRootNode() as HTMLElement);
let fired = false;

// Attach the listener for the custom blrBlur event
element.addEventListener('blrBlur', () => {
fired = true;
const blurPromise = new Promise<void>((resolve) => {
element.addEventListener('blrBlur', () => resolve());
});

expect(button).to.exist;

if (button) {
button.dispatchEvent(new FocusEvent('focus'));
button.dispatchEvent(new FocusEvent('blur'));
}
button?.dispatchEvent(new FocusEvent('blur'));

expect(fired).to.be.true;
await blurPromise;
expect(true).to.be.true;
});

it('doesnt fires blrblur event if blurred and disabled', async () => {
it('doesnt fire blrblur event if blurred and disabled', async () => {
const element = await fixture(BlrButtonIconRenderFunction({ ...sampleParams, disabled: true }));

const button = querySelectorDeep('span', element.getRootNode() as HTMLElement);
Expand All @@ -203,6 +176,8 @@ describe('blr-button-icon', () => {
button?.focus();
button?.blur();

await new Promise((resolve) => setTimeout(resolve, 0));

expect(fired).to.be.false;
});
});
52 changes: 14 additions & 38 deletions packages/ui-library/src/components/button-text/index.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,58 +214,34 @@ describe('blr-button-text', () => {
expect(fired).to.be.false;
});

it('fires blrfocus event if focused and not disabled', async () => {
it('fires blrFocus event if focused and not disabled', async function () {
this.timeout(5000);
const element = await fixture(BlrButtonTextRenderFunction({ ...sampleParams, disabled: false }));

const button = querySelectorDeep('span', element.getRootNode() as HTMLElement);
let fired = false;

element.addEventListener('blrFocus', () => {
fired = true;
const focusPromise = new Promise<void>((resolve) => {
element.addEventListener('blrFocus', () => resolve());
});

expect(button).to.exist;
button?.dispatchEvent(new FocusEvent('focus'));

if (button) {
button.dispatchEvent(new FocusEvent('focus'));
}

expect(fired).to.be.true;
await focusPromise;
expect(true).to.be.true;
});

it('doesnt fires blrfocus event if focused and disabled', async () => {
const element = await fixture(BlrButtonTextRenderFunction({ ...sampleParams, disabled: true }));

const button = querySelectorDeep('span', element.getRootNode() as HTMLElement);
let fired = false;

element.getRootNode()?.addEventListener('blrFocus', () => {
fired = true;
});

button?.focus();

expect(fired).to.be.false;
});

it('fires blrblur event if blurred and not disabled', async () => {
it('fires blrBlur event if blurred and not disabled', async function () {
this.timeout(5000);
const element = await fixture(BlrButtonTextRenderFunction({ ...sampleParams, disabled: false }));

const button = querySelectorDeep('span', element.getRootNode() as HTMLElement);
let fired = false;

element.addEventListener('blrBlur', () => {
fired = true;
const blurPromise = new Promise<void>((resolve) => {
element.addEventListener('blrBlur', () => resolve());
});

expect(button).to.exist;

if (button) {
button.dispatchEvent(new FocusEvent('focus'));
button.dispatchEvent(new FocusEvent('blur'));
}
button?.dispatchEvent(new FocusEvent('blur'));

expect(fired).to.be.true;
await blurPromise;
expect(true).to.be.true;
});

it('doesnt fires blrblur event if blurred and disabled', async () => {
Expand Down
95 changes: 66 additions & 29 deletions packages/ui-library/src/components/input-field-number/index.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@ export const staticBaseStyles = css`
margin: 0;
}

input[type="number"]::-moz-number-spin-box {
-moz-appearance: none;
}

.input-wrapper {
display: flex;
overflow: hidden;
Expand Down Expand Up @@ -111,14 +115,28 @@ export const staticSemanticStyles = css`

.input-wrapper.${theme} {
box-sizing: border-box;
background-color: ${inputfield.container.bgcolor.default.rest};
width: 100%;
outline-width: ${inputfield.container.border.default.rest.width};
outline-offset: calc(${inputfield.container.border.default.rest.width} * -1);
outline-style: ${inputfield.container.border.default.rest.style};
outline-color: ${inputfield.container.border.default.rest.color};
border-radius: ${inputfield.container.borderradius};

&:focus-within {
&.readonly {
color: ${inputfield.userinput.textcolor.default.readonly};
background-color: ${inputfield.container.bgcolor.default.readonly};

& > input {
color: ${inputfield.userinput.textcolor.default.readonly};

&::placeholder {
color: ${inputfield.placeholder.textcolor.default.readonly};
}
}
}

&:focus-within.${theme} {
outline-offset: calc(${inputfield.container.border.default.focus.width} * -1);
outline-width: ${inputfield.container.border.default.focus.width};
outline-style: ${inputfield.container.border.default.focus.style};
Expand All @@ -133,15 +151,47 @@ export const staticSemanticStyles = css`
}
}
}

&.error-input {
outline: ${inputfield.container.border.error.rest.width} ${inputfield.container.border.error.rest.style}
${inputfield.container.border.error.rest.color};
background-color: ${inputfield.container.bgcolor.error.rest};

&:focus-within {
outline: ${inputfield.container.border.error.focus.width} ${inputfield.container.border.error.focus.style}
${inputfield.container.border.error.focus.color};
background-color: ${inputfield.container.bgcolor.error.focus};
}
}
}

input.${theme} {
all: initial;
outline: none;
background-color: ${inputfield.container.bgcolor.default.rest};
color: ${inputfield.userinput.textcolor.default.rest};
border: none;

&::placeholder {
color: ${inputfield.placeholder.textcolor.default.rest};
}

&.readonly {
color: ${inputfield.userinput.textcolor.default.readonly};
background-color: ${inputfield.container.bgcolor.default.readonly};

&::placeholder {
color: ${inputfield.placeholder.textcolor.default.readonly};
}
}

&:disabled {
color: ${inputfield.userinput.textcolor.default.disabled};
background-color: ${inputfield.container.bgcolor.default.disabled};

&::placeholder {
color: ${inputfield.placeholder.textcolor.default.disabled};
}
}
}

.input-unit-container.${theme} {
Expand Down Expand Up @@ -181,41 +231,19 @@ export const staticSemanticStyles = css`
${inputfield.container.border.default.disabled.color};
background-color: ${inputfield.container.bgcolor.default.disabled};
cursor: not-allowed;

& > input {
color: ${inputfield.userinput.textcolor.default.disabled};
cursor: not-allowed;

&::placeholder {
color: ${inputfield.placeholder.textcolor.default.disabled};
}
}
}

&.error-input.${theme} {
outline: ${inputfield.container.border.error.rest.width} ${inputfield.container.border.error.rest.style}
${inputfield.container.border.error.rest.color};
outline: none;
color: ${inputfield.userinput.textcolor.error.rest};
background-color: ${inputfield.container.bgcolor.error.rest};

&::placeholder {
color: ${inputfield.placeholder.textcolor.error.rest};
}

&:hover {
outline: ${inputfield.container.border.error.hover.width} ${inputfield.container.border.error.hover.style}
${inputfield.container.border.error.hover.color};
color: ${inputfield.userinput.textcolor.error.hover};
background-color: ${inputfield.container.bgcolor.error.hover};

&::placeholder {
color: ${inputfield.placeholder.textcolor.error.hover};
}
}

&:active {
outline: ${inputfield.container.border.error.pressed.width} ${inputfield.container.border.error.pressed.style}
${inputfield.container.border.error.pressed.color};
outline: none;
color: ${inputfield.userinput.textcolor.error.pressed};
background-color: ${inputfield.container.bgcolor.error.pressed};

Expand All @@ -225,8 +253,7 @@ export const staticSemanticStyles = css`
}

&:focus-within {
outline: ${inputfield.container.border.error.focus.width} ${inputfield.container.border.error.focus.style}
${inputfield.container.border.error.focus.color};
outline: none;
color: ${inputfield.userinput.textcolor.error.focus};
background-color: ${inputfield.container.bgcolor.error.focus};

Expand Down Expand Up @@ -377,7 +404,17 @@ export const staticComponentStyles = css`
}

&.horizontal {
width: unset;
&.sm {
width: ${stepperbutton.container.width.sm};
}

&.md {
width: ${stepperbutton.container.width.md};
}

&.lg {
width: ${stepperbutton.container.width.lg};
}
}

&.vertical {
Expand Down
Loading
Loading