Problem/Motivation

I'm trying to setup the preview view modes, so my authors can close the items. The trouble is that the twig templates will add the relevant libraries for each component, which brings in extra css from the module. In this case, the css adds:

.paragraph--type--uswds-card-group-regular .usa-card__container .usa-card__header .card-link:after,
.paragraph--type--uswds-card-group-flag .usa-card__container .usa-card__header .card-link:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
}

This after has the byproduct of overlaying that link over the upper 3/4 of the page:

example

Steps to reproduce

Configure your your paragraph fields closed mode to preview, optionally configure preview view modes for your components. For example card/card groups. Then edit a node with one of these components and collapse it so Drupal renders the preview.

Proposed resolution

Should these libraries even end up on the admin section? We could move the library attachment out of the twig and into preprocess with some logic.

More immediately, the following css added to your admin theme will workaround it:

.paragraph--type--uswds-card-group-regular .usa-card__container .usa-card__header .card-link:after,
.paragraph--type--uswds-card-group-flag .usa-card__container .usa-card__header .card-link:after {
  content: none;
}

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
#15 Screen Shot 2022-09-06 at 10.57.35 AM.png872.73 KBsmustgrave
Screenshot 2022-08-26 164228.png76.84 KBdevkinetic

Issue fork uswds_paragraph_components-3306337

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

devkinetic created an issue. See original summary.

devkinetic’s picture

devkinetic commented
Issue summary: View changes
smustgrave’s picture

smustgrave commented

I'm fine with moving the libraries into hooks vs templates.

devkinetic’s picture

devkinetic commented

What exactly are these styles for? Are they targeted for the admin side, or targeted for the front end? What do they provide that the uswds base theme and build system doesn't provide? I haven't played around enough with front end to break this down. Seems to me they should only be added on the front end, and only if they provide some sort of drupal / uswds integration that isn't out-of-the box from the theme.

While we sort out the correct logic, I'm starting a branch to move the library additions into a hook.

devkinetic opened merge request !59

devkinetic’s picture

devkinetic commented
Status: Active » Needs work
smustgrave’s picture

smustgrave commented

They are attended for the frontend. Trying to remember all the use cases but for alerts, for example, if you added more than one it wouldn't add any space between them.

For the cards it's actually a 508 fix I'm doing. Since we are allowing entire cards to be links it needed a special ordering for screen readers. Found out if you wrap an image, title, and body in a link tag the screen reader reads it as one string and probably doesn't make sense. So only wrapping the link around the title and using css so you can still click on the entire card. USWDS doesn't do that feature so they didn't have the css for it.

devkinetic’s picture

devkinetic commented

Logic options:

  • Disable the library only when using the "preview" view mode, as that is built in to the paragraphs form widget.
  • Check if the active theme is the admin theme, but that could cause conflcts for those using the same theme on the frontend and the backend, however rare that case may be.
  • Expose a setting "disable styles on admin theme" defaulted to off, so we can provide the option without breaking existing installs
smustgrave’s picture

smustgrave commented

I'm fine with disabling on the preview mode.

using the same theme on the frontend and the backend, however rare that case may be

haha you'd be surprised. Seen other tickets where people are doing this with uswds.

We could also expose a setting "disable styles on admin theme" defaulted to off, so we can provide the option without breaking existing installs.

We can hold on this now. If disabling on preview becomes an issue we can look into fixing but I doubt it will be a problem.

devkinetic’s picture

devkinetic commented
Status: Needs work » Needs review

I've updated the merge request with the specified logic. This is ready for review.

devkinetic’s picture

devkinetic commented
Version: 2.2.5 » 2.2.x-dev
devkinetic’s picture

devkinetic commented

Just noticed that the accordion library is not currently being used, is this on purpose? I can add it in, or remove the css/yml if it is no longer needed.

smustgrave’s picture

smustgrave commented

If it's not being used we can go ahead and remove. module was pulled in different directions before settling.

I plan to review this today fyi.

devkinetic’s picture

devkinetic commented

Sounds good, took care of the unused lib so we should be good now.

smustgrave’s picture

smustgrave commented
StatusFileSize
new Screen Shot 2022-09-06 at 10.57.35 AM.png872.73 KB

So for the scope of this ticket the MR appears to be working. But wonder if a new ticket should be opened to make the "preview" form mode better.

For example this is what I see when adding an accordion and card. Doesn't look that great.

smustgrave’s picture

smustgrave commented

What if we did a check for the edit url and not load the uswds templates.

Or would that go against your use case you are trying to solve?

devkinetic’s picture

devkinetic commented

That would not break my use case. This is all on node/edit/%.

smustgrave’s picture

smustgrave commented
Status: Needs review » Fixed

Added a check in the hook_theme().

Merged!

Thanks for all the work on this!

smustgrave’s picture

smustgrave commented

Undid that change I did and just merged the original MR.

Hook_theme() is cached so wasn't working the way I thought.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

smustgrave’s picture

smustgrave commented

FYI I had to revert a change in the hook_theme but that should not break the fix done here. But just wanted to note.

Scratch that the 2.3 branch was just off a bit.