fix(ui5-form): correct label and content alignment #11944
Closed
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
Add busy state functionality to Button component Integrate BusyIndicator with appropriate sizing (S for icon-only, M for regular buttons) Add busy indicator styling and positioning- Update button template to conditionally render BusyIndicator Add test coverage for busy state scenarios
* fix(ui5-popover): allow f6 navigation * fix(ui5-popover): fixed test --------- Co-authored-by: Georgieva <[email protected]>
- Removed inline styling for popover headers - Standardized the value state message appearance across components - Align the value state message popup to the specs
Display custom SVG, defined as JSX template. Requested by internal channels by the community.
* [INTERNAL] Translation delivery: commit by LX Lab Change-Id: I34c4f56fe5458587cb57a0bdc87cf9bd38bd5e8a * [INTERNAL] Translation delivery: commit by LX Lab Change-Id: Id8e117536afe86e8529c7286e9e42f98b28d97f0 * [INTERNAL] Translation delivery: commit by LX Lab Change-Id: I3f880b9eb9a577be693ab000ae449d669b469ba2 * [INTERNAL] Translation delivery: commit by LX Lab Change-Id: If3e6735c27029a798520a2f45b1612c5a6a8467f * [INTERNAL] Translation delivery: commit by LX Lab Change-Id: I8db20108091754f99f549e1cb647b911eee57aeb * [INTERNAL] Translation delivery: commit by LX Lab Change-Id: I81b41479c20a4ffb8f29d978bf9e4f1cf8c025d6 * [INTERNAL] Translation delivery: commit by LX Lab Change-Id: If68d4064c258c385efd41653236482ef91cb6988 --------- Co-authored-by: ilhan orhan <[email protected]>
…11915) Previously if an user was about to type a RGB or HSL value in the input fields, that were out of boundaries (from 0 to 255 for all RGB fields, 0 to 360 for Hue, 0 to 100(%) for Saturation and Light in HSL), the input fields became disabled, which led to bad UX. With this change we now 'normalise' the values that are out of the bounds (mentioned above) to the closest one. For RGB: values above 255 –> e.g 275 are normalised to 255; values below 0 –> e.g -20 are normalised to 0; For HSL: Hue: values above 360 –> e.g 375 are normalised to 360; values below 0 –> e.g -20 are normlised to 0; Saturation and Light: values above 100 –> e.g. 120 are normalised to 100; values below 0 –> e.g. -20 are normalised
Convert Select and Select.mobile wdio tests to Cypress component tests while maintaining test coverage and functionality parity with original specs. JIRA: BGSOFUIPIRIN-6816
### Description The list item group `ui5-li-group` now supports content wrapping through a publicly available `wrappingType` property. When set to "Normal", long text content (header text) will wrap to multiple lines instead of truncating with an ellipsis. #### Key features: - Responsive behavior based on screen size: - On mobile (size S): Text truncates after 100 characters - On tablets/desktop (size M/L): Text truncates after 300 characters - "Show More/Less" functionality for very long content using `ui5-expandable-text` - Works for header text fields - CSS styling to ensure proper layout in different states #### Implementation details: - Made `wrappingType` property public available with options "None" (default) and "Normal" - Conditionally render content using `ui5-expandable-text` component when `wrappingType` is "Normal" - Added `_maxCharacters` getter to determine truncation point based on media range - Updated ListItemGroupHeaderTemplate to handle wrapped content rendering - Updated CSS selectors to use `wrapping-type` attribute - Updated HTML test page with examples #### Documentation: - Updated section in List.mdx explaining the wrapping behavior - Updated sample in WrappingBehavior folder - Added JSDoc descriptions for the new property #### Tests: - Added desktop test for 300 character limit - Added mobile-specific test for 100 character limit Fixes: #11655
Enable setting `null` for the `opener` property of popover-based components, such as: Popover, ResponsivePopover, Menu, UserMenu and more. The change is mainly to improve dev experience in React as it's typical to initialize [Refs](https://react.dev/reference/react/useRef#manipulating-the-dom-with-a-ref) with `null` (e.g., useRef<T>(null)), not undefined. Fixes: #11903 **Note:** With this change, when the opener is `null` or `undefined`, and `open` is set to `true`, the popover will be displayed in the top-left corner. Alternatively, we can change this behavior - to `close` the popover and fire `close` event, but either way, the opener should be fixed. Whether it shows in the top-left (0,0) coordinates or does not show at all, the popover won't work without opener.
Convert list tests to Cypress component tests while maintaining test coverage and functionality parity with original spec. JIRA: BGSOFUIPIRIN-6816
Convert illustrated message wdio tests to Cypress component tests while maintaining test coverage and functionality parity with original specs. JIRA: BGSOFUIPIRIN-6816
Add support for separate value and display formatting in DatePicker component. Add valueFormat property to control internal value representation Add displayFormat property to control user-visible date format Maintain backward compatibility with existing formatPattern usage Enable decoupling of data format from presentation format This addresses the limitation where value and display formats were tightly coupled, allowing developers to store dates in standardized formats (e.g., ISO 8601) while presenting them in user-friendly formats (e.g., "Jan 1st, 2020"). Closes #1957
Convert ListItemGroup tests to Cypress component tests while maintaining test coverage and functionality parity with original spec. JIRA: BGSOFUIPIRIN-6816
Convert Avatar and AvatarGroup tests to Cypress component tests while maintaining test coverage and functionality parity with original specs. JIRA: BGSOFUIPIRIN-6816
Signed-off-by: Emmanuel Ferdman <[email protected]> Co-authored-by: ilhan orhan <[email protected]>
…eration (#11954) Add support for `UI5_TAG_NAME_PREFIX` and `UI5_TEMPLATE_FILENAME_SUFFIX` environment variables, which can be used in third-party repositories to configure the tag name prefix and template filename. * `UI5_TAG_NAME_PREFIX` controls the tag name format: `{custom-prefix}-component-name`, with a default fallback to `"my"`. * `UI5_TEMPLATE_FILENAME_SUFFIX` controls the template filename format: `ComponentName{custom-suffix}.tsx`, with a default fallback to `"Template"`. Fixes: #11523
There is a new `image` slot which can be used instead of the old `icon` property. Also a new entry is added in the `AvatarColorScheme` enum called `Transparent` in order to achieve the target design for the transparent images/SVGs in the ProductSwitchItem with image.
Add description and key features documentation to help developers understand UXC compliance standards.
Problem: Arrow keys don't work when navigating through suggestion groups without group headers. What changed: - Updated search arrow up/down focus logic to use actual focusable items from the list (flat items, without groups), using the list's `listItems` getter - Move getFocusDomRef method to ListItemGroup and return first item if no header is set - Includes Cypress tests to verify the navigation behavior works as expected.
Convert Icon wdio tests to Cypress component tests while maintaining test coverage and functionality parity with original spec. JIRA: BGSOFUIPIRIN-6816
Fixes test by setting AnimationMode.Full before component mount instead of after. Eliminates race condition where animation classes weren't applied in time on slower CI environments. Also the rerender is now done with layout change.
* [INTERNAL] Translation delivery: commit by LX Lab Change-Id: Iec3b6bf03683e03b103bd2e9530fafbb8a04aafc * [INTERNAL] Translation delivery: commit by LX Lab Change-Id: Iddf6a675c8a53bcbeb510a76e901ee0d96d8060d * [INTERNAL] Translation delivery: commit by LX Lab Change-Id: Ie0b2312ebb07281b06abf17472af5d22ef1c46a6
* chore: bump chromedriver to 139 * chore: bump chromedriver to 138
… figma (#12135) Co-authored-by: ilhan orhan <[email protected]>
* docs(UXC Pattern): remove unused class * docs(UXC Integration): remove unused import --------- Co-authored-by: ilhan orhan <[email protected]>
According to the updated VD spec for checkbox, its focus needs to be 0.25rem outside of the component in both compact and cozy mode. Addtionally: - focus border radius on HC themes is fixed, there is not rounding. JIRA: BGSOFUIPIRIN-6883
* chore(ui5-toolbar): migrate wdio tests to cypress * refactor: optimize tests * refactor: address comments
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.
With this PR, the label and content are aligned as follows:
When the label and content are displayed on a single line, they are vertically aligned to the middle.
When the label spans 12 columns at the current breakpoint, the label is aligned to the start and the content to the end.
Fixes: #11912