Actualización de personalizaciones a la última versión de Carbon

A medida que se lanzan nuevas versiones de Carbon, Order Hub se actualiza a menudo a la última versión. Estos cambios aportan mejoras a la aplicación. Si utiliza versiones anteriores de Carbon, para aprovechar las nuevas funciones, debe migrar sus aplicaciones personalizadas a la última versión de Carbon.

1. Actualice los iconos de carbono de la siguiente manera.
   1. Instale los esquemas más recientes.
   2. Actualiza la versión de @buc/schematics en tu proyecto.
   3. Vaya al directorio de módulos.
   4. Ejecute el esquema de actualización de iconos utilizando el siguiente comando.

      cd MODULE ## Navigate to the app you want to upgrade
      ng g @buc/schematics:migrate-icons-angular-pkg

      Este comando actualiza todas las instancias de <ibm-icon-* en su archivo HTML para que utilicen las nuevas directivas de iconos. Si no existen archivos de declaración, el comando también crea archivos de declaración como module.d.ts.
   5. Si ves el paquete @carbon/icons-angular en tu archivo package.json , elimínalo.
   Para obtener más información y ejemplos de importación y uso de @carbon/icons, consulte la Guía de actualización de componentes de carbono
2. Actualice la versión Carbon de la siguiente manera.
   1. Vaya al directorio de módulos.
   2. Ejecute el esquema de actualización de Carbon utilizando el siguiente comando.

      cd MODULE ## Navigate to the app you want to upgrade
      
      ng g @buc/schematics:migrate-carbon-11-pkg
      
      ## Verify your package.json changes & install
      yarn install

      Este esquema actualiza los archivos *.html, *.scss y package.json . El prefijo para las clases CSS es ahora cds--.
   3. Comprueba si hay algún prefijo de bx-- que se haya pasado por alto. En particular, los archivos JSON que se encuentran en los directorios de activos.

      /**
       * @todo
       * We should automate the prefix migration for JSON files too,
       * I recently discovered that`buc-field-details.json` can have container classes.
       */

3. Verifique que no existan conflictos de variables. El archivo styles.scss importa solo desde los paquetes @carbon/styles y @carbon/charts . Si ve referencias a otros paquetes de carbono, elimínelas.
   v11, de Carbon, utiliza variables css para configurar temas y estilos de Carbon. Para más información, consulte la siguiente guía.

   /**
    * @todo
    * Add link to carbon components angular - Carbon 11 styling in Angular
    * * Break down how new styling works with css variables
    * * Set up `styles.scss`.
    * * What to keep / what to remove
    */

   De forma predeterminada, todas las variables se importan sin utilizar espacios de nombres. Si ve conflictos, elimine el as *; de la declaración @use . Consulte el ejemplo siguiente.

   Antes (sin espacio de nombres para importaciones)

   @use '@carbon/colors' as *;
   $primary-color: $blue-40;

   Después (añadir espacio de nombres)

   @use '@carbon/colors';
   $primary-color: colors.$blue-40;

   Para obtener más información sobre las actualizaciones de estilo de Carbon, consulte la Guía de migración de Carbon a v11.