Skip to content

Etiqueta: ganchos de estilo

Preparando tu aplicaci贸n para la actualizaci贸n de color del Lightning Design System 鈽侊笍

Preparando tu aplicaci贸n para la actualizaci贸n de color del Lightning Design System 鈽侊笍

Esta es una traducci贸n que desde EGA Futura ofrecemos como cortes铆a a toda la Ohana y comunidad de programadores , consultores , administradores y arquitectos de Salesforce para toda Iberoam茅rica .

El enlace a la publicaci贸n original, lo encontrar谩s al final de este art铆culo.

Preparaci贸n de su aplicaci贸n para la actualizaci贸n de color de Lightning Design System | Blog de desarrolladores de Salesforce

En 2023, Salesforce planea actualizar los colores en nuestra interfaz de usuario de iluminaci贸n para que sean m谩s accesibles para las personas con baja visi贸n y para cumplir con las Pautas de accesibilidad de contenido web (WCAG) para el contraste de color que no es de texto y el contraste de color de texto. WCAG es un est谩ndar de accesibilidad moderno requerido por numerosos 贸rganos de gobierno de todo el mundo.

Para hacer esto, actualizaremos las plataformas en las que se crea nuestra interfaz de usuario Lightning: Salesforce Lightning Design System (SLDS) y Base Lightning Components (ambas versiones, Aura y Lightning Web Component). En estas plataformas, actualizaremos componentes, tokens de dise帽o, ganchos de estilo e 铆conos. Estos cambios no solo aparecer谩n en los productos de Salesforce, como Sales Cloud y Service Cloud, sino que tambi茅n aparecer谩n en cualquier interfaz de usuario personalizada que haya creado con SLDS o Base Lightning Components.

Para obtener m谩s detalles y ejemplos visuales de las actualizaciones, eche un vistazo a las publicaciones del blog de administraci贸n y noticias de Salesforce.

驴Cu谩l es el motivo de la actualizaci贸n?

Con los colores actuales en Salesforce, los usuarios con problemas de visi贸n tienen dificultades para reconocer los elementos clave de la interfaz de usuario, lo que no solo los frustra, sino que tambi茅n les impide adoptar Salesforce. Adem谩s, Salesforce y sus clientes enfrentan problemas de cumplimiento clave debido a que un n煤mero cada vez mayor de gobiernos en todo el mundo, incluida la Uni贸n Europea (UE) , requieren contraste de color de acuerdo con WCAG 2.1 . WCAG 2.1 ha requerido que los sitios web de las empresas usen texto que cumpla con un contraste de color de 4.5: 1 de su fondo y elementos funcionales que no sean texto que cumplan con un contraste de color de 3: 1 . Aumentar nuestro contraste de color para cumplir con estos est谩ndares nos permitir谩 brindar una mejor experiencia a los usuarios con baja visi贸n y permitir谩 a las empresas que usan nuestros productos evitar fuertes multas por accesibilidad.

驴Cu谩ndo est谩 ocurriendo la actualizaci贸n?

Todos los 铆conos se actualizar谩n como parte del lanzamiento de Summer '23. Las p谩ginas de inicio de registros seleccionados, incluidos los LWC incrustados en las p谩ginas, se actualizar谩n como parte del lanzamiento de Summer '23. Todas las dem谩s p谩ginas, SLDS y los componentes b谩sicos de Lightning se actualizar谩n como parte de la versi贸n Winter '24.

驴Qu茅 es lo que hay que hacer?

Si descarg贸 铆conos de Salesforce y seleccion贸 铆conos espec铆ficos para usarlos como recursos est谩ticos, aseg煤rese de actualizarlos con los nuevos 铆conos . Si est谩 utilizando nuestro paquete SLDS NPM , actualice ese paquete a la 煤ltima versi贸n para ver los cambios. Si tiene p谩ginas personalizadas desarrolladas con SLDS, vea cu谩les de los siguientes escenarios se aplican a su base de c贸digo y realice los cambios correspondientes.

1. Componente base Lightning/Aura

Utiliza un componente Lightning sin anulaciones adicionales. Su c贸digo podr铆a verse como el Ejemplo 1 a continuaci贸n.

