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(ui-library): harmonised property names #981

Merged
merged 8 commits into from
Mar 14, 2024
Merged

fix(ui-library): harmonised property names #981

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
55cdf77
fix(ui-library): harmonized property names
JpunktWpunkt Mar 5, 2024
859173a
fix(ui-library): merged current develop
JpunktWpunkt Mar 11, 2024
a82d3c1
fix(storybook): changed values after review
JpunktWpunkt Mar 11, 2024
a2ee77c
fix(ui-library): solved mergeconflicts
JpunktWpunkt Mar 11, 2024
3701db6
fix(ui-library): merged current develop
JpunktWpunkt Mar 12, 2024
95e2648
fix(ui-library): harmonized naming in form-caption and dependencie files
JpunktWpunkt Mar 12, 2024
b958436
Merge branch 'develop' of https://github.com/deven-org/boiler into fi…
davidken91 Mar 14, 2024
25f7807
Merge branch 'develop' into fix/878-form-caption-group-harmonized-pro…
thrbnhrtmnn Mar 14, 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
2 changes: 1 addition & 1 deletion packages/ui-library/src/components/checkbox/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -303,7 +303,7 @@ export class BlrCheckbox extends LitElement {
})}`
: nothing}
${this.hasHint || this.hasError
? BlrFormCaptionGroupRenderFunction({ size: this.size }, captionContent)
? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.size }, captionContent)
: nothing}
</div>
</div>
Expand Down
10 changes: 5 additions & 5 deletions packages/ui-library/src/components/form-caption-group/index.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import '../../index';
export default {
title: 'Components/Form Caption Group',
argTypes: {
size: {
sizeVariant: {
options: FormSizes,
control: { type: 'radio' },
description:
Expand All @@ -31,7 +31,7 @@ export default {
component: `<Markdown>
The Form Caption Group is a combination of two Form Caption components, which allow to show both a hint and an error message or only one of each.

Technically both instances of the Form Caption are placed inside slots that are stacked above each other. The Form Caption Group only has one property named size to change the spacing in between the slots depending on the size of the component. For more information have a look at the internal [Form Caption](/docs/design-system-web-components-internal-components-form-caption--docs) component
Technically both instances of the Form Caption are placed inside slots that are stacked above each other. The Form Caption Group only has one property named size to change the spacing in between the slots depending on the size of the component. For more information have a look at the internal [Form Caption](?path=/docs/components-form-caption--docs) component

The Form Caption Group is intended to be used when creating new components. Currently, it is used like this in the following components:

Expand All @@ -52,14 +52,14 @@ It is not intended to use the Form Caption Group directly when creating new appl
};

const hintCaption = BlrFormCaptionRenderFunction({
message: 'hint',
message: 'Hint-Message-Text',
variant: 'hint',
icon: 'blrInfo',
theme: 'Light',
});

