Utility gap-* classes for flexbox

[davide-negretti]

Description

This PR adds some Bootstrap-style utility classes to handle horizontal and vertical gaps between flexbox elements.

A gap-* class adds a space between elements of the same size of m-* and p-* Bootstrap classes, while gapx-* and gapy-* classes allow to set horizontal and vertical gaps.

These classes will allow to handle spacing between many elents of the DSpace UI in a simpler way (currently the spacing is managed by manually adding margins to each element).

For example, in dso-edit-menu.component.html:

<div class="dso-edit-menu d-flex"> <!-- add class "gap-1" -->
    <div *ngFor="let section of (sections | async)" class="ml-1"> <!-- remove class "ml-1" -->
        <ng-container
                *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>
    </div>
</div>

Instructions for Reviewers

Create a flex container and add gap-* classes to test them, e.g.

<div class="d-flex gap-3">
  <div class="p-2 border border-primary">Flex item 1</div>
  <div class="p-2 border border-primary">Flex item 2</div>
  <div class="p-2 border border-primary">Flex item 3</div>
</div>

Checklist

• My PR is small in size (e.g. less than 1,000 lines of code, not including comments & specs/tests), or I have provided reasons as to why that's not possible.
• My PR passes ESLint validation using yarn lint
• My PR doesn't introduce circular dependencies (verified via yarn check-circ-deps)
• My PR includes TypeDoc comments for all new (or modified) public methods and classes. It also includes TypeDoc for large or complex private methods.
• My PR passes all specs/tests and includes new/updated specs or tests based on the Code Testing Guide.
• If my PR includes new libraries/dependencies (in package.json), I've made sure their licenses align with the DSpace BSD License based on the Licensing of Contributions documentation.
• If my PR includes new features or configurations, I've provided basic technical documentation in the PR itself.
• If my PR fixes an issue ticket, I've linked them together.

[tdonohue]

@davide-negretti and @atarix83 : I'm just now getting back to this PR. However, I'm a little concerned about adding these custom gap-* CSS classes because these are a concept from Bootstrap 5: https://getbootstrap.com/docs/5.0/utilities/spacing/#gap

Currently, we are still on Bootstrap 4 (ng-bootstrap v11). I'm worried that if we add these CSS tools into our Bootstrap 4 based UI, they may cause us issues later on when updating to Bootstrap 5.

So, I'm not sure myself whether to move this forward, as I feel it starts to pull Bootstrap 5 concepts back into our basic Bootstrap 4 styling. I'd welcome your opinions though, and we could bring this to a future DevMtg discussion if we feel this direction is worthwhile.

[davide-negretti]

@tdonohue I didn't know that these classes were already part of Bootstrap 5. I introduced them for flex layout (d-flex) while Boostrap documentation refers to grid layout (d-grid), however they both change the gap property and they both use the same "logic" as margin and padding classes, so they ended up being identical by chance and they can both be used for both CSS layouts.

I wouldn't call this an anticipation of Boostrap 5 features because my classes are being used for a different purpose (the grid layout feature is not present on Boostrap 4.6 and I'm not introducing it).

I think that it is safe to introduce them alongside Boostrap 4.6, as I made sure that:

• they are identical to Boostrap 5 classes (except for my additional gapx-* and gapy-* classes)
• they can be safely removed after we'll have aligned DSpace to Boostrap 5, without breaking existing code
• they won't cause any issue if we forget to remove them (it would be duplicate code that can be removed at any time)

[tdonohue]

@davide-negretti : I think the question then becomes whether we want to be adding custom utilities on top of Bootstrap (in general). If so, I'm not sure whether we should embed them all into _global-styles.scss...because that file is more for CSS/styles we are overriding by default.

These gap-* utilities are unused (in this PR), but I do understand they could be useful to others. If we are to go down this route, it seems like we should consider having our own _utilities.scss file, similar to Bootstrap 5 (https://getbootstrap.com/docs/5.0/utilities/api/)

I have to admit, I'm very torn on this approach of adding our own custom utility classes. I completely understand the usefulness of sharing CSS utilities. But, at the same time, the more we diverge from "basic Bootstrap CSS", the more we will have to create our own DSpace CSS documentation separate from Bootstrap. (And I'd rather we not go too far down that path, as we want developers familiar with Bootstrap to be able to easily theme DSpace.)

So, I still feel this PR needs discussion as it's a "new direction" for DSpace. Do we want to have our own set of "utility" CSS classes, or do we only use those defined in out-of-the-box Bootstrap?

I'd appreciate feedback from @atarix83 and @artlowel as two of our key Angular experts (and designers of much of the Angular UI).

[github-actions]

Hi @davide-negretti,
Conflicts have been detected against the base branch.
Please resolve these conflicts as soon as you can. Thanks!

[davide-negretti]

@tdonohue while working on another issue I noticed that similar classes have been added for this PR: #2527

This is one of the many cases where these gap classes could be useful: instead of defining half sized left and right margins to each button, we could just use gapx-1 for the button wrapper. The main advantage is that we can achieve exactly the same result by changing a single file, and we wouldn't have to manage the margin of the first or last child in a different way.

[tdonohue]

@davide-negretti : Good point that it appears #2527 could have used these classes. Maybe we should update the (now merged) code from #2527 to utilize these new gap-* classes as an example?

In any case, it does appear these could have general use as you had recommended. I'm fine with this moving forward, just not sure if we want to give an example or two of usage in our codebase?

[tdonohue]

👍 Thanks @davide-negretti . After looking at this more and noticing that others are creating similar utility classes both in #2527 as well as #2594, I think I'm OK with moving this forward. It's not used yet in our codebase, but it's obvious that we've found usefulness out of similar utility CSS classes, so it seems reasonable to add these.

I'll leave this open a few more workdays though to allow others final comments. Then I'll merge into 7.6.1 (and 8.0)

[davide-negretti]

Hi @tdonohue, I just added a couple of example to this PR

[artlowel]

Thanks @davide-negretti!

I agree, these are useful. We just have to keep in mind to remove them when we upgrade to bootstrap 5

[tdonohue]

Thanks again @davide-negretti ! This looks good & I've verified the minor examples in the dspace theme work. The failed tests here can be ignored as they are unrelated (and were already fixed in #2603 ). Therefore, I'll merge this with +2 votes.

[dspace-bot]

Successfully created backport PR for dspace-7_x:

• [Port dspace-7_x] Utility gap-* classes for flexbox #2605