Atualização das personalizações para a versão mais recente do Carbon

À medida que novas versões do Carbon são lançadas, o Order Hub é frequentemente atualizado para a versão mais recente. Essas alterações trazem melhorias para o aplicativo. Se estiver usando versões anteriores do Carbon, para aproveitar os novos recursos, você deverá migrar seus aplicativos personalizados para a versão mais recente do Carbon.

1. Atualize os ícones do Carbono da seguinte forma.
   1. Instale os esquemas mais recentes.
   2. Atualize a versão do @buc/schematics em seu projeto.
   3. Vá para o diretório do módulo.
   4. Execute o esquema de atualização de ícones usando o seguinte comando.

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

      Esse comando atualiza todas as instâncias de <ibm-icon-* em seu arquivo HTML para usar as novas diretivas de ícone. Se não houver arquivos de declaração, o comando também criará arquivos de declaração, como module.d.ts.
   5. Se você vir o pacote @carbon/icons-angular em seu arquivo package.json , remova-o.
   Para obter mais informações e exemplos de importação e uso do site @carbon/icons, consulte o guia de atualização de componentes do Carbon
2. Faça o upgrade da versão do Carbono da seguinte forma.
   1. Vá para o diretório do módulo.
   2. Execute o esquema de upgrade do Carbon usando o seguinte 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

      Esse esquema atualiza os arquivos *.html, *.scss e package.json . O prefixo das classes CSS agora é cds--.
   3. Teste o prefixo bx-- que não foi detectado. Em particular, os arquivos JSON que estão nos diretórios de ativos.

      /**
       * @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 se não há conflitos de variáveis. O arquivo styles.scss importa somente dos pacotes @carbon/styles e @carbon/charts . Se você vir referências a outros pacotes do Carbon, remova-os.
   O Carbon v11 usa variáveis css para configurar os temas e o estilo do Carbon. Para obter mais informações, consulte o guia a seguir.

   /**
    * @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
    */

   Por padrão, todas as variáveis são importadas sem o uso de namespaces. Se houver conflitos, remova o as *; da declaração @use . Veja o exemplo a seguir.

   Antes (sem namespace para importações)

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

   Depois (adicionando namespace)

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

   Para obter mais informações sobre upgrades de estilo do Carbono, consulte o guia de migração do Carbono v11.