feat(docs, styles): improve position utilities. #6002
Merged
Conversation
This file contains hidden or 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
…or position in docs and utils
… in docs, updated code tag for position in docs, set conditions for rendering controls for bottom and end
2 tasks
|
Related Previews |
🦋 Changeset detectedLatest commit: 3e1fdc3 The changes in this PR will be included in the next version bump. This PR includes changesets to release 12 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 |
alionazherdetska
requested changes
Aug 19, 2025
packages/documentation/src/stories/utilities/position/position.stories.ts
Outdated
Show resolved
Hide resolved
packages/documentation/src/stories/utilities/position/position.stories.ts
Outdated
Show resolved
Hide resolved
Co-authored-by: Alona Zherdetska <[email protected]>
alionazherdetska
added a commit
that referenced
this pull request
Aug 20, 2025
… `unset` for better clarity (#6049) ## 📄 Problem The `overflow` utilities component in Storybook has `empty label` options in the dropdown controls, similar to the issue that was recently addressed for position utilities in PR #6002. This creates a poor user experience as users can't understand what the empty option represents. <img width="1381" height="335" alt="image" src="https://github.com/user-attachments/assets/ae620761-b1f1-46fa-85df-715facbe7330" /> ## Description In this PR I replaced empty string options with `'unset'` in all overflow controls (`overflow`, `overflowX`, `overflowY`). --- ## 📝 Checklist - ✅ My code follows the style guidelines of this project - 🛠️ I have performed a self-review of my own code - 📄 I have made corresponding changes to the documentation -⚠️ My changes generate no new warnings or errors - 🧪 I have added tests that prove my fix is effective or that my feature works - ✔️ New and existing unit tests pass locally with my changes
alionazherdetska
requested changes
Aug 20, 2025
alionazherdetska
approved these changes
Aug 21, 2025
leagrdv
requested changes
Aug 22, 2025
packages/documentation/src/stories/utilities/position/position.stories.ts
Show resolved
Hide resolved
leagrdv
approved these changes
Aug 25, 2025
|
gfellerph
pushed a commit
that referenced
this pull request
Aug 25, 2025
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.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ `main` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `main`.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ # Releases ## @swisspost/[email protected] ### Major Changes - Simplified the banner and toast components: - Removed the `icon` property; icons are no longer configurable - Removed the `neutral` variant; the default is now `info` - Renamed the `danger` variant to `error` (by [@alizedebray](https://github.com/alizedebray) with [#6063](#6063)) ### Patch Changes - Updated dependencies: - @swisspost/[email protected] - @swisspost/[email protected] ## @swisspost/[email protected] ### Major Changes - Simplified the banner and toast components: - Removed the `icon` property; icons are no longer configurable - Removed the `neutral` variant; the default is now `info` - Renamed the `danger` variant to `error` (by [@alizedebray](https://github.com/alizedebray) with [#6063](#6063)) ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Major Changes - Simplified the banner and toast components: - Removed the `icon` property; icons are no longer configurable - Removed the `neutral` variant; the default is now `info` - Renamed the `danger` variant to `error` (by [@alizedebray](https://github.com/alizedebray) with [#6063](#6063)) ### Patch Changes - Added file extensions in relative import/export statements to make them browser conform. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#6082](#6082)) - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Major Changes - Simplified the banner and toast components: - Removed the `icon` property; icons are no longer configurable - Removed the `neutral` variant; the default is now `info` - Renamed the `danger` variant to `error` (by [@alizedebray](https://github.com/alizedebray) with [#6063](#6063)) ### Minor Changes - Added missing `bottom` and `end` controls to position utilities for complete configuration. Replaced empty label option with `unset` for better clarity across all position controls (`top`, `bottom`, `start`, `end`). Position utilities now use logical CSS inset properties (inset-block-start, inset-block-end, inset-inline-start, inset-inline-end). This means `start` and `end` follow the writing direction — left in LTR and right in RTL. (by [@bucknatt](https://github.com/bucknatt) with [#6002](#6002)) ## @swisspost/[email protected] ### Minor Changes - Added icons: `2698`, `2699`, `2700`, `2701`, `2702`, `2703`, `2704`, `2705`, `2706`, `2707`, `2708`, `2709`, `2710`, `2711`, `2712` and `2713` (by [@swisspost-bot](https://github.com/swisspost-bot) with [#6083](#6083)) ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ## @swisspost/[email protected] ### Minor Changes - Added missing `bottom` and `end` controls to position utilities for complete configuration. Replaced empty label option with `unset` for better clarity across all position controls (`top`, `bottom`, `start`, `end`). Position utilities now use logical CSS inset properties (inset-block-start, inset-block-end, inset-inline-start, inset-inline-end). This means `start` and `end` follow the writing direction — left in LTR and right in RTL. (by [@bucknatt](https://github.com/bucknatt) with [#6002](#6002)) ### Patch Changes - Simplified the banner and toast components: - Removed the `icon` property; icons are no longer configurable - Removed the `neutral` variant; the default is now `info` - Renamed the `danger` variant to `error` (by [@alizedebray](https://github.com/alizedebray) with [#6063](#6063)) - Updated dependencies: - @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] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] --------- Co-authored-by: github-actions[bot] <41898282+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.
📄 Description
The position utility classes allow defining the inset of an element. The classes available are
where [position] can be 0, 50, or 100.
The goal was to improve these position utilities and their documentation by:
inline-*andblock-*properties: Replacedtop,bottom,rightandleftwithinset-block-start,inset-block-end,inset-inline-startandinset-inline-end.bottom-*andend-* classesin the position utility documentation.Consequently classes for
bottomandendwere added to the SCSS variables on styles.