From d4ab9b72408feede321e84928f01f73840ba76f6 Mon Sep 17 00:00:00 2001 From: JpunktWpunkt <92968754+JpunktWpunkt@users.noreply.github.com> Date: Wed, 27 Mar 2024 17:05:27 +0100 Subject: [PATCH 01/56] fix(ui-library): harmonize property naming (#940) Co-authored-by: Julius Walther --- packages/js-example-app/src/index.ejs | 6 ++- .../input-field-number/index.stories.ts | 48 ++++++++++++------- .../input-field-number/index.test.ts | 8 ++-- .../components/input-field-number/index.ts | 34 ++++++------- packages/ui-library/src/globals/constants.ts | 1 + packages/ui-library/src/globals/types.ts | 2 + 6 files changed, 60 insertions(+), 39 deletions(-) diff --git a/packages/js-example-app/src/index.ejs b/packages/js-example-app/src/index.ejs index 5212e8146..c0683bb46 100644 --- a/packages/js-example-app/src/index.ejs +++ b/packages/js-example-app/src/index.ejs @@ -56,11 +56,13 @@

Input Field Number

{ ${BlrInputFieldNumberRenderFunction({ ...params, label: 'Unit prefix', - prependUnit: true, + hasUnit: true, + unitPosition: 'prefix', unit: 'kg', labelAppendix: undefined, inputFieldNumberId: 'test-kg-pre', @@ -499,7 +512,8 @@ export const HasUnit = (params: BlrInputFieldNumberType) => { ${BlrInputFieldNumberRenderFunction({ ...params, label: 'Unit suffix', - prependUnit: false, + hasUnit: true, + unitPosition: 'suffix', unit: 'kg', labelAppendix: undefined, inputFieldNumberId: 'test-kg-suff', @@ -653,7 +667,7 @@ export const FormCaptionGroup = (params: BlrInputFieldNumberType) => { ...params, hasHint: true, label: 'Hint message', - hintIcon: 'blrInfo', + hintMessageIcon: 'blrInfo', labelAppendix: '', inputFieldNumberId: 'test-hint', })} @@ -666,7 +680,7 @@ export const FormCaptionGroup = (params: BlrInputFieldNumberType) => { hasError: true, errorMessage: "OMG it's an error", hasHint: true, - errorIcon: 'blrErrorFilled', + errorMessageIcon: 'blrErrorFilled', inputFieldNumberId: 'test-hint-error', })} diff --git a/packages/ui-library/src/components/input-field-number/index.test.ts b/packages/ui-library/src/components/input-field-number/index.test.ts index 191a9013d..23f6a6026 100644 --- a/packages/ui-library/src/components/input-field-number/index.test.ts +++ b/packages/ui-library/src/components/input-field-number/index.test.ts @@ -21,8 +21,8 @@ const sampleParams: BlrInputFieldNumberType = { inputFieldNumberId: 'egal', label: 'Hello', hasHint: false, - hintIcon: 'blr360', - errorIcon: 'blrInfo', + hintMessageIcon: 'blr360', + errorMessageIcon: 'blrInfo', value: 4, unit: 'gr', decimals: 0, @@ -78,9 +78,9 @@ describe('blr-input-field-number', () => { BlrInputFieldNumberRenderFunction({ ...sampleParams, hasHint: true, - hintIcon: 'blrInfo', + hintMessageIcon: 'blrInfo', hasError: true, - errorIcon: 'blrErrorFilled', + errorMessageIcon: 'blrErrorFilled', }) ); diff --git a/packages/ui-library/src/components/input-field-number/index.ts b/packages/ui-library/src/components/input-field-number/index.ts index 7ca9aafdd..541ff4684 100644 --- a/packages/ui-library/src/components/input-field-number/index.ts +++ b/packages/ui-library/src/components/input-field-number/index.ts @@ -7,7 +7,7 @@ import { BlrDividerRenderFunction } from '../divider/renderFunction'; import { SizelessIconType } from '@boiler/icons'; import { ThemeType } from '../../foundation/_tokens-generated/index.themes'; import { actionLight, actionDark } from '../../foundation/semantic-tokens/action.css'; -import { FormSizesType } from '../../globals/types'; +import { FormSizesType, UnitVariantType } from '../../globals/types'; import { calculateIconName } from '../../utils/calculate-icon-name'; import { getComponentConfigToken } from '../../utils/get-component-config-token'; import { BlrFormCaptionGroupRenderFunction } from '../form-caption-group/renderFunction'; @@ -61,18 +61,20 @@ export class BlrInputFieldNumber extends LitElementCustom { @property() labelAppendix?: string; @property() hasError?: boolean; @property() errorMessage?: string; - @property() errorIcon?: SizelessIconType; + @property() errorMessageIcon?: SizelessIconType; @property() hasHint = true; @property() hintMessage?: string; - @property() hintIcon?: SizelessIconType; + @property() hintMessageIcon?: SizelessIconType; @property() value?: number; @property() step?: number; @property() unit?: string; @property() leadingZeros?: number; @property() decimals?: number; - @property() prependUnit?: boolean; + @property() hasUnit?: boolean; + @property() unitPosition?: UnitVariantType; @property() stepIncreaseAriaLabel?: string = '+'; @property() stepDecreaseAriaLabel?: string = '\u2212'; // minus-sign (not minus-hyphen) + @property() name?: string; @property() theme: ThemeType = 'Light'; @@ -150,7 +152,6 @@ export class BlrInputFieldNumber extends LitElementCustom { if (!this.sizeVariant) { return html``; } - const ariaLabel = direction === 'increase' ? this.stepIncreaseAriaLabel! : this.stepDecreaseAriaLabel!; const onClick = direction === 'increase' ? this.stepperUp : this.stepperDown; @@ -232,8 +233,6 @@ export class BlrInputFieldNumber extends LitElementCustom { } protected render() { - const hasUnit = this.unit !== undefined && this.unit.length > 0; - if (this.sizeVariant) { const dynamicStyles = this.theme === 'Light' @@ -242,12 +241,14 @@ export class BlrInputFieldNumber extends LitElementCustom { const inputClasses = classMap({ [this.sizeVariant]: this.sizeVariant, - prepend: hasUnit && !!this.prependUnit, + prepend: this.unitPosition === 'prefix', + suffix: this.unitPosition === 'suffix', }); const unitClasses = classMap({ unit: true, - prepend: hasUnit && !!this.prependUnit, + prepend: this.unitPosition === 'prefix', + suffix: this.unitPosition === 'suffix', [`${this.sizeVariant}`]: this.sizeVariant, [this.stepperVariant || 'split']: this.stepperVariant || 'split', }); @@ -258,19 +259,18 @@ export class BlrInputFieldNumber extends LitElementCustom { [`${this.sizeVariant}`]: this.sizeVariant, [this.stepperVariant || 'split']: this.stepperVariant || 'split', 'error-input': this.hasError || false, - 'prepend': hasUnit && !!this.prependUnit, 'readonly': this.readonly || false, }); const inputAndUnitContainer = classMap({ 'input-unit-container': true, - 'prepend': hasUnit && !!this.prependUnit, + 'prepend': this.unitPosition === 'prefix' || this.unitPosition === 'suffix', [`${this.sizeVariant}`]: this.sizeVariant, [this.stepperVariant || 'split']: this.stepperVariant || 'split', }); const captionContent = html` - ${this.hasHint && (this.hintMessage || this.hintIcon) + ${this.hasHint && (this.hintMessage || this.hintMessageIcon) ? html`
${BlrFormCaptionRenderFunction({ @@ -278,12 +278,12 @@ export class BlrInputFieldNumber extends LitElementCustom { theme: this.theme, sizeVariant: this.sizeVariant, message: this.hintMessage, - icon: this.hintIcon, + icon: this.hintMessageIcon, })}
` : nothing} - ${this.hasError && (this.errorMessage || this.errorIcon) + ${this.hasError && (this.errorMessage || this.errorMessageIcon) ? html`
${BlrFormCaptionRenderFunction({ @@ -291,7 +291,7 @@ export class BlrInputFieldNumber extends LitElementCustom { theme: this.theme, sizeVariant: this.sizeVariant, message: this.errorMessage, - icon: this.errorIcon, + icon: this.errorMessageIcon, })}
` @@ -336,7 +336,9 @@ export class BlrInputFieldNumber extends LitElementCustom { @select=${this.handleSelect} placeholder=${this.placeholder || ''} /> - ${hasUnit ? html`
${this.unit}
` : nothing} + ${this.unitPosition === 'prefix' || this.unitPosition === 'suffix' + ? html`
${this.unit}
` + : nothing} ${this.renderMode()} diff --git a/packages/ui-library/src/globals/constants.ts b/packages/ui-library/src/globals/constants.ts index 9fd3ffb3b..55a01fed1 100644 --- a/packages/ui-library/src/globals/constants.ts +++ b/packages/ui-library/src/globals/constants.ts @@ -31,6 +31,7 @@ export const ActionVariants = ['primary', 'secondary', 'cta', 'silent', 'destruc export const FeedbackVariants = ['default', 'inverted'] as const; export const CaptionVariants = ['hint', 'error'] as const; export const CounterVariants = ['neutral', 'warn', 'error'] as const; +export const UnitVariants = ['prefix', 'suffix'] as const; export const DividerVariations = ['vertical', 'horizontal'] as const; export const TabVariants = ['standard', 'fullWidth'] as const; export const TabContentVariants = ['labelOnly', 'iconOnly', 'labelAndIcon'] as const; diff --git a/packages/ui-library/src/globals/types.ts b/packages/ui-library/src/globals/types.ts index d9f3d2da6..f3483ad1f 100644 --- a/packages/ui-library/src/globals/types.ts +++ b/packages/ui-library/src/globals/types.ts @@ -21,6 +21,7 @@ import { ActionSizes, ButtonGroupAlignmentVariants, ButtonDisplayOptions, + UnitVariants, } from './constants'; export type SizesType = (typeof Sizes)[number]; @@ -29,6 +30,7 @@ export type ActionVariantType = (typeof ActionVariants)[number]; export type FeedbackVariantType = (typeof FeedbackVariants)[number]; export type CaptionVariantType = (typeof CaptionVariants)[number]; export type CounterVariantType = (typeof CounterVariants)[number]; +export type UnitVariantType = (typeof UnitVariants)[number]; export type ActionSizesType = (typeof ActionSizes)[number]; export type FeedbackSizesType = (typeof FeedbackSizes)[number]; From 2ceb1bfdac5b05ee3e0bf157627df409de63d2dd Mon Sep 17 00:00:00 2001 From: David Kennedy <127498135+davidken91@users.noreply.github.com> Date: Wed, 27 Mar 2024 17:15:38 +0100 Subject: [PATCH 02/56] fix(ui-library): fix icon button events (#1018) fix(ui-library): fix icon button events --- README.md | 5 -- docs/CONTRIBUTING.md | 1 - docs/GETSTARTED.md | 2 - packages/js-example-app/src/index.ejs | 62 ++++++++++++++++--- packages/js-example-app/src/index.js | 37 +++++++---- .../components/button-icon/index.stories.ts | 20 +++--- packages/ui-library/tsconfig.json | 11 +++- 7 files changed, 98 insertions(+), 40 deletions(-) diff --git a/README.md b/README.md index d9d7530b3..2efa95748 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,7 @@ # B01LER - ![B01LER_UpdateImg_1100-480@2x](https://github.com/deven-org/boiler/assets/122102805/7f55e1fd-955f-4c9f-890d-3d5a03f5c3aa) ## :page_with_curl: Content - - [B01LER](#b01ler) - [:page_with_curl: Content](#page_with_curl-content) - [:star: Introduction](#star-introduction) @@ -192,7 +190,6 @@ component can also be viewed ## :arrow_forward: How to start ### Installation - > **Note:** You need to run terminal as administrator on Windows machines. 1. First, open a terminal and navigate to the folder you want to fork or clone this project @@ -291,7 +288,6 @@ your first icon: ```sh $ yarn compile:icons ``` - 2. To check that your icon has been added run your project locally and inspect the Icons tab: ```sh @@ -299,7 +295,6 @@ your first icon: ``` #### Changing Icons - It is also possible to just change existing icon file without renaming it. 1. Navigate to `/icon-set` folder diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md index b1c5cc295..4f11872f4 100644 --- a/docs/CONTRIBUTING.md +++ b/docs/CONTRIBUTING.md @@ -61,7 +61,6 @@ contributions: > - A merge request can only be merged if it has successful test results and at least two approvals ## :arrows_counterclockwise: Contribution process overview - 1. Getting Started 2. Create new issue / select an existing issue 3. Create new branch diff --git a/docs/GETSTARTED.md b/docs/GETSTARTED.md index 6c49ec1f7..b6be661f3 100644 --- a/docs/GETSTARTED.md +++ b/docs/GETSTARTED.md @@ -26,7 +26,6 @@ seasoned professional or a newcomer, we've got you covered. Let's dive in and un - [Yik Cun Chung](https://github.com/yikcunchung) ### Developers - - [Christian Hoffmann](https://github.com/ChristianHoffmannS2) (Lead) - [David Kennedy](https://github.com/davidken91) (Stand-in lead) - [Manuel Seemann](https://github.com/seemann) @@ -37,7 +36,6 @@ seasoned professional or a newcomer, we've got you covered. Let's dive in and un - [Roman Yakovliev](https://https://github.com/veilvokay) ### Product & Project Management - - [Thorben Hartmann](https://github.com/thrbnhrtmnn) (Lead, community leader) - [Anđelka Dakić](https://github.com/angelicahoyss) (Stand-in lead, community leader) diff --git a/packages/js-example-app/src/index.ejs b/packages/js-example-app/src/index.ejs index c0683bb46..3741a0ad9 100644 --- a/packages/js-example-app/src/index.ejs +++ b/packages/js-example-app/src/index.ejs @@ -29,9 +29,21 @@ +
+

Icon Button

+ + +
+

Select

- + @@ -44,12 +56,35 @@

Checkbox

- + +

Input Field Text

- + +
@@ -79,16 +114,25 @@

Textarea

+ aria-label="Text Area" + text-area-id="#textAreaId" + name="Text Area"> +
diff --git a/packages/js-example-app/src/index.js b/packages/js-example-app/src/index.js index c92ac7ede..7e53f3313 100644 --- a/packages/js-example-app/src/index.js +++ b/packages/js-example-app/src/index.js @@ -5,7 +5,8 @@ const toggleLoadingButton = document.querySelector('#toggleLoadingState'); const toggleDisabledState = document.querySelector('#toggleDisabledState'); const logsContainer = document.querySelector('#logs'); -const blrButton = document.getElementsByTagName('blr-button-text')[0]; +const blrButtonText = document.getElementsByTagName('blr-button-text')[0]; +const blrButtonIcon = document.getElementsByTagName('blr-button-icon')[0]; const blrCheckbox = document.getElementsByTagName('blr-checkbox')[0]; const blrSelect = document.getElementsByTagName('blr-select')[0]; const blrInputFieldText = document.getElementsByTagName('blr-input-field-text')[0]; @@ -19,41 +20,53 @@ const addLog = (log) => { }; toggleLoadingButton.addEventListener('click', () => { - const currentState = blrButton.getAttribute('loading'); + const currentState = blrButtonText.getAttribute('loading'); if (currentState) { - blrButton.removeAttribute('loading'); + blrButtonText.removeAttribute('loading'); addLog('Set button text loading state to false'); } else { - blrButton.setAttribute('loading', 'true'); + blrButtonText.setAttribute('loading', 'true'); addLog('Set button text loading state to true'); } }); toggleDisabledState.addEventListener('click', () => { - const currentState = blrButton.getAttribute('disabled'); + const currentState = blrButtonText.getAttribute('disabled'); if (currentState) { - blrButton.removeAttribute('disabled'); - addLog('Set button text disabled state to false'); + blrButtonText.removeAttribute('disabled'); + addLog('Set text button disabled state to false'); } else { - blrButton.setAttribute('disabled', 'true'); - addLog('Set button text loading state to true'); + blrButtonText.setAttribute('disabled', 'true'); + addLog('Set text button loading state to true'); } }); -blrButton.addEventListener('blrClick', () => { +blrButtonText.addEventListener('blrClick', () => { addLog('blr-button-text clicked'); }); -blrButton.addEventListener('blrFocus', () => { +blrButtonText.addEventListener('blrFocus', () => { addLog('blr-button-text focused'); }); -blrButton.addEventListener('blrBlur', () => { +blrButtonText.addEventListener('blrBlur', () => { addLog('blr-button-text blurred'); }); +blrButtonIcon.addEventListener('blrClick', () => { + addLog('blr-button-icon clicked'); +}); + +blrButtonIcon.addEventListener('blrFocus', () => { + addLog('blr-button-icon focused'); +}); + +blrButtonIcon.addEventListener('blrBlur', () => { + addLog('blr-button-icon blurred'); +}); + blrCheckbox.addEventListener('blrCheckedChange', (e) => { addLog('blr-checkbox changed: ' + e.detail.checkedState); }); diff --git a/packages/ui-library/src/components/button-icon/index.stories.ts b/packages/ui-library/src/components/button-icon/index.stories.ts index 1971b9522..92ecacc5e 100644 --- a/packages/ui-library/src/components/button-icon/index.stories.ts +++ b/packages/ui-library/src/components/button-icon/index.stories.ts @@ -36,9 +36,9 @@ const argTypesToDisable = [ 'errorIcon', 'arialabel', 'name', - 'onChange', - 'onFocus', - 'onBlur', + 'blrClick', + 'blrBlur', + 'blrFocus', ]; const generateDisabledArgTypes = (argTypes: string[]) => { @@ -121,23 +121,23 @@ export default { }, }, // Events - onChange: { - description: 'Fires when the value changes.', - action: 'onChange', + blrClick: { + description: 'Fires when the component is clicked.', + action: 'blrClick', table: { category: 'Events', }, }, - onFocus: { + blrFocus: { description: 'Fires when the component is focused.', - action: 'onFocus', + action: 'blrFocus', table: { category: 'Events', }, }, - onBlur: { + blrBlur: { description: 'Fires when the component lost focus.', - action: 'onBlur', + action: 'blrBlur', table: { category: 'Events', }, diff --git a/packages/ui-library/tsconfig.json b/packages/ui-library/tsconfig.json index b8a2732a3..0ccdd6796 100644 --- a/packages/ui-library/tsconfig.json +++ b/packages/ui-library/tsconfig.json @@ -14,7 +14,16 @@ "experimentalDecorators": true, "skipLibCheck": true, "strict": true, - "useDefineForClassFields": false + "useDefineForClassFields": false, + "plugins": [ + { + "name": "ts-lit-plugin", + "strict": true, + "rules": { + "no-missing-import": "off" + } + } + ] }, "include": ["src"], "exclude": ["src/**/*.test.ts", "src/**/*.stories.ts"] From 4539d09bae302934bbf0282c40e826dae3fcb978 Mon Sep 17 00:00:00 2001 From: Ang Dawa Sherpa <89925822+angsherpa456@users.noreply.github.com> Date: Thu, 28 Mar 2024 11:44:43 +0100 Subject: [PATCH 03/56] fix(ui-library): remove margin in error state (#945) (#1060) --- packages/ui-library/src/components/checkbox/index.ts | 6 +++--- .../src/components/input-field-number/index.test.ts | 2 ++ .../ui-library/src/components/input-field-number/index.ts | 6 +++--- .../src/components/input-field-text/index.stories.ts | 2 +- .../src/components/input-field-text/index.test.ts | 2 +- .../ui-library/src/components/input-field-text/index.ts | 6 +++--- packages/ui-library/src/components/select/index.ts | 6 +++--- .../ui-library/src/components/textarea/index.stories.ts | 2 +- packages/ui-library/src/components/textarea/index.ts | 6 +++--- 9 files changed, 20 insertions(+), 18 deletions(-) diff --git a/packages/ui-library/src/components/checkbox/index.ts b/packages/ui-library/src/components/checkbox/index.ts index e8429685b..8f301c52e 100644 --- a/packages/ui-library/src/components/checkbox/index.ts +++ b/packages/ui-library/src/components/checkbox/index.ts @@ -192,7 +192,7 @@ export class BlrCheckbox extends LitElementCustom { this.size.toUpperCase(), ]).toLowerCase() as FormSizesType; - const captionContent = html` + const getCaptionContent = () => html` ${this.hasHint && (this.hintMessage || this.hintIcon) ? html`
@@ -303,8 +303,8 @@ export class BlrCheckbox extends LitElementCustom { labelSize: this.size, })}` : nothing} - ${this.hasHint || this.hasError - ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.size }, captionContent) + ${(this.hasHint && this.hintMessage) || (this.hasError && this.errorMessage) + ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.size }, getCaptionContent()) : nothing}
diff --git a/packages/ui-library/src/components/input-field-number/index.test.ts b/packages/ui-library/src/components/input-field-number/index.test.ts index 23f6a6026..1ff66edaf 100644 --- a/packages/ui-library/src/components/input-field-number/index.test.ts +++ b/packages/ui-library/src/components/input-field-number/index.test.ts @@ -21,8 +21,10 @@ const sampleParams: BlrInputFieldNumberType = { inputFieldNumberId: 'egal', label: 'Hello', hasHint: false, + hintMessage: 'This is a sample hint', hintMessageIcon: 'blr360', errorMessageIcon: 'blrInfo', + errorMessage: "OMG it's an error", value: 4, unit: 'gr', decimals: 0, diff --git a/packages/ui-library/src/components/input-field-number/index.ts b/packages/ui-library/src/components/input-field-number/index.ts index 541ff4684..84c86961d 100644 --- a/packages/ui-library/src/components/input-field-number/index.ts +++ b/packages/ui-library/src/components/input-field-number/index.ts @@ -269,7 +269,7 @@ export class BlrInputFieldNumber extends LitElementCustom { [this.stepperVariant || 'split']: this.stepperVariant || 'split', }); - const captionContent = html` + const getCaptionContent = () => html` ${this.hasHint && (this.hintMessage || this.hintMessageIcon) ? html`
@@ -344,8 +344,8 @@ export class BlrInputFieldNumber extends LitElementCustom {
- ${this.hasHint || this.hasError - ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.sizeVariant }, captionContent) + ${(this.hasHint && this.hintMessage) || (this.hasError && this.errorMessage) + ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.sizeVariant }, getCaptionContent()) : nothing} `; } diff --git a/packages/ui-library/src/components/input-field-text/index.stories.ts b/packages/ui-library/src/components/input-field-text/index.stories.ts index 6c322dda9..9eb9c79d5 100644 --- a/packages/ui-library/src/components/input-field-text/index.stories.ts +++ b/packages/ui-library/src/components/input-field-text/index.stories.ts @@ -333,7 +333,7 @@ const defaultParams: BlrInputFieldTextType = { required: false, hasError: false, errorMessage: '', - errorMessageIcon: 'blrInfo', + errorMessageIcon: undefined, arialabel: 'InputFieldText', name: 'InputFieldText', inputFieldTextId: 'Input Id', diff --git a/packages/ui-library/src/components/input-field-text/index.test.ts b/packages/ui-library/src/components/input-field-text/index.test.ts index d59c5346c..10f105fb6 100644 --- a/packages/ui-library/src/components/input-field-text/index.test.ts +++ b/packages/ui-library/src/components/input-field-text/index.test.ts @@ -26,7 +26,7 @@ const sampleParams: BlrInputFieldTextType = { readonly: false, required: false, hasError: false, - errorMessage: '', + errorMessage: "OMG it's an error", errorMessageIcon: 'blrInfo', arialabel: 'InputFieldText', inputFieldTextId: 'Input Id', diff --git a/packages/ui-library/src/components/input-field-text/index.ts b/packages/ui-library/src/components/input-field-text/index.ts index fe29f2f57..3508cda42 100644 --- a/packages/ui-library/src/components/input-field-text/index.ts +++ b/packages/ui-library/src/components/input-field-text/index.ts @@ -140,7 +140,7 @@ export class BlrInputFieldText extends LitElementCustom { this.sizeVariant, ]).toLowerCase() as SizesType; - const captionContent = html` + const getCaptionContent = () => html` ${this.hasHint && (this.hintMessage || this.hintMessageIcon) ? BlrFormCaptionRenderFunction({ variant: 'hint', @@ -238,8 +238,8 @@ export class BlrInputFieldText extends LitElementCustom { )}` : nothing}
- ${this.hasHint || this.hasError - ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.sizeVariant }, captionContent) + ${(this.hasHint && this.hintMessage) || (this.hasError && this.errorMessage) + ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.sizeVariant }, getCaptionContent()) : nothing} `; diff --git a/packages/ui-library/src/components/select/index.ts b/packages/ui-library/src/components/select/index.ts index 3d0cd593c..0365c7e24 100644 --- a/packages/ui-library/src/components/select/index.ts +++ b/packages/ui-library/src/components/select/index.ts @@ -147,7 +147,7 @@ export class BlrSelect extends LitElementCustom { 'blr-input-icon': true, [this.sizeVariant]: this.sizeVariant, }); - const captionContent = html` + const getCaptionContent = () => html` ${this.hasHint && (this.hintMessage || this.hintMessageIcon) ? BlrFormCaptionRenderFunction({ variant: 'hint', @@ -219,8 +219,8 @@ export class BlrSelect extends LitElementCustom { ${this.renderIcon(iconClasses)} - ${this.hasHint || this.hasError - ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.sizeVariant }, captionContent) + ${(this.hasHint && this.hintMessage) || (this.hasError && this.errorMessage) + ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.sizeVariant }, getCaptionContent()) : nothing} `; diff --git a/packages/ui-library/src/components/textarea/index.stories.ts b/packages/ui-library/src/components/textarea/index.stories.ts index 5734f8b10..c93d33a5d 100644 --- a/packages/ui-library/src/components/textarea/index.stories.ts +++ b/packages/ui-library/src/components/textarea/index.stories.ts @@ -47,7 +47,7 @@ const defaultParams: BlrTextareaType = { required: false, hasError: false, errorMessage: '', - errorMessageIcon: 'blr360', + errorMessageIcon: undefined, arialabel: 'Text Area', textAreaId: '#textAreaId', name: 'Text Area', diff --git a/packages/ui-library/src/components/textarea/index.ts b/packages/ui-library/src/components/textarea/index.ts index 23e400e7e..6ba4040dd 100644 --- a/packages/ui-library/src/components/textarea/index.ts +++ b/packages/ui-library/src/components/textarea/index.ts @@ -173,7 +173,7 @@ export class BlrTextarea extends LitElementCustom { const counterVariant = this.determinateCounterVariant(); - const captionContent = html` + const getCaptionContent = () => html` ${this.hasHint && (this.hintMessage || this.hintMessageIcon) ? BlrFormCaptionRenderFunction({ variant: 'hint', @@ -232,8 +232,8 @@ export class BlrTextarea extends LitElementCustom { @keyup=${this.updateCounter} >
- ${this.hasHint || this.hasError - ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.sizeVariant }, captionContent) + ${(this.hasHint && this.hintMessage) || (this.hasError && this.errorMessage) + ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.sizeVariant }, getCaptionContent()) : nothing} ${this.hasCounter ? BlrCounterRenderFunction({ From a6e56e84137b7ca977810e5517bf3ba7722ce1fa Mon Sep 17 00:00:00 2001 From: Thorben Hartmann <122102805+thrbnhrtmnn@users.noreply.github.com> Date: Thu, 28 Mar 2024 18:37:25 +0100 Subject: [PATCH 04/56] docs(getstarted): update getstarted documentation (#1063) Signed-off-by: Thorben Hartmann <122102805+thrbnhrtmnn@users.noreply.github.com> --- docs/GETSTARTED.md | 21 ++++----------------- 1 file changed, 4 insertions(+), 17 deletions(-) diff --git a/docs/GETSTARTED.md b/docs/GETSTARTED.md index b6be661f3..056da6f47 100644 --- a/docs/GETSTARTED.md +++ b/docs/GETSTARTED.md @@ -1,11 +1,9 @@ # Get Started - Welcome to the B01LER team! 👋 We are thrilled to have you on board. This "Get Started" guide is designed to make your onboarding process smooth and enjoyable and to learn about all the neccessary organizational aspects. Whether you're a seasoned professional or a newcomer, we've got you covered. Let's dive in and unleash the potential of B01LER together! ## Content - - [Team Overview](#team-overview) - [Designers](#designers) - [Developlers](#developers) @@ -18,9 +16,7 @@ seasoned professional or a newcomer, we've got you covered. Let's dive in and un - [Link Archive](#link-archive) ## Team Overview - ### Designers - - [Lars Erbach](https://github.com/larserbach) (Lead) - [Marcel Doering](https://github.com/m-nti) (Stand-in lead) - [Yik Cun Chung](https://github.com/yikcunchung) @@ -28,19 +24,17 @@ seasoned professional or a newcomer, we've got you covered. Let's dive in and un ### Developers - [Christian Hoffmann](https://github.com/ChristianHoffmannS2) (Lead) - [David Kennedy](https://github.com/davidken91) (Stand-in lead) -- [Manuel Seemann](https://github.com/seemann) - [Jessica Wittig](https://github.com/JpunktWpunkt) - [Barkley Taylor](https://github.com/bar-tay) - [Rubiraj Ethirajulu](https://github.com/RubirajAccenture) - [Ang Sherpa](https://github.com/angsherpa456) -- [Roman Yakovliev](https://https://github.com/veilvokay) +- [Julius Walther](https://github.com/faselbaum) ### Product & Project Management - [Thorben Hartmann](https://github.com/thrbnhrtmnn) (Lead, community leader) - [Anđelka Dakić](https://github.com/angelicahoyss) (Stand-in lead, community leader) ## Regular Meetings - All regular B01LER team meetings are in our [B01LER Core calendar](https://myemail.accenture.com/calendar/group/accenture.com/boiler-core/view/workweek). The only exception is the B01LER Monthly, which is part of the @@ -52,18 +46,18 @@ exception is the B01LER Monthly, which is part of the | B01LER Planning | Every 2nd Thursday (When there is no Refinement) | Complete B01LER Team | Celebrate outcome of the last iteration, present outcome of the pre-planning | | B01LER Refinement | Every 2nd Thursday (When there is no Planning) | Complete B01LER Team | Refining issues for upcomming iterations | | B01LER Retro | Every 4th Thursday (After Planning) | Complete B01LER Team | Looking back at the last two iterations to improve things in the future | -| B01LER Design Review | Tuesdays & Thursdays | B01LER Design Lead and every team member that needs a design review | Getting approval from design for code implementations | +| B01LER Design Review (paused)| Currently Paused | B01LER Design Lead and every team member that needs a design review | Getting approval from design for code implementations | | B01LER Pair Programming Hour | Fridays | Everyone from the B01LER (Dev) Team that wants to join | Collaborate and learn from each other by tackling coding challanges together | | B01LER Open Door | Mondays & Wednesdays | Everyone from the B01LER (Dev) Team that wants to join | Giving guidance and/or answering questions about issues junior devs are working on | | B01LER Pre-Planning | Thursdays | B01LER Leadership (and/or stand-ins) | Discuss objectives and prepare a set of issues to finish int he next iteration | | B01LER Weekly Checkup | Mondays | B01LER Leadership (and/or stand-ins) | Discuss and decide on general product topics and check the roadmap | | B01LER Marketing Weekly | Mondays | B01LER Leadership (and/or stand-ins) | Discuss and decide on general marketing topics | +| B01LER Dev Lead Touchpoint | Thursdays | Dev Lead, Product & Project Management, everyone who wants to join | Discussing and deciding on dev issues or topcis that recently came up and need | | B01LER Monthly | Last Thursday of a month | Everyone who wants to join | Giving an update, answering questions and sometimes deep dives into specific topics | -## Communication Channels +## Communication Channels Here is a list of all our communicataion channels and what we are using them for. - | Tool | Channel | Usage | | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | | Slack | [#boiler-core](https://song-asg.slack.com/archives/C049ZPXBTKJ) | Team internal; Main communication channel, used for general questions, things to share and to inform the team about absences | @@ -77,10 +71,8 @@ Here is a list of all our communicataion channels and what we are using them for | Mailing List | boiler.dev.notifications@accenture.com | Mailing list to receive notifications from dev services like GitHub or Render, reaches developers and Product & Project lead | ## Access Checklist - Here is a checklist with all the accesses that new colleages need when working in the B01LER project. Every entry has a description on how to recieve access and a whom to contact. - - [ ] **GitHub** - Access to the [deven-org](https://github.com/orgs/deven-org/people) and the [b01ler team](https://github.com/orgs/deven-org/teams/bo1ler) can be provided by an any of the team leads or other org-owners. Access to the deven-org also results in access to the @@ -102,9 +94,7 @@ description on how to recieve access and a whom to contact. & project management lead. ## Project Management Onboarding Checklist - Here is a checklist for project management to follow when onboarding a new colleage. - - [ ] **WBS Authorization** - to book hours on the projects WBS, new colleagues need to be authorized first. Authorization can be requested by the controlling team. - [ ] **Project forecast** - new colleagues need to be added to the project forecast by the product & project management @@ -112,15 +102,12 @@ Here is a checklist for project management to follow when onboarding a new colle - [ ] **Pennyworth** - the product & project management lead needs to add new colleagues to the planning in pennyworth. ## How to get support - For further support you can always reach out to [Thorben Hartmann](https://song-asg.slack.com/team/UDF7P0Y5D) or any of the other team leads via Slack. Another way is to reach out to our community leaders. Instructions on when and how to contact community leaders can be found in our [Code of Conduct](CODE_OF_CONDUCT.md). ## Link Archive - Here you can find some useful links: - - **[GitHub project](https://github.com/orgs/deven-org/projects/3/views/31?pane=info)** - This is where we are managing our work. Basically it is better view of all the issues in the repository. Here you can find all our boards, our backlogs and our roadmaps. The documentation of all this can be found in the side-panel. From 52929ca293a4c6b10afb67e5d4bfad885b8de435 Mon Sep 17 00:00:00 2001 From: RubirajAccenture <122974571+RubirajAccenture@users.noreply.github.com> Date: Tue, 2 Apr 2024 13:45:55 +0200 Subject: [PATCH 05/56] fix(ui-library): align hint and error message icons (#1059) Co-authored-by: Christian Hoffmann <112889877+ChristianHoffmannS2@users.noreply.github.com> Co-authored-by: Thorben Hartmann <122102805+thrbnhrtmnn@users.noreply.github.com> --- .../src/components/checkbox/index.stories.ts | 3 ++- .../src/components/checkbox/index.test.ts | 15 +++++++++++++++ .../components/input-field-number/index.test.ts | 15 +++++++++++++++ .../input-field-text/index.stories.ts | 1 + .../components/input-field-text/index.test.ts | 16 ++++++++++++++++ .../src/components/radio-group/index.stories.ts | 1 + .../src/components/radio-group/index.test.ts | 17 +++++++++++++++++ .../src/components/radio/index.stories.ts | 2 +- .../src/components/radio/index.test.ts | 17 +++++++++++++++++ .../src/components/select/index.stories.ts | 2 +- .../src/components/select/index.test.ts | 17 +++++++++++++++++ .../src/components/textarea/index.test.ts | 16 ++++++++++++++++ 12 files changed, 119 insertions(+), 3 deletions(-) diff --git a/packages/ui-library/src/components/checkbox/index.stories.ts b/packages/ui-library/src/components/checkbox/index.stories.ts index 9d84408d4..4f87f203b 100644 --- a/packages/ui-library/src/components/checkbox/index.stories.ts +++ b/packages/ui-library/src/components/checkbox/index.stories.ts @@ -493,13 +493,14 @@ export const FormCaptionGroup = () => { ...defaultParams, label: 'Hint message', hasHint: true, + hintIcon: 'blrInfo', })} ${BlrCheckboxRenderFunction({ ...defaultParams, label: 'Hint and error message', hasHint: true, hasError: true, - hintIcon: 'blr360', + hintIcon: 'blrInfo', errorMessage: "OMG it's an error", errorIcon: 'blrErrorFilled', })} diff --git a/packages/ui-library/src/components/checkbox/index.test.ts b/packages/ui-library/src/components/checkbox/index.test.ts index 6aee28a94..f6bc990de 100644 --- a/packages/ui-library/src/components/checkbox/index.test.ts +++ b/packages/ui-library/src/components/checkbox/index.test.ts @@ -34,6 +34,21 @@ describe('blr-checkbox', () => { expect(className).to.contain('input-control'); }); + it('has error Icon set to undefined', async () => { + const element = await fixture( + BlrCheckboxRenderFunction({ + ...sampleParams, + hasError: true, + errorIcon: undefined, + }) + ); + const labelWrapper = querySelectorDeep('.label-wrapper', element.getRootNode() as HTMLElement); + const captionWrapper = querySelectorDeep('.caption-wraper', labelWrapper?.getRootNode() as HTMLElement); + const formCaption = querySelectorDeep('.blr-form-caption', captionWrapper?.getRootNode() as HTMLElement); + const errorMessageIcon = querySelectorDeep('blr-icon', formCaption?.getRootNode() as HTMLElement); + expect(errorMessageIcon).to.not.exist; + }); + it('is shows adjacent caption components in caption group slot', async () => { const element = await fixture( BlrCheckboxRenderFunction({ diff --git a/packages/ui-library/src/components/input-field-number/index.test.ts b/packages/ui-library/src/components/input-field-number/index.test.ts index 1ff66edaf..34ba940c2 100644 --- a/packages/ui-library/src/components/input-field-number/index.test.ts +++ b/packages/ui-library/src/components/input-field-number/index.test.ts @@ -98,6 +98,21 @@ describe('blr-input-field-number', () => { expect(errorClassName).to.contain('error'); }); + it('has error Icon set to undefined', async () => { + const element = await fixture( + BlrInputFieldNumberRenderFunction({ + ...sampleParams, + hasError: true, + errorMessage: 'error', + errorMessageIcon: undefined, + }) + ); + + const formCaption = querySelectorDeep('.blr-form-caption', element?.getRootNode() as HTMLElement); + const errorIcon = querySelectorDeep('blr-icon', formCaption?.getRootNode() as HTMLElement); + expect(errorIcon).to.not.exist; + }); + it('has a sizeVariant md by default', async () => { const element = await fixture(BlrInputFieldNumberRenderFunction(sampleParams)); diff --git a/packages/ui-library/src/components/input-field-text/index.stories.ts b/packages/ui-library/src/components/input-field-text/index.stories.ts index 9eb9c79d5..90dc8716b 100644 --- a/packages/ui-library/src/components/input-field-text/index.stories.ts +++ b/packages/ui-library/src/components/input-field-text/index.stories.ts @@ -733,6 +733,7 @@ export const FormCaptionGroup = () => { label: ' Hint and error message', labelAppendix: '', hasHint: true, + hintMessage: 'This is a small hint', hasError: true, errorMessage: "OMG it's an error", errorMessageIcon: 'blrErrorFilled', diff --git a/packages/ui-library/src/components/input-field-text/index.test.ts b/packages/ui-library/src/components/input-field-text/index.test.ts index 10f105fb6..d72be0992 100644 --- a/packages/ui-library/src/components/input-field-text/index.test.ts +++ b/packages/ui-library/src/components/input-field-text/index.test.ts @@ -121,6 +121,22 @@ describe('blr-input-field-text', () => { expect(errorClassName).to.contain('error'); }); + it('has error Icon set to undefined', async () => { + const element = await fixture( + BlrInputFieldTextRenderFunction({ + ...sampleParams, + hasHint: false, + hasError: true, + errorMessage: 'error', + errorMessageIcon: undefined, + }) + ); + + const formCaption = querySelectorDeep('.blr-form-caption', element?.getRootNode() as HTMLElement); + const errorIcon = querySelectorDeep('blr-icon', formCaption?.getRootNode() as HTMLElement); + expect(errorIcon).to.not.exist; + }); + it('has a size md by default', async () => { const element = await fixture(BlrInputFieldTextRenderFunction(sampleParams)); diff --git a/packages/ui-library/src/components/radio-group/index.stories.ts b/packages/ui-library/src/components/radio-group/index.stories.ts index 669613aa3..2efaac6c5 100644 --- a/packages/ui-library/src/components/radio-group/index.stories.ts +++ b/packages/ui-library/src/components/radio-group/index.stories.ts @@ -459,6 +459,7 @@ export const FormCaptionGroup = () => { groupErrorMessage: "OMG it's an error", hasHint: true, hasError: true, + groupErrorIcon: 'blrErrorFilled', })}
`; diff --git a/packages/ui-library/src/components/radio-group/index.test.ts b/packages/ui-library/src/components/radio-group/index.test.ts index 12d10152a..938c165f1 100644 --- a/packages/ui-library/src/components/radio-group/index.test.ts +++ b/packages/ui-library/src/components/radio-group/index.test.ts @@ -81,4 +81,21 @@ describe('blr-radio-group', () => { expect(className).not.to.contain('error'); }); + + it('has error Icon set to undefined', async () => { + const element = await fixture( + BlrRadioGroupRenderFunction({ + ...sampleParams, + hasHint: false, + hasError: true, + errorIcon: undefined, + }) + ); + + const labelWrapper = querySelectorDeep('.label-wrapper', element.getRootNode() as HTMLElement); + const captionWrapper = querySelectorDeep('.caption-wraper', labelWrapper?.getRootNode() as HTMLElement); + const formCaption = querySelectorDeep('.blr-form-caption', captionWrapper?.getRootNode() as HTMLElement); + const errorMessageIcon = querySelectorDeep('blr-icon', formCaption?.getRootNode() as HTMLElement); + expect(errorMessageIcon).to.not.exist; + }); }); diff --git a/packages/ui-library/src/components/radio/index.stories.ts b/packages/ui-library/src/components/radio/index.stories.ts index 79a5a0fce..c2c313f92 100644 --- a/packages/ui-library/src/components/radio/index.stories.ts +++ b/packages/ui-library/src/components/radio/index.stories.ts @@ -390,7 +390,7 @@ export const FormCaptionGroup = () => { ...args, hasHint: true, label: 'Hint message', - hintIcon: 'blr360', + hintIcon: 'blrInfo', })}
diff --git a/packages/ui-library/src/components/radio/index.test.ts b/packages/ui-library/src/components/radio/index.test.ts index 035294001..2caff5405 100644 --- a/packages/ui-library/src/components/radio/index.test.ts +++ b/packages/ui-library/src/components/radio/index.test.ts @@ -17,6 +17,7 @@ const sampleParams: BlrRadioType = { hasHint: true, hasError: false, theme: 'Light', + errorIcon: undefined, }; describe('blr-radio', () => { @@ -99,4 +100,20 @@ describe('blr-radio', () => { expect(className).not.to.contain('error'); }); + + it('has error Icon set to undefined', async () => { + const element = await fixture( + BlrRadioRenderFunction({ + ...sampleParams, + hasHint: false, + hasError: true, + errorIcon: undefined, + }) + ); + const labelWrapper = querySelectorDeep('.label-wrapper', element.getRootNode() as HTMLElement); + const captionWrapper = querySelectorDeep('.caption-wraper', labelWrapper?.getRootNode() as HTMLElement); + const formCaption = querySelectorDeep('.blr-form-caption', captionWrapper?.getRootNode() as HTMLElement); + const errorMessageIcon = querySelectorDeep('blr-icon', formCaption?.getRootNode() as HTMLElement); + expect(errorMessageIcon).to.not.exist; + }); }); diff --git a/packages/ui-library/src/components/select/index.stories.ts b/packages/ui-library/src/components/select/index.stories.ts index 9b1ac8c34..5c3e4e27a 100644 --- a/packages/ui-library/src/components/select/index.stories.ts +++ b/packages/ui-library/src/components/select/index.stories.ts @@ -495,7 +495,7 @@ export const FormCaptionGroup = () => { hasHint: true, hasError: true, errorMessage: "OMG it's an error", - errorMessageIcon: 'blrError', + errorMessageIcon: 'blrErrorFilled', }, optionsAsChildren )} diff --git a/packages/ui-library/src/components/select/index.test.ts b/packages/ui-library/src/components/select/index.test.ts index ba3099d92..a1ea26fc1 100644 --- a/packages/ui-library/src/components/select/index.test.ts +++ b/packages/ui-library/src/components/select/index.test.ts @@ -66,6 +66,23 @@ describe('blr-select', () => { expect(errorClassName).to.contain('error'); }); + it('has error Icon set to undefined', async () => { + const element = await fixture( + BlrSelectRenderFunction({ + ...sampleParams, + hasHint: false, + hasError: true, + errorMessageIcon: undefined, + }) + ); + + const labelWrapper = querySelectorDeep('.label-wrapper', element?.getRootNode() as HTMLElement); + const captionWrapper = querySelectorDeep('.caption-wraper', labelWrapper?.getRootNode() as HTMLElement); + const formCaption = querySelectorDeep('.blr-form-caption', captionWrapper?.getRootNode() as HTMLElement); + const errorIcon = querySelectorDeep('blr-icon', formCaption?.getRootNode() as HTMLElement); + expect(errorIcon).to.not.exist; + }); + it('has a size md by default', async () => { const element = await fixture(BlrSelectRenderFunction(sampleParams)); diff --git a/packages/ui-library/src/components/textarea/index.test.ts b/packages/ui-library/src/components/textarea/index.test.ts index 565401791..39fff8757 100644 --- a/packages/ui-library/src/components/textarea/index.test.ts +++ b/packages/ui-library/src/components/textarea/index.test.ts @@ -118,6 +118,22 @@ describe('blr-textarea', () => { expect(disabled).to.be.equal(''); }); + it('has error Icon set to undefined', async () => { + const element = await fixture( + BlrTextareaRenderFunction({ + ...sampleParams, + hasHint: false, + hasError: true, + errorMessageIcon: undefined, + }) + ); + + const textarea = querySelectorDeep('textarea', element.getRootNode() as HTMLElement); + const formCaption = querySelectorDeep('.blr-form-caption', textarea?.getRootNode() as HTMLElement); + const errorMessageIcon = querySelectorDeep('blr-icon', formCaption?.getRootNode() as HTMLElement); + expect(errorMessageIcon).to.not.exist; + }); + it('is is disabled when attribute disabled is set', async () => { const element = await fixture( BlrTextareaRenderFunction({ From 5ef26241ae8783c24577eab96f8c9ed92438c727 Mon Sep 17 00:00:00 2001 From: Thorben Hartmann <122102805+thrbnhrtmnn@users.noreply.github.com> Date: Wed, 3 Apr 2024 10:02:09 +0200 Subject: [PATCH 06/56] docs(contribute): update contributing documentation (#1057) * docs():Update CONTRIBUTING.md Signed-off-by: Thorben Hartmann <122102805+thrbnhrtmnn@users.noreply.github.com> * docs(): Update CONTRIBUTING.md Signed-off-by: Thorben Hartmann <122102805+thrbnhrtmnn@users.noreply.github.com> * docs(contribute): add full stops and optimize sentences Signed-off-by: Thorben Hartmann <122102805+thrbnhrtmnn@users.noreply.github.com> * docs(contribute): update contributing documentation Signed-off-by: Thorben Hartmann <122102805+thrbnhrtmnn@users.noreply.github.com> * docs(contribute): update contributing documentation Signed-off-by: Thorben Hartmann <122102805+thrbnhrtmnn@users.noreply.github.com> --------- Signed-off-by: Thorben Hartmann <122102805+thrbnhrtmnn@users.noreply.github.com> --- docs/CONTRIBUTING.md | 90 +++++++++++++++++++++++++++++--------------- 1 file changed, 59 insertions(+), 31 deletions(-) diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md index 4f11872f4..6157a62d0 100644 --- a/docs/CONTRIBUTING.md +++ b/docs/CONTRIBUTING.md @@ -28,8 +28,9 @@ greatly appreciated as we continue to grow and develop our project! - [Branch naming convention](#branch-naming-convention) - [:handshake: Commits](#handshake-commits) - [:test_tube: Testing / Validating](#test_tube-testing-and-validating) - - [:arrow_heading_up: Pull Request](#arrow_heading_up-pull-request) - - [:mag: Code Review](mag-code-review) + - [:mag: Pull requests & code reviews](#mag-pull-requests--code-reviews) + - [Tips for working on a pull request](#tips-for-working-on-a-pull-request) + - [Steps for looking for a pull request to review](#steps-for-looking-for-a-pull-request-to-review) ## :new: New contributor guide @@ -52,13 +53,13 @@ contributions: > **Contribution etiquette:** > -> - While working on your contribution, please do not copy code from other frameworks or libraries -> - Make small and frequent commits -> - The default language for all written and spoken communication is english +> - While working on your contribution, please do not copy code from other frameworks or libraries. +> - Make small and frequent commits. +> - The default language for all written and spoken communication is english. > - Every GitHub issue should have a corresponding branch, and vice versa - every bugfix or code change should already -> have an issue created for it -> - No code should be merged or pushed to the develop branch without a pull request -> - A merge request can only be merged if it has successful test results and at least two approvals +> have an issue created for it. +> - No code should be merged or pushed to the develop branch without a pull request. +> - A merge request can only be merged if it has successful test results and at least two approvals. ## :arrows_counterclockwise: Contribution process overview 1. Getting Started @@ -101,7 +102,7 @@ is for bugs and the other one for everything else, like new features or also imp
  • Use the existing issue templates.
  • It should be specific. It's important that it addresses one specific topic.
  • If it is a bug it should be reproducible. It should contain all the instructions needed to reproduce the same outcome.
    • -
  • If the issue is about a component, please add the component name to the beginning of issue title, followed by a dash and a more in detail description of the issue. For example: Button Text - add new variant
    • +
  • If the issue is about a component, please add the component name to the beginning of issue title, followed by a dash and a more in detail description of the issue. For example: Button Text - add new variant.
    • After creating an issue, don’t forget to assign it to yourself. The core team will then check your issue to ensures that your idea fits the scope of the project and leave an approval comment. Waiting for approval makes it less likely to get a rejected pull request. We will do our best to reply to new issues within a week. @@ -109,13 +110,13 @@ After creating an issue, don’t forget to assign it to yourself. The core team ### Tips to find issues - For a first contribution, go to labels / filter by labels and see if there are issues tagged with the - `good first issue` label -- Search for the component name of the component you want to work on -- Filter by the `💚 contributor issue` label -- Filter by the `🚨 new::bug`, `⌨️ dev issue`, `📋 task::backlog` and/or `📋 task::ready` labels -- Avoid tasks labeld with `⭕️ core team issue`, `🚫 blocker`, `🎨 design issue`, `📋 task::planned`, + `good first issue` label. +- Search for the component name of the component you want to work on. +- Filter by the `💚 contributor issue` label. +- Filter by the `🚨 new::bug`, `⌨️ dev issue`, `📋 task::backlog` and/or `📋 task::ready` labels. +- Avoid tasks labeled with `⭕️ core team issue`, `🚫 blocker`, `🎨 design issue`, `📋 task::planned`, `📋 task::inProgress`, `📋 task::inReview`, `🦹 needs:contact`, `🦹 needs:documentation`, `🦹 needs:help` and/or - `🦹 needs:specs` + `🦹 needs:specs`. ## :arrow_heading_down: Branch @@ -123,7 +124,7 @@ For contributions we are using [Gitflow as branching strategy](https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow#:~:text=Gitflow%20is%20a%20legacy%20Git,software%20development%20and%20DevOps%20practices). [Here](https://danielkummer.github.io/git-flow-cheatsheet/) you can also find a short cheatsheet about Gitflow. -### Branch Naming Convention +### Branch naming convention The branch name should not exceed a maximum character count of 140. Each branch should follow the following structure: `/_` @@ -133,9 +134,9 @@ The branch name should not exceed a maximum character count of 140. Each branch `feature` and `fix`. The branch type `fix` is not defined in Gitflow, but is used exactly like a `feature` branch. It was added to be more granular in our naming convention and to differentiate between branches that implement something new (`feature`) and those that change something that already exists (`fix`). -- **issueNumber:** The issue number of your task. For example: `421` +- **issueNumber:** The issue number of your task. For example: `421`. - **summary:** A few words describing the issue. When there are multiple words, you can use a hyphen to link the words. - For example: `text-area-storybook-documentation` + For example: `text-area-storybook-documentation`. ## :handshake: Commits @@ -153,19 +154,46 @@ yarn test yarn compile ``` -## :arrow_heading_up: Pull Request +## :mag: Pull requests & Code reviews +Once you are happy with your implementation it is time to open a pull request (PR). After doing so, your code will be +reviewed by the B01LER core team. Once the PR has two approvals, your code will be merged to develop and will be part +of a future release. -Once your contribution is ready, it is time to create a pull request. Once your contribution is ready, it is time to -create a pull request. Please create pull requests for the `develop` branch and not for `main`. Please also make sure -that pull requests are linked to the related issue by using a keyword and the issue number as explained -[here](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword) -or by using the `Development` field. +In case we find things we would like you to change we will leave comments. We kindly ask you to update your pull request +in regards to the requested changes. Once all comments have been solved the pull request will be merged. We will try our +best to respond within a week to new pull requests. + +Contributors are also invited to review other contributors pull requests, but in the end at least one member of the core +team needs to approve it, before it can be merged. -## :mag: Code Review -After you created a pull request, your code will be reviewed by the B01LER core team. Once the PR has two approvals, -your code will be merged to develop and will be part of a future release. In case we find things we would like you to -change we will leave comments. We kindly ask you to update your pull request in regards of the requested changes. Once -all comments have been solved the pull request will be merged. We will try our best to respond within a week to new pull -requests. Contributors are also invited to review other contributors pull requests, but in the end at least one member -of the core team needs to approve it, before it can be merged. +### Tips for working on a pull request +- Create pull requests for the `develop` branch and not for `main`. +- Make sure that a pull request is linked to the related issue by using a keyword and the issue number as +explained [here](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword) +or by using the `Development` field. +- Change your PR from `Draft` to `Ready for Review` (you can create Draft PRs at any time, but only open PRs will be +reviewed). +- Leave the reviewers list on the right hand side untouched. We use this to track how many people are already looking at +your PR. +- Assign the label needs:reviewers (code) or needs:reviewers (design). +- During iteration: Stay in touch with the reviewers that are on your case. +- (only for Members of the Accenture Slack Channel) Post a link to the PR in the [#boiler-dev](https://song-asg.slack.com/archives/C0629BCDCSK) +Slack channel if the review is time critical. + +### Steps for looking for a pull request to review +1. Find a PR: + - (only for Members of the Accenture Slack Channel) Keep an eye on posted PR links in the #boiler-dev Slack channel. + - Filter the [PR list in GitHub](https://github.com/deven-org/boiler/pulls) for label: `🦹 needs:reviewers (code)` or label: `🦹 needs:reviewers (design)`. +2. Open the PR of your choice. +3. Check the Reviewers panel to the right. Are enough reviewers on the case already (dev:2, design: 1)? If so choose a +different PR. Otherwise proceed with (Step 4.). +4. Request yourself as a Reviewer in the Reviewers panel to the right. +5. Update the labels: + - If you are the second code reviewer, remove the label `🦹 needs:reviewers (code)`. + - If you are the first design reviewer, remove the label `🦹 needs:reviewers (design)`. +6. Complete the Review. +7. Follow-up on your review. + - During iteration: Check your assigned PRs regulary or stay in touch with the PR creator. + - If you’re unsure about whether you’ll be able to complete the review in a timely manner remove yourself from the + list of reviewers & re-attach the label. From d60fae27216a989e627994bd7e2d08c039146e68 Mon Sep 17 00:00:00 2001 From: Barkley <78202031+bar-tay@users.noreply.github.com> Date: Thu, 4 Apr 2024 11:29:38 +0200 Subject: [PATCH 07/56] fix(ui-library): #800 align checkbox props with design (#1058) Co-authored-by: Barkley Co-authored-by: Julius Walther Co-authored-by: David Kennedy --- packages/js-example-app/src/index.ejs | 6 +-- .../src/components/checkbox/index.stories.ts | 51 +++++++------------ .../src/components/checkbox/index.test.ts | 14 ++--- .../src/components/checkbox/index.ts | 42 +++++++-------- 4 files changed, 49 insertions(+), 64 deletions(-) diff --git a/packages/js-example-app/src/index.ejs b/packages/js-example-app/src/index.ejs index 3741a0ad9..d168db0b2 100644 --- a/packages/js-example-app/src/index.ejs +++ b/packages/js-example-app/src/index.ejs @@ -58,11 +58,11 @@

    Checkbox

    diff --git a/packages/ui-library/src/components/checkbox/index.stories.ts b/packages/ui-library/src/components/checkbox/index.stories.ts index 4f87f203b..7e6058646 100644 --- a/packages/ui-library/src/components/checkbox/index.stories.ts +++ b/packages/ui-library/src/components/checkbox/index.stories.ts @@ -25,8 +25,7 @@ export default { title: 'Components/Checkbox', argTypes: { // Appearance - size: { - name: 'sizeVariant', + sizeVariant: { description: 'Choose size of the component.', options: InputSizes, control: { type: 'radio' }, @@ -102,8 +101,7 @@ export default { category: 'Content / Settings', }, }, - hintIcon: { - name: 'hintMessageIcon', + hintMessageIcon: { description: 'Select an icon which is displayed in front of the hint message.', options: [undefined, ...PureIconKeys], control: { type: 'select' }, @@ -114,7 +112,6 @@ export default { }, //States disabled: { - name: 'disabled', description: 'Choose if component is disabled. Prevents the user to select or change the value of this component. ', defaultValue: false, @@ -123,7 +120,6 @@ export default { }, }, readonly: { - name: 'readonly', description: 'Choose if component is readonly. The user can select but not change the value of this component.', defaultValue: false, table: { @@ -131,7 +127,6 @@ export default { }, }, hasError: { - name: 'hasError', description: 'Choose if component has an error.', defaultValue: false, table: { @@ -139,15 +134,13 @@ export default { }, }, errorMessage: { - name: 'errorMessage', description: 'Enter string used used as error message.', table: { category: 'Validation', }, if: { arg: 'hasError', eq: true }, }, - errorIcon: { - name: 'errorMessageIcon', + errorMessageIcon: { description: 'Select an icon which is displayed in front of the error message.', table: { category: 'Validation', @@ -166,41 +159,33 @@ export default { }, }, //Technical attributes - checkInputId: { - name: 'checkInputId', + checkboxId: { description: 'Unique identifier for this component.', table: { category: 'Technical Attributes', }, }, name: { - name: 'name', description: 'For a < form > element, the name attribute is used as a reference when the data is submitted. ', table: { category: 'Technical Attributes', }, }, // Events - onChange: { - name: 'onChange', + blrCheckedChange: { description: 'Fires when the value changes.', - action: 'onChange', table: { category: 'Events', }, }, - onFocus: { - name: 'onFocus', + blrFocus: { description: 'Fires when the component is focused.', - action: 'onFocus', table: { category: 'Events', }, }, - onBlur: { - name: 'onBlur', + blrBlur: { description: 'Fires when the component lost focus.', - action: 'onBlur', table: { category: 'Events', }, @@ -246,7 +231,7 @@ export default { // Default parameters for Checkbox component const defaultParams: BlrCheckboxType = { theme: 'Light', - size: 'md', + sizeVariant: 'md', checked: false, checkedIcon: 'blrCheckmark', indeterminate: false, @@ -255,14 +240,14 @@ const defaultParams: BlrCheckboxType = { label: 'Label-text', hasHint: false, hintMessage: 'This is a small hint message', - hintIcon: 'blrInfo', + hintMessageIcon: 'blrInfo', disabled: false, readonly: false, hasError: false, errorMessage: ' ', - errorIcon: undefined, - arialabel: 'check Input', - checkInputId: 'checkInputId', + errorMessageIcon: undefined, + arialabel: 'checkbox', + checkboxId: 'checkboxId', name: 'checkInputId', }; @@ -285,17 +270,17 @@ export const SizeVariant = () => { ${BlrCheckboxRenderFunction({ ...defaultParams, label: 'Size SM', - size: 'sm', + sizeVariant: 'sm', })} ${BlrCheckboxRenderFunction({ ...defaultParams, label: 'Size MD', - size: 'md', + sizeVariant: 'md', })} ${BlrCheckboxRenderFunction({ ...defaultParams, label: 'Size LG', - size: 'lg', + sizeVariant: 'lg', })} @@ -493,16 +478,16 @@ export const FormCaptionGroup = () => { ...defaultParams, label: 'Hint message', hasHint: true, - hintIcon: 'blrInfo', + hintMessageIcon: 'blrInfo', })} ${BlrCheckboxRenderFunction({ ...defaultParams, label: 'Hint and error message', hasHint: true, hasError: true, - hintIcon: 'blrInfo', + hintMessageIcon: 'blr360', errorMessage: "OMG it's an error", - errorIcon: 'blrErrorFilled', + errorMessageIcon: 'blrErrorFilled', })} diff --git a/packages/ui-library/src/components/checkbox/index.test.ts b/packages/ui-library/src/components/checkbox/index.test.ts index f6bc990de..9f6a9ce87 100644 --- a/packages/ui-library/src/components/checkbox/index.test.ts +++ b/packages/ui-library/src/components/checkbox/index.test.ts @@ -8,18 +8,18 @@ import type { BlrCheckboxType } from '.'; const sampleParams: BlrCheckboxType = { label: 'Checkbox Option', - checkInputId: 'Checky', + checkboxId: 'Checky', disabled: false, checked: false, indeterminate: false, readonly: false, hasError: false, - size: 'md', + sizeVariant: 'md', errorMessage: 'This is a sample error message', - errorIcon: undefined, + errorMessageIcon: undefined, hasHint: false, hintMessage: 'This is a sample hint', - hintIcon: undefined, + hintMessageIcon: undefined, theme: 'Light', hasLabel: true, }; @@ -54,9 +54,9 @@ describe('blr-checkbox', () => { BlrCheckboxRenderFunction({ ...sampleParams, hasHint: true, - hintIcon: 'blrInfo', + hintMessageIcon: 'blrInfo', hasError: true, - errorIcon: 'blrErrorFilled', + errorMessageIcon: 'blrErrorFilled', }) ); @@ -82,7 +82,7 @@ describe('blr-checkbox', () => { }); it('has a size sm when "size" is set to "sm" ', async () => { - const element = await fixture(BlrCheckboxRenderFunction({ ...sampleParams, size: 'sm' })); + const element = await fixture(BlrCheckboxRenderFunction({ ...sampleParams, sizeVariant: 'sm' })); const checkbox = querySelectorDeep('div.blr-checkbox', element.getRootNode() as HTMLElement); const className = checkbox?.className; diff --git a/packages/ui-library/src/components/checkbox/index.ts b/packages/ui-library/src/components/checkbox/index.ts index 8f301c52e..248faa609 100644 --- a/packages/ui-library/src/components/checkbox/index.ts +++ b/packages/ui-library/src/components/checkbox/index.ts @@ -41,7 +41,7 @@ export class BlrCheckbox extends LitElementCustom { protected _checkboxNode!: HTMLInputElement; @property() label!: string; - @property() checkInputId?: string = ''; + @property() checkboxId?: string = ''; @property() arialabel?: string; @property() disabled?: boolean; @@ -50,16 +50,16 @@ export class BlrCheckbox extends LitElementCustom { @property() readonly?: boolean; @property() hasError?: boolean; @property() errorMessage?: string; - @property() errorIcon?: SizelessIconType; + @property() errorMessageIcon?: SizelessIconType; @property() hasHint?: boolean; - @property() hintIcon?: SizelessIconType; + @property() hintMessageIcon?: SizelessIconType; @property() hintMessage?: string; @property() hasLabel!: boolean; @property() name?: string; @property() checkedIcon?: SizelessIconType = 'blrCheckmark'; @property() indeterminatedIcon?: SizelessIconType = 'blrMinus'; - @property() size?: FormSizesType = 'md'; + @property() sizeVariant?: FormSizesType = 'md'; @property() theme: ThemeType = 'Light'; @@ -140,14 +140,14 @@ export class BlrCheckbox extends LitElementCustom { }; protected render() { - if (this.size && this.checkInputId) { + if (this.sizeVariant && this.checkboxId) { const dynamicStyles = this.theme === 'Light' ? [formLight, checkboxLight] : [formDark, checkboxDark]; const classes = classMap({ 'blr-semantic-action': true, 'blr-checkbox': true, 'error': this.hasError || false, - [`${this.size}`]: this.size, + [`${this.sizeVariant}`]: this.sizeVariant, }); const labelWrapperClasses = classMap({ @@ -189,32 +189,32 @@ export class BlrCheckbox extends LitElementCustom { 'Control', 'Icon', 'SizeVariant', - this.size.toUpperCase(), + this.sizeVariant.toUpperCase(), ]).toLowerCase() as FormSizesType; - const getCaptionContent = () => html` - ${this.hasHint && (this.hintMessage || this.hintIcon) + const captionContent = html` + ${this.hasHint && (this.hintMessage || this.hintMessageIcon) ? html`
    ${BlrFormCaptionRenderFunction({ variant: 'hint', theme: this.theme, - sizeVariant: this.size, + sizeVariant: this.sizeVariant, message: this.hintMessage, - icon: this.hintIcon, + icon: this.hintMessageIcon, })}
    ` : nothing} - ${this.hasError && (this.errorMessage || this.errorIcon) + ${this.hasError && (this.errorMessage || this.errorMessageIcon) ? html`
    ${BlrFormCaptionRenderFunction({ variant: 'error', theme: this.theme, - sizeVariant: this.size, + sizeVariant: this.sizeVariant, message: this.errorMessage, - icon: this.errorIcon, + icon: this.errorMessageIcon, })}
    ` @@ -259,8 +259,8 @@ export class BlrCheckbox extends LitElementCustom { type="checkbox" class="input-control" tabindex="-1" - aria-label="${this.arialabel}" - id=${this.checkInputId || nothing} + aria-label="${this.ariaLabel}" + id=${this.checkboxId || nothing} name=${this.name || nothing} ?disabled=${this.disabled} ?checked=${this.currentCheckedState} @@ -271,7 +271,7 @@ export class BlrCheckbox extends LitElementCustom { aria-hidden="true" /> -