Automatic conversion to SDC & UI Patterns 2.x

Created on 3 February 2024, 10 months ago

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_dsfr
$ drush upu ui_suite_dsfr

Remaining tasks

Only one issue found so far:

operator_logo slot in page.html.twig:

  {{ pattern('header', {
    'logo_text': page.logo,
    'operator_logo': page.header_operator_logo,
    'service_title': site_name,
    'service_tagline': site_slogan,
    'tools_links': page.header_tools_links,
    'tools_search': page.header_tools_search,
    'navbar': page.header_navbar,
  }) }}

trigger this: Error: Call to undefined method Drupal\Core\Url::render() in Drupal\Core\Template\Attribute->__toString()

but we don't know yet if it an issue from ui_suite_dsfr, ui_patterns_legacy, ui_patterns 2.x or SDC.

📌 Task
Status

Postponed

Version

1.0

Component

Code

Created by

🇫🇷France pdureau Paris

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @pdureau
  • 🇫🇷France mogtofu33

    Some minor errors left (detected with ui_patterns_devel):

    Component: ui_suite_dsfr:alert
    [dismissible] Boolean value found, but a string, a number, an integer or an object is required
    [dismissible] Does not have a value in the enumeration ["","core","custom"]
    Component: ui_suite_dsfr:link
    [icon] Does not have a value in the enumeration [...]
    Component: ui_suite_dsfr:button
    [icon] Does not have a value in the enumeration [...]
  • 🇫🇷France pdureau Paris

    I have rebased from 1.0.x branch, and I don't reproduce the issue. Maybe it was fixed by the team.

  • 🇫🇷France StephJ

    Hello,
    i am testing the current code in the MR and found a few minor isues :

    - the composer.json requires ui_patterns 1.x
    - in the alert component, dismissible prop seems problematic. would it be better to have $ref: 'ui-patterns://boolean' instead of an enum
    - in the translate component, "links.description" has value "null".

    thank you

  • 🇫🇷France pdureau Paris

    Let's use this MR as the first commit of new 1.1.x branch, with those changes:

    • the automatic conversion to SDC we are already doing every few days
    • + manual stuff:
      • the removal of templates/patterns folder
      • the removal of ui_suite_dsfr_preprocess_pager
      • the removal of ui_suite_dsfr_preprocess_breadcrumb
      • replace pattern() by component():
        components/france_connect/france_connect.twig:    {{ pattern('link',
        components/nav_menu/nav_menu.twig:                  {{ pattern('link', {
        components/consent_banner/consent_banner.twig:    pattern('button', {label: 'Accept all'|t,
        components/consent_banner/consent_banner.twig:    pattern('button', {label: 'Refuse all'|t,
        components/consent_banner/consent_banner.twig:    pattern('button', {label: 'Personalize'|t,
        components/consent_banner/consent_banner.twig:  {{ pattern('button_group', {
        components/consent_banner/consent_banner.twig:{{ pattern('modal', {
        components/consent_banner/consent_banner.twig:  body: pattern('consent_manager', {
        components/content_media/content_media.twig:    {{ pattern('transcription', {
        components/consent_manager/consent_manager.twig:  {{ pattern('button_group', {
        components/consent_manager/consent_manager.twig:    buttons: [pattern('button', {label: 'Confirm my choices'|t})]
        
  • 🇫🇷France pdureau Paris

    We also need to get rid of those 3 preprocesses:

    function ui_suite_dsfr_preprocess_pattern_footer_menu(array &$variables) {
      foreach ($variables['items'] as &$item) {
        /* Some stuff we can remove... */
        // It seems UrlHelper::setAllowedProtocols() doesn't support mailto.
        if (!str_starts_with(strtolower($item['url']), 'mailto:')
            && UrlHelper::isExternal($item['url'])
            && !UrlHelper::externalIsLocal($item['url'], \Drupal::request()->getSchemeAndHttpHost())) {
          $item['link_attributes']['target'] = '_blank';
        }
      }
    }
    function ui_suite_dsfr_preprocess_pattern_button(array &$variables) {
      if (empty($variables['url'])) {
        return;
      }
      if ($variables['url'] instanceof MarkupInterface) {
        $variables['url'] = (string) $variables['url'];
      }
      if ($variables['url'] instanceof Url) {
        $variables['url'] = $variables['url']->toString();
      }
      // It seems UrlHelper::setAllowedProtocols() doesn't support mailto.
      if (!str_starts_with(strtolower($variables['url']), 'mailto:')
        && UrlHelper::isExternal($variables['url'])
        && !UrlHelper::externalIsLocal($variables['url'], \Drupal::request()->getSchemeAndHttpHost())) {
        $variables['external'] = TRUE;
      }
    }
    
    function ui_suite_dsfr_preprocess_pattern_link(array &$variables) {
      if (empty($variables['url'])) {
        return;
      }
      if ($variables['url'] instanceof MarkupInterface) {
        $variables['url'] = (string) $variables['url'];
      }
      if ($variables['url'] instanceof Url) {
        $variables['url'] = $variables['url']->toString();
      }
      // It seems UrlHelper::setAllowedProtocols() doesn't support mailto.
      if (!str_starts_with(strtolower($variables['url']), 'mailto:')
        && UrlHelper::isExternal($variables['url'])
        && !UrlHelper::externalIsLocal($variables['url'], \Drupal::request()->getSchemeAndHttpHost())) {
        $variables['external'] = TRUE;
      }
    }

    I don't know how to replace them yet. Maybe I will just remove them and create a 1.x issue to restore their logic elsewhere.

  • 🇫🇷France pdureau Paris
  • 🇫🇷France pdureau Paris

    DONE:

    • LinksSettingsType calls removed
    • UI Patterns 1.x preprocesses removed
    • Switch to new templates in templates/overrides/ui_patterns_library/

    Next steps before merging as the first commit of 1.1.x:

    Will be moved to dedicated 1.1.x issues (we don't do them now in order to be able to keep rebasing from 1.0.x as long as possible):

    • Remove templates/patterns/ folder and move templates/overrides/ to templates/
    • Restore the features lost by the preprocess removal
    • Replace pattern() Twig function by component()
    • Replace pattern() Twig function by component()

    1.1.x branch will also benefits from:

  • 🇫🇷France pdureau Paris

    DONE:

    • LinksSettingsType calls removed
    • UI Patterns 1.x preprocesses removed
    • Switch to new templates in templates/overrides/ui_patterns_library/
    • Update ui_examples
    • Rebase 1.0.x and run drush upm ui_suite_dsfr after ✨ [2.0.0-beta4] Add a stories specific discovery Needs work is merged in UIP2)

    Next steps before merging as the first commit of 1.1.x:

    • If possible, rebase 1.0.x and run drush upm ui_suite_dsfr after the release of 1.0.2

    Will be moved to dedicated 1.1.x issues (we don't do them now in order to be able to keep rebasing from 1.0.x as long as possible):

    • Remove templates/patterns/ folder and move templates/overrides/ to templates/
    • Restore the features lost by the preprocess removal
    • Replace pattern() Twig function by component()
    • Adopt the new Drupal Core Icon API & UI Icons

    1.1.x branch will also benefits from:

  • 🇫🇷France pdureau Paris
  • 🇫🇷France pdureau Paris
  • 🇫🇷France pdureau Paris

    DONE:

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

    Next issues (after this one):

  • 🇫🇷France pdureau Paris
  • Merge request !122Pierre proposal → (Closed) created by pdureau
  • 🇫🇷France pdureau Paris
Production build 0.71.5 2024