Skip to content

refactor(CSS): move box-sizing from keyboard nav plugin to core/css.ts #9201

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.

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

Merged
merged 1 commit into from
Jul 7, 2025

Conversation

cpcallen
Copy link
Contributor

@cpcallen cpcallen commented Jul 3, 2025

The basics

The details

Resolves

Part of google/blockly-keyboard-experimentation#595

Proposed Changes

Add box-sizing: border-box to the existing .blocklyToolbox styling in core/css.ts.

Reason for Changes

The following "CSS reset" was added to the plugin playground by @microbit-matt-hillsdon in google/blockly-keyboard-experimentation#511 to fix an issue with the toolbox focus indicator border being misplaced:

* {
  box-sizing: border-box;
}

This would be a pretty good default (explanation) for Blockly but that would definitely be a breaking change, so for now apply it only to the blocklyToolbox div.

Test Coverage

Manually verified it has the desired effect on the toolbox focus indicator (after removing corresponding styling from plugin's test/index.html, of course).

Additional Information

@cpcallen
Copy link
Contributor Author

cpcallen commented Jul 3, 2025

@microbit-matt-hillsdon: Please take a look at this and google/blockly-keyboard-experimentation#637.

Copy link
Contributor

@BenHenning BenHenning left a comment

Choose a reason for hiding this comment

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

Thanks @cpcallen!

@BenHenning
Copy link
Contributor

NB: It may be nice to link to the issues from here to connect the histories for future referencing.

Apply box-sizing to all of Blockly (and thereby obviate the need
to apply it to .blocklyHtmlInput in particular.
@cpcallen cpcallen merged commit b741d78 into google:develop Jul 7, 2025
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants