@primer/react 38.30.0-rc.4d4be073a → 38.30.0-rc.8b6124d07
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2 -0
- package/dist/UnderlineNav/UnderlineNav-47547980.css +2 -0
- package/dist/UnderlineNav/UnderlineNav-47547980.css.map +1 -0
- package/dist/UnderlineNav/UnderlineNav.d.ts +1 -2
- package/dist/UnderlineNav/UnderlineNav.d.ts.map +1 -1
- package/dist/UnderlineNav/UnderlineNav.js +91 -331
- package/dist/UnderlineNav/UnderlineNav.module.css.js +2 -2
- package/dist/UnderlineNav/UnderlineNavContext.d.ts +1 -11
- package/dist/UnderlineNav/UnderlineNavContext.d.ts.map +1 -1
- package/dist/UnderlineNav/UnderlineNavContext.js +1 -4
- package/dist/UnderlineNav/UnderlineNavItem-402cd41c.css +2 -0
- package/dist/UnderlineNav/UnderlineNavItem-402cd41c.css.map +1 -0
- package/dist/UnderlineNav/UnderlineNavItem.d.ts +1 -44
- package/dist/UnderlineNav/UnderlineNavItem.d.ts.map +1 -1
- package/dist/UnderlineNav/UnderlineNavItem.js +33 -38
- package/dist/UnderlineNav/UnderlineNavItem.module.css.js +1 -1
- package/dist/UnderlineNav/UnderlineNavItemsRegistry.d.ts +51 -0
- package/dist/UnderlineNav/UnderlineNavItemsRegistry.d.ts.map +1 -0
- package/dist/UnderlineNav/UnderlineNavItemsRegistry.js +8 -0
- package/dist/UnderlineNav/index.d.ts +1 -1
- package/dist/UnderlineNav/index.d.ts.map +1 -1
- package/dist/UnderlineNav/utils.d.ts +2 -0
- package/dist/UnderlineNav/utils.d.ts.map +1 -1
- package/dist/UnderlineNav/utils.js +2 -1
- package/dist/experimental/UnderlinePanels/UnderlinePanels-162f9aed.css +2 -0
- package/dist/experimental/UnderlinePanels/UnderlinePanels-162f9aed.css.map +1 -0
- package/dist/experimental/UnderlinePanels/UnderlinePanels.d.ts.map +1 -1
- package/dist/experimental/UnderlinePanels/UnderlinePanels.js +8 -11
- package/dist/experimental/UnderlinePanels/UnderlinePanels.module.css.js +1 -1
- package/dist/internal/components/UnderlineTabbedInterface-1745a3d6.css +2 -0
- package/dist/internal/components/UnderlineTabbedInterface-1745a3d6.css.map +1 -0
- package/dist/internal/components/UnderlineTabbedInterface.d.ts +0 -1
- package/dist/internal/components/UnderlineTabbedInterface.d.ts.map +1 -1
- package/dist/internal/components/UnderlineTabbedInterface.js +66 -60
- package/dist/internal/components/UnderlineTabbedInterface.module.css.js +1 -1
- package/generated/components.json +2 -2
- package/package.json +1 -1
- package/dist/UnderlineNav/UnderlineNav-4344d9b0.css +0 -2
- package/dist/UnderlineNav/UnderlineNav-4344d9b0.css.map +0 -1
- package/dist/UnderlineNav/UnderlineNavItem-b65e8fd3.css +0 -2
- package/dist/UnderlineNav/UnderlineNavItem-b65e8fd3.css.map +0 -1
- package/dist/UnderlineNav/styles.d.ts +0 -16
- package/dist/UnderlineNav/styles.d.ts.map +0 -1
- package/dist/UnderlineNav/styles.js +0 -19
- package/dist/UnderlineNav/types.d.ts +0 -10
- package/dist/UnderlineNav/types.d.ts.map +0 -1
- package/dist/experimental/UnderlinePanels/UnderlinePanels-e4b325b9.css +0 -2
- package/dist/experimental/UnderlinePanels/UnderlinePanels-e4b325b9.css.map +0 -1
- package/dist/internal/components/UnderlineTabbedInterface-4197ee28.css +0 -2
- package/dist/internal/components/UnderlineTabbedInterface-4197ee28.css.map +0 -1
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
const dividerStyles = {
|
|
2
|
-
display: 'inline-block',
|
|
3
|
-
borderLeft: '1px solid',
|
|
4
|
-
width: '1px',
|
|
5
|
-
borderLeftColor: 'var(--borderColor-muted)',
|
|
6
|
-
marginRight: 'var(--base-size-4)',
|
|
7
|
-
height: '24px' // The height of the divider - reference from Figma
|
|
8
|
-
};
|
|
9
|
-
const menuItemStyles = {
|
|
10
|
-
// This is needed to hide the selected check icon on the menu item. https://github.com/primer/react/tree/main/packages/react/src/ActionList/Selection.tsx#L32
|
|
11
|
-
'& > span': {
|
|
12
|
-
display: 'none'
|
|
13
|
-
},
|
|
14
|
-
// To reset the style when the menu items are rendered as react router links
|
|
15
|
-
textDecoration: 'none'
|
|
16
|
-
};
|
|
17
|
-
const baseMenuMinWidth = 192;
|
|
18
|
-
|
|
19
|
-
export { baseMenuMinWidth, dividerStyles, menuItemStyles };
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
export type ChildSize = {
|
|
2
|
-
text: string;
|
|
3
|
-
width: number;
|
|
4
|
-
};
|
|
5
|
-
export type ChildWidthArray = Array<ChildSize>;
|
|
6
|
-
export type ResponsiveProps = {
|
|
7
|
-
items: Array<React.ReactElement<any>>;
|
|
8
|
-
menuItems: Array<React.ReactElement<any>>;
|
|
9
|
-
};
|
|
10
|
-
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AACD,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,SAAS,CAAC,CAAA;AAC9C,MAAM,MAAM,eAAe,GAAG;IAE5B,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAA;IAErC,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAA;CAC1C,CAAA"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
.prc-UnderlinePanels-StyledUnderlineWrapper-aiLna{overflow-x:auto;overflow-y:hidden;width:100%;-webkit-overflow-scrolling:auto}.prc-UnderlinePanels-StyledUnderlineWrapper-aiLna[data-icons-visible=false] [data-component=icon]{display:none}
|
|
2
|
-
/*# sourceMappingURL=UnderlinePanels-e4b325b9.css.map */
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/experimental/UnderlinePanels/UnderlinePanels.module.css.js"],"names":[],"mappings":"AAAA,kDAEE,eAAgB,CAChB,iBAAkB,CAFlB,UAAW,CAGX,+BACF,CAEA,kGACE,YACF","file":"UnderlinePanels-e4b325b9.css","sourcesContent":[".StyledUnderlineWrapper {\n width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: auto;\n}\n\n.StyledUnderlineWrapper[data-icons-visible='false'] [data-component='icon'] {\n display: none;\n}\n"]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
.prc-components-UnderlineWrapper-eT-Yj{align-items:center;box-shadow:inset 0 -1px var(--borderColor-muted,#d1d9e0b3);display:flex;justify-content:flex-start;min-height:var(--control-xlarge-size,48px);overflow:visible;padding-inline:var(--stack-padding-normal,1rem)}.prc-components-UnderlineWrapper-eT-Yj[data-overflow-measured=false]{overflow:hidden}.prc-components-UnderlineWrapper-eT-Yj[data-overflow-measured=true]{overflow:visible}.prc-components-UnderlineWrapper-eT-Yj[data-variant=flush]{padding-inline:unset}.prc-components-UnderlineItemList-xKlKC{display:flex;gap:8px;list-style:none;margin:0;padding:0;white-space:nowrap}.prc-components-UnderlineItem-7fP-n,.prc-components-UnderlineItemList-xKlKC{align-items:center;position:relative}.prc-components-UnderlineItem-7fP-n{appearance:none;background-color:transparent;border:0;border-radius:var(--borderRadius-medium,var(--borderRadius-small,.1875rem));color:var(--fgColor-default,#1f2328);cursor:pointer;display:inline-flex;font:inherit;font-size:var(--text-body-size-medium,.875rem);line-height:var(--text-body-lineHeight-medium,1.4285);padding-block:var(--base-size-6,.375rem);padding-inline:var(--base-size-8,.5rem);text-align:center;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.prc-components-UnderlineItem-7fP-n:hover{background-color:var(--bgColor-neutral-muted,#818b981f);-webkit-text-decoration:none;text-decoration:none;transition:background-color .12s ease-out}}.prc-components-UnderlineItem-7fP-n:focus{box-shadow:inset 0 0 0 2px var(--fgColor-accent,#0969da);outline:2px solid transparent}.prc-components-UnderlineItem-7fP-n:focus:not(:focus-visible){box-shadow:none}.prc-components-UnderlineItem-7fP-n:focus-visible{box-shadow:inset 0 0 0 2px var(--fgColor-accent,#0969da);outline:2px solid transparent}.prc-components-UnderlineItem-7fP-n [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden;white-space:nowrap}.prc-components-UnderlineItem-7fP-n [data-component=icon]{align-items:center;color:var(--fgColor-muted,#59636e);display:inline-flex;margin-inline-end:var(--base-size-8,.5rem)}.prc-components-UnderlineItem-7fP-n [data-component=counter]{align-items:center;display:flex;margin-inline-start:var(--base-size-8,.5rem)}.prc-components-UnderlineItem-7fP-n:after{background-color:transparent;border-radius:0;bottom:calc(50% - var(--control-xlarge-size, var(--base-size-48,3rem))/2 - 1px);content:"";height:2px;pointer-events:none;position:absolute;right:50%;transform:translate(50%,-50%);width:100%}.prc-components-UnderlineItem-7fP-n[aria-current]:not([aria-current=false]) [data-component=text],.prc-components-UnderlineItem-7fP-n[aria-selected=true] [data-component=text]{font-weight:var(--base-text-weight-semibold,600)}.prc-components-UnderlineItem-7fP-n[aria-current]:not([aria-current=false]):after,.prc-components-UnderlineItem-7fP-n[aria-selected=true]:after{background-color:var(--underlineNav-borderColor-active,var(--color-primer-border-active,#fd8c73))}@media (forced-colors:active){.prc-components-UnderlineItem-7fP-n[aria-current]:not([aria-current=false]):after,.prc-components-UnderlineItem-7fP-n[aria-selected=true]:after{background-color:LinkText}}.prc-components-LoadingCounter-dBuLy{animation:prc-components-loadingCounterKeyFrames-8tMlf 1.2s ease-in-out infinite alternate;background-color:var(--bgColor-neutral-muted,#818b981f);border-color:var(--borderColor-default,#d1d9e0);border-radius:20px;display:inline-block;height:1rem;width:1.5rem}@keyframes prc-components-loadingCounterKeyFrames-8tMlf{0%{opacity:1}to{opacity:.2}}
|
|
2
|
-
/*# sourceMappingURL=UnderlineTabbedInterface-4197ee28.css.map */
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/internal/components/UnderlineTabbedInterface.module.css.js"],"names":[],"mappings":"AAAA,uCAKE,kBAAmB,CAOnB,0DAAiD,CAXjD,YAAa,CAGb,0BAA2B,CAI3B,0CAA4C,CAO5C,gBAAiB,CAZjB,+CA0BF,CAZE,qEACE,eACF,CAEA,oEACE,gBACF,CAEA,2DAEE,oBACF,CAGF,wCAEE,YAAa,CAMb,OAAQ,CAFR,eAAgB,CAFhB,QAAS,CADT,SAAU,CAEV,kBAIF,CAEA,4EAJE,kBAAmB,CANnB,iBAsCF,CA5BA,oCAgBE,eAAgB,CALhB,4BAA6B,CAC7B,QAAS,CACT,2EAAoE,CANpE,oCAA6B,CAG7B,cAAe,CAPf,mBAAoB,CACpB,YAAa,CACb,8CAAuC,CACvC,qDAAuD,CAYvD,wCAAiC,CADjC,uCAAkC,CATlC,iBAAkB,CAClB,4BAAqB,CAArB,oBAmBF,CAPE,qBACE,0CAEE,uDAA8C,CAD9C,4BAAqB,CAArB,oBAAqB,CAErB,yCACF,CACF,CAGF,0CAGE,wDAAiD,CAFjD,6BAQF,CAHE,8DACE,eACF,CAGF,kDAGE,wDAAiD,CAFjD,6BAGF,CAGA,0DAME,0BAA2B,CAL3B,aAAc,CAEd,gDAA6C,CAD7C,QAAS,CAGT,iBAAkB,CADlB,kBAGF,CAEA,0DAGE,kBAAmB,CADnB,kCAA2B,CAD3B,mBAAoB,CAGpB,0CACF,CAEA,6DAGE,kBAAmB,CADnB,YAAa,CADb,4CAGF,CAEA,0CAaE,4BAA6B,CAC7B,eAAgB,CANhB,+EAAmF,CAInF,UAAW,CAFX,UAAW,CACX,mBAAoB,CAVpB,iBAAkB,CAClB,SAAU,CAaV,6BAA+B,CAN/B,UAOF,CAEA,gLAEE,gDACF,CAEA,gJAGE,iGAMF,CAJE,8BALF,gJAOI,yBAEJ,CADE,CAGF,qCASE,0FAAsE,CAJtE,uDAA8C,CAC9C,+CAAwC,CAExC,kBAAmB,CAPnB,oBAAqB,CAErB,WAAY,CADZ,YAQF,CAEA,wDACE,GACE,SACF,CAEA,GACE,UACF,CACF","file":"UnderlineTabbedInterface-4197ee28.css","sourcesContent":[".UnderlineWrapper {\n display: flex;\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--stack-padding-normal);\n justify-content: flex-start;\n align-items: center;\n\n /* make space for the underline */\n min-height: var(--control-xlarge-size, 48px);\n\n /* using a box-shadow instead of a border to accommodate 'overflow-y: hidden' on UnderlinePanels */\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: inset 0 -1px var(--borderColor-muted);\n\n /* Hide overflow until calculation is complete to prevent CLS */\n overflow: visible;\n\n &[data-overflow-measured='false'] {\n overflow: hidden;\n }\n\n &[data-overflow-measured='true'] {\n overflow: visible;\n }\n\n &[data-variant='flush'] {\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: unset;\n }\n}\n\n.UnderlineItemList {\n position: relative;\n display: flex;\n padding: 0;\n margin: 0;\n white-space: nowrap;\n list-style: none;\n align-items: center;\n gap: 8px;\n}\n\n.UnderlineItem {\n /* underline tab specific styles */\n position: relative;\n display: inline-flex;\n font: inherit;\n font-size: var(--text-body-size-medium);\n line-height: var(--text-body-lineHeight-medium, 1.4285);\n color: var(--fgColor-default);\n text-align: center;\n text-decoration: none;\n cursor: pointer;\n background-color: transparent;\n border: 0;\n border-radius: var(--borderRadius-medium, var(--borderRadius-small));\n\n /* button resets */\n appearance: none;\n padding-inline: var(--base-size-8);\n padding-block: var(--base-size-6);\n align-items: center;\n\n @media (hover: hover) {\n &:hover {\n text-decoration: none;\n background-color: var(--bgColor-neutral-muted);\n transition: background-color 0.12s ease-out;\n }\n }\n}\n\n.UnderlineItem:focus {\n outline: 2px solid transparent;\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: inset 0 0 0 2px var(--fgColor-accent);\n\n /* where focus-visible is supported, remove the focus box-shadow */\n &:not(:focus-visible) {\n box-shadow: none;\n }\n}\n\n.UnderlineItem:focus-visible {\n outline: 2px solid transparent;\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: inset 0 0 0 2px var(--fgColor-accent);\n}\n\n/* renders a visibly hidden \"copy\" of the label in bold, reserving box space for when label becomes bold on selected */\n.UnderlineItem [data-content]::before {\n display: block;\n height: 0;\n font-weight: var(--base-text-weight-semibold);\n white-space: nowrap;\n visibility: hidden;\n content: attr(data-content);\n}\n\n.UnderlineItem [data-component='icon'] {\n display: inline-flex;\n color: var(--fgColor-muted);\n align-items: center;\n margin-inline-end: var(--base-size-8);\n}\n\n.UnderlineItem [data-component='counter'] {\n margin-inline-start: var(--base-size-8);\n display: flex;\n align-items: center;\n}\n\n.UnderlineItem::after {\n position: absolute;\n right: 50%;\n\n /* TODO: see if we can simplify this positioning */\n\n /* 48px total height / 2 (24px) + 1px */\n /* stylelint-disable-next-line primer/spacing */\n bottom: calc(50% - calc(var(--control-xlarge-size, var(--base-size-48)) / 2 + 1px));\n width: 100%;\n height: 2px;\n pointer-events: none;\n content: '';\n background-color: transparent;\n border-radius: 0;\n transform: translate(50%, -50%);\n}\n\n.UnderlineItem[aria-current]:not([aria-current='false']) [data-component='text'],\n.UnderlineItem[aria-selected='true'] [data-component='text'] {\n font-weight: var(--base-text-weight-semibold);\n}\n\n.UnderlineItem[aria-current]:not([aria-current='false'])::after,\n.UnderlineItem[aria-selected='true']::after {\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--underlineNav-borderColor-active, var(--color-primer-border-active, #fd8c73));\n\n @media (forced-colors: active) {\n /* Support for Window Force Color Mode https://learn.microsoft.com/en-us/fluent-ui/web-components/design-system/high-contrast */\n background-color: LinkText;\n }\n}\n\n.LoadingCounter {\n display: inline-block;\n width: 1.5rem;\n height: 1rem;\n /* 16px */\n background-color: var(--bgColor-neutral-muted);\n border-color: var(--borderColor-default);\n /* stylelint-disable-next-line primer/borders */\n border-radius: 20px;\n animation: loadingCounterKeyFrames 1.2s ease-in-out infinite alternate;\n}\n\n@keyframes loadingCounterKeyFrames {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0.2;\n }\n}\n"]}
|