Bug #40261
Conserver overflow-hidden sur les .cell ou restaurer les hacks ?
0%
Description
Ticket suite à #39158.
#39158 a été proposé pour permettre d'ajouter de manière safe un border-radius aux cells tout en permettant aux enfants d'avoir un background et/ou un border qui ne dépasse pas des bords arrondis.
Cela implique d'ajouter un _overflow-hidden aux cells, qui a généré des régressions aux cells possédants des enfants positionnées hors de la boite en `position: absolute`.
De plus, `overflow: hidden` ne permet pas aux enfants de superposer le border de la cell. C'est le cas des titres possédants l'option `$cell-title-cover-border` qui est historiquement à `true` par défaut.
Je vois 2 solutions pour nous permettre de conserver l'`overflow: hidden` mais elles ont des contraintes :
- englober les cells avec une div `.cell--wrapper` qui pourrait devenir le référent pour le positionnement en absolute. Ce qui demande de retoucher certains thèmes existants.
- utiliser `clip-path` avec @support à la place d'`overflow_hidden` (ce qui exclus IE11) pour restaurer `$cell-title-cover-border`.
Fichiers
Demandes liées
Révisions associées
Historique
Mis à jour par Thomas Jund il y a environ 4 ans
- Lié à Bug #39158: $cell-border-radius non appliqué ajouté
Mis à jour par Thomas Jund il y a environ 4 ans
- Lié à Bug #39883: condition @if $cell-border-radius tout le temps (?) vérifiée ajouté
Mis à jour par Thomas Jund il y a environ 4 ans
suite échange avec Fred,
Restaurer la version précédente (sans `overflow: hidden`) mais en cleanant les hacks précédemment existants serait préférable. Voici la liste des problèmes que les hacks précédents ne géraient pas :
- Le border-bottom ET le background-color du "more-item" qui débordent (pour info, cette option 'more-item' nécessite une mise à jour pour prise en compte de l'accessibilité)
- le border-bottom de la description d'une entrée (problème déjà réglé avec https://dev.entrouvert.org/issues/38821, \o/ )
- à tester: voir les défauts d'affichage avec l'option `no-bottom-margin` (option qui devient obsolète depuis l’existence le la cellule 'liste de liens').
- à tester: comportement des images de cellules (avec option position `top`).
Dans le cas où certaines intégrations graphiques veulent ajouter des background-color ou des borders aux enfants qui ne seraient pas pris en compte par les hacks, proposer une options pour activer l'`overflow-hidden`
Mis à jour par Frédéric Péters il y a environ 4 ans
Nouvel exemple de régression dans #40358; je serais maintenant pour tout de suite retirer l'overflow hidden, et remettre toutes les adaptations que cela demande.
Mis à jour par Thomas Jund il y a environ 4 ans
- Statut changé de Nouveau à En cours
- Assigné à mis à Thomas Jund
Mis à jour par Thomas Jund il y a environ 4 ans
- Fichier 0001-scss-don-t-use-overflow-hidden-for-bordered-radius-c.patch 0001-scss-don-t-use-overflow-hidden-for-bordered-radius-c.patch ajouté
- Statut changé de En cours à Solution proposée
- Patch proposed changé de Non à Oui
Restauration et amélioration des hacks pour éviter les overflows sans utiliser `overflow:hidden`.
améliorations apportées aux hacks prédédents :
- éviter les overflows sur les titres;
- Ne pas appliquer les hacks `border-radius` sur les sous-links-list sauf pour le dernier lien (menucell);
- Ne pas appliquer les hacks `border-radius` sur les derniers liens des cellules avec le modificateur `.no-bottom-margin`;
- Appliquer le hack `border-radius`sur les `a.more-items`;
- Supprimer le border-bottom sur le dernier item des links-list (sauf si modificateur `.no-bottom-margin`) et sur `a.more-items`.
- Appliquer les border-radius top et bottom au titre de la cellule lorsqu’il est tout seul (wcs-category-cell).
Problèmes non résolus
- Difficile de sélectionner les cellules qui n'ont pas de titre ou uniquement une links-list, les premiers liens d'une link-list ont donc toujours un border-radius top (hack appliqué);
- Le border-radius qui sera appliqué sur les enfants ne pourra suivre parfaitement celui de la cellule, des décalages peuvent apparaître.
Mis à jour par Frédéric Péters il y a environ 4 ans
& > li:not(:last-child):not(.more-items) { border-bottom: 1px solid $cell-entry-border-color;
et
ul > li:last-child { border-bottom: 1px solid $cell-entry-border-color;
ils ont un sens en-dehors de if is-positive-number($cell-border-radius) {
?
Mis à jour par Thomas Jund il y a environ 4 ans
La gestion des bordures est une amélioration globale: cela permet d'éviter des débordements sur les border-radius, mais également de d'éviter une double bordure bottom (celle du links-list--item et de la cellule).
Mis à jour par Frédéric Péters il y a environ 4 ans
- Statut changé de Solution proposée à Solution validée
Mis à jour par Thomas Jund il y a environ 4 ans
- Statut changé de Solution validée à Résolu (à déployer)
patch sur master. Je continue quand même à penser que le core ne devrait pas comporter ce type de hacks tordus.
commit 9691600c7ee730e3b613935587b9d282d1b94623 (HEAD -> master, origin/master, origin/HEAD) Author: Thomas JUND <tjund@entrouvert.com> Date: Tue Mar 3 11:59:03 2020 +0100 scss: don't use overflow:hidden for bordered-radius cells (#40261)
Mis à jour par Frédéric Péters il y a environ 4 ans
- Statut changé de Résolu (à déployer) à Solution déployée
scss: don't use overflow:hidden for bordered-radius cells (#40261)