Problem/Motivation

As patterns/components can be used as layouts, we can use it instead of layouts and layout options so one less contrib dependency on the long run.

No more need to have ui_suite_bootstrap.layouts.yml and ui_suite_bootstrap.layout_options.yml. Keep it for compatibility for existing websites and drop in next major (Bootstrap 6) version ? or next minor version (5.1.x UI Patterns 2)?

Proposed resolution

In this issue, let's create 4 new patterns:
- grid_row_1
- grid_row_2
- grid_row_3
- grid_row_4

Use cols as slots.
Use options as props, unfortunately there is currently no mechanism to avoid duplication of props applying to all slots, so let's have the options duplicated in a first time.

Remaining tasks

Provide MR

CommentFileSizeAuthor
#7 Capture d’écran du 2024-06-06 22-18-08.png86.5 KBgrimreaper

Issue fork ui_suite_bootstrap-3449390

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

Grimreaper created an issue. See original summary.

grimreaper’s picture

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

grimreaper
Primary language French
Location France 🇫🇷
commented

I realized that in Layout Builder, the drag&drop feature which allows to move blocks to other regions or sections is not working with layouts generated from patterns.

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented

Also for patterns used as layouts, UI Styles Layout Builder is not able to add classes to a layout region because otherwise we would need to use the region_attributes variable generated by
https://git.drupalcode.org/project/drupal/-/blob/11.x/core/modules/layou...

I think this needs a discussion.

Grimreaper opened merge request !182

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Assigned: grimreaper » pdureau

I opened a WIP MR with col 1 and col 4 for discussion.

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
StatusFileSize
new Capture d’écran du 2024-06-06 22-18-08.png86.5 KB

Third problem. Configuration form UI, see screenshot.

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented

Discussed with @pdureau,

The mechanism depends on region_attributes, created by template_preprocess_layout in layout_discovery module.

However, this region_attributes variable is not used in component templates. (and it does not exist if the component is not used as a layout.)

The solution would be to enforce every UI patterns component to use one attributes object by slot. But it will not possible when slots are printed without wrappers.

<div{{ attributes }}>
  <div{{ foo_attributes.addClass('foo')}}>
    {{ foo }}
  </div>
  {{ bar }}
 </div>

Also, it would not be possible to use the prop drilling from UI Styles because we do not have access to the content of the slots to inject the wrapper. (it is removed when rendering and blocks are rendered twice)

grimreaper’s picture

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

grimreaper
Primary language French
Location France 🇫🇷
commented
Status: Active » Needs work
pdureau’s picture

pdureau commented

The mechanism depends on region_attributes, created by template_preprocess_layout in layout_discovery module.

However, this region_attributes variable is not used in component templates. (and it does not exist if the component is not used as a layout.)

The solution would be to enforce every UI patterns component to use one attributes object by slot. But it will not possible when slots are printed without wrappers.

See #3464894: [2.0.0-beta2] Drag & drop support in layout builder

pdureau’s picture

pdureau commented

Careful about this task.

We do it because Layout Options could be replaced by UI Patterns 2.x in projects. UI Patterns 2.x has a powerful source plugin system which allow nesting of components in a single place.

So, instead of reproducing, one by one, with similar architecture, the layouts plugins to UI components:

  • grid 1 col
  • grid 2 cols
  • grid 3 cols
  • grid 4 cols
  • grid row

We can imagine an other system more similar to table components, with:

  • one component for grid row
  • one component for grid col

We need to do test with UI Patterns 2.x UI to see if its is comfortable enough for ui_suite_bootstrap users. For example, I am afraid it will be less comfortable when used with layout builder where the UI expects a fix number of cols.

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Issue summary: View changes

Discussed with @pdureau today.

Current grid_row pattern and layout grid are missing some options about container.

The container option should not be a boolean but an enum (container, container-sm, etc, container-fluid, empty) and with a wrapper styles prop allowing to set styles on a wrapper div to be able to provide background color or else on the full width even if content is containerized.

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Title: Create patterns/components for grid management » [5.1.x] Create patterns/components for grid management
pdureau’s picture

pdureau commented
Title: [5.1.x] Create patterns/components for grid management » [5.1.0] Create patterns/components for grid management
grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Version: 5.0.x-dev » 5.1.x-dev
grimreaper’s picture

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

grimreaper
Primary language French
Location France 🇫🇷
commented

I started pocing #3292502: Bootstrap 5 : Layout > Columns and #3292503: Bootstrap 5: Layout > Gutters with grid_row_1.

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Related issues: +#3486547: [2.0.0-beta5] Add new EnumSetPropType
grimreaper’s picture

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

Ready for review.

Waiting for #3486547: [2.0.0-beta5] Add new EnumSetPropType to test in site building before merging.

pdureau’s picture

pdureau commented

Do we need to also update the examples from UI Examples ?

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Assigned: pdureau » grimreaper

Good point

grimreaper’s picture

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

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

grimreaper
Primary language French
Location France 🇫🇷
commented
Title: [5.1.0] Create patterns/components for grid management » [5.1.0] Create components for grid management
grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented

Issue #3449390 by grimreaper, pdureau: [5.1.0] Create components for grid management.
- Implements containers, columns and gutters of Bootstrap documentation.
- Add container wrapper with attributes.
- Fix is sequence

Almost forgot to try the breakout from DSFR.

grimreaper’s picture

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

  • grimreaper committed 9a1a249c on 5.1.x 
    Issue #3449390 by grimreaper, pdureau: [5.1.0] Create components for...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.