Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: Card gap #735

Open
3 tasks done
CraigClark opened this issue Jan 17, 2025 · 1 comment
Open
3 tasks done

bug: Card gap #735

CraigClark opened this issue Jan 17, 2025 · 1 comment

Comments

@CraigClark
Copy link

CraigClark commented Jan 17, 2025

Prerequisites | Prérequis

GC Design System Components Package and Version | Paquet et version des composants de Système de design GC

latest

Current Behavior | Comportement observé

We are using the GCDS Drupal theme, no value is set in theme settings so by default it will use @latest js

We are using a grid with the new gap property. The HTML renders like this

<gcds-grid align-content="start" align-items="start" columns="auto 1fr" container="full" display="grid" equal-row-height="" gap="150" justify-content="start" justify-items="start" place-content="start" place-items="start" tag="div" class="mb-200 hydrated">

the issue is that the gap property does not seem to be working as expected. The gap renders like this is the style

@layer default {
  :host .gcds-grid {
    gap: var(--gcds-grid-gap);
    grid-template-columns: var(--gcds-grid-columns,1fr);
  }
}

I tried with different values and keep getting gap: var(--gcds-grid-gap);

Expected Behavior | Comportement attendu

As the prop for grid changes, the grid gap changes accordingly

System Info | Information sur le système

We are using the GCDS Drupal theme with the defaults. The defaults use the latest JS and CSS from the CDN.

Steps to Reproduce | Étapes pour reproduire le bogue

  1. install drupal
  2. install a custom theme
  3. in a twig template, call the gcds grid component
  4. set the gap prop
  5. save and clear cache
  6. open browser
  7. see that the grid prop has no impact on what is displayed

NOTE: The Drupal single directory component is compiling correctly, that is how we get the HTML posted above.

Code Reproduction URL | URL de reproduction du code

No response

Additional Information | Informations supplémentaires

No response

@ethanWallace
Copy link
Collaborator

Thank you for submitting an issue @CraigClark.

The new grid gap property has been merged into main but hasn't been published to npm or the CDN yet (see this PR). We are planning to release the grid gap property and some bug fixes in the v0.31.0 release next week.

@CraigClark CraigClark changed the title bug: bug: Card gap Jan 22, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants