[5.0.x] Automatic conversion to SDC & UI Patterns 2.x

Thanks!

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.

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 ✨ Feature for dev, better ComponentValidator Needs review to see all errors and ease devel.

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

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. Wr may also skip a prop in a story if the preview value resolve to false? (it is the case of all props in this example).

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 keep this ticket to also fix upstream ui_suite_bootstrap 1.x code.

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

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

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?

Blocked by 🐛 Remove obsolete #type => markup Active

DONE:

1. Intial drush upm ui_suite_bootstrap executed

TODO:

1. LinksSettingsType calls removed
2. UI Patterns 1.x preprocesses removed
3. Switch to new templates in templates/overrides/ui_patterns_library/
4. Update ui_examples
5. Remove Drupal 9 support: ^10.3.4 || ^11. Add remove ui_patterns_library dependency.
6. Rebase 1.0.x and run drush upm ui_suite_bootstrap after the release of 1.0.2
7. Remove templates/patterns/ folder and move templates/overrides/ to templates/
8. Run prettier a last time

Next issues (after this one):

1. Remove UI Patterns Legacy dependency
2. Convert ID string props to identifier props
3. Adopts the new Icon API: ✨ [5.1.x] Use icons Active
4. From Layout Options to UI Patterns 2.x ✨ Create patterns/components for grid management Active

Child issues created.

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):

• Remove UI Patterns Legacy dependency. See similar DSFR issue: 📌 [1.1.0] Remove UI Patterns Legacy dependency Active
• Convert ID string props to identifier props. See similar DSFR issue: 📌 [1.1.x] Convert ID string props to identifier props Active
• Adopts the new Icon API: ✨ [5.1.x] Use icons Active
• From Layout Options to UI Patterns 2.x ✨ Create patterns/components for grid management Active
• Fix Unknown variable: `dropdown_id` in nav component and Unused variables: slide in carousel

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

• 📌 Use "is sequence" Twig test to prevent fatal errors when looping on slots Active
• Restore the "UIP1 preview templates" once ✨ [2.0.0-beta2] Allow library wrappers around stories Active is done

Also fix call to pattern in render array.

Remaining phpstan issue to be fixed by 🐛 Fix normalize typing Active

Merged \o/