BaseCard con division entre elementos

[AleMCortez]

Buenas!

Estamos usando el componente BaseCard del paquete @tiendanube/components y teníamos una duda. Actualmente tenemos un componente que se ve más o menos así:

Lo importante es el borde gris que divide al contenido del footer. Actualmente lo estamos logrando usando <hr /> junto con algo de css custom. Así se ve nuestro elemento en React:

    <BaseCard>
      <BaseCard.Header>
        <Stack spacing="base" column align="flex-start">
          <Title type="h3">Titulo</Title>
        </Stack>
      </BaseCard.Header>
      <BaseCard.Body>
        <Text>Contenido</Text>
      </BaseCard.Body>
      <hr />
      <BaseCard.Footer>
        <Text>Footer</Text>
      </BaseCard.Footer>
    </BaseCard>

y asi el css custom:

div.nimbus--base-card {
  > div[class*='nimbus--base-card__'] {
    padding-bottom: $spacing-x-small !important;
    padding-top: $spacing-x-small !important;
    &:first-child {
      padding-top: $spacing-small !important;
    }
    &:last-child {
      padding-bottom: $spacing-small !important;
    }
  }
  hr {
    margin-bottom: $spacing-x-small;
    margin-top: $spacing-x-small;
  }
}

hr {
  border-bottom: 1px solid #ecebec;
  width: 100%;
}

Teníamos la duda de si nimbus provee alguna manera mas simple de lograr esta línea divisoria. Algo que encontramos es esta discusión previa con un caso similar y con esta solución, pero parece implicar también el uso de clases custom de css. Como es una discusión algo vieja ya, queriamos consultar de nuevo si se desarrolló alguna mejor manera de solucionar este caso.

Gracias!

[juanchigallego]

Hola @AleMCortez ! Cómo estás?
El paquete @tiendanube/components es la versión Legacy de Nimbus que estamos discontinuando. Te recomendaría trabajar con @nimbus-ds/components que es el paquete actual, con los mismos componentes pero con mayor flexibilidad y mejor soporte.

En el caso de la feature por la que estás consultando, el componente nuevo no se llama más BaseCard sino simplemente Card y tiene propiedades muy similares al de la versión legacy. Para poder lograr lo que estás buscando de generar una división sin insertar css custom en tu proyecto, podés utilizar un Card para el contenedor y un Box para generar la línea divisoria.
Te dejo un link a un sandbox donde reproduje el diseño que querés lograr usando los componentes de Nimbus 2. También te dejo la documentación de los componentes Card y Box.

Recomendamos encarecidamente intentar utilizar las versiones más nuevas de los componentes ya que la versión legacy de nimbus va a dejar de tener soporte en un tiempo y si bien entendemos que es costoso migrar, es preferible al menos comenzar a trabajar features nuevas usando la v2 para tener menos código para migrar a futuro.

Habiendo dicho esto, en el caso de que no puedas usar Nimbus 2, te recomendaría en vez de agregar css, utilizar el componente Box para generar la división tal como en el ejemplo anterior pero dentro de un BaseCard.

Cualquier otra duda avisame! Espero haberte ayudado.