Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Polish a few broken things in the sidebar. #20782

Merged
merged 2 commits into from
Mar 11, 2020
Merged

Polish a few broken things in the sidebar. #20782

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c64a5f3
Polish a few broken things in the sidebar.
jasmussen Mar 11, 2020
99eca60
Remove table rule.
jasmussen Mar 11, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion packages/block-editor/src/components/block-styles/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,13 @@
}

&.is-active {
@include block-style__is-active();
.block-editor-block-styles__item-label {
font-weight: bold;
}

.block-editor-block-styles__item-preview {
border: 2px solid $dark-gray-primary;
}
}
}

Expand Down
4 changes: 0 additions & 4 deletions packages/components/src/base-control/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,3 @@
font-style: italic;
}
}

.components-base-control + .components-base-control {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if we should remove that rule just like that. It has implications on all sidebars (and all other places where we use multiple controls in a row like the entities save modal) (multiple controls in a row) including in third-party blocks.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd rather override it personally where we have horizontal controls today.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I responded in #20608 (comment) — best I can tell it's either dead code or ill-advised. In all my web-inspecting, the rule was almost always overridden.

The way to space base controls, I would suggest, is simple:

.components-base-control {
	margin-bottom: $grid-unit-20;
}

While you can achieve the same with the following:

.components-base-control + .components-base-control {
	margin-top: $grid-unit-20;
}

That's a far more roundabout way of doing it. And given margins collapse regardless, the former seems much more the correct way of spacing things.

Copy link
Contributor

@youknowriad youknowriad Mar 11, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess the .components-base-control .components-base-control__field bottom padding makes this rule a bit redundant. I'm actually ok removing it now.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we remove the rule from the table block too? (it's overridden there)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll remove it there and ship. Thanks for fast review!

margin-top: $grid-unit-20;
}
11 changes: 3 additions & 8 deletions packages/components/src/button-group/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,17 @@
.components-button-group {
display: inline-block;
border-radius: $radius-block-ui;
border: $border-width solid $theme-color;

.components-button {
border-radius: 0;
display: inline-flex;
color: $theme-color;

& + .components-button {
margin-left: -1px;
}

&:first-child {
border-radius: 3px 0 0 3px;
}

&:last-child {
border-radius: 0 3px 3px 0;
}

// The focused button should be elevated so the focus ring isn't cropped,
// as should the active button, because it has a different border color.
&:focus,
Expand Down