Problem/Motivation

Let's start to run the automatic conversion to SDC and UI Patterns 2.x, as provided by the new ui_patterns_legacy sub-module.

Proposed resolution

Run:

$ drush en ui_patterns_legacy
$ drush upm ui_suite_bootstrap
$ drush upu ui_suite_bootstrap

Remaining tasks

There is only one issue found so far:

Unable to render component "ui_suite_bootstrap:table". A render array or a scalar is expected for the slot "header".

Because SDC is stricter about slots and props data structures than UI Patterns 1.x is with fields and settings.
This is related to #3407218: What do we do with table rows and table cells data structure?

This need to be fixed before moving to UI Patterns 2.x

Issue fork ui_suite_bootstrap-3412076

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

pdureau created an issue. See original summary.

pdureau opened merge request !157

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Title: [5.0.x] Automatic conversion to SDC & UI Patterns 2.x » [5.1.x] Automatic conversion to SDC & UI Patterns 2.x
Status: Active » Needs work

Thanks!

e0ipso’s picture

e0ipso
Primary language Catalan
Location Can Picafort
commented

I see some of the stories are plain text for the slot content. I would love to see them with HTML markup to ensure they are not improperly escaped.

mogtofu33’s picture

mogtofu33 commented

There is a bit more errors, currently hidden by the ComponentValidator throwing an error.

Component: ui_suite_bootstrap:dropdown
[content[5].title] Integer value found, but a string is required
[dropdown_menu_start] Does not have a value in the enumeration ["start","sm-start","md-start","lg-start","xl-start","xxl-start"]
[dropdown_menu_end] Does not have a value in the enumeration ["end","sm-end","md-end","lg-end","xl-end","xxl-end"]
Component: ui_suite_bootstrap:grid_row
[gutters_horizontal] Does not have a value in the enumeration ["gx-0","gx-1","gx-2","gx-3","gx-4","gx-5"]
[gutters_vertical] Does not have a value in the enumeration ["gy-0","gy-1","gy-2","gy-3","gy-4","gy-5"]
[col_xs] Does not have a value in the enumeration ["col-1","col-2","col-3","col-4","col-5","col-6","col-7","col-8","col-9","col-10","col-11","col-12"]
[col_sm] Does not have a value in the enumeration ["col-sm-1","col-sm-2","col-sm-3","col-sm-4","col-sm-5","col-sm-6","col-sm-7","col-sm-8","col-sm-9","col-sm-10","col-sm-11","col-sm-12"]
[col_lg] Does not have a value in the enumeration ["col-lg-1","col-lg-2","col-lg-3","col-lg-4","col-lg-5","col-lg-6","col-lg-7","col-lg-8","col-lg-9","col-lg-10","col-lg-11","col-lg-12"]
[col_xl] Does not have a value in the enumeration ["col-xl-1","col-xl-2","col-xl-3","col-xl-4","col-xl-5","col-xl-6","col-xl-7","col-xl-8","col-xl-9","col-xl-10","col-xl-11","col-xl-12"]
[col_xxl] Does not have a value in the enumeration ["col-xxl-1","col-xxl-2","col-xxl-3","col-xxl-4","col-xxl-5","col-xxl-6","col-xxl-7","col-xxl-8","col-xxl-9","col-xxl-10","col-xxl-11","col-xxl-12"]
[spacing_margin_bottom] Does not have a value in the enumeration ["mb-0","mb-1","mb-2","mb-3","mb-4","mb-5","mb-auto"]
Component: ui_suite_bootstrap:dropdown
[content[5].title] Integer value found, but a string is required
Component: ui_suite_bootstrap:dropdown
[button_attributes] String value found, but an object is required

I suggest adding a devel module on UI Patterns to see all errors and ease devel.

pdureau’s picture

pdureau commented

Thanks a lot for this comment.

UI Patterns 2 scope

Component: ui_suite_bootstrap:dropdown: [content[5].title]

We may need to remove required: title from links prop type schema in UI Patterns 2.x: https://git.drupalcode.org/project/ui_patterns/-/blob/2.0.x/src/Plugin/U...

 *   schema = {
 *     "type": "array",
 *     "items": {
 *       "type": "object",
 *       "properties": {
 *         "title": {"type": "string"},
 *         "url": { "$ref": "ui-patterns://url" },
 *         "attributes": { "$ref": "ui-patterns://attributes" },
 *         "link_attributes": { "$ref": "ui-patterns://attributes" },
 *         "below": { "type": "array", "items": { "type": "object" } }
 *       },
 *       "required": {"title"}
 *     }
 *   }

But this required property may be necessary to not catch any array of objects. So we may add an anyOf with the 2 situations:

  • empty object
  • object with required title