驴Qu茅 es lo que hay que hacer?

  1. Nada. Las actualizaciones de color se realizan de forma gratuita a medida que Lightning Base Components implementa un plan SLDS .
  2. Se aplican excepciones a algunos componentes a continuaci贸n.

Ejemplo 1

<dx-code-block title language="html" code-block="
Save
芦>

2. Componente personalizado con plano SLDS

Utiliza un componente personalizado que implementa un modelo SLDS y solo usa clases SLDS para dise帽ar. Su c贸digo podr铆a verse como el Ejemplo 2 a continuaci贸n.

驴Qu茅 es lo que hay que hacer?

  1. Nada. Las actualizaciones de color se realizan de forma gratuita si su componente implementa exactamente un modelo SLDS .

Ejemplo 2

<dx-code-block title language="html" code-block="

芦>

3. Componente personalizado con plano parcial de SLDS

Similar a 2. Componente personalizado con modelo SLDS , pero en este caso, usa un componente personalizado que implementa parcialmente un modelo SLDS o usa m谩s clases de SLDS para dise帽ar. Su c贸digo podr铆a verse como el Ejemplo 3 a continuaci贸n.

驴Qu茅 es lo que hay que hacer?

  1. Es posible que deba actualizar los colores en su CSS personalizado si ve regresiones visuales.
    1. Si existe un componente base Lightning para ese modelo y variante, recomendamos reemplazar su componente personalizado con el componente base Lightning.
      1. Si necesita personalizar el estilo de los componentes, le recomendamos que utilice los nuevos ganchos de estilo --slds para cualquier valor de color codificado. Si el valor de color codificado no tiene una coincidencia exacta en t茅rminos de ganchos de estilo, querr谩 considerar usar el gancho de estilo m谩s parecido.
    2. Es posible que desee verificar si hay suficiente contraste de color para el componente antes de actualizar el valor codificado a un gancho de estilo.
  2. Los cambios de color en las clases de SLDS se realizan de forma gratuita. Debido a que los cambios se limitan al color, estas clases deber铆an continuar funcionando como se esperaba.

Ejemplo 3

<dx-code-block title language="html" code-block="

