[Empty States] Make description and title optional

[Supamiu]

Problem

In some empty states, we may want just a description or just a title, but at the moment, both of them are required, which means we end up with one of them still present inside the DOM but empty, with all the style applied to it (use case described by @fbasmaison-lucca)

Possible solutions

The ideal solution would be to have "at least one of them required" but that's not possible with the current tooling that Angular exposes regarding Inputs. Our solution would be to make both of them optional and rely on devs to see that if they don't provide any, well the component is empty and makes no sense.

[fbasmaison-lucca]

The solution I chose in CSS so far is to use :empty and hide them.

%hide-empty {
  &:empty {
    display: none;
  }
}

.emptyState-content-heading {
  […]
  @extend %hide-empty;
  […]
}

.emptyState-actions,
.emptyState-content-text p {
  @extend %hide-empty;
}

[fbasmaison-lucca]

Would it be relevant to reset the paragraph’s bottom margin, and instead apply it to the buttons’s wrapper if they exist? This would:

• avoid having to overwrite the component to delete the extraneous margin if there is no action,
• avoid having to add a margin to add spacing for the buttons if there is no description.

Something along these lines?

.emptyState-content-description {
  margin-bottom: 0;
}

* + .emptyState-actions {
  margin-top: var(--pr-t-spacings-200);
}