-
Notifications
You must be signed in to change notification settings - Fork 14
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
feat(styles): Update form-control and form-select sizes #2396
Conversation
…te' into feat/1835-text-input-success-state
# Conflicts: # packages/components/package.json # packages/internet-header/package.json # pnpm-lock.yaml
🦋 Changeset detectedLatest commit: 179a9a7 The changes in this PR will be included in the next version bump. This PR includes changesets to release 8 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Preview environment ready: https://preview-2396--swisspost-web-frontend.netlify.app |
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.
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.
Both stories (select and input) should set the size
control to the large
value. As this will be the new default size.
# Conflicts: # .changeset/eleven-ghosts-arrive.md # packages/styles/src/components/form-select.scss
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.
We should remove the deprecated sizes (Regular
and Middle
) from the size control in storybook and describe the deprecation of them in a alert before or after the controls.
They still need to work
This would also enable us to use the size without a class as the new default.
Mapping:
Old size | New Size | CssClass |
---|---|---|
Small |
Small |
form-control-sm |
Regular |
deprecated | form-control-rg |
Middle |
Large |
none |
Large |
deprecated | form-control-lg |
What do you think?
packages/documentation/src/stories/components/forms/input/input.stories.ts
Show resolved
Hide resolved
Sure, but it will be handled with #2225 |
Sure, but this is a breaking change who will be implemented in the far future. |
…ry to remove duplication.
Quality Gate passedKudos, no new issues were introduced! 0 New issues |
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @swisspost/[email protected] ### Major Changes - We are introducing the new package `@swisspost/design-system-components-angular` 🥳, which provides a corresponding Angular component for all our web-components. For those working on an Angular app this means: - Instead of the package `@swisspost/design-system-components`, which provides native web components, the new package can be used. - The manual creation of Angular wrapper components for our previous web components in every project is no longer necessary. - Full support of the standard Angular schema. The use of the `CUSTOM_ELEMENTS_SCHEMA` schema is history. - Component properties, events, etc. can be applied to the components in the usual Angular way. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#2071](#2071)) ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Minor Changes - Added icons number 2572 and 2573. (by [@swisspost-bot](https://github.com/swisspost-bot) with [#2553](#2553)) - Added icon number 2574. (by [@swisspost-bot](https://github.com/swisspost-bot) with [#2592](#2592)) ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Set the size of the logo before it is displayed to avoid a layout jump right after the initial rendering of the header. (by [@alizedebray](https://github.com/alizedebray) with [#2557](#2557)) - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated `form-control` and `form-select` sizes and added support for floating label small size variant. (by [@imagoiq](https://github.com/imagoiq) with [#2396](#2396)) ## @swisspost/[email protected] ### Minor Changes - Added a documentation page for the ng-bootstrap modal component. (by [@alizedebray](https://github.com/alizedebray) with [#2531](#2531)) - Added a documentation page for the ng-bootstrap progressbar component. (by [@imagoiq](https://github.com/imagoiq) with [#2549](#2549)) - Added a documentation page for the ng-bootstrap/post notification-overlay component. (by [@imagoiq](https://github.com/imagoiq) with [#2608](#2608)) - Added a documentation page for the angular `custom-select` component based on the ng-bootstrap `dropdown` component. (by [@b1aserlu](https://github.com/b1aserlu) with [#2573](#2573)) - Added a documentation page for the ng-bootstrap dropdown component. (by [@davidritter-dotcom](https://github.com/davidritter-dotcom) with [#2551](#2551)) - Added a documentation page for the post stepper component. (by [@alizedebray](https://github.com/alizedebray) with [#2556](#2556)) - Added a documentation page for the design-system migration process. (by [@imagoiq](https://github.com/imagoiq) with [#2577](#2577)) - Added a documentation page for the ng-bootstrap typeahead component. (by [@imagoiq](https://github.com/imagoiq) with [#2547](#2547)) - Added a documentation page for the ng-bootstrap pagination component. (by [@imagoiq](https://github.com/imagoiq) with [#2549](#2549)) - Added a documentation page for the ng-bootstrap timepicker component. (by [@imagoiq](https://github.com/imagoiq) with [#2549](#2549)) - Added a documentation page for the post product card component. (by [@alizedebray](https://github.com/alizedebray) with [#2580](#2580)) - Added a getting-started docs page for the new `@swisspost/components-angular` package. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#2071](#2071)) - Added an alert warning that the documentation is in beta, it will remain until all Design System components are documented. (by [@alizedebray](https://github.com/alizedebray) with [#2563](#2563)) ### Patch Changes - Fixed conflict between autolink anchor links and normal anchor links. (by [@imagoiq](https://github.com/imagoiq) with [#2529](#2529)) - Updated dependencies: - @swisspost/[email protected] - @swisspost/[email protected] - @swisspost/[email protected] - @swisspost/[email protected] - @swisspost/[email protected] - @swisspost/[email protected] - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
What
Note: support for deprecated sizes is not consistent (for example form-control-rg with invalid state as a greater padding with input[type=date]). Date icon on Firefox are misaligned (they cannot be restyled since v109)
Review
Check all similar components: e.g. Textarea, File Input, …