@primer/view-components 0.21.0-rc.1cc3a887 → 0.21.0-rc.a6d33cb4

package/app/components/primer/alpha/segmented_control.css

@@ -1 +1 @@
-.SegmentedControl{--segmentedControl-item-padding:var(--control-small-paddingBlock,0.25rem);background-color:var(--controlTrack-bgColor-rest,var(--color-segmented-control-bg));border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;list-style:none}.SegmentedControl--iconOnly .Button--iconOnly.Button--medium,.SegmentedControl--iconOnly .Button--iconOnly.Button--small{padding-inline:0!important;width:100%}.SegmentedControl--small{--segmentedControl-item-padding:var(--control-xsmall-paddingBlock,0.125rem)}.SegmentedControl--small .SegmentedControl-item{height:var(--control-small-size,1.75rem)}.SegmentedControl--small .SegmentedControl-item .Button{padding-inline:calc(var(--control-xsmall-paddingInline-normal,.5rem) - var(--segmentedControl-item-padding))}.SegmentedControl--small.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-small-size,1.75rem)}.SegmentedControl--medium .SegmentedControl-item{height:var(--control-medium-size,2rem)}.SegmentedControl--medium.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-medium-size,2rem)}.SegmentedControl-item{border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;height:var(--control-medium-size,2rem);justify-content:center;padding:var(--segmentedControl-item-padding);position:relative}.SegmentedControl-item .Button--invisible:hover:not(:disabled){background-color:var(--controlTrack-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.SegmentedControl-item .Button--invisible:active:not(:disabled){background-color:var(--controlTrack-bgColor-active,var(--color-action-list-item-default-active-bg))}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--controlKnob-bgColor-rest,var(--color-segmented-control-button-bg));border-color:var(--controlKnob-borderColor-rest,var(--color-segmented-control-button-selected-border))}.SegmentedControl-item.SegmentedControl-item--selected .Button{font-weight:var(--base-text-weight-semibold,600)}.SegmentedControl-item.SegmentedControl-item--selected .Button:hover{background-color:initial}.SegmentedControl-item.SegmentedControl-item--selected:before{border-color:#0000!important}.SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before{border-color:#0000}.SegmentedControl-item .Button-label[data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.SegmentedControl-item:not(:first-child):before{border-left:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));content:"";inset:0 0 0 -1px;margin-bottom:var(--control-medium-paddingBlock,.375rem);margin-top:var(--control-medium-paddingBlock,.375rem);position:absolute}.SegmentedControl-item .Button{border:0;border-radius:calc(var(--borderRadius-medium,.375rem) - var(--segmentedControl-item-padding)/2);font-weight:var(--base-text-weight-normal,400);height:100%;padding-inline:calc(var(--control-medium-paddingInline-normal,.75rem) - var(--segmentedControl-item-padding));width:100%}.SegmentedControl-item .Button:focus-visible{border-radius:calc(var(--borderRadius-medium,.375rem) - var(--segmentedControl-item-padding)/1);outline-offset:calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin,max(1px, .0625rem)))}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}
+.SegmentedControl{--segmentedControl-item-padding:var(--control-small-paddingBlock,0.25rem);--overlay-offset:0.5rem;background-color:var(--controlTrack-bgColor-rest,var(--color-segmented-control-bg));border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;list-style:none}.SegmentedControl--iconOnly .Button--iconOnly.Button--medium,.SegmentedControl--iconOnly .Button--iconOnly.Button--small{padding-inline:0!important;width:100%}.SegmentedControl--small{--segmentedControl-item-padding:var(--control-xsmall-paddingBlock,0.125rem)}.SegmentedControl--small .SegmentedControl-item{height:var(--control-small-size,1.75rem)}.SegmentedControl--small .SegmentedControl-item .Button{padding-inline:calc(var(--control-xsmall-paddingInline-normal,.5rem) - var(--segmentedControl-item-padding))}.SegmentedControl--small.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-small-size,1.75rem)}.SegmentedControl--medium .SegmentedControl-item{height:var(--control-medium-size,2rem)}.SegmentedControl--medium.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-medium-size,2rem)}.SegmentedControl-item{border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;height:var(--control-medium-size,2rem);justify-content:center;padding:var(--segmentedControl-item-padding);position:relative}.SegmentedControl-item .Button--invisible:hover:not(:disabled){background-color:var(--controlTrack-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.SegmentedControl-item .Button--invisible:active:not(:disabled){background-color:var(--controlTrack-bgColor-active,var(--color-action-list-item-default-active-bg))}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--controlKnob-bgColor-rest,var(--color-segmented-control-button-bg));border-color:var(--controlKnob-borderColor-rest,var(--color-segmented-control-button-selected-border))}.SegmentedControl-item.SegmentedControl-item--selected .Button{font-weight:var(--base-text-weight-semibold,600)}.SegmentedControl-item.SegmentedControl-item--selected .Button:hover{background-color:initial}.SegmentedControl-item.SegmentedControl-item--selected:before{border-color:#0000!important}.SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before{border-color:#0000}.SegmentedControl-item .Button-label[data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.SegmentedControl-item:not(:first-child):before{border-left:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));content:"";inset:0 0 0 -1px;margin-bottom:var(--control-medium-paddingBlock,.375rem);margin-top:var(--control-medium-paddingBlock,.375rem);position:absolute}.SegmentedControl-item .Button{border:0;border-radius:calc(var(--borderRadius-medium,.375rem) - var(--segmentedControl-item-padding)/2);font-weight:var(--base-text-weight-normal,400);height:100%;padding-inline:calc(var(--control-medium-paddingInline-normal,.75rem) - var(--segmentedControl-item-padding));width:100%}.SegmentedControl-item .Button:focus-visible{border-radius:calc(var(--borderRadius-medium,.375rem) - var(--segmentedControl-item-padding)/1);outline-offset:calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin,max(1px, .0625rem)))}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}

package/app/components/primer/alpha/tool_tip.js

@@ -32,9 +32,7 @@ const isPopoverOpen = (() => {
     }
     return (el) => (selector ? el.matches(selector) : setSelector(el));
 })();