const errorCaption = BlrFormCaptionRenderFunction({
message: 'error',
message: 'Error-Message-Text',
variant: 'error',
icon: 'blrErrorFilled',
theme: 'Light',
Expand All @@ -73,7 +73,7 @@ export const BlrFormCaptionGroup = (params: BlrFormCaptionGroupType) =>
BlrFormCaptionGroup.storyName = 'Form Caption Group';

const args: BlrFormCaptionGroupType = {
size: 'sm',
sizeVariant: 'sm',
};

BlrFormCaptionGroup.args = args;
2 changes: 1 addition & 1 deletion packages/ui-library/src/components/form-caption-group/index.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { BlrFormCaptionRenderFunction } from '../form-caption/renderFunction';
import { html } from 'lit-html';

const sampleParams: BlrFormCaptionGroupType = {
size: 'md',
sizeVariant: 'md',
};

const hintCaption = BlrFormCaptionRenderFunction({
Expand Down
4 changes: 2 additions & 2 deletions packages/ui-library/src/components/form-caption-group/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@ import { TAG_NAME } from './renderFunction';
export class BlrFormCaptionGroup extends LitElement {
static styles = [formCaptionGroupStyle];

@property() size: FormSizesType = 'md';
@property() sizeVariant: FormSizesType = 'md';

protected render() {
const classes = classMap({
'blr-form-caption-group': true,
[this.size]: this.size,
[this.sizeVariant]: this.sizeVariant,
thrbnhrtmnn marked this conversation as resolved.
Show resolved Hide resolved
});

return html`
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-library/src/components/number-input/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -279,7 +279,7 @@ export class BlrNumberInput extends LitElement {
</div>

${this.hasHint || this.hasError
? BlrFormCaptionGroupRenderFunction({ size: this.size }, captionContent)
? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.size }, captionContent)
: nothing}
`;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-library/src/components/radio-group/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ export class BlrRadioGroup extends LitElement {

${this.hasHint || this.hasError
? html` <div class="caption-group ${classes}">
${BlrFormCaptionGroupRenderFunction({ size: this.size }, captionContent)}
${BlrFormCaptionGroupRenderFunction({ sizeVariant: this.size }, captionContent)}
</div>`
: nothing} `;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-library/src/components/radio/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ export class BlrRadio extends LitElement {
labelSize: this.size,
})}
${this.hasHint || this.hasError
? BlrFormCaptionGroupRenderFunction({ size: this.size }, captionContent)
? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.size }, captionContent)
: nothing}
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-library/src/components/select/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,7 @@ export class BlrSelect extends LitElement {
${this.renderIcon(iconClasses)}
</div>
${this.hasHint || this.hasError
? BlrFormCaptionGroupRenderFunction({ size: this.sizeVariant }, captionContent)
? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.sizeVariant }, captionContent)
: nothing}
</div>
`;
Expand Down
73 changes: 35 additions & 38 deletions ...ges/ui-library/src/components/slider-two-values/range-legend-min-max-slider/index.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,50 +3,47 @@ import '@boiler/ui-library/dist';
import { BlrRangeLegendMinMaxSliderRenderFunction } from './renderFunction';
import type { BlrRangeLegendMinMaxSliderType } from '.';

import { expect, fixture } from "@open-wc/testing";
import { expect, fixture } from '@open-wc/testing';
import { querySelectorAllDeep, querySelectorDeep } from 'query-selector-shadow-dom';

const sampleParams: BlrRangeLegendMinMaxSliderType = {
theme: 'Light',
rangeInputId: 'range-legend-cmpt',
startValue: '200$',
endValue: '400$',
size: 'lg',
list: [
'100$',
'200$',
'300$',
'400$',
'500$',
],
stepFactor: 1,
btnVariant: 'primary',
incrementIcon: 'blrPlus',
decrementIcon: 'blrMinus',
onChange: () => null,
theme: 'Light',
rangeInputId: 'range-legend-cmpt',
startValue: '200$',
endValue: '400$',
size: 'lg',
list: ['100$', '200$', '300$', '400$', '500$'],
stepFactor: 1,
btnVariant: 'primary',
incrementIcon: 'blrPlus',
decrementIcon: 'blrMinus',
onChange: () => null,
};

describe('blr-range-legend-min-max-slider', () => {
it('is having two sliders containing the right className', async () => {
const element = await fixture(BlrRangeLegendMinMaxSliderRenderFunction(sampleParams));
const inputWrapper = querySelectorDeep('.range-wrapper', element.getRootNode() as HTMLElement);
const textareas = querySelectorAllDeep('input', inputWrapper?.getRootNode() as HTMLElement);
const classNameInputOne = textareas[0]?.className;
const classNameInputTwo = textareas[1]?.className;
expect(classNameInputOne).to.contain('range');
expect(classNameInputTwo).to.contain('range');
});
it('is having two sliders containing the right className', async () => {
const element = await fixture(BlrRangeLegendMinMaxSliderRenderFunction(sampleParams));
const inputWrapper = querySelectorDeep('.range-wrapper', element.getRootNode() as HTMLElement);
const textareas = querySelectorAllDeep('input', inputWrapper?.getRootNode() as HTMLElement);
const classNameInputOne = textareas[0]?.className;
const classNameInputTwo = textareas[1]?.className;

expect(classNameInputOne).to.contain('range');
expect(classNameInputTwo).to.contain('range');
});

it('properly renders legend', async () => {
const element = await fixture(BlrRangeLegendMinMaxSliderRenderFunction(sampleParams));
const inputWrapper = querySelectorDeep('.range-wrapper', element.getRootNode() as HTMLElement);
const rangeNumbersElement = querySelectorDeep('.range__numbers', inputWrapper?.getRootNode() as HTMLElement);
const allRangePoints = querySelectorAllDeep('.range__point', rangeNumbersElement?.getRootNode() as HTMLParagraphElement);
it('properly renders legend', async () => {
const element = await fixture(BlrRangeLegendMinMaxSliderRenderFunction(sampleParams));
const inputWrapper = querySelectorDeep('.range-wrapper', element.getRootNode() as HTMLElement);
const rangeNumbersElement = querySelectorDeep('.range__numbers', inputWrapper?.getRootNode() as HTMLElement);
const allRangePoints = querySelectorAllDeep(
'.range__point',
rangeNumbersElement?.getRootNode() as HTMLParagraphElement
);

allRangePoints.forEach(point => {
expect(point).to.exist;
});
expect(allRangePoints.length).to.equal(sampleParams.list.length)
allRangePoints.forEach((point) => {
expect(point).to.exist;
});
})
expect(allRangePoints.length).to.equal(sampleParams.list.length);
});
});
Copy link
Collaborator

Choose a reason for hiding this comment

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

The formatting changes seem out of scope for this PR and could be removed.
What do you think? I'm curious, especially since i'm new to the team.
Should we just fix these things on the fly whenever we encounter them?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

To be honest, I have no glue. I think this came when I solved the merge conflict from develop. I don't touch this file in this way.

2 changes: 1 addition & 1 deletion packages/ui-library/src/components/text-input/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,7 @@ export class BlrTextInput extends LitElement {
: nothing}
</div>
${this.hasHint || this.hasError
? BlrFormCaptionGroupRenderFunction({ size: this.size }, captionContent)
? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.size }, captionContent)
: nothing}
</div>
`;
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-library/src/components/textarea/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,7 @@ export class BlrTextarea extends LitElement {
></textarea>
<div class="${textareaInfoContainer}">
${this.hasHint || this.hasError
? BlrFormCaptionGroupRenderFunction({ size: this.size }, captionContent)
? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.size }, captionContent)
: nothing}
${this.showCounter
? BlrCounterRenderFunction({
Expand Down
Loading