feat(GlFormInut, GlFormSelect, GlDatepicker): Add prop width, deprecate prop size
What does this MR do?
Adds a new property width
and deprecated the property size
.
Why this change?
We use the prop size
in a different context on most components (e.g. GlButton
) to determine the actual visual size of the button. In the use case for GlFormInput
, GlFormSelect
& GlDropdown
size
only changes the length (width) of the element itself. In an attempt to unify the properties used we'll deprecate size
on these components and replace it with width
. This will allow us as well to introduce width
to other form related components in the near future.
-
GlFormInput
: http://localhost:9001/?path=/docs/base-form-form-input--docs -
GlFormSelect
: http://localhost:9001/?path=/docs/base-form-form-select--docs -
GlDropdown
: http://localhost:9001/?path=/docs/base-datepicker--docs
Screenshots or screen recordings
–
Integration merge requests
-
GitLab: Draft: GitLab UI integration branch for form-in... (gitlab!129791 - closed) -
CustomersDot: mr_url -
Status Page: mr_url
Does this MR meet the acceptance criteria?
This checklist encourages the authors, reviewers, and maintainers of merge requests (MRs) to confirm changes were analyzed for conformity with the project's guidelines, security and accessibility.
Toggle the acceptance checklist
Conformity
-
Code review guidelines. -
GitLab UI's contributing guidelines. -
If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer. -
If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer. -
If the MR changes a component's API, integration MR(s) have been opened (see integration merge requests above). -
Added the ~"component:*"
label(s) if applicable.
Security
If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:
-
Label as security and @ mention @gitlab-com/gl-security/appsec
-
Security reports checked/validated by a reviewer from the AppSec team
Accessibility
If this MR adds or modifies a component, take a few moments to review the following:
-
All actions and functionality can be done with a keyboard. -
Links, buttons, and controls have a visible focus state. -
All content is presented in text or with a text equivalent. For example, alt text for SVG, or aria-label
for icons that have meaning or perform actions. -
Changes in a component’s state are announced by a screen reader. For example, changing aria-expanded="false"
toaria-expanded="true"
when an accordion is expanded. -
Color combinations have sufficient contrast.
Merge request reports
Activity
changed milestone to %16.3
assigned to @seggenberger
Minor release (conventional commits)This Merge Request will trigger a minor release of GitLab UI, triggered by commit: 6de322c2
This will bump the second part of the version number, e.g.
v1.2.3
->v1.3.0
.Reviewer roulette
Changes that require review have been detected! A merge request is normally reviewed by both a reviewer and a maintainer in its primary category and by a maintainer in all other categories.
To spread load more evenly across eligible reviewers, Danger has picked a candidate for each review slot. Feel free to override these selections if you think someone else would be better-suited or use the GitLab Review Workload Dashboard to find other available reviewers.
To read more on how to use the reviewer roulette, please take a look at the Engineering workflow and code review guidelines. Please consider assigning a reviewer or maintainer who is a domain expert in the area of the merge request.
Once you've decided who will review this merge request, mention them as you normally would! Danger does not automatically notify them for you.
Category Reviewer Maintainer frontend Andrew Fontaine (
@afontaine
) (UTC-4, 6 hours behind@seggenberger
)Scott de Jonge (
@sdejonge
) (UTC+10, 8 hours ahead of@seggenberger
)If needed, you can retry the
danger-review
job that generated this comment.Generated by
DangerHey
As discussed in the last Foundations Open Office Hours, here is my proposed change for the components that use
size
to determine it'swidth
instead of the actual size.This code change should be a non-breaking change. It allow us to replace the
size
property in the product in a next step and afterwards we can remove the propsize
from these components completely.Another follow-up to this MR will be to introduce the prop
width
on other form components likeGlFormDate
,GlFormTextarea
etc.cc @markrian
Edited by Sascha Eggenbergermentioned in issue gitlab-design#2331 (closed)
removed milestone %16.3
added 42 commits
-
4596d9d3...2e4d4089 - 41 commits from branch
main
- 46c723bd - feat(GlFormInut, GlFormSelect, GlDatepicker): Add prop width, deprecate prop size
-
4596d9d3...2e4d4089 - 41 commits from branch
added 1 commit
- cfc74c2e - feat(GlFormInut, GlFormSelect, GlDatepicker): Add prop width, deprecate prop size
- Resolved by Simon Knox
@rchanila can you review this change? TY!
requested review from @rchanila
mentioned in merge request gitlab!129791 (closed)
added 1 commit
- 325da09e - feat(GlFormInut, GlFormSelect, GlDatepicker): Add prop width, deprecate prop size
- Resolved by Simon Knox
- Resolved by Simon Knox
added 1 commit
- e3f39030 - feat(GlFormInut, GlFormSelect, GlDatepicker): Add prop width, deprecate prop size
- Resolved by Simon Knox
- Resolved by Simon Knox
- Resolved by Simon Knox
- Resolved by Simon Knox
@seggenberger 2 things, rest looks good
added 1 commit
- 504b176c - feat(GlFormInut, GlFormSelect, GlDatepicker): Add prop width, deprecate prop size
- Resolved by Marcel van Remmerden
@mvanremmerden can you please review?
requested review from @mvanremmerden
removed review request for @psimyn
mentioned in issue gitlab-design#2350 (closed)
removed review request for @mvanremmerden
added 121 commits
-
1fb4155c...ecf283df - 120 commits from branch
main
- 6de322c2 - feat(GlFormInut, GlFormSelect, GlDatepicker): Add prop width, deprecate prop size
-
1fb4155c...ecf283df - 120 commits from branch
requested review from @mvanremmerden
removed review request for @mvanremmerden
requested review from @psimyn
changed milestone to %16.5
mentioned in commit 61d8afc2
mentioned in issue gitlab#424403 (closed)
mentioned in issue gitlab-org/gitlab-services/design.gitlab.com#1724 (closed)
mentioned in commit gitlab@c61069ff