Skip to content
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

Merged
merged 45 commits into from
Jan 30, 2024

Conversation

imagoiq
Copy link
Contributor

@imagoiq imagoiq commented Dec 13, 2023

What

  • Update form-control, form-select sizes to match Figma
  • Support small size with floating label
  • Update floating label color of form-control to match Figma

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, …

@imagoiq imagoiq self-assigned this Dec 13, 2023
@imagoiq imagoiq requested review from oliverschuerch and removed request for a team December 13, 2023 12:52
Copy link

changeset-bot bot commented Dec 13, 2023

🦋 Changeset detected

Latest commit: 179a9a7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 8 packages
Name Type
@swisspost/design-system-styles Patch
@swisspost/design-system-components Patch
@swisspost/design-system-demo Patch
@swisspost/design-system-documentation Patch
@swisspost/internet-header Patch
@swisspost/design-system-intranet-header-workspace Patch
@swisspost/design-system-intranet-header Patch
@swisspost/design-system-components-react Patch

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 imagoiq changed the title feat(styles): Update forms styles feat(styles): Update form-control and form-select sizes Dec 13, 2023
@swisspost-bot
Copy link
Contributor

swisspost-bot commented Dec 13, 2023

Preview environment ready: https://preview-2396--swisspost-web-frontend.netlify.app
Preview environment ready: https://preview-2396--swisspost-design-system-next.netlify.app

@imagoiq imagoiq added the 🚂 PR train PR which follows another one. label Dec 13, 2023
@imagoiq imagoiq linked an issue Dec 13, 2023 that may be closed by this pull request
Copy link
Contributor

@oliverschuerch oliverschuerch left a comment

Choose a reason for hiding this comment

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

The text of the small select variant gets cropped (see letter p) and the vertical alignment looks wrong (at least in chrome). I think we need to reduce the line-height there or for all small variants.
image

Copy link
Contributor

@oliverschuerch oliverschuerch left a 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.

@imagoiq imagoiq requested a review from rouvenpost January 9, 2024 08:07
@imagoiq imagoiq linked an issue Jan 9, 2024 that may be closed by this pull request
Base automatically changed from feat/1835-text-input-success-state to main January 15, 2024 15:10
# Conflicts:
#	.changeset/eleven-ghosts-arrive.md
#	packages/styles/src/components/form-select.scss
Copy link
Contributor

@oliverschuerch oliverschuerch left a 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?

@imagoiq
Copy link
Contributor Author

imagoiq commented Jan 17, 2024

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?

Sure, but it will be handled with #2225

@oliverschuerch
Copy link
Contributor

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?

Sure, but it will be handled with #2225

Sure, but this is a breaking change who will be implemented in the far future.

@imagoiq imagoiq linked an issue Jan 30, 2024 that may be closed by this pull request
@imagoiq imagoiq merged commit 005a153 into main Jan 30, 2024
7 checks passed
@imagoiq imagoiq deleted the feat/1835-update-form-styles branch January 30, 2024 15:05
Copy link

Quality Gate Passed Quality Gate passed

Kudos, no new issues were introduced!

0 New issues
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

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
Labels
🚂 PR train PR which follows another one.
Projects
None yet
4 participants