-const TOOLTIP_ARROW_EDGE_OFFSET = 6;
 const TOOLTIP_SR_ONLY_CLASS = 'sr-only';
-const TOOLTIP_OFFSET = 10;
 const DIRECTION_CLASSES = [
     'tooltip-n',
     'tooltip-s',
@@ -84,6 +82,8 @@ class ToolTipElement extends HTMLElement {
     styles() {
         return `
       :host {
+        --tooltip-top: var(--tool-tip-position-top, 0);
+        --tooltip-left: var(--tool-tip-position-left, 0);
         padding: var(--overlay-paddingBlock-condensed) var(--overlay-padding-condensed) !important;
         font: var(--text-body-shorthand-small);
         color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)) !important;
@@ -102,27 +102,29 @@ class ToolTipElement extends HTMLElement {
         word-wrap: break-word;
         white-space: normal;
         width: max-content !important;
-        inset: var(--tool-tip-position-top, 0) auto auto var(--tool-tip-position-left, 0) !important;
+        inset: var(--tooltip-top) auto auto var(--tooltip-left) !important;
         overflow: visible !important;
         text-wrap: balance;
       }
 
-      :host:before{
-        position: absolute;
-        z-index: 1000001;
-        color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
-        content: "";
-        border: 6px solid transparent;
-        opacity: 0;
+      :host(:is(.tooltip-n, .tooltip-nw, .tooltip-ne)) {
+        --tooltip-top: calc(var(--tool-tip-position-top, 0) - var(--overlay-offset, 0.25rem));
+        --tooltip-left: var(--tool-tip-position-left);
       }
 
-      @keyframes tooltip-appear {
-        from {
-          opacity: 0;
-        }
-        to {
-          opacity: 1;
-        }
+      :host(:is(.tooltip-s, .tooltip-sw, .tooltip-se)) {
+        --tooltip-top: calc(var(--tool-tip-position-top, 0) + var(--overlay-offset, 0.25rem));
+        --tooltip-left: var(--tool-tip-position-left);
+      }
+
+      :host(.tooltip-w) {
+        --tooltip-top: var(--tool-tip-position-top);
+        --tooltip-left: calc(var(--tool-tip-position-left, 0) - var(--overlay-offset, 0.25rem));
+      }
+
+      :host(.tooltip-e) {
+        --tooltip-top: var(--tool-tip-position-top);
+        --tooltip-left: calc(var(--tool-tip-position-left, 0) + var(--overlay-offset, 0.25rem));
       }
 
       :host:after{
@@ -134,73 +136,40 @@ class ToolTipElement extends HTMLElement {
         content: "";
       }
 
-      :host(:popover-open),
-      :host(:popover-open):before {
-        animation-name: tooltip-appear;
-        animation-duration: .1s;
-        animation-fill-mode: forwards;
-        animation-timing-function: ease-in;
-      }
-
-      :host(.\\:popover-open),
-      :host(.\\:popover-open):before {
-        animation-name: tooltip-appear;
-        animation-duration: .1s;
-        animation-fill-mode: forwards;
-        animation-timing-function: ease-in;
-        animation-delay: .4s;
-      }
-
-      :host(.tooltip-s):before,
-      :host(.tooltip-n):before {
-        right: 50%;
-        margin-right: -${TOOLTIP_ARROW_EDGE_OFFSET}px;
-      }
-      :host(.tooltip-s):before,
-      :host(.tooltip-se):before,
-      :host(.tooltip-sw):before {
-        bottom: 100%;
-        border-bottom-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
-      }
       :host(.tooltip-s):after,
       :host(.tooltip-se):after,
       :host(.tooltip-sw):after {
         bottom: 100%
       }
-      :host(.tooltip-n):before,
-      :host(.tooltip-ne):before,
-      :host(.tooltip-nw):before {
-        top: 100%;
-        border-top-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
-      }
+
       :host(.tooltip-n):after,
       :host(.tooltip-ne):after,
       :host(.tooltip-nw):after {
         top: 100%;
       }
-      :host(.tooltip-se):before,
-      :host(.tooltip-ne):before {
-        left: 0;
-        margin-left: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
-      }
-      :host(.tooltip-sw):before,
-      :host(.tooltip-nw):before {
-        right: 0;
-        margin-right: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
+
+      @keyframes tooltip-appear {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
       }
-      :host(.tooltip-w):before {
-        top: 50%;
-        bottom: 50%;
-        left: 100%;
-        margin-top: -6px;
-        border-left-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
+
+      :host(:popover-open),
+      :host(:popover-open):before {
+        animation-name: tooltip-appear;
+        animation-duration: .1s;
+        animation-fill-mode: forwards;
+        animation-timing-function: ease-in;
       }
-      :host(.tooltip-e):before {
-        top: 50%;
-        right: 100%;
-        bottom: 50%;
-        margin-top: -6px;
-        border-right-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
+
+      :host(.\\:popover-open) {
+        animation-name: tooltip-appear;
+        animation-duration: .1s;
+        animation-fill-mode: forwards;
+        animation-timing-function: ease-in;
       }
 
       @media (forced-colors: active) {
@@ -390,7 +359,7 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
         __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
     }
     else if (direction === 'ne') {
-        __classPrivateFieldSet(this, _ToolTipElement_align, 'start', "f");
+        __classPrivateFieldSet(this, _ToolTipElement_align, 'end', "f");
         __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
     }
     else if (direction === 'e') {
@@ -398,7 +367,7 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
         __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-right', "f");
     }
     else if (direction === 'se') {
-        __classPrivateFieldSet(this, _ToolTipElement_align, 'start', "f");
+        __classPrivateFieldSet(this, _ToolTipElement_align, 'end', "f");
         __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
     }
     else if (direction === 's') {
@@ -406,7 +375,7 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
         __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
     }
     else if (direction === 'sw') {
-        __classPrivateFieldSet(this, _ToolTipElement_align, 'end', "f");
+        __classPrivateFieldSet(this, _ToolTipElement_align, 'start', "f");
         __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
     }
     else if (direction === 'w') {
@@ -414,7 +383,7 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
         __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-left', "f");
     }
     else if (direction === 'nw') {
-        __classPrivateFieldSet(this, _ToolTipElement_align, 'end', "f");
+        __classPrivateFieldSet(this, _ToolTipElement_align, 'start', "f");
         __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
     }
 }, _ToolTipElement_updatePosition = function _ToolTipElement_updatePosition() {
@@ -425,7 +394,7 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
     const position = getAnchoredPosition(this, this.control, {
         side: __classPrivateFieldGet(this, _ToolTipElement_side, "f"),
         align: __classPrivateFieldGet(this, _ToolTipElement_align, "f"),
-        anchorOffset: TOOLTIP_OFFSET,
+        anchorOffset: 0,
     });
     const anchorSide = position.anchorSide;
     const align = position.anchorAlign;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.21.0-rc.1cc3a887",
+  "version": "0.21.0-rc.a6d33cb4",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",