fix: support hidden attribute

digdir · Jan 8, 2025 · aba77ad · aba77ad
1 parent ee3411e
commit aba77ad
Show file tree

Hide file tree

Showing 16 changed files with 77 additions and 24 deletions.
diff --git a/packages/css/src/avatar.css b/packages/css/src/avatar.css
@@ -11,7 +11,6 @@
   border-radius: var(--dsc-avatar-border-radius);
   box-sizing: border-box;
   color: var(--dsc-avatar-color);
-  display: inline-flex;
   flex-shrink: 0;
   font-weight: var(--ds-font-weight-medium);
   height: var(--dsc-avatar-size);
@@ -22,6 +21,10 @@
   user-select: none;
   width: var(--dsc-avatar-size);
 
+  &:not([hidden]) {
+    display: inline-flex;
+  }
+
   &:not(:has(img)) {
     padding: var(--dsc-avatar-padding);
   }

diff --git a/packages/css/src/badge.css b/packages/css/src/badge.css
@@ -30,15 +30,15 @@
 }
 
 .ds-badge--position {
-  &:not([hidden]) {
-    display: inline-flex;
-  }
-
   box-sizing: border-box;
   position: relative;
   height: fit-content;
   width: fit-content;
 
+  &:not([hidden]) {
+    display: inline-flex;
+  }
+
   & .ds-badge::before {
     position: absolute;
   }

diff --git a/packages/css/src/card.css b/packages/css/src/card.css
@@ -24,13 +24,16 @@
   border: var(--dsc-card-border);
   box-sizing: border-box;
   color: var(--dsc-card-color);
-  display: block;
   font-family: inherit;
   margin: 0;
   overflow: clip; /* Needed to clip media elements and and Card.Block */
   padding: var(--dsc-card-padding);
   text-align: inherit;
 
+  &:not([hidden]) {
+    display: block;
+  }
+
   &:not([data-size]) {
     font-size: inherit; /* Ensure inheriting font-size when <button> */
   }
@@ -115,7 +118,7 @@
   &:has(> :is(audio, figure, iframe, img, video):only-child) {
     padding: 0;
 
-    & > * {
+    & > :not([hidden]) {
       border: 0;
       display: block;
       height: auto;

diff --git a/packages/css/src/chip.css b/packages/css/src/chip.css
@@ -25,7 +25,6 @@
   box-sizing: border-box;
   color: var(--dsc-chip-color);
   cursor: pointer;
-  display: inline-flex;
   font-family: inherit;
   gap: var(--gap);
   line-height: var(--ds-line-height-sm);
@@ -36,6 +35,10 @@
 
   @composes ds-focus from './base.css';
 
+  &:not([hidden]) {
+    display: inline-flex;
+  }
+
   &:not([data-size]) {
     font-size: var(--ds-font-size-minus-1);
   }

diff --git a/packages/css/src/combobox.css b/packages/css/src/combobox.css
@@ -1,5 +1,4 @@
 .ds-combobox {
-  display: grid;
   background-color: transparent;
   gap: var(--ds-size-2);
 }

diff --git a/packages/css/src/details.css b/packages/css/src/details.css
@@ -41,14 +41,17 @@
     background: var(--dsc-details-heading-background);
     box-sizing: border-box;
     cursor: pointer;
-    display: flex;
     list-style: none;
     min-height: var(--dsc-details-size);
     gap: var(--dsc-details-chevron-gap);
     outline: none;
     padding: var(--dsc-details-padding);
     position: relative;
 
+    &:not([hidden]) {
+      display: flex;
+    }
+
     /* Render focus inside so it is easier to make full window width and place in overflow: hidden containers */
     &:focus-visible {
       box-shadow: inset 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-outer);

diff --git a/packages/css/src/dropdown.css b/packages/css/src/dropdown.css
@@ -24,12 +24,15 @@
     align-items: center;
     box-sizing: border-box;
     color: var(--ds-color-neutral-text-subtle);
-    display: flex;
     font-size: inherit;
     font-weight: inherit;
     margin: 0;
     min-height: var(--dsc-dropdown-item-size);
     padding: var(--dsc-dropdown-item-padding);
+
+    &:not([hidden]) {
+      display: flex;
+    }
   }
 
   & > ul {

diff --git a/packages/css/src/field.css b/packages/css/src/field.css
@@ -1,9 +1,12 @@
 .ds-field {
   align-items: start;
-  display: flex;
   flex-direction: column;
   gap: var(--ds-size-2);
 
+  &:not([hidden]) {
+    display: flex;
+  }
+
   & [data-field='description'] {
     color: var(--ds-color-neutral-text-subtle); /* TODO: Change to opacity or color-mix(currentColor, trasparent) to ensure contrast when parent element color changes? */
   }
@@ -25,12 +28,15 @@
    */
   &:has(input:is([type='radio'], [type='checkbox'])) {
     border-radius: var(--ds-border-radius-md);
-    display: grid;
     grid-template-areas: 'input content';
     grid-template-columns: auto 1fr;
     row-gap: 0;
     width: fit-content; /* Rather do display: grid + width: fit-content than display: inline-grid to encourage stacked radios */
 
+    &:not([hidden]) {
+      display: grid;
+    }
+
     & > * {
       grid-column: content; /* Only allow input in column 1 */
     }
@@ -77,21 +83,27 @@
   border-radius: var(--ds-border-radius-md);
   box-sizing: border-box;
   color: var(--ds-color-neutral-text-subtle);
-  display: inline-flex; /* Using inline-flex to match native inline-block behaviour of <input> */
   max-width: 100%;
   white-space: nowrap;
 
+  &:not([hidden]) {
+    display: inline-flex; /* Using inline-flex to match native inline-block behaviour of <input> */
+  }
+
   &:has([size]) {
     width: fit-content;
   }
 
   & .ds-field-affix {
     align-items: center;
     border: var(--dsc-field-affix-border);
-    display: flex;
     flex-shrink: 0;
     padding-inline: var(--dsc-field-affix-padding-inline);
 
+    &:not([hidden]) {
+      display: flex;
+    }
+
     &:first-child {
       border-top-left-radius: inherit;
       border-bottom-left-radius: inherit;

diff --git a/packages/css/src/pagination.css b/packages/css/src/pagination.css
@@ -5,14 +5,17 @@
   --dsc-pagination-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M9.47 5.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 1 1-1.06-1.06L14.44 12 9.47 7.03a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");
 
   & > :is(ol, ul) {
-    display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: var(--dsc-pagination-gap);
     list-style: none;
     margin: 0;
     padding: 0;
 
+    &:not([hidden]) {
+      display: flex;
+    }
+
     & > li:first-child > ::before,
     & > li:last-child > ::before {
       content: '';

diff --git a/packages/css/src/popover.css b/packages/css/src/popover.css
@@ -59,10 +59,13 @@
 [data-popover='inline'] {
   all: unset;
   cursor: pointer;
-  display: inline;
   text-decoration: underline dotted;
   text-underline-offset: 0.27em;
   font-size: inherit;
 
+  &:not([hidden]) {
+    display: inline;
+  }
+
   @composes ds-focus from './base.css';
 }
diff --git a/packages/css/src/search.css b/packages/css/src/search.css
@@ -6,13 +6,16 @@
   --dsc-search-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M10.5 3.25a7.25 7.25 0 1 0 4.57 12.88l5.41 5.41a.75.75 0 1 0 1.06-1.06l-5.41-5.41A7.25 7.25 0 0 0 10.5 3.25M4.75 10.5a5.75 5.75 0 1 1 11.5 0 5.75 5.75 0 0 1-11.5 0'/%3E%3C/svg%3E");
   --dsc-search-icon-size: var(--ds-size-7);
 
-  display: grid;
   align-items: center;
   grid-template-columns: 1fr auto;
   width: 100%;
   border-radius: var(--ds-border-radius-default);
   position: relative;
 
+  &:not([hidden]) {
+    display: grid;
+  }
+
   /* Add magnifier icon when no submit button is present */
   &:not(:has(button:not([type='reset']))) {
     & input {

diff --git a/packages/css/src/skeleton.css b/packages/css/src/skeleton.css
@@ -6,12 +6,15 @@
   animation: var(--dsc-skeleton-animation);
   border-radius: var(--ds-border-radius-lg);
   box-sizing: border-box;
-  display: block;
   height: 1.3em;
   pointer-events: none;
   user-select: none;
   width: 100%;
 
+  &:not([hidden]) {
+    display: block;
+  }
+
   &[data-variant='circle'] {
     aspect-ratio: 1 / 1;
     border-radius: var(--ds-border-radius-full);
@@ -22,11 +25,14 @@
     border-radius: var(--ds-border-radius-full);
     box-decoration-break: clone;
     color: transparent;
-    display: inline;
     font-size: 0.8em; /* Scale down font to have larger gap between lines */
     letter-spacing: 0.1em; /* But scale up letter-spacing to have circa same line-length */
     user-select: none; /* Prevent text selection */
 
+    &:not([hidden]) {
+      display: inline;
+    }
+
     &:empty::before {
       content: attr(data-text); /* Only fill with fallback text if empty */
       word-break: break-word; /* Enable text wrapping */

diff --git a/packages/css/src/skiplink.css b/packages/css/src/skiplink.css
@@ -7,7 +7,6 @@
 }
 
 .ds-skiplink:focus {
-  display: grid;
   place-items: center;
   outline: 0;
   position: static;
@@ -25,4 +24,8 @@
   text-decoration: underline;
   text-decoration-thickness: max(1px, 0.0625rem);
   text-underline-offset: max(5px, 0.25rem);
+
+  &:not([hidden]) {
+    display: grid;
+  }
 }
diff --git a/packages/css/src/table.css b/packages/css/src/table.css
@@ -89,14 +89,17 @@
       box-sizing: border-box;
       color: inherit;
       cursor: pointer;
-      display: block;
       font: inherit;
       padding: var(--dsc-table-padding);
       text-align: inherit;
       width: 100%;
 
       @composes ds-focus from './base.css';
 
+      &:not([hidden]) {
+        display: block;
+      }
+
       &:focus-visible {
         position: relative; /* Place on top when painting focus border */
       }

diff --git a/packages/css/src/tag.css b/packages/css/src/tag.css
@@ -9,13 +9,16 @@
   border-radius: var(--ds-border-radius-sm);
   box-sizing: border-box;
   color: var(--dsc-tag-color);
-  display: inline-flex;
   line-height: var(--ds-line-height-sm);
   min-height: var(--dsc-tag-min-height);
   padding: var(--dsc-tag-padding);
   width: max-content;
   word-break: break-word;
 
+  &:not([hidden]) {
+    display: inline-flex;
+  }
+
   @media (forced-colors: active) {
     border: 1px solid CanvasText;
   }

diff --git a/packages/css/src/togglegroup.css b/packages/css/src/togglegroup.css
@@ -8,14 +8,17 @@
   background: var(--dsc-togglegroup-background);
   border-radius: calc(var(--dsc-togglegroup-border-radius) + var(--dsc-togglegroup-padding));
   border: var(--dsc-togglegroup-border);
-  display: grid;
   gap: var(--dsc-togglegroup-padding);
   grid-auto-columns: 1fr;
   grid-auto-flow: column;
   height: fit-content;
   padding: var(--dsc-togglegroup-padding);
   width: fit-content;
 
+  &:not([hidden]) {
+    display: grid;
+  }
+
   button {
     border-radius: var(--dsc-togglegroup-border-radius);