See #3447902: [2.0.0-alpha3] Allow empty link in links prop type

Component: ui_suite_bootstrap:dropdown: "Does not have a value in the enumeration"
Component: ui_suite_bootstrap:grid_row: "Does not have a value in the enumeration"

We may need to add a rule in UI Patterns 2.x legacy converter to not add a prop in a story if the preview value is not in the enumeration. Do we also skip a prop in a story if the preview value resolve to false? (it is the case of all props in this example).

See #3395954: [2.0.0-alpha3] Add new Legacy module for UI Patterns 1.x compatiiblity

UI Suite Bootstrap scope

Component: ui_suite_bootstrap:dropdown: "Does not have a value in the enumeration"
Component: ui_suite_bootstrap:grid_row: "Does not have a value in the enumeration"

We can also fix upstream ui_suite_bootstrap 1.x code:

mogtofu33’s picture

mogtofu33 commented
Related issues: +#3419042: [1.1.0] Conversion to SDC & UI Patterns 2.x, +#3412077: Automatic conversion to SDC & UI Patterns 2.x
pdureau’s picture

pdureau commented

Component: ui_suite_bootstrap:dropdown: "Does not have a value in the enumeration"
Component: ui_suite_bootstrap:grid_row: "Does not have a value in the enumeration"

Fixed

pdureau’s picture

pdureau commented
Assigned: Unassigned » pdureau
Status: Needs work » Postponed
grimreaper’s picture

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

Changing to needs work since UI Patterns 2 is in beta phase and usable.

pdureau’s picture

pdureau commented

I see some of the stories are plain text for the slot content. I would love to see them with HTML markup to ensure they are not improperly escaped.

Hi @e0ipso

for example in:

name: 'Alert'
slots:
  heading:
    title: Heading
stories:
  preview:
    title: Preview
    slots:
      heading: 'Well done!'

We use a string scalar as heading slot's preview, as a shorthand notation for ["#plain_text" => value] renderable, leveraging a mechanism in SDC render element:

      if (\is_scalar($slot_value)) {
        $slot_value = [
          "#plain_text" => (string) $slot_value,
        ];
      }

https://git.drupalcode.org/project/drupal/-/blob/11.x/core/lib/Drupal/Co...

So, HTML markup will be escaped by design. Is it something we need to change at the SDC level?

pdureau’s picture

pdureau commented

Blocked by #3480414: Remove obsolete #type => markup

pdureau’s picture

pdureau commented
Title: [5.1.x] Automatic conversion to SDC & UI Patterns 2.x » [5.1.0] Conversion to SDC & UI Patterns 2.x

DONE:

  1. Intial drush upm ui_suite_bootstrap executed
  2. Update ui_examples
  3. Update Drupal dependency: ^10.3.4 || ^11. Add remove ui_patterns_library dependency.

TODO ASAP:

  1. Remove LinksSettingsType calls (in src/HookHandler/PreprocessMenuLocalTasks)
  2. Switch to new templates in templates/overrides/ui_patterns_library/

TODO as soon as 5.0.0-beta1 is released:

  1. Rebase 5.0.x and run drush upm ui_suite_bootstrap
  2. Remove templates/patterns/ folder and move templates/overrides/ to templates/
  3. Run prettier a last time

Next issues (after this one) for 5.1.0 (because compatibility breaks):

Can be done later in 5.1.x (because no compatibility breaks):

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

Child issues created.

pdureau’s picture

pdureau commented
Assigned: pdureau » grimreaper
Status: Needs work » Needs review

DONE:

  1. Intial drush upm ui_suite_bootstrap executed
  2. Update ui_examples
  3. Update Drupal dependency: ^10.3.4 || ^11. Add remove ui_patterns_library dependency.
  4. Switch to new templates in templates/overrides/ui_patterns_library/
  5. Rebase 5.0.x and run drush upm ui_suite_bootstrap
  6. >>> Remove LinksSettingsType calls (in src/HookHandler/PreprocessMenuLocalTasks)
  7. Remove templates/patterns/ folder and move templates/overrides/ to templates/
  8. Run prettier a last time

Next issues (after this one) for 5.1.0 (because compatibility breaks):

Can be done later in 5.1.x (because no compatibility breaks):

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented

Also fix call to pattern in render array.

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Related issues: +#3485900: [2.0.0-beta5] Fix normalize typing

Remaining phpstan issue to be fixed by #3485900: [2.0.0-beta5] Fix normalize typing

  • grimreaper committed 207f7d9c on 5.1.x authored by pdureau 
    Issue #3412076 by pdureau, grimreaper: [5.1.0] Conversion to SDC...
grimreaper’s picture

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

Merged \o/

Status: Fixed » Closed (fixed)

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