Problem/Motivation

Builder like "Display Builder" present components, styles and breakpoint on user facing view, some wording could be improve for a better user experience.

Steps to reproduce

Proposed resolution

Preview

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
#3 Screenshot_20260709_175302.png66.8 KBmogtofu33

Issue fork ui_suite_bootstrap-3609598

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

mogtofu33 created an issue. See original summary.

mogtofu33 opened merge request !330

mogtofu33’s picture

mogtofu33 commented
Assigned: mogtofu33 » Unassigned
Status: Needs work » Needs review
StatusFileSize
new Screenshot_20260709_175302.png66.8 KB
mogtofu33’s picture

mogtofu33 commented
Issue summary: View changes
grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Status: Needs review » Needs work

Hello,

Thanks.

Ok for grid row changes.

For breakpoints, let's keep using the documentation labels https://getbootstrap.com/docs/5.3/layout/breakpoints/.

And if in Display Builder, only some breakpoints are used, then ok to remove the "and smaller" for those ones, but keep "and larger" for the other ones.

mogtofu33’s picture

mogtofu33 commented
Status: Needs work » Needs review

Wording updated.

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Assigned: Unassigned » grimreaper
grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Assigned: grimreaper » Unassigned
Status: Needs review » Needs work

Thanks for the update.

I made minor suggestions.

Main discussion point for me now is, Bootstrap grid is based on min-width (extra small, the only case without min width):

Breakpoint Class infix Dimensions
Extra small None <576px
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extra large xl ≥1200px
Extra extra large xxl ≥1400px

While the MR change the breakpoints based on max-width, I think this can confuse users because grid components props will behave with min width and the selected breakpoints only with max-width.

Why max-width breakpoints had been chosen in Display Builder?

mogtofu33’s picture

mogtofu33 commented
Status: Needs work » Needs review

We avoid near-duplicates: min-width 576 and max-width 575 are the same boundary offset by 1px. If we naively included both we'd get 575 and 576, 767 and 768, etc. That's duplication.

Current viewport switcher is a 'cheap' version without real viewport change, only width size, because we need real viewport with iframe.
Our plan is have iframe real viewport for Preview, 'cheap' approximation for builder.

In the meantime we will rename on the fly (Phone, Tablet,...) so I would say you can keep the wording you prefer here, it's becoming out of scope for Display Builder.

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Assigned: Unassigned » grimreaper
grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented

I made some changes to follow the design system logic.

Please make it configurable in Display Builder which breakpoint you want to select.

I also made some suggestion for history.

ui_suite_bootstrap.screen-sm-max:
  label: 'Small and smaller'

Should be "Below medium", and machine name should be ui_suite_bootstrap.screen-md-min, current ui_suite_bootstrap.screen-md-min should be ui_suite_bootstrap.screen-md.

screen-sm-max has sm in the machine name while technically related to the md breakpoint.

Too late now to do changes on machine names.

  • grimreaper committed 6cfe8b62 on 5.2.x authored by mogtofu33 
    task: #3609598 Adapt some wording for better integration in third party...
grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Assigned: grimreaper » Unassigned
Status: Needs review » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

mogtofu33’s picture

mogtofu33 commented

Just for history, now Display Builder expose all breakpoints and do not rename but provide icons for selection.
As well we provide a real preview iframe soon with #3542003: Responsive viewports with iframes.