Details zu Stiländerungen bei Themen - Feedback

You’re not wrong, but the fault lies at the different way these components are setup, one using the d-icon and the other not lending itself to that atm. Would love to see that changed so feel free to help out if you know how.

With the new styling it will need more space, but I agree the current padding is too much.

This has been an ongoing debate amongst designers since the inception of the toggle. There is no right or wrong answer.

Screenshot 2023-11-14 at 1.48.35 PM691×48 1.42 KB

This was one of the ideas from the design session I personally liked a lot. It solves (some of) sam’s and cvx’s remarks. I’ll give this a go in the next iteration.

I think the chevron would be better on the left. I think most people won’t see it on the right. It looks like regular text (kind of like a code block) unless the mouse passes over it. I almost missed it.

(14. ) The recent addition of a click handler means clicking a link, using the copy code button, trying to expand an image, or even attempting to select any text will result in collapsing the details block…

I fully agree with this. I (nearly) missed reading multiple detail blocks in the past couple of days. I think it’s because they look similar to code blocks on first glance.

this is code

Strange, clicking a link does work for me. I closes the details but the link also opens. Haven’t tried the other scenarios. And I agree it can do with some more refined JS work

About the position of the chevron, @jordan.vidrine wdyt?
Shall I do another iteration? Maybe how I had it in mind orginally, with the regular triangle instead of chevron and only a bg on opened?

I think chevron still should be used, but positioning on the left seems like a good idea.

Are you referring to something else? We did not add a click handler here.

There was a handler. Charlie removed it today in 2c941c4.

Ha! Wow, I wondered what was doing this. Right between the eyes and I didnt see it

Yeah I really liked the idea of being able to hover anywhere > highlight > click to close, instead of only being able to click on the summary part, but I had overlooked the propagation of other clicks

It is also very easy to miss details in quotes, because the background highlight is almost invisible and the chevron is far away from the text

Some nitpicky thoughts about the latest iteration…

Should the arrow be aligned by the baseline rather than centering? this feels better to me than centering on multi-line examples… but this may be subjective:

center

Screenshot 2023-11-28 at 9.23.14 AM1186×274 17.1 KB

baseline

Screenshot 2023-11-28 at 9.23.22 AM1214×278 17.3 KB

should padding match quotes? the top feels a little tight at the moment

Screenshot 2023-11-28 at 9.26.05 AM1206×282 17.3 KB

if we pad the entire container, we should maybe try to remove any padding from the last element… this could be too tricky because we have many content types… but perhaps something like:

details > :last-child {
  padding-bottom: 0;
}

I agree that we should go a shade darker when this is within a quote, so the background isn’t lost

Summary

This text will be hidden

Screenshot 2023-11-28 at 9.31.32 AM948×190 1.76 KB

I think we could probably have some sort of variable that can help with this… if details had the background set by something like

:root {
  --d-details-bg: var(--primary-100);
}

details {
  background: var(--d-details-bg);
}

then a quote can override it… maybe we could even have a generic “needs to be darker” in a quote variable? can’t recall if we have other situations like this…

blockquote {
  --darker-quote-bg: var(--primary-200);
  --d-details-bg: var(--darker-quote-bg); 
}

100% this - if not the cause currently, thats just an error

I like using something like rgba(var(--primary-rgb),0.25) for this purpose as it just makes whatever it’s current background of the element it is included in a bit darker.

Overall I am feeling like the latest iteration is very very close to being ready to ship

One minor quibble that I am not sure is resolvable:

image975×325 54.6 KB

Not a blocker by any means, but the grey panel makes you think you are looking at one entity.

Oh yes, I’m sure we can resolve it with maybe a border or something to make it more clear. Will have a look today

Overall, I like it. That said, this suggestion caught my eye.

Trying to choose a text element’s background sometimes feels like the search for the perfect shade of light grey.

var(--primary-not-so-light-you-cant-see-it-but-not-so-dark-it-looks-clunky)

But it looks like you’re close, and, overall, I like it.

I’m adding the same darkening of the BG for the code block as for the block quote

image1470×430 17.3 KB

That should solve the problem @sam

Two more things (15. & 16. if you will )

• The actual clickable area of the summary element is smaller than the element that changes the cursor and highlights on hover
• Because of that on-hover background color and the following change when you expand an element – there’s a brief background color flash when expanding an element

edit:

17. A discrepancy between a rendered post and the composer:
    
    

    image704×174 4.63 KB
    
    vs
    
    

    Screenshot 2023-12-05 at 13.04.07866×256 4.95 KB