feat(styles): Update form-control and form-select sizes #2396
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…te' into feat/1835-text-input-success-state
# Conflicts: # packages/components/package.json # packages/internet-header/package.json # pnpm-lock.yaml
imagoiq
requested review from
b1aserlu,
davidritter-dotcom and
a team
as code owners
🦋 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 |
imagoiq
changed the title
|
Preview environment ready: https://preview-2396--swisspost-web-frontend.netlify.app |
oliverschuerch
requested changes
Dec 21, 2023
# Conflicts: # .changeset/eleven-ghosts-arrive.md # packages/styles/src/components/form-select.scss
oliverschuerch
requested changes
Jan 17, 2024
There was a problem hiding this comment.
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. |
oliverschuerch
approved these changes
Jan 30, 2024
…ry to remove duplication.
|
gfellerph
pushed a commit
that referenced
this pull request
Feb 7, 2024
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>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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, …