Skip to content

fix: various visual component fixes + floating-ui/colorpicker positioning#1255

Merged
Arnold Stoba (arnoldstoba) merged 22 commits into
mainfrom
ntr/various-visual-component-fixes
Jul 8, 2026
Merged

fix: various visual component fixes + floating-ui/colorpicker positioning#1255
Arnold Stoba (arnoldstoba) merged 22 commits into
mainfrom
ntr/various-visual-component-fixes

Conversation

@arnoldstoba

Copy link
Copy Markdown
Contributor

What changed

  • mt-floating-ui: pin the popover's position to the computed strategy inline, so copied consumer classes can't knock it out of its coordinate space — fixes overlays landing in a random spot and drifting on scroll.
  • mt-colorpicker: keep the popover absolutely positioned regardless of stylesheet source order (removes the need for a :deep override in consuming code).
  • mt-action-menu: correct z-index stacking order.
  • mt-banner: adjust close icon and typo spacing.
  • mt-checkbox / mt-switch: adjust icon, spacing, gap and default line-height.
  • mt-select / mt-button: field icons, spacing and active-state fixes.
  • mt-base-field: use tokens for label font-size and line-height.

Notes

  • All changes are non-breaking; patch changeset included.
  • Positioning fixes verified with headless browser repro (correct scroll tracking; popover stays anchored).

🤖 Generated with Claude Code

@vercel

vercel Bot commented Jul 3, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
meteor-component-library Ready Ready Preview, Comment Jul 8, 2026 8:52am
meteor-docs Ready Ready Preview, Comment Jul 8, 2026 8:52am

Request Review

@arnoldstoba
Arnold Stoba (arnoldstoba) force-pushed the ntr/various-visual-component-fixes branch from 9d2cf17 to f9df666 Compare July 3, 2026 15:38
Arnold Stoba (arnoldstoba) and others added 21 commits July 8, 2026 10:46
The floating-ui root carries both .mt-floating-ui (position: relative) and
.mt-colorpicker__colorpicker-position (position: absolute). Both are plain,
equal-specificity class selectors in unscoped stylesheets, so the winner
depended on bundle source order — intermittently letting .mt-floating-ui win
and dropping the closed popover back into document flow.

Qualify the rule with the .mt-colorpicker ancestor so it deterministically
wins, mirroring the existing --compact rule. Removes the need for a :deep
override in consuming code.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The teleported .mt-floating-ui__content is positioned by writing the
floating-ui coordinates inline, but `position` was left to CSS. Consumer
classes passed on <mt-floating-ui class="..."> are copied onto this element,
so a class carrying `position: absolute` (e.g. mt-colorpicker's positioning
class) flipped the fixed-strategy coordinates into document space — the
popover then rendered in a seemingly random spot and drifted away on scroll.

Write `position: strategy` inline alongside top/left so it always matches the
coordinate space floating-ui computed for. Inline style wins over any copied
class, immunizing every consumer against this class of misposition.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The checkbox check/partial icons changed from regular-checkmark-xxs /
regular-minus-xxs to solid-checkmark-xs / solid-minus-xs. Update the
references that still pointed at the old names:

- mt-popover-item spec assertions (was failing in CI)
- mt-checkbox interactive story assertion
- mt-segmented-control checkmark sizing selector (was silently no longer
  matching)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- mt-number-field: the increment/decrement controls become a bordered
  box (1px border, --border-radius-xs) split 50/50 by a 1px separator,
  icons centered, 32px wide, height matched to the field in every size
- mt-unit-field: inherits the stepper box from the number field, drops
  the doubled gap toward the unit select trigger, and hides the stepper
  via a container query below 240px
- mt-radio-group-item: indicator-to-label gap 4px -> 8px, matching the
  earlier checkbox and switch spacing adjustment

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- mt-checkbox: restore centered box alignment by default; gate the
  first-line offset (margin-top) behind the new consistentLabelLineHeight
  future flag and a has-label check, so label-less checkboxes (data
  tables, custom layouts) are no longer pushed down
- mt-checkbox: bordered variant gets min-height like the switch instead
  of relying on vertical padding, fixing its height
- mt-base-field: label line-height stays the legacy 16px by default; the
  token line-height (--font-line-height-xs) is opt-in via
  consistentLabelLineHeight so existing label baselines are preserved
- mt-segmented-control: checkbox keeps no first-line offset (the action
  centers its content itself)
- mt-modal: center the close button icon (a bare button does not, so the
  inline-block icon sat low on the baseline)
- mt-number-field: add a disabled state for the stepper box; hide the
  stepper via a container query when the field is too narrow (e.g. the
  number fields inside a range slider), moved off mt-unit-field so it
  applies to plain number fields and sliders too

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Keeps the functional smoke checks; whole-page pixel regression is
redundant with the component library's own visual snapshots and broke
on every component restyle.
@pkg-pr-new

pkg-pr-new Bot commented Jul 8, 2026

Copy link
Copy Markdown

Open in StackBlitz

@shopware-ag/meteor-admin-sdk

npm i https://pkg.pr.new/shopware/meteor/@shopware-ag/meteor-admin-sdk@1255

@shopware-ag/meteor-component-library

npm i https://pkg.pr.new/shopware/meteor/@shopware-ag/meteor-component-library@1255

@shopware-ag/create-meteor-extension

npm i https://pkg.pr.new/shopware/meteor/@shopware-ag/create-meteor-extension@1255

@shopware-ag/meteor-icon-kit

npm i https://pkg.pr.new/shopware/meteor/@shopware-ag/meteor-icon-kit@1255

@shopware-ag/meteor-prettier-config

npm i https://pkg.pr.new/shopware/meteor/@shopware-ag/meteor-prettier-config@1255

@shopware-ag/stylelint-plugin-meteor

npm i https://pkg.pr.new/shopware/meteor/@shopware-ag/stylelint-plugin-meteor@1255

@shopware-ag/meteor-tokens

npm i https://pkg.pr.new/shopware/meteor/@shopware-ag/meteor-tokens@1255

commit: 354f1ee

@arnoldstoba
Arnold Stoba (arnoldstoba) merged commit 7c9f669 into main Jul 8, 2026
13 checks passed
@arnoldstoba
Arnold Stoba (arnoldstoba) deleted the ntr/various-visual-component-fixes branch July 8, 2026 10:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants