Explorar o código

fix(client): keep the Switch track capsule under the global corner shape

The track's radius is half its height, so its corners consume the whole
side and the global `superellipse(1.5)` squares the ends off — beside a
thumb that already opts out at `border-radius: 50%`, leaving a round knob
in a squared-off slot. Pair `corner-shape: round` with the radius, the way
every full-round radius in the repository does.

The corner-shape stylesheet spec recognizes 50%, 100%, and radii at or
above 99px, so a radius that is full-round only relative to its own box
passes it; the comment records that gap at the rule it affects.
Yichen Jiang hai 3 semanas
pai
achega
c279350e03
Modificáronse 1 ficheiros con 9 adicións e 1 borrados
  1. 9 1
      packages/client/ui-primitives/src/Switch.module.css

+ 9 - 1
packages/client/ui-primitives/src/Switch.module.css

@@ -1,5 +1,12 @@
 /* The on/off appearance keys off aria-checked rather than a parallel class, so
- * the visual state cannot disagree with the state assistive technology reads. */
+ * the visual state cannot disagree with the state assistive technology reads.
+ *
+ * The track is a capsule: its radius is half its height, so the corners consume
+ * the whole side and the global superellipse would square the ends off against
+ * the round thumb inside it. `corner-shape: round` opts the track out, the way
+ * every full-round radius does. The corner-shape spec does not catch this one —
+ * it recognizes 50%, 100%, and radii at or above 99px, not a radius that is
+ * full-round only relative to its own box. */
 .switch {
   box-sizing: border-box;
   position: relative;
@@ -9,6 +16,7 @@
   padding: 2px;
   border: 0;
   border-radius: 10px;
+  corner-shape: round;
   background: var(--dsw-alias-border-l3);
   cursor: pointer;
 }