CheckboxControl: move icons out of labels

[brookewp]

What?

The icons for BlockLockModal and BlockTypesChecklist were nested inside the CheckboxControl label. This PR moves them out of the label and removes unnecessary CSS.

Why?

This PR is based on the comment here: #45434 (comment) by @mirka

How?

Moving the Icon and BlockIcon components out of the label prop. Also, removing the CSS for components-base-control__field and components-checkbox-control__label and moving it to the parent class for the respective components.

Testing Instructions

For BlockLockModal

1. Add the Navigation block to the editor (this block has the extra setting Restrict editing that some other blocks don't have, i.e the Paragraph block)
2. Click on the three dots and then on 'Lock'
3. Check the different checkboxes to test the options:
   -- Make sure the icon shows the correct lock based on if it's locked or unlocked
   -- Ensure background hover works as expected
   -- Changes are responsive

For BlockTypesChecklist

1. Click on three dots in the top right corner of post editor
2. Then select 'Preferences'
3. Click on 'Blocks' and scroll down to 'Visible Blocks'
4. Check for the following:
   -- Ensure it looks the same as before (it's about a pixel different in vertical spacing, not sure if that'll be an issue)
   -- Check that it's responsive

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[Mamaduka]

Thanks for working on this, @brookewp! I like how clean things look now.

A minor thing: It feels that spacing is a bit off on this branch compared to the trunk.

trunk	this branch

[mirka]

Thanks for the nice cleanup!

+1 on the vertical alignment thing from @Mamaduka, though the screenshots seem flipped 😆

[mirka]

We need to be careful with element selectors like svg, as in this case where it's unintentionally applying to the checkmark svg as well 😄

The normal suggested way would be to add our own className to Icon for better scoping.

It might also be nice to add a flex-grow: 0 in here so the icon doesn't shrink when the checkbox text is long.

[brookewp]

We need to be careful with element selectors like svg, as in this case where it's unintentionally applying to the checkmark svg as well 😄

Good catch! I usually have a good eye for that, so I'm surprised I missed that! 🤦‍♀️

It might also be nice to add a flex-grow: 0 in here so the icon doesn't shrink when the checkbox text is long.

I might be missing something, but I'm having trouble getting flex-grow: 0 to work in that scenario. Would it be a bad idea to set a min-width on the icon instead?

[mirka]

I think I meant flex-shrink 🙈 Does that work?

[mirka]

The fill hack is not ideal (#40102), but I understand why it's needed at the moment. (No action required, just mentioning for future context.)

[mirka]

Would it be worth adding a flex-gap so the text and icon don't run together when the text is long?

[brookewp]

That makes sense to me!

[brookewp]

Thank you both @Mamaduka and @mirka for your suggestions! When looking at the text it didn't seem too different but when seeing it highlighted it's very clearly misaligned. I've center-aligned it now but I think it is a pixel off. Will that be an issue? What do you think?

[Mamaduka]

Thank you, @brookewp!

I've center-aligned it now but I think it is a pixel off. Will that be an issue? What do you think?

That's okay with me. The items are correctly aligned.

[mirka]

Looks great, thank you! 🚀