-
Notifications
You must be signed in to change notification settings - Fork 8
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.
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): ensure property naming number field (831) #940
fix(ui-library): ensure property naming number field (831) #940
Conversation
6c22486
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
hasUnit is not working as intended in Storybook. Instead of a boolean there should be three options, that can be selected via a radio: "none", "prefix", "suffix" with "none" being the default.
If hasUnit is either "prefix" or "suffix", the "unit" prop should be shown in the props panel. If hasUnit="none", the "unit" prop should not be shown.
Also in Storybook the FormCaptionGroup example story under "Dependencies" is missing a hint message in both instances and also a hint message icon in the second instance.
583516a
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey @JpunktWpunkt , the changes already look really good. I would just change a few minor things, before I will approve:
- unitPosition should per default be "prefix" and we should not offer the "none" option
- hasUnit please update the Description in the props panel to "Choose if component has a unit.". We should be a bit more consistent with similar props like hasLabel
- Please align the order of the props in the props panel to the Excel (I think only unitPosition and the section "Accessibility" and "Technical Attributes" need to be adjusted)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Storybook looks perfect now!
By the way, did you also solve #834 with the implementation? If so, please let me know so I can close the other issue :-)
@@ -335,7 +337,9 @@ export class BlrInputFieldNumber extends LitElement { | |||
@select=${this.handleSelect} | |||
placeholder=${this.placeholder || ''} | |||
/> | |||
${hasUnit ? html` <div class="${unitClasses}">${this.unit}</div> ` : nothing} | |||
${this.unitPosition === 'prefix' || this.unitPosition === 'suffix' | |||
? html` <div class="${unitClasses}">${this.unit}</div> ` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please remove the extra space on both side of html
@@ -257,40 +259,40 @@ export class BlrInputFieldNumber extends LitElement { | |||
[`${this.sizeVariant}`]: this.sizeVariant, | |||
[this.stepperVariant || 'split']: this.stepperVariant || 'split', | |||
'error-input': this.hasError || false, | |||
'prepend': hasUnit && !!this.prependUnit, | |||
// 'prepend': this.unitPosition === 'prefix' || this.unitPosition === 'suffix', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can this be removed?
}, | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please remove this additional line.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
The merge-base changed after approval.
358f467
to
99c0c93
Compare
1c4a456
to
a4a5c19
Compare
a4a5c19
to
e5d178e
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
related to #831 and #834