芦><dx-code-block title language="css" code-block="/* CSS */
.my-class { color: #ccc;

En este caso, la clase de CSS personalizada .my-class anula un valor de .slds-button_neutral . Este valor no solo debe actualizarse para tener un mejor contraste, sino que toda la implementaci贸n tambi茅n ser铆a m谩s f谩cil de mantener si se reemplazara con un componente base Lightning y luego se usara el enlace de estilo --slds-c-button-text-color para hacer una anulaci贸n accesible.

Nota: Si no existe un gancho de estilo para el valor codificado, recomendamos usar el gancho de estilo m谩s cercano disponible.

<dx-code-block title language="html" code-block="
Save
芦>

4. Componente personalizado con tokens o clases SLDS

Est谩 usando un componente personalizado que usa directamente tokens SLDS dentro de CSS personalizado o usa clases SLDS en el marcado. Su c贸digo podr铆a verse como el Ejemplo 4 a continuaci贸n.

驴Qu茅 es lo que hay que hacer?

  1. Es posible que deba reemplazar los tokens que est谩 utilizando en CSS personalizado con los ganchos de estilo global relevantes seg煤n sea necesario.
    1. Consulte el ejemplo 4 a continuaci贸n.

Ejemplo 4

<dx-code-block title language="html" code-block="

芦>

En este ejemplo, el token t(colorBorder) est谩 dise帽ado para bordes decorativos como tarjetas y divisores. Debe reemplazarse con un gancho de estilo que est茅 alineado con el plano del bot贸n SLDS.

5. Componente personalizado con fichas personalizadas

Est谩 usando un componente personalizado que usa tokens personalizados. Su c贸digo podr铆a verse como el Ejemplo 5 a continuaci贸n.

驴Qu茅 es lo que hay que hacer?

Recomendamos reemplazar tokens personalizados con ganchos de estilo SLDS cuando sea posible. Cuando use ganchos de estilo, aseg煤rese de usar ganchos que tengan el contexto sem谩ntico correcto. Por ejemplo, un gancho como --slds-g-color-border-base-1 solo debe usarse para bordes. Esto ayudar谩 a garantizar que su producto siga siendo coherente con el estilo de Salesforce a medida que se produzcan futuras actualizaciones de color.

Si debe mantener su token personalizado por cualquier motivo, vuelva a verificar que su token personalizado no haya experimentado ninguna regresi贸n visual.

Ejemplo 5

<dx-code-block title language="html" code-block="

芦><dx-code-block title language="html" code-block="

芦>

En este ejemplo, el token t(myBackgroundColor) usa un valor de color desactualizado de SLDS. El lenguaje visual Lightning actual ya no usa este color. El token personalizado debe reemplazarse con el color m谩s parecido de la lista de ganchos de estilo. En este ejemplo, 鈥攕lds-g-color-neutral-base-95: #f3f3f3 es el gancho de estilo SLDS m谩s parecido.

6. Componente personalizado con valores codificados

Est谩 usando un componente personalizado que usa un valor de color codificado como #444 o rgb(68,68,68) . Su c贸digo podr铆a parecerse al Ejemplo 3 anterior.

驴Qu茅 es lo que hay que hacer?

  1. Recomendamos reemplazar los colores codificados con ganchos de estilo si existe un color an谩logo. Al seleccionar tokens, aseg煤rese de usar tokens sem谩nticos de manera que conserven su significado. Por ejemplo, --slds-g-color-border-base-1 solo debe usarse como el color del borde de los elementos del formulario. Si desea mantener su valor de color codificado, verifique que estos colores no hayan experimentado ninguna regresi贸n visual.
    Nota: Los valores alternativos pueden permanecer como valores de color codificados.

7. Componente base con anulaci贸n --lwc

Est谩 utilizando un componente Lightning o Aura base y est谩 anulando un token --lwc para personalizar el estilo de uno o m谩s componentes. Su c贸digo podr铆a verse como el Ejemplo 7.

NOTA: Esta no es una forma recomendada de personalizar componentes y no hay garant铆a de que las personalizaciones realizadas de esta manera contin煤en funcionando.

驴Qu茅 es lo que hay que hacer?

  1. Verifique si est谩 anulando y --lwc tokens para cualquiera de estos componentes .
    1. Reemplace el token --lwc que se anula con el enlace de estilo actualizado --slds introducido.

Ejemplo 7

<dx-code-block title language="html" code-block="

芦>

En este ejemplo, al anular 鈥攍wc-colorBorder a rojo, todos los bordes de los botones se vuelven rojos. El equipo de SLDS actualiz贸 esta variante de componente para usar un enlace de estilo global, por lo que esta anulaci贸n dejar谩 de funcionar. En este caso, simplemente use --slds-g-color-border-base-4 en el 谩mbito del selector para anular el color del borde.

Mejores pr谩cticas

  • Reemplace los valores de color codificados de forma r铆gida con ganchos de estilo globales cuando sea posible (los valores de colores codificados de forma r铆gida est谩n bien como valores alternativos).
  • Reemplace los tokens de dise帽o con ganchos de estilo global donde sea posible.
  • Reemplace los ganchos de estilo --lwc con ganchos de estilo globales.
  • Elija ganchos de estilo que correspondan al contexto de uso. Por ejemplo, al reemplazar el valor codificado de #747474 que se usa para un borde con un gancho de estilo, hay dos alternativas para elegir: --slds-g-color-border-base-4 o --slds-g-color-neutral-base-50 . Se recomienda usar --slds-g-color-border-base-4 para el contexto de estilo CSS de "border" en lugar de --slds-g-color-neutral-base-50 .
  • Use declaraciones var(..) y coloque valores de color codificados como respaldo en caso de que un navegador heredado no pueda leer el enlace de estilo o el token de dise帽o. Esto es opcional.
    • background: var(鈥攕lds-g-color-neutral-base-50, #747474);
  • Intente que sus personalizaciones de color cumplan con los est谩ndares de contraste de color de texto y no texto de WCAG 2.1.

M谩s recursos

Sobre el Autor

Timothy Yeh es Gerente de Producto para Sistemas de Dise帽o en Salesforce, enfocado en ayudar a los clientes a construir una interfaz de usuario de mayor calidad m谩s r谩pido al proporcionar sistemas s贸lidos de patrones.

Obtenga las 煤ltimas publicaciones de blog de desarrolladores de Salesforce y episodios de podcast a trav茅s de Slack o RSS.

Agregar a Slack Suscr铆bete a RSS

Seguir leyendo

Cambios en la estructura del DOM interno del componente Lightning base para compatibilidad futura con sombras nativas 鈽侊笍

Cambios en la estructura del DOM interno del componente Lightning base para compatibilidad futura con sombras nativas 鈽侊笍

Esta es una traducci贸n que desde EGA Futura ofrecemos como cortes铆a a toda la Ohana y comunidad de programadores , consultores , administradores y arquitectos de Salesforce para toda Iberoam茅rica .

El enlace a la publicaci贸n original, lo encontrar谩s al final de este art铆culo.

Cambios en la estructura del DOM interno del componente Lightning base para la futura compatibilidad con sombras nativas | Blog de desarrolladores de Salesforce

Salesforce est谩 preparando los componentes base de Lightning para adoptar Shadow DOM nativo , lo que mejorar谩 el rendimiento de los componentes y los alinear谩 mejor con los est谩ndares de los componentes web. Como parte de esta fase de preparaci贸n, hemos cambiado la estructura DOM interna de algunos de nuestros componentes. Reci茅n comenzamos y continuaremos modificando las partes internas de los componentes en versiones posteriores. En esta publicaci贸n, discutiremos qu茅 cambiar谩 y c贸mo puede prepararse para ello.

驴Qu茅 es el DOM de sombra nativo?

Shadow DOM es un est谩ndar web que encapsula la estructura del modelo de objeto de documento (DOM) interno de un componente web. Esto nos da la capacidad de proporcionarle componentes robustos y seguros protegi茅ndolos de ser manipulados por HTML, CSS y JavaScript arbitrarios.

Actualmente, Salesforce mantiene un polyfill de sombra sint茅tico para navegadores heredados, como versiones anteriores de Microsoft Edge, pero ahora que todos los principales navegadores admiten DOM de sombra nativo, estamos preparando nuestros componentes para hacer lo mismo.

Con la introducci贸n del shadow DOM nativo, mejoraremos la encapsulaci贸n de los componentes, haci茅ndolos m谩s consistentes y seguros, y brindaremos una forma m谩s predecible de dise帽arlos. Esto resolver谩 una gran cantidad de problemas de compatibilidad con versiones anteriores y alinear谩 los componentes web Lightning con los est谩ndares web.

Sin embargo, puede provocar una fase de adaptaci贸n a medida que hacemos el cambio.

La implementaci贸n interna de los componentes b谩sicos est谩 cambiando

Hemos estado trabajando en la preparaci贸n de nuestros componentes base para adoptar el shadow DOM nativo. Los escenarios espec铆ficos en los que se romp铆a la encapsulaci贸n de los componentes base requer铆an que cre谩ramos un nuevo elemento contenedor dentro del l铆mite de la sombra. Para ayudar a ilustrar esto, veamos un componente base de ejemplo llamado lightning-foo . Antes, el componente se ve铆a as铆:

<dx-code-block title language code-block="

Example base component

芦>

A partir de Summer '23, se ver谩 as铆:

<dx-code-block title language code-block="

Example base component

芦>

La mec谩nica interna de los componentes b谩sicos no se dise帽贸 para acceder directamente y tratarse como una API confiable para su uso. En cambio, nuestros componentes preempaquetados estaban destinados a usarse tal como son, utilizando las API p煤blicas oficiales que hemos compartido abiertamente. Sin embargo, sabemos que algunos clientes est谩n utilizando componentes internos de manera no documentada. Si est谩 accediendo a los elementos internos de un componente base con fines de personalizaci贸n y prueba, tenga en cuenta estos cambios.

驴C贸mo puede arreglar su c贸digo personalizado y sus pruebas?

Al probar manualmente sus aplicaciones, es posible que detecte un componente personalizado que funcionaba anteriormente y que no tiene el aspecto esperado. Debido a estos cambios, sus pruebas automatizadas de un extremo a otro tambi茅n pueden fallar. En ambos casos, puede significar que su c贸digo personalizado o c贸digo de prueba depende de las partes internas de un componente base que ha cambiado . Exploremos estos dos problemas con m谩s profundidad:

Un componente no se ve como se esperaba:

  • Problema: Intentar dise帽ar el elemento o las clases personalizadas dentro de un componente base puede generar resultados imprevistos.
  • Soluci贸n: El cambio de sombra sint茅tica a componentes totalmente encapsulados con DOM de sombra nativo puede cambiar su estrategia de CSS. Al migrar sus personalizaciones de estilo a la sombra nativa, siga estos pasos:
    • Consulte la disponibilidad de un gancho para peinar . Ofrecen un excelente m茅todo para adaptar un componente sin profundizar en las complejidades del CSS subyacente o el shadow DOM.
    • Aseg煤rese de que el valor que est谩 aplicando al gancho de estilo est茅 vinculado a su sistema de dise帽o en lugar de un valor fijo y predefinido. Evite usar un valor codificado.

Una prueba de extremo a extremo falla:

  • Problema: Cualquier implementaci贸n que use combinadores CSS fallar谩. Por ejemplo, lightning-foo > p no coincidir谩 con nuestro marcado actualizado.
  • Soluci贸n: Los combinadores hacen que el CSS sea fr谩gil y deben evitarse a menos que se usen por una buena raz贸n. La mayor铆a de las veces, los combinadores se pueden eliminar sin ninguna regresi贸n. Si se desea un elemento espec铆fico, se pueden usar otros m茅todos de orientaci贸n que no se basen en el marcado que nunca cambia. Es decir, evite apuntar expl铆citamente a elementos HTML siempre que sea posible. Use otros selectores disponibles, como clases que permiten que su uso de CSS sea abstracto, modular y separado del elemento HTML. Si sus pruebas se basan en combinadores de CSS, le recomendamos que adopte el Modelo de automatizaci贸n de pruebas de interfaz de usuario (UTAM) para evitar cambios importantes en el futuro, ya que los objetos de la p谩gina se mantienen actualizados con todos los cambios de componentes.

Conclusi贸n

En resumen, estamos logrando avances significativos al preparar los componentes base de Lightning para adoptar Shadow DOM nativo, lo que garantizar谩 un mejor rendimiento y la alineaci贸n con los est谩ndares de los componentes web, adem谩s de mejorar la seguridad y la confiabilidad de los componentes. Al encapsular la estructura DOM interna, nos esforzamos por brindar una experiencia m谩s s贸lida y predecible tanto para los desarrolladores como para los usuarios.

Si bien estos cambios pueden presentar algunos desaf铆os iniciales, son pasos necesarios hacia un sistema m谩s estandarizado y preparado para el futuro. Seguimos comprometidos a informar y apoyar a los desarrolladores durante esta transici贸n.

En preparaci贸n para estos cambios, recomendamos adoptar ganchos de estilo y m茅todos de orientaci贸n como clases para garantizar que el uso de CSS siga siendo modular y adaptable. Adem谩s, recomendamos enf谩ticamente adoptar UTAM como su soluci贸n de prueba de extremo a extremo.

Est茅n atentos a m谩s actualizaciones y cambios a medida que Salesforce contin煤a optimizando y mejorando el marco de componentes Lightning. Al adoptar estas pr贸ximas mejoras, los desarrolladores pueden esperar una experiencia de desarrollo m谩s fluida y eficiente mientras crean aplicaciones poderosas en la Plataforma Salesforce.

M谩s recursos

Sobre los autores

Maeve Tuntivate es Gerente s茅nior en el equipo de Gesti贸n de productos en Salesforce.

Jesse Brack es ingeniero principal de UX en el equipo de ingenier铆a de sistemas de dise帽o de Salesforce.

Obtenga las 煤ltimas publicaciones de blog de desarrolladores de Salesforce y episodios de podcast a trav茅s de Slack o RSS.

Agregar a Slack Suscr铆bete a RSS

Seguir leyendo

Las funciones y herramientas m谩s recientes de LWC para dispositivos m贸viles 鈽侊笍

Recapitulamos las caracter铆sticas actuales de LWC para dispositivos m贸viles y luego analizamos todas las caracter铆sticas nuevas e innovadoras disponibles en la versi贸n Spring '23.

La publicaci贸n Funciones y herramientas m谩s recientes de LWC para dispositivos m贸viles apareci贸 primero en el blog de desarrolladores de Salesforce .

Seguir leyendo