Related request from a patron:
"Hi! Please add "Want to read" button to search resulta view so that results don't have to opened separately."

Decisions made by staff about this:

1. We want to avoid ever having to show "Not in Library" as a call to action for this button.
2. We want to include the library links in the redesigned "Read" button. Presently, library links are found in the second item in the sidebar (highlighted below):

See: https://www.figma.com/file/nVmPYLTaxWWYchVe2ArVbl/Unified-Borrow-Button?node-id=0%3A1

@rebecca-shoptaw Hi thanks for your tips! Flex grow works :D As far as the list styling the issue is that I can see in my element inspector that my styling is being overwritten by other rules; other than that it's being applied correctly.

@SivanC Aha! You want to make sure you're applying it to the full list ul element rather than each li element -- i.e. if .cta-dropper__content-list is the class for your ul you want to give the list-style-type: none to that itself, not to its li children.

Edit: Hmm looks like list-style-type should work in both places, if you could include a quick screenshot of what the HTML looks like here, i.e. what the hierarchy is of classes, etc. that would be very helpful!

If that doesn't work, there are some specificity tricks you can try, but fingers crossed that does the trick!

@rebecca-shoptaw Unfortunately the reason I had it on the li elements was because I thought the same initially and applied it to the ul to no effect. cta-dropper__content-list is the class associated with the ul element and while the styling shows up in the inspector the bullet points remain:

Here's the full HTML right now:

<div class="dropdown-button-group">
  <div class="cta-dropper">
    <details class="cta-dropper__details">
      <summary class="cta-dropper__summary">
        <div class="cta-button-group">
          <a href="$(stream_url)" title="$title" class="cta-btn cta-btn--ia cta-btn--available cta-btn--$(action)"
              $:analytics_attr(analytics_action)
              $if loan:
                data-userid="$(loan['userid'])"
              >$label</a>
        </div>
      </summary>
      <div class="cta-dropper__content">
        <ul class="cta-dropper__content-list">
          <li>Listen</li>
          <li>Search Inside</li>
          <li>Check Nearby Libraries</li>
        </ul>
      </div>
    </details>
  </div>
</div>

@SivanC Thank you!! Ok, it looks like the styling is being inherited because the parent element of all of this has a read-options class, which has its own li rules.

This means you'll want to use selector specificity to overrule the existing li rules in this particular case. It looks like someone else has already encountered a similar issue and fixed it in read-panel.less:

So it seems that the simplest course of action would be to add a few lines like this directly above those:

.read-options .cta-dropper__content-list li {
  list-style: none;
}

Effectively you're saying that while all .read-options li elements usually have a list-style: disc, if they are the child of a .cta-dropper__content-list they have a list-style: none.

There may be a more elegant way to do this, but this should do the trick!

You could also try swapping out the .cta-dropper__content-list for a higher up class, i.e. .cta-dropper, as long as that won't cause problems in other foreseeable cta-droppers!

@rebecca-shoptaw I was about to respond that nothing I tried was working ... until! I noticed that both .read-options and .Tools .btn-notice asked for disc style, so I made a rule that covered both of them according to your suggestion:

.read-options .cta-dropper__content-list li, .Tools .btn-notice .cta-dropper__content-list li {
  list-style: none;
}

No more bullet points! :D Also worked to overwrite the negative margins causing the button to be misaligned.

Update as of 7/26/24 design call, clarifying some questions surrounding dropper content:

• Search inside will be a input field
• Clicking “Download” will scroll to / highlight the Download options (ala clicking on ratings under author name)
• Clicking Download pills will download directly
• Buy this book should not be in the dropper for now; considering out of scope
• Should still show “not in library” + grey for now in this PR
• In the editions box on a work’s page, read buttons should still have droppers, clicking e.g. download should take you to the download section for that edition (scroll + pulsing border)