Skip to content

Select: html options instead of array #780

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

Merged
merged 15 commits into from
Jan 19, 2024
Merged

Select: html options instead of array #780

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
3a825cb
works after first rerender
ChristianHoffmannS2 Jan 12, 2024
d18304d
basic task solve, needs readjusting tests/stories
ChristianHoffmannS2 Jan 12, 2024
3c0bca5
fix(ui-library): fixing error icon issue
davidken91 Jan 15, 2024
0d2ac72
feat(ui-library): updating storybook examples with slots
davidken91 Jan 15, 2024
0d8b0b9
resolving merge conflicts
davidken91 Jan 16, 2024
365480d
feat(ui-library): adding select to example js app
davidken91 Jan 16, 2024
77351f8
feat(ui-library): replacing onChange with blrChange
davidken91 Jan 16, 2024
9b02b4f
Merge branch 'develop' of https://github.com/deven-org/BO1LER-Kitchen…
davidken91 Jan 16, 2024
e26585e
removing dev dependencies
davidken91 Jan 16, 2024
8472951
Merge branch 'develop' into select-options-as-children
davidken91 Jan 17, 2024
4efcd07
Merge branch 'develop' into select-options-as-children
ChristianHoffmannS2 Jan 19, 2024
7792eee
feat(ui-library): removing unsed import statement
davidken91 Jan 19, 2024
212e2a9
Merge branch 'select-options-as-children' of https://github.com/deven…
davidken91 Jan 19, 2024
c572209
feat(ui-library): adding custom event to blrSelect
davidken91 Jan 19, 2024
4e99f36
Merge branch 'develop' into select-options-as-children
davidken91 Jan 19, 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
5 changes: 5 additions & 0 deletions packages/js-example-app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,10 @@
"license": "ISC",
"dependencies": {
"@boiler/ui-library": "0.0.1"
},
"devDependencies": {
"http-server": "^14.1.1",
"webpack": "^5.89.0",
"webpack-dev-server": "^4.15.1"
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

not sure why that, but the plan was to have the same webpack version accross all example apps. same for the dev server, hence to have them in the global package.json

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

i think if you reset that file, the build will work again in the CI.

its complaining because after install in CI, the yarn.lock will be altered. it expects that commits not only include the dep. changes, but also the matching yarn.lock to those changes

Copy link
Contributor

Choose a reason for hiding this comment

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

Ok, I'll remove it but the js example app can now no longer find webpack or the http server

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

lets have a look into that together :)

Copy link
Contributor

Choose a reason for hiding this comment

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

I've actually fixed it. I was making a stupid mistake by running the command in that directory instead of the root directory  
🙄. I just need to make sure that the new click event works in the example app and then it's finished

}
}
13 changes: 13 additions & 0 deletions packages/js-example-app/src/assets/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,19 @@ <h2>Vanilla JS Example Application</h2>
<button id="toggleDisabledState">Toggle Disabled State</button>
</div>

<div class="component">
<p>Select</p>
<blr-select label="Boiler Select Component">
<option value="" label="--Please choose an option--"></option>
<option value="option1" label="Option 1"></option>
<option value="option2" label="Option 2"></option>
<option value="option3" label="Option 3"></option>
<option value="option4" label="Option 4"></option>
<option value="option5" label="Option 5"></option>
<option value="option6" label="Option 6"></option>
</blr-select>
</div>

<div class="component">
<p>Checkbox</p>
<blr-checkbox hasLabel="true" label="Please check" checkInputId="Test123"></blr-checkbox>
Expand Down
4 changes: 4 additions & 0 deletions packages/ui-library/src/components/forms/select/index.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@ export const { tokenizedLight: selectInputLight, tokenizedDark: selectInputDark
const { UserInput, SurfaceFill, SM, MD, LG, Input, InputBorderRadius, Placeholder, InputIcon } = semanticTokens.Forms;

return typeSafeNestedCss`
slot {
display: none;
}

.blr-input-icon {
pointer-events: none;
}
Expand Down
227 changes: 124 additions & 103 deletions packages/ui-library/src/components/forms/select/index.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,22 +33,10 @@ const defaultParams: BlrSelectType = {
required: false,
hasError: false,
errorMessage: ' ',
errorIcon: undefined,
errorMessageIcon: undefined,
arialabel: 'Select',
selectId: 'selectId',
name: 'select',
options: [
{ value: '0', label: 'Option 1', selected: false, disabled: true },
{
value: '1',
label:
'To big option Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.',
selected: false,
disabled: false,
},
{ value: '2', label: 'Option 3', selected: true, disabled: false },
{ value: '4', label: 'Option 4', selected: false, disabled: false },
],
onChange: (event: Event) => console.log(event.type),
};

Expand Down Expand Up @@ -122,12 +110,6 @@ export default {
description:
'Enter an array containing information about the label, value and disabled prop for all options that are part of the select.',
control: 'array',
options: [
{ value: '0', label: 'Option 1', selected: false, disabled: true },
{ value: '1', label: 'Option 2', selected: false, disabled: false },
{ value: '2', label: 'Option 3', selected: true, disabled: false },
{ value: '4', label: 'Option 4', selected: false, disabled: false },
],
table: {
category: 'Content / Settings',
},
Expand Down Expand Up @@ -170,7 +152,7 @@ export default {
},
if: { arg: 'hasError', eq: true },
},
errorIcon: {
errorMessageIcon: {
name: 'errorMessageIcon',
description: 'Select an icon which is displayed in front of the error message.',
table: {
Expand Down Expand Up @@ -255,7 +237,17 @@ Select presents users with a list of options from which they can make a single s
},
};

export const BlrSelect = (params: BlrSelectType) => BlrSelectRenderFunction(params);
const optionsAsChildren = html`
<option value="" label="--Please choose an option--"></option>
<option value="option1" label="Option 1"></option>
<option value="option2" label="Option 2"></option>
<option value="option3" label="Option 3"></option>
<option value="option4" label="Option 4"></option>
<option value="option5" label="Option 5"></option>
<option value="option6" label="Option 6"></option>
`;

export const BlrSelect = (params: BlrSelectType) => BlrSelectRenderFunction(params, optionsAsChildren);

BlrSelect.storyName = 'Select';
BlrSelect.args = defaultParams;
Expand Down Expand Up @@ -288,7 +280,6 @@ const argTypesToDisable = [
const generateDisabledArgTypes = (argTypes: string[]) => {
const disabledArgTypes = {};
argTypes.forEach((argType: string) => {
// @ts-expect-error todo
disabledArgTypes[argType] = {
table: {
disable: true,
Expand All @@ -307,24 +298,33 @@ export const SizeVariant = () => {
return html`
${sharedStyles}
<div class="stories-select">
${BlrSelectRenderFunction({
...defaultParams,
size: 'sm',
label: 'Select SM',
labelAppendix: '',
})}
${BlrSelectRenderFunction({
...defaultParams,
size: 'md',
label: 'Select MD',
labelAppendix: '',
})}
${BlrSelectRenderFunction({
...defaultParams,
size: 'lg',
label: 'Select LG',
labelAppendix: '',
})}
${BlrSelectRenderFunction(
{
...defaultParams,
size: 'sm',
label: 'Select SM',
labelAppendix: '',
},
optionsAsChildren
)}
${BlrSelectRenderFunction(
{
...defaultParams,
size: 'md',
label: 'Select MD',
labelAppendix: '',
},
optionsAsChildren
)}
${BlrSelectRenderFunction(
{
...defaultParams,
size: 'lg',
label: 'Select LG',
labelAppendix: '',
},
optionsAsChildren
)}
</div>
`;
};
Expand All @@ -343,12 +343,15 @@ export const Disabled = () => {
return html`
${sharedStyles}
<div class="stories-select">
${BlrSelectRenderFunction({
...defaultParams,
disabled: true,
label: 'Disabled',
labelAppendix: '',
})}
${BlrSelectRenderFunction(
{
...defaultParams,
disabled: true,
label: 'Disabled',
labelAppendix: '',
},
optionsAsChildren
)}
</div>
`;
};
Expand All @@ -367,12 +370,15 @@ export const Required = () => {
return html`
${sharedStyles}
<div class="stories-select">
${BlrSelectRenderFunction({
...defaultParams,
required: true,
label: 'Required',
labelAppendix: '',
})}
${BlrSelectRenderFunction(
{
...defaultParams,
required: true,
label: 'Required',
labelAppendix: '',
},
optionsAsChildren
)}
</div>
`;
};
Expand All @@ -388,13 +394,16 @@ export const HasError = () => {
return html`
${sharedStyles}
<div class="stories-select">
${BlrSelectRenderFunction({
...defaultParams,
hasError: true,
errorIcon: undefined,
label: 'Error',
labelAppendix: '',
})}
${BlrSelectRenderFunction(
{
...defaultParams,
hasError: true,
errorMessageIcon: undefined,
label: 'Error',
labelAppendix: '',
},
optionsAsChildren
)}
</div>
`;
};
Expand All @@ -411,22 +420,22 @@ export const FormLabel = () => {
return html`
${sharedStyles}
<div class="stories-select">
${BlrSelectRenderFunction({
...defaultParams,
label: 'With Label',
labelAppendix: '(with Appendix)',
})}
${BlrSelectRenderFunction({
...defaultParams,
label: ' ',
labelAppendix: ' ',
options: [
{ value: '0', label: 'Option 1', selected: false, disabled: true },
{ value: '1', label: 'Option 2', selected: false, disabled: false },
{ value: '2', label: 'Without Label', selected: true, disabled: false },
{ value: '4', label: 'Option 4', selected: false, disabled: false },
],
})}
${BlrSelectRenderFunction(
{
...defaultParams,
label: 'With Label',
labelAppendix: '(with Appendix)',
},
optionsAsChildren
)}
${BlrSelectRenderFunction(
{
...defaultParams,
label: ' ',
labelAppendix: ' ',
},
optionsAsChildren
)}
</div>
`;
};
Expand All @@ -442,18 +451,24 @@ export const Icon = () => {
return html`
${sharedStyles}
<div class="stories-select">
${BlrSelectRenderFunction({
...defaultParams,
icon: 'blrArrowUp',
label: 'With Icon',
labelAppendix: ' ',
})}
${BlrSelectRenderFunction({
...defaultParams,
icon: undefined,
label: 'Default Icon',
labelAppendix: ' ',
})}
${BlrSelectRenderFunction(
{
...defaultParams,
icon: 'blrArrowUp',
label: 'With Icon',
labelAppendix: ' ',
},
optionsAsChildren
)}
${BlrSelectRenderFunction(
{
...defaultParams,
icon: undefined,
label: 'Default Icon',
labelAppendix: ' ',
},
optionsAsChildren
)}
</div>
`;
};
Expand All @@ -467,22 +482,28 @@ export const FormCaptionGroup = () => {
return html`
${sharedStyles}
<div class="stories-select">
${BlrSelectRenderFunction({
...defaultParams,
hasHint: true,
label: 'Hint message',
labelAppendix: ' ',
})}
${BlrSelectRenderFunction({
...defaultParams,
icon: undefined,
label: 'Hint and error message',
labelAppendix: '',
hasHint: true,
hasError: true,
errorMessage: "OMG it's an error",
errorIcon: 'blrErrorFilled',
})}
${BlrSelectRenderFunction(
{
...defaultParams,
hasHint: true,
label: 'Hint message',
labelAppendix: ' ',
},
optionsAsChildren
)}
${BlrSelectRenderFunction(
{
...defaultParams,
icon: undefined,
label: 'Hint and error message',
labelAppendix: '',
hasHint: true,
hasError: true,
errorMessage: "OMG it's an error",
errorMessageIcon: 'blrError',
},
optionsAsChildren
)}
</div>
`;
};
Expand Down
Loading