Okay, folks, let's build a callout component. What's a callout? Well, it's an alert, it's a banner, it's a notification, it's a panel, box, card, whatever you want it to be. But ultimately, it's a box that shows up on a web page with a little rounded border, maybe a splash of color, a title, maybe a description, maybe an icon, maybe even a call to action. And it often says, whoops, something went wrong.
And occasionally it says you haven't verified your account yet. Those are the only two things that it ever... Oh, it will also say you need to upgrade to the... pro plan or something or your license is about to renew that's all that it's ever said and will say that's what it is it's a call out this type of component is actually very useful I avoided it at first because it seems like one of those kind of, well, you know, use a div. Use some divs and some Tailwind because what it is is such a...
variable thing. This is like how I felt when I was doing the card component. I almost didn't do the card component because I'm like, it's a div with a border and some padding. And if we're going to start defining what's inside of a card, well, we're in, I tried that. I went down that road. It's like, well, okay, there's titles, there's descriptions, there's action bars, there's control.
you know, like ellipses or Xs. There's figures, avatars, full width, full bleed images, non full bleed images, footers, headers. What do we call these? Are these sidebar header footer? Okay. So I was just like, you know what? it's a card put in it whatever you want it's a div with a border and some innards it's funny because i put a lot of work into a really fancy card component that i just trashed all together and it's just a div now um so
This callout component, I'm kind of back in that same spot, and that's why I've punted on it myself. It's like, well, this... could at its simplest it's like a box with a border some padding and then some words in it maybe an icon but as it expands there's all sorts of is if this then that's and
and whatever and what do you name all those components and are they slots are they components are you putting you know whatever there's a lot of things once you start pulling that thread um so i punted on it for a while but on the primogen stream he was basically looking for it And I already requested designs from Hugo for it, like I think even before launch or right after launch. So I have designs for it from Hugo for this call out. And I finally just decided, all right, let's do it. Okay.
shouldn't be that hard right like anything it's deep it's deep and the fun part is it reveals some things that i don't understand fully about css which is funny but this is my entire relationship with css i imagine yours too It's basically fiddling with CSS until you get the look you're going for.
And then moving on and not always bothering to understand exactly why the thing you wanted to work didn't work. And then the thing you tweaked did work, right? If you did that, you'd be Josh Camo or however you say his name or Adam. Like, you know, those are people who understand a lot of things and bother to. But I generally don't bother to when it comes to CSS. I just do what I need to do to get rolling.
And that's fine, but then it's surprising how little you understand about CSS at the end of the day. I think I talked to you about overflow before. I still don't understand overflow. It's not the way I want it to be. It's very frustrating, the relationship between deeply nested overflows and hierarchical max widths and such. I don't even understand width and height.
you know like there have do you find yourself in these scenarios like i do where you're like i'll just put a height on that oh that didn't work or a width i'll put a width on that it didn't work All right, we'll try a max width. Well, that didn't work either. We'll try a min width. So one of the three better work. And thank God we have width fit content now. If you haven't tried w-fit, I think that's what it is in Tailwind. That's your fourth, that's your fourth, you know, whatever.
go to when you're going down the list and you try with and that doesn't work and you try max and you try min try with fit and that might work but this is it this sums up my relationship with css you're kind of you got a vague idea and you're trying stuff i don't understand width i don't understand overflow um i i thought i understood flexbox but i still find myself in scenarios where i don't
And things aren't working exactly how I want them to. And grid, similarly. But enough about that. Let me tell you what I don't understand this time. And it's line height. This is funny. Line height is one of those things that I don't touch until I need something to look different. And I go, all right, let's bump that line height a little bit.
but with tailwind i just well first nobody ever remembers what the tailwind utility for line height is because it doesn't map in your brain now if you search line height in tailwind 4 docs you actually get a result But there was a time where you didn't. And you're like, God, what is line height? And what is letter spacing in Tailwind? It's leading and kerning. No, is it? I know it's leading for line height.
Because that's like the typographic name. I always remember that because I think the word comes from typographers putting pieces of lead between lines of text. So that's called leading. I used to say leading until I learned that. And kerning is just the other one. But what even is it in Tailwind? What is letter spacing in Tailwind? Tracking. It's called tracking. Okay, anyway.
So you got your letting loose, letting looser, whatever, some of those words in Tailwind, and you just tweak that until it looks right. You go, all right, fine. But here's a scenario that I'm going to present to you that may...
You may understand what I'm talking about. You have a title, a single line. What is the context for this, by the way, Caleb? Where are you going with this? We're building a callout component, okay? The whoop something went wrong at the top of the page. Picture that, okay? You got an icon.
like an exclamation point in a warning triangle. And then next to it, you have a title that says, whoops, something went wrong. And you want those two things to line up. Normally, when I want two things to line up vertically, oh it's flex and item center all day like and that solves most of my problems if i want the text in a button to line up with an icon in a button flex gap to item center gets me where i need to go
it's a wonderful magical thing but in this scenario i can't just flex item center why is that because the text occasionally spans multiple lines this is this is a tricky thing have you been here before Picture this. You need an icon to line up with a line of text, but that text, what you need it to do is line up with the first line of text. That's what you need it to do.
So there are strategies for this. I think you could just make the icon inline block and put it in the text. And then, I don't know, maybe that'll do it. But that's not going to work for me because picture the callout that I'm building, the icon has its own vertical column and everything inside the callout is pushed over. So if there's a paragraph of text, it...
The icon is on the left of that entire paragraph, but sitting at the top. You know what I'm saying? Does that make sense? That's one of the this, if this, then that's of the callout component is I tweeted about this and asked you guys like which looks better.
to have the icon in the title you know just to like fully be clear picture the left side of this call out there's one world where the icon if you have an icon and then a title next to it and then a description the description sits under the icon all the way to the left of the call out there's another version where that description that paragraph below the title is pushed over right under the title so that it aligns with the title
and leaves a bunch of empty left space in the avatar column you know or not avatar what am i saying you know icon okay you get it So this already makes the whole thing complicated, but something that's complicated, like if you have a multi-line title, or even if you don't, whatever, it's like you need this icon to align.
with a line of text and you can't just use flex item center because these things are in two separate divs and you're in a big container with other stuff in it like a button or something you know so Fortunately, hero icons, heroicons, it's mini variant. Each icon is 20 pixels width and height. And also fortunately... a title text SM font medium, the leading that's assigned to it, the line height that's assigned to it by tail end out of the box.
makes that line 20 pixels so this is actually why i haven't had to deal with this that much because there's this really nice thing that happens when you use the mini version of a heroicon and text sm for your title or text sm for your body paragraph or whatever it's like it just lines up and it's perfect but where i've hit this problem is where if you want an action in the call out so if you want a button on the right side of the call out it's just four pixels too high
because our buttons are 40 pixels and the way that we have it all set up whatever it's four pixels too high So if I have like, I can't have items again, I can't have item center on that icon because you might have multiple lines of text and then the icon would be centered and you don't want that. So whatever. I kept just running across this, this problem where it's like.
Everything lines up perfectly until I add a button. Then it's too high and I need it to be vertically centered, but I can't just apply vertical centering because I only need it to be vertical centered for one line of text worth, you know?
and four pixels with this button whatever i mapped all this out i wrote it all down on a sheet of paper this morning and finally just decided to take any of the buttons and give them negative margin above and below of two pixels so that it all lines up perfect but whatever i'm not trying to bore you with those things let's just keep talking about call outs and how complicated they are it's just like everything that
that every every component i've ever built in flux it's like this is a simple thing until you start building it and you and you want it to be pixel perfect and you need it to work in dark mode and you need it to work with every color and different contrasts and you're trying to structure a nice API. where you you know you have a flux call out what's inside of flux call up well there's like a title so what's that because i called title well we call everything heading so it's a heading
but is it just flux heading or is do we need a special one called like callout.heading well ideally i always like composability so i want you to just say flux callout and then flux heading flux subheading flux button that kind of thing but
we are it's this balance of like i need more control sometimes because now if i'm going to make those different colors for the danger variant what am i going to do just target any heading inside of this thing well what if you have two headings and you only you know what i mean it's like i could But I think I ran into other things that, yeah, what was it? Yeah, positioning of, if you make it an inline call out, meaning everything is in one line, the actions are on one line.
and the title and the icon i need to detect if you've also had paragraph text because if you do then i add more padding to the action so that it's like center oh my gosh it's so dumb this is all so dumb It's all very tough. It's tough and it's dumb. Yeah, there's that. I mean, literally, like...
just the positioning alone of like, how do I make it so that this is kind of a fun one. How do I make it so that you can have that icon? You can have all the texts justified to the right of the icon or just the title offset by the icon. Cause this is a thing that. Looks good in some scenarios. People want in some scenarios. What would I even call the prop for that? What would I do? Do I make this grid, CSS grid? And then do I make it like, you know.
if you want you can have the description or whatever occupy two columns on the bottom or you can have it occupy one and let the icon occupy two rows you know like you can use grid and a bunch of conditional selectors to accomplish what i'm looking for mostly although i kept hitting roadblocks
you can sort of do that so do you do grid the nice thing about grid as always is you can keep things in a single hierarchy just as children so then i can just have my flux call out and everything is a simple child of that without needing nesting But I ended up actually not doing that. So I started looking at what other sites do, like GitHub's callouts. They have a separate div for all the content and the icon. It's two root-level flex divs.
And then everything inside of the content, the actions are within that, the titles within that, all that so that they can do, you know, whatever. And often what I come to, I'm sure this is not a popular opinion.
it's not even an opinion but i often end up getting back to flex and going now grid grid is great for keeping things as siblings um but often and there are things that flex is just totally not capable of doing but i remember having an awakening moment when i was building flux and realizing that all site layouts should be built using flexbox simply like if you have a big full width
header and then content below it that should be flex call yeah ours on flux uses grid for because i need things to be children of each other and i don't want multiple levels of nesting but in a perfect world where you when you're authoring your own html you don't really care about nesting divs so you can nest all day and use flex that's my recommendation i think for a lot of stuff is nesting divs and using flex um anyway
And that's what I ended up doing with this callout component. But if I'm nesting divs now, now I need to use slots for things because I can't have too many wrapping divs in the API and whatever, blah, blah, blah. um yeah i don't know i've just been banging my head against the wall with laying out a simple call out which is such a common thing to lay out like some sort of avatar icon image on the left content in the middle maybe an action on the right that on mobile goes to the bottom
But if it's on the bottom, is it still offset by the icon? There's all of those things. It's like, this is a really, really common layout thing. I should honestly solve it in like the one true way somehow with grid. and then just use that for everything like make it its own concept like card layout or something and you can use it in call outs or cards or boxes or whatever you want
Anyway, we're going to get callouts. I'm really excited about them. I'm going to use them for a lot more than whoop, something went wrong. Because again, it's just, it's basically a nice, it's a really nice, it's just like a card. with a title and a description and an icon and buttons which is modals confirmation models it's little messages it's that it's all sorts of stuff it's it's yeah it's great um
So callouts are coming to flux. All that to say, callouts are coming to flux. Is there any other tailwind things I need to whine about? By tailwind, I mean CSS things I need to whine about that I don't understand fully. Yeah, I don't know. But this is that. And I'll be seeing you. Okay. Bye.