@primer/react 38.0.0-rc.7 → 38.0.0-rc.8
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 +32 -0
- package/dist/ActionBar/ActionBar-3069d5f1.css +2 -0
- package/dist/ActionBar/ActionBar-3069d5f1.css.map +1 -0
- package/dist/ActionBar/ActionBar.d.ts +6 -0
- package/dist/ActionBar/ActionBar.d.ts.map +1 -1
- package/dist/ActionBar/ActionBar.js +155 -129
- package/dist/ActionBar/ActionBar.module.css.js +1 -1
- package/dist/AnchoredOverlay/AnchoredOverlay.d.ts +1 -1
- package/dist/AnchoredOverlay/AnchoredOverlay.d.ts.map +1 -1
- package/dist/Button/{ButtonBase-0a7871f4.css → ButtonBase-4c44bb02.css} +2 -2
- package/dist/Button/ButtonBase-4c44bb02.css.map +1 -0
- package/dist/Button/ButtonBase.module.css.js +1 -1
- package/dist/Checkbox/Checkbox-edc5dc3e.css +2 -0
- package/dist/Checkbox/{Checkbox-2aef6693.css.map → Checkbox-edc5dc3e.css.map} +1 -1
- package/dist/Checkbox/Checkbox.module.css.js +1 -1
- package/dist/ConfirmationDialog/ConfirmationDialog.d.ts.map +1 -1
- package/dist/ConfirmationDialog/ConfirmationDialog.js +8 -24
- package/dist/NavList/NavList.d.ts.map +1 -1
- package/dist/NavList/NavList.js +1 -1
- package/dist/Pagination/Pagination-16a5b4c6.css +2 -0
- package/dist/Pagination/Pagination-16a5b4c6.css.map +1 -0
- package/dist/Pagination/Pagination.d.ts.map +1 -1
- package/dist/Pagination/Pagination.js +16 -3
- package/dist/Pagination/Pagination.module.css.js +1 -1
- package/dist/ToggleSwitch/{ToggleSwitch-4b23d166.css → ToggleSwitch-d5c8dc81.css} +2 -2
- package/dist/ToggleSwitch/ToggleSwitch-d5c8dc81.css.map +1 -0
- package/dist/ToggleSwitch/ToggleSwitch.module.css.js +1 -1
- package/dist/Token/IssueLabelToken-a5fe569e.css +2 -0
- package/dist/Token/IssueLabelToken-a5fe569e.css.map +1 -0
- package/dist/Token/IssueLabelToken.d.ts.map +1 -1
- package/dist/Token/IssueLabelToken.js +0 -5
- package/dist/Token/IssueLabelToken.module.css.js +1 -1
- package/dist/Token/TokenBase-57c65c47.css +2 -0
- package/dist/Token/TokenBase-57c65c47.css.map +1 -0
- package/dist/Token/TokenBase.js +1 -7
- package/dist/Token/TokenBase.module.css.js +1 -1
- package/dist/Token/_RemoveTokenButton-c205593b.css +2 -0
- package/dist/Token/_RemoveTokenButton-c205593b.css.map +1 -0
- package/dist/Token/_RemoveTokenButton.d.ts.map +1 -1
- package/dist/Token/_RemoveTokenButton.js +3 -4
- package/dist/Token/_RemoveTokenButton.module.css.js +1 -1
- package/dist/experimental/IssueLabel/{IssueLabel-6581d1bd.css → IssueLabel-d9c2c5cf.css} +2 -2
- package/dist/experimental/IssueLabel/IssueLabel-d9c2c5cf.css.map +1 -0
- package/dist/experimental/IssueLabel/IssueLabel.d.ts.map +1 -1
- package/dist/experimental/IssueLabel/IssueLabel.js +52 -70
- package/dist/experimental/IssueLabel/IssueLabel.module.css.js +1 -1
- package/dist/experimental/IssueLabel/getColorFromHex.d.ts +1 -3
- package/dist/experimental/IssueLabel/getColorFromHex.d.ts.map +1 -1
- package/dist/experimental/IssueLabel/getColorFromHex.js +58 -26
- package/dist/index.d.ts +0 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +0 -1
- package/generated/components.json +89 -1
- package/package.json +6 -6
- package/dist/ActionBar/ActionBar-e6a5d54e.css +0 -2
- package/dist/ActionBar/ActionBar-e6a5d54e.css.map +0 -1
- package/dist/Box/Box.js +0 -15
- package/dist/Button/ButtonBase-0a7871f4.css.map +0 -1
- package/dist/Checkbox/Checkbox-2aef6693.css +0 -2
- package/dist/Pagination/Pagination-1845feaa.css +0 -2
- package/dist/Pagination/Pagination-1845feaa.css.map +0 -1
- package/dist/ToggleSwitch/ToggleSwitch-4b23d166.css.map +0 -1
- package/dist/Token/IssueLabelToken-0dbbbcdf.css +0 -2
- package/dist/Token/IssueLabelToken-0dbbbcdf.css.map +0 -1
- package/dist/Token/TokenBase-0386597b.css +0 -2
- package/dist/Token/TokenBase-0386597b.css.map +0 -1
- package/dist/Token/_RemoveTokenButton-d7f5985b.css +0 -2
- package/dist/Token/_RemoveTokenButton-d7f5985b.css.map +0 -1
- package/dist/experimental/IssueLabel/IssueLabel-6581d1bd.css.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/experimental/IssueLabel/IssueLabel.module.css","../../../postcss-preset-primer/src/mixins/focusOutline.css"],"names":[],"mappings":"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","file":"IssueLabel-d9c2c5cf.css","sourcesContent":["@layer primer.components.IssueLabel {\n .IssueLabel {\n display: inline-flex;\n min-height: var(--base-size-20);\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-semibold);\n line-height: var(--text-body-lineHeight-small);\n /* stylelint-disable-next-line primer/colors */\n color: var(--label-fgColor);\n white-space: nowrap;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--label-bgColor-rest);\n border: 0;\n border-radius: var(--borderRadius-full);\n\n /* use color var for box-shadow (border) in future for high contrast themes */\n box-shadow: var(--boxShadow-thin) transparent;\n align-items: center;\n padding-inline: var(--base-size-8);\n padding-block: 0;\n\n &:where(button, a) {\n text-decoration: none;\n\n &:hover {\n /* stylelint-disable-next-line primer/colors */\n color: var(--label-fgColor-hover);\n cursor: pointer;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--label-bgColor-hover);\n }\n\n &:active {\n /* stylelint-disable-next-line primer/colors */\n color: var(--label-fgColor-active);\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--label-bgColor-active);\n }\n\n &:focus-visible {\n @mixin focusOutline 2px;\n }\n }\n\n &[data-variant='pink'] {\n --label-bgColor-rest: var(--label-pink-bgColor-rest);\n --label-bgColor-hover: var(--label-pink-bgColor-hover);\n --label-bgColor-active: var(--label-pink-bgColor-active);\n --label-fgColor: var(--label-pink-fgColor-rest);\n --label-fgColor-hover: var(--label-pink-fgColor-hover);\n --label-fgColor-active: var(--label-pink-fgColor-active);\n }\n\n &[data-variant='plum'] {\n --label-bgColor-rest: var(--label-plum-bgColor-rest);\n --label-bgColor-hover: var(--label-plum-bgColor-hover);\n --label-bgColor-active: var(--label-plum-bgColor-active);\n --label-fgColor: var(--label-plum-fgColor-rest);\n --label-fgColor-hover: var(--label-plum-fgColor-hover);\n --label-fgColor-active: var(--label-plum-fgColor-active);\n }\n\n &[data-variant='purple'] {\n --label-bgColor-rest: var(--label-purple-bgColor-rest);\n --label-bgColor-hover: var(--label-purple-bgColor-hover);\n --label-bgColor-active: var(--label-purple-bgColor-active);\n --label-fgColor: var(--label-purple-fgColor-rest);\n --label-fgColor-hover: var(--label-purple-fgColor-hover);\n --label-fgColor-active: var(--label-purple-fgColor-active);\n }\n\n &[data-variant='indigo'] {\n --label-bgColor-rest: var(--label-indigo-bgColor-rest);\n --label-bgColor-hover: var(--label-indigo-bgColor-hover);\n --label-bgColor-active: var(--label-indigo-bgColor-active);\n --label-fgColor: var(--label-indigo-fgColor-rest);\n --label-fgColor-hover: var(--label-indigo-fgColor-hover);\n --label-fgColor-active: var(--label-indigo-fgColor-active);\n }\n\n &[data-variant='blue'] {\n --label-bgColor-rest: var(--label-blue-bgColor-rest);\n --label-bgColor-hover: var(--label-blue-bgColor-hover);\n --label-bgColor-active: var(--label-blue-bgColor-active);\n --label-fgColor: var(--label-blue-fgColor-rest);\n --label-fgColor-hover: var(--label-blue-fgColor-hover);\n --label-fgColor-active: var(--label-blue-fgColor-active);\n }\n\n &[data-variant='cyan'] {\n --label-bgColor-rest: var(--label-cyan-bgColor-rest);\n --label-bgColor-hover: var(--label-cyan-bgColor-hover);\n --label-bgColor-active: var(--label-cyan-bgColor-active);\n --label-fgColor: var(--label-cyan-fgColor-rest);\n --label-fgColor-hover: var(--label-cyan-fgColor-hover);\n --label-fgColor-active: var(--label-cyan-fgColor-active);\n }\n\n &[data-variant='teal'] {\n --label-bgColor-rest: var(--label-teal-bgColor-rest);\n --label-bgColor-hover: var(--label-teal-bgColor-hover);\n --label-bgColor-active: var(--label-teal-bgColor-active);\n --label-fgColor: var(--label-teal-fgColor-rest);\n --label-fgColor-hover: var(--label-teal-fgColor-hover);\n --label-fgColor-active: var(--label-teal-fgColor-active);\n }\n\n &[data-variant='pine'] {\n --label-bgColor-rest: var(--label-pine-bgColor-rest);\n --label-bgColor-hover: var(--label-pine-bgColor-hover);\n --label-bgColor-active: var(--label-pine-bgColor-active);\n --label-fgColor: var(--label-pine-fgColor-rest);\n --label-fgColor-hover: var(--label-pine-fgColor-hover);\n --label-fgColor-active: var(--label-pine-fgColor-active);\n }\n\n &[data-variant='green'] {\n --label-bgColor-rest: var(--label-green-bgColor-rest);\n --label-bgColor-hover: var(--label-green-bgColor-hover);\n --label-bgColor-active: var(--label-green-bgColor-active);\n --label-fgColor: var(--label-green-fgColor-rest);\n --label-fgColor-hover: var(--label-green-fgColor-hover);\n --label-fgColor-active: var(--label-green-fgColor-active);\n }\n\n &[data-variant='lime'] {\n --label-bgColor-rest: var(--label-lime-bgColor-rest);\n --label-bgColor-hover: var(--label-lime-bgColor-hover);\n --label-bgColor-active: var(--label-lime-bgColor-active);\n --label-fgColor: var(--label-lime-fgColor-rest);\n --label-fgColor-hover: var(--label-lime-fgColor-hover);\n --label-fgColor-active: var(--label-lime-fgColor-active);\n }\n\n &[data-variant='olive'] {\n --label-bgColor-rest: var(--label-olive-bgColor-rest);\n --label-bgColor-hover: var(--label-olive-bgColor-hover);\n --label-bgColor-active: var(--label-olive-bgColor-active);\n --label-fgColor: var(--label-olive-fgColor-rest);\n --label-fgColor-hover: var(--label-olive-fgColor-hover);\n --label-fgColor-active: var(--label-olive-fgColor-active);\n }\n\n &[data-variant='lemon'] {\n --label-bgColor-rest: var(--label-lemon-bgColor-rest);\n --label-bgColor-hover: var(--label-lemon-bgColor-hover);\n --label-bgColor-active: var(--label-lemon-bgColor-active);\n --label-fgColor: var(--label-lemon-fgColor-rest);\n --label-fgColor-hover: var(--label-lemon-fgColor-hover);\n --label-fgColor-active: var(--label-lemon-fgColor-active);\n }\n\n &[data-variant='yellow'] {\n --label-bgColor-rest: var(--label-yellow-bgColor-rest);\n --label-bgColor-hover: var(--label-yellow-bgColor-hover);\n --label-bgColor-active: var(--label-yellow-bgColor-active);\n --label-fgColor: var(--label-yellow-fgColor-rest);\n --label-fgColor-hover: var(--label-yellow-fgColor-hover);\n --label-fgColor-active: var(--label-yellow-fgColor-active);\n }\n\n &[data-variant='orange'] {\n --label-bgColor-rest: var(--label-orange-bgColor-rest);\n --label-bgColor-hover: var(--label-orange-bgColor-hover);\n --label-bgColor-active: var(--label-orange-bgColor-active);\n --label-fgColor: var(--label-orange-fgColor-rest);\n --label-fgColor-hover: var(--label-orange-fgColor-hover);\n --label-fgColor-active: var(--label-orange-fgColor-active);\n }\n\n &[data-variant='red'] {\n --label-bgColor-rest: var(--label-red-bgColor-rest);\n --label-bgColor-hover: var(--label-red-bgColor-hover);\n --label-bgColor-active: var(--label-red-bgColor-active);\n --label-fgColor: var(--label-red-fgColor-rest);\n --label-fgColor-hover: var(--label-red-fgColor-hover);\n --label-fgColor-active: var(--label-red-fgColor-active);\n }\n\n &[data-variant='coral'] {\n --label-bgColor-rest: var(--label-coral-bgColor-rest);\n --label-bgColor-hover: var(--label-coral-bgColor-hover);\n --label-bgColor-active: var(--label-coral-bgColor-active);\n --label-fgColor: var(--label-coral-fgColor-rest);\n --label-fgColor-hover: var(--label-coral-fgColor-hover);\n --label-fgColor-active: var(--label-coral-fgColor-active);\n }\n\n &[data-variant='gray'] {\n --label-bgColor-rest: var(--label-gray-bgColor-rest);\n --label-bgColor-hover: var(--label-gray-bgColor-hover);\n --label-bgColor-active: var(--label-gray-bgColor-active);\n --label-fgColor: var(--label-gray-fgColor-rest);\n --label-fgColor-hover: var(--label-gray-fgColor-hover);\n --label-fgColor-active: var(--label-gray-fgColor-active);\n }\n\n &[data-variant='brown'] {\n --label-bgColor-rest: var(--label-brown-bgColor-rest);\n --label-bgColor-hover: var(--label-brown-bgColor-hover);\n --label-bgColor-active: var(--label-brown-bgColor-active);\n --label-fgColor: var(--label-brown-fgColor-rest);\n --label-fgColor-hover: var(--label-brown-fgColor-hover);\n --label-fgColor-active: var(--label-brown-fgColor-active);\n }\n\n &[data-variant='auburn'] {\n --label-bgColor-rest: var(--label-auburn-bgColor-rest);\n --label-bgColor-hover: var(--label-auburn-bgColor-hover);\n --label-bgColor-active: var(--label-auburn-bgColor-active);\n --label-fgColor: var(--label-auburn-fgColor-rest);\n --label-fgColor-hover: var(--label-auburn-fgColor-hover);\n --label-fgColor-active: var(--label-auburn-fgColor-active);\n }\n }\n\n [data-color-mode='dark'] .IssueLabel:not([data-variant]) {\n --label-bgColor-rest: var(--label-bgColor-dark-rest);\n --label-bgColor-hover: var(--label-bgColor-dark-hover);\n --label-bgColor-active: var(--label-bgColor-dark-active);\n --label-fgColor: var(--label-fgColor-dark);\n --label-fgColor-hover: var(--label-fgColor-dark-hover);\n --label-fgColor-active: var(--label-fgColor-dark-active);\n }\n\n [data-color-mode='light'] .IssueLabel:not([data-variant]) {\n --label-bgColor-rest: var(--label-bgColor-light-rest);\n --label-bgColor-hover: var(--label-bgColor-light-hover);\n --label-bgColor-active: var(--label-bgColor-light-active);\n --label-fgColor: var(--label-fgColor-light);\n --label-fgColor-hover: var(--label-fgColor-light-hover);\n --label-fgColor-active: var(--label-fgColor-light-active);\n }\n\n @media (prefers-color-scheme: light) {\n [data-color-mode='auto'][data-light-theme*='light'] .IssueLabel:not([data-variant]) {\n --label-bgColor-rest: var(--label-bgColor-light-rest);\n --label-bgColor-hover: var(--label-bgColor-light-hover);\n --label-bgColor-active: var(--label-bgColor-light-active);\n --label-fgColor: var(--label-fgColor-light);\n --label-fgColor-hover: var(--label-fgColor-light-hover);\n --label-fgColor-active: var(--label-fgColor-light-active);\n }\n\n [data-color-mode='auto'][data-light-theme*='dark'] .IssueLabel:not([data-variant]) {\n --label-bgColor-rest: var(--label-bgColor-dark-rest);\n --label-bgColor-hover: var(--label-bgColor-dark-hover);\n --label-bgColor-active: var(--label-bgColor-dark-active);\n --label-fgColor: var(--label-fgColor-dark);\n --label-fgColor-hover: var(--label-fgColor-dark-hover);\n --label-fgColor-active: var(--label-fgColor-dark-active);\n }\n }\n\n @media (prefers-color-scheme: dark) {\n [data-color-mode='auto'][data-dark-theme*='light'] .IssueLabel:not([data-variant]) {\n --label-bgColor-rest: var(--label-bgColor-light-rest);\n --label-bgColor-hover: var(--label-bgColor-light-hover);\n --label-bgColor-active: var(--label-bgColor-light-active);\n --label-fgColor: var(--label-fgColor-light);\n --label-fgColor-hover: var(--label-fgColor-light-hover);\n --label-fgColor-active: var(--label-fgColor-light-active);\n }\n\n [data-color-mode='auto'][data-dark-theme*='dark'] .IssueLabel:not([data-variant]) {\n --label-bgColor-rest: var(--label-bgColor-dark-rest);\n --label-bgColor-hover: var(--label-bgColor-dark-hover);\n --label-bgColor-active: var(--label-bgColor-dark-active);\n --label-fgColor: var(--label-fgColor-dark);\n --label-fgColor-hover: var(--label-fgColor-dark-hover);\n --label-fgColor-active: var(--label-fgColor-dark-active);\n }\n }\n}\n","@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: none;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IssueLabel.d.ts","sourceRoot":"","sources":["../../../src/experimental/IssueLabel/IssueLabel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"IssueLabel.d.ts","sourceRoot":"","sources":["../../../src/experimental/IssueLabel/IssueLabel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,KAAK,GAAG,GAAG,IAAI,MAAM,EAAE,CAAA;AAEvB,KAAK,iBAAiB,GAClB,QAAQ,GACR,MAAM,GACN,OAAO,GACP,OAAO,GACP,MAAM,GACN,MAAM,GACN,OAAO,GACP,QAAQ,GACR,OAAO,GACP,MAAM,GACN,OAAO,GACP,QAAQ,GACR,MAAM,GACN,MAAM,GACN,MAAM,GACN,QAAQ,GACR,KAAK,GACL,MAAM,GACN,QAAQ,CAAA;AAEZ,KAAK,SAAS,GAAG;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,GAAG,CAAA;IACf,OAAO,CAAC,EAAE,iBAAiB,CAAA;CAC5B,CAAA;AAED,KAAK,WAAW,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GACzD,SAAS,GAAG;IACV,EAAE,CAAC,EAAE,KAAK,CAAA;IACV,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAA;CACpD,CAAA;AAEH,KAAK,SAAS,GAAG,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,GAClD,SAAS,GAAG;IACV,EAAE,CAAC,EAAE,KAAK,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAEH,KAAK,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC,GACtE,SAAS,GAAG;IACV,EAAE,CAAC,EAAE,KAAK,CAAA;IACV,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,IAAI,CAAC,EAAE,KAAK,CAAA;CACb,CAAA;AAEH,KAAK,iBAAiB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI;IACrD,EAAE,EAAE,EAAE,CAAA;CACP,GAAG,SAAS,GACX,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,EAAE,CAAC,EAAE,MAAM,SAAS,CAAC,CAAA;AAE3D,KAAK,eAAe,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,iBAAiB,CAAC,EAAE,CAAC,CAAA;AAEhH,iBAAS,UAAU,CAAC,KAAK,EAAE,SAAS,GAAG,KAAK,CAAC,SAAS,CAAA;AACtD,iBAAS,UAAU,CAAC,KAAK,EAAE,SAAS,GAAG,KAAK,CAAC,SAAS,CAAA;AACtD,iBAAS,UAAU,CAAC,KAAK,EAAE,WAAW,GAAG,KAAK,CAAC,SAAS,CAAA;AACxD,iBAAS,UAAU,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,EAAE,KAAK,EAAE,iBAAiB,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,SAAS,CAAA;AA+ChG,OAAO,EAAC,UAAU,EAAC,CAAA;AACnB,YAAY,EAAC,eAAe,EAAE,GAAG,EAAC,CAAA"}
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import { c } from 'react-compiler-runtime';
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
|
-
import { useTheme } from '../../ThemeProvider.js';
|
|
4
3
|
import { getColorsFromHex } from './getColorFromHex.js';
|
|
5
4
|
import classes from './IssueLabel.module.css.js';
|
|
6
5
|
import { jsx } from 'react/jsx-runtime';
|
|
7
6
|
|
|
8
7
|
function IssueLabel(t0) {
|
|
9
|
-
const $ = c(
|
|
8
|
+
const $ = c(36);
|
|
10
9
|
let children;
|
|
11
10
|
let className;
|
|
12
11
|
let fillColor;
|
|
@@ -38,139 +37,122 @@ function IssueLabel(t0) {
|
|
|
38
37
|
t1 = $[6];
|
|
39
38
|
}
|
|
40
39
|
const variant = t1 === undefined ? "gray" : t1;
|
|
41
|
-
const {
|
|
42
|
-
resolvedColorScheme
|
|
43
|
-
} = useTheme();
|
|
44
|
-
const mode = resolvedColorScheme !== null && resolvedColorScheme !== void 0 && resolvedColorScheme.startsWith("dark") ? "dark" : "light";
|
|
45
40
|
let t2;
|
|
46
|
-
|
|
41
|
+
if ($[7] !== className) {
|
|
42
|
+
t2 = clsx(className, classes.IssueLabel);
|
|
43
|
+
$[7] = className;
|
|
44
|
+
$[8] = t2;
|
|
45
|
+
} else {
|
|
46
|
+
t2 = $[8];
|
|
47
|
+
}
|
|
48
|
+
const t3 = fillColor ? undefined : variant;
|
|
47
49
|
let t4;
|
|
48
|
-
if ($[
|
|
49
|
-
const bgColors = {
|
|
50
|
-
light: "#ffffff",
|
|
51
|
-
dark: "#0d1117"
|
|
52
|
-
};
|
|
53
|
-
if ($[16] !== className) {
|
|
54
|
-
t2 = clsx(className, classes.IssueLabel);
|
|
55
|
-
$[16] = className;
|
|
56
|
-
$[17] = t2;
|
|
57
|
-
} else {
|
|
58
|
-
t2 = $[17];
|
|
59
|
-
}
|
|
60
|
-
t3 = fillColor ? undefined : variant;
|
|
50
|
+
if ($[9] !== fillColor || $[10] !== style) {
|
|
61
51
|
t4 = fillColor ? {
|
|
62
52
|
...style,
|
|
63
|
-
...getColorsFromHex(fillColor
|
|
53
|
+
...getColorsFromHex(fillColor)
|
|
64
54
|
} : style;
|
|
65
|
-
$[
|
|
66
|
-
$[
|
|
67
|
-
$[
|
|
68
|
-
$[10] = resolvedColorScheme;
|
|
69
|
-
$[11] = style;
|
|
70
|
-
$[12] = variant;
|
|
71
|
-
$[13] = t2;
|
|
72
|
-
$[14] = t3;
|
|
73
|
-
$[15] = t4;
|
|
55
|
+
$[9] = fillColor;
|
|
56
|
+
$[10] = style;
|
|
57
|
+
$[11] = t4;
|
|
74
58
|
} else {
|
|
75
|
-
|
|
76
|
-
t3 = $[14];
|
|
77
|
-
t4 = $[15];
|
|
59
|
+
t4 = $[11];
|
|
78
60
|
}
|
|
79
61
|
let t5;
|
|
80
|
-
if ($[
|
|
62
|
+
if ($[12] !== t2 || $[13] !== t3 || $[14] !== t4) {
|
|
81
63
|
t5 = {
|
|
82
64
|
className: t2,
|
|
83
65
|
"data-variant": t3,
|
|
84
66
|
style: t4
|
|
85
67
|
};
|
|
86
|
-
$[
|
|
87
|
-
$[
|
|
88
|
-
$[
|
|
89
|
-
$[
|
|
68
|
+
$[12] = t2;
|
|
69
|
+
$[13] = t3;
|
|
70
|
+
$[14] = t4;
|
|
71
|
+
$[15] = t5;
|
|
90
72
|
} else {
|
|
91
|
-
t5 = $[
|
|
73
|
+
t5 = $[15];
|
|
92
74
|
}
|
|
93
75
|
const sharedProps = t5;
|
|
94
76
|
if ("as" in props && props.as) {
|
|
95
77
|
let BaseComponent;
|
|
96
78
|
let rest;
|
|
97
|
-
if ($[
|
|
79
|
+
if ($[16] !== props) {
|
|
98
80
|
({
|
|
99
81
|
as: BaseComponent,
|
|
100
82
|
...rest
|
|
101
83
|
} = props);
|
|
102
|
-
$[
|
|
103
|
-
$[
|
|
104
|
-
$[
|
|
84
|
+
$[16] = props;
|
|
85
|
+
$[17] = BaseComponent;
|
|
86
|
+
$[18] = rest;
|
|
105
87
|
} else {
|
|
106
|
-
BaseComponent = $[
|
|
107
|
-
rest = $[
|
|
88
|
+
BaseComponent = $[17];
|
|
89
|
+
rest = $[18];
|
|
108
90
|
}
|
|
109
91
|
let t6;
|
|
110
|
-
if ($[
|
|
92
|
+
if ($[19] !== BaseComponent || $[20] !== children || $[21] !== rest || $[22] !== sharedProps) {
|
|
111
93
|
t6 = /*#__PURE__*/jsx(BaseComponent, {
|
|
112
94
|
...rest,
|
|
113
95
|
...sharedProps,
|
|
114
96
|
children: children
|
|
115
97
|
});
|
|
116
|
-
$[
|
|
117
|
-
$[
|
|
118
|
-
$[
|
|
119
|
-
$[
|
|
120
|
-
$[
|
|
98
|
+
$[19] = BaseComponent;
|
|
99
|
+
$[20] = children;
|
|
100
|
+
$[21] = rest;
|
|
101
|
+
$[22] = sharedProps;
|
|
102
|
+
$[23] = t6;
|
|
121
103
|
} else {
|
|
122
|
-
t6 = $[
|
|
104
|
+
t6 = $[23];
|
|
123
105
|
}
|
|
124
106
|
return t6;
|
|
125
107
|
}
|
|
126
108
|
if ("href" in props) {
|
|
127
109
|
let t6;
|
|
128
|
-
if ($[
|
|
110
|
+
if ($[24] !== children || $[25] !== props || $[26] !== sharedProps) {
|
|
129
111
|
t6 = /*#__PURE__*/jsx("a", {
|
|
130
112
|
...props,
|
|
131
113
|
...sharedProps,
|
|
132
114
|
children: children
|
|
133
115
|
});
|
|
134
|
-
$[
|
|
135
|
-
$[
|
|
136
|
-
$[
|
|
137
|
-
$[
|
|
116
|
+
$[24] = children;
|
|
117
|
+
$[25] = props;
|
|
118
|
+
$[26] = sharedProps;
|
|
119
|
+
$[27] = t6;
|
|
138
120
|
} else {
|
|
139
|
-
t6 = $[
|
|
121
|
+
t6 = $[27];
|
|
140
122
|
}
|
|
141
123
|
return t6;
|
|
142
124
|
}
|
|
143
125
|
if ("onClick" in props) {
|
|
144
126
|
let t6;
|
|
145
|
-
if ($[
|
|
127
|
+
if ($[28] !== children || $[29] !== props || $[30] !== sharedProps) {
|
|
146
128
|
t6 = /*#__PURE__*/jsx("button", {
|
|
147
129
|
type: "button",
|
|
148
130
|
...props,
|
|
149
131
|
...sharedProps,
|
|
150
132
|
children: children
|
|
151
133
|
});
|
|
152
|
-
$[
|
|
153
|
-
$[
|
|
154
|
-
$[
|
|
155
|
-
$[
|
|
134
|
+
$[28] = children;
|
|
135
|
+
$[29] = props;
|
|
136
|
+
$[30] = sharedProps;
|
|
137
|
+
$[31] = t6;
|
|
156
138
|
} else {
|
|
157
|
-
t6 = $[
|
|
139
|
+
t6 = $[31];
|
|
158
140
|
}
|
|
159
141
|
return t6;
|
|
160
142
|
}
|
|
161
143
|
let t6;
|
|
162
|
-
if ($[
|
|
144
|
+
if ($[32] !== children || $[33] !== props || $[34] !== sharedProps) {
|
|
163
145
|
t6 = /*#__PURE__*/jsx("span", {
|
|
164
146
|
...props,
|
|
165
147
|
...sharedProps,
|
|
166
148
|
children: children
|
|
167
149
|
});
|
|
168
|
-
$[
|
|
169
|
-
$[
|
|
170
|
-
$[
|
|
171
|
-
$[
|
|
150
|
+
$[32] = children;
|
|
151
|
+
$[33] = props;
|
|
152
|
+
$[34] = sharedProps;
|
|
153
|
+
$[35] = t6;
|
|
172
154
|
} else {
|
|
173
|
-
t6 = $[
|
|
155
|
+
t6 = $[35];
|
|
174
156
|
}
|
|
175
157
|
return t6;
|
|
176
158
|
}
|
|
@@ -2,9 +2,7 @@ import type { Hex } from './IssueLabel';
|
|
|
2
2
|
/**
|
|
3
3
|
* transforms a hex color provided by the user into a color object with background and text colors
|
|
4
4
|
* @param colorHex — the hex color provided by the user
|
|
5
|
-
* @param colorScheme — the color scheme the user has currently set
|
|
6
|
-
* @param bgColor — the background color from the selected theme, needed to calc the contrast for the colors
|
|
7
5
|
* @returns
|
|
8
6
|
*/
|
|
9
|
-
export declare const getColorsFromHex: (colorHex: Hex
|
|
7
|
+
export declare const getColorsFromHex: (colorHex: Hex) => React.CSSProperties | undefined;
|
|
10
8
|
//# sourceMappingURL=getColorFromHex.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getColorFromHex.d.ts","sourceRoot":"","sources":["../../../src/experimental/IssueLabel/getColorFromHex.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,cAAc,CAAA;AAErC
|
|
1
|
+
{"version":3,"file":"getColorFromHex.d.ts","sourceRoot":"","sources":["../../../src/experimental/IssueLabel/getColorFromHex.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,cAAc,CAAA;AAErC;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,UAAU,GAAG,KAAG,KAAK,CAAC,aAAa,GAAG,SA+EtE,CAAA"}
|
|
@@ -4,21 +4,16 @@ import { Hsluv } from 'hsluv';
|
|
|
4
4
|
/**
|
|
5
5
|
* transforms a hex color provided by the user into a color object with background and text colors
|
|
6
6
|
* @param colorHex — the hex color provided by the user
|
|
7
|
-
* @param colorScheme — the color scheme the user has currently set
|
|
8
|
-
* @param bgColor — the background color from the selected theme, needed to calc the contrast for the colors
|
|
9
7
|
* @returns
|
|
10
8
|
*/
|
|
11
|
-
const getColorsFromHex =
|
|
9
|
+
const getColorsFromHex = colorHex => {
|
|
12
10
|
// start values for light mode
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
lightnessIncrement = 1;
|
|
20
|
-
ratio = 5.5;
|
|
21
|
-
}
|
|
11
|
+
const lightBgLightness = 96;
|
|
12
|
+
const lightLightnessIncrement = -1;
|
|
13
|
+
const lightRatio = 4.5;
|
|
14
|
+
const darkBgLightness = 16;
|
|
15
|
+
const darkLightnessIncrement = 1;
|
|
16
|
+
const darkRatio = 5.5;
|
|
22
17
|
|
|
23
18
|
// get hue and saturation value from hex color
|
|
24
19
|
// eslint-disable-next-line prefer-const
|
|
@@ -41,13 +36,29 @@ const getColorsFromHex = (colorHex, colorScheme = 'light', bgColor) => {
|
|
|
41
36
|
* creating a background color from the provided hex color
|
|
42
37
|
*/
|
|
43
38
|
const {
|
|
44
|
-
colorHex:
|
|
45
|
-
lightness:
|
|
39
|
+
colorHex: darkBackgroundColor,
|
|
40
|
+
lightness: darkCurrentBgLightness
|
|
41
|
+
} = getColorWithContrast(hsluvToHex({
|
|
42
|
+
h,
|
|
43
|
+
s,
|
|
44
|
+
l: darkBgLightness
|
|
45
|
+
}), '#0d1117',
|
|
46
|
+
// dark mode background color
|
|
47
|
+
1.2, darkLightnessIncrement);
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* creating a background color from the provided hex color
|
|
51
|
+
*/
|
|
52
|
+
const {
|
|
53
|
+
colorHex: lightBackgroundColor,
|
|
54
|
+
lightness: lightCurrentBgLightness
|
|
46
55
|
} = getColorWithContrast(hsluvToHex({
|
|
47
56
|
h,
|
|
48
57
|
s,
|
|
49
|
-
l:
|
|
50
|
-
}),
|
|
58
|
+
l: lightBgLightness
|
|
59
|
+
}), '#ffffff',
|
|
60
|
+
// light mode background color
|
|
61
|
+
1.2, lightLightnessIncrement);
|
|
51
62
|
|
|
52
63
|
// avoid intense bright colors
|
|
53
64
|
if (h >= 58 && h <= 316 && s > 80) {
|
|
@@ -57,27 +68,48 @@ const getColorsFromHex = (colorHex, colorScheme = 'light', bgColor) => {
|
|
|
57
68
|
* creating a text color from with a contrast ratio of at least 4.5 to the generated background color
|
|
58
69
|
*/
|
|
59
70
|
const {
|
|
60
|
-
colorHex:
|
|
71
|
+
colorHex: darkTextColor
|
|
72
|
+
} = getColorWithContrast(hsluvToHex({
|
|
73
|
+
h,
|
|
74
|
+
s,
|
|
75
|
+
l: 50
|
|
76
|
+
}), darkBackgroundColor, darkRatio, darkLightnessIncrement);
|
|
77
|
+
const {
|
|
78
|
+
colorHex: lightTextColor
|
|
61
79
|
} = getColorWithContrast(hsluvToHex({
|
|
62
80
|
h,
|
|
63
81
|
s,
|
|
64
82
|
l: 50
|
|
65
|
-
}),
|
|
83
|
+
}), lightBackgroundColor, lightRatio, lightLightnessIncrement);
|
|
66
84
|
return {
|
|
67
|
-
'--label-bgColor-rest':
|
|
68
|
-
'--label-bgColor-hover': hsluvToHex({
|
|
85
|
+
'--label-bgColor-light-rest': lightBackgroundColor,
|
|
86
|
+
'--label-bgColor-light-hover': hsluvToHex({
|
|
87
|
+
h,
|
|
88
|
+
s,
|
|
89
|
+
l: lightCurrentBgLightness + 4 * lightLightnessIncrement
|
|
90
|
+
}),
|
|
91
|
+
'--label-bgColor-light-active': hsluvToHex({
|
|
92
|
+
h,
|
|
93
|
+
s,
|
|
94
|
+
l: lightCurrentBgLightness + 8 * lightLightnessIncrement
|
|
95
|
+
}),
|
|
96
|
+
'--label-fgColor-light': lightTextColor,
|
|
97
|
+
'--label-fgColor-light-hover': lightTextColor,
|
|
98
|
+
'--label-fgColor-light-active': lightTextColor,
|
|
99
|
+
'--label-bgColor-dark-rest': darkBackgroundColor,
|
|
100
|
+
'--label-bgColor-dark-hover': hsluvToHex({
|
|
69
101
|
h,
|
|
70
102
|
s,
|
|
71
|
-
l:
|
|
103
|
+
l: darkCurrentBgLightness + 4 * darkLightnessIncrement
|
|
72
104
|
}),
|
|
73
|
-
'--label-bgColor-active': hsluvToHex({
|
|
105
|
+
'--label-bgColor-dark-active': hsluvToHex({
|
|
74
106
|
h,
|
|
75
107
|
s,
|
|
76
|
-
l:
|
|
108
|
+
l: darkCurrentBgLightness + 8 * darkLightnessIncrement
|
|
77
109
|
}),
|
|
78
|
-
'--label-fgColor':
|
|
79
|
-
'--label-fgColor-hover':
|
|
80
|
-
'--label-fgColor-active':
|
|
110
|
+
'--label-fgColor-dark': darkTextColor,
|
|
111
|
+
'--label-fgColor-dark-hover': darkTextColor,
|
|
112
|
+
'--label-fgColor-dark-active': darkTextColor
|
|
81
113
|
};
|
|
82
114
|
};
|
|
83
115
|
/**
|
package/dist/index.d.ts
CHANGED
|
@@ -4,8 +4,6 @@ export { default as BaseStyles } from './BaseStyles';
|
|
|
4
4
|
export type { BaseStylesProps } from './BaseStyles';
|
|
5
5
|
export { default as ThemeProvider, useTheme, useColorSchemeVar } from './ThemeProvider';
|
|
6
6
|
export type { ThemeProviderProps } from './ThemeProvider';
|
|
7
|
-
export { default as Box } from './Box';
|
|
8
|
-
export type { BoxProps } from './Box';
|
|
9
7
|
export * from './Button';
|
|
10
8
|
export { PageLayout } from './PageLayout';
|
|
11
9
|
export type { PageLayoutProps, PageLayoutHeaderProps, PageLayoutContentProps, PageLayoutPaneProps, PageLayoutFooterProps, } from './PageLayout';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,OAAO,IAAI,KAAK,EAAC,MAAM,SAAS,CAAA;AACxC,OAAO,EAAC,GAAG,IAAI,QAAQ,EAAC,MAAM,aAAa,CAAA;AAC3C,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,MAAM,cAAc,CAAA;AAClD,YAAY,EAAC,eAAe,EAAC,MAAM,cAAc,CAAA;AACjD,OAAO,EAAC,OAAO,IAAI,aAAa,EAAE,QAAQ,EAAE,iBAAiB,EAAC,MAAM,iBAAiB,CAAA;AACrF,YAAY,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAA;AAGvD,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,OAAO,IAAI,KAAK,EAAC,MAAM,SAAS,CAAA;AACxC,OAAO,EAAC,GAAG,IAAI,QAAQ,EAAC,MAAM,aAAa,CAAA;AAC3C,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,MAAM,cAAc,CAAA;AAClD,YAAY,EAAC,eAAe,EAAC,MAAM,cAAc,CAAA;AACjD,OAAO,EAAC,OAAO,IAAI,aAAa,EAAE,QAAQ,EAAE,iBAAiB,EAAC,MAAM,iBAAiB,CAAA;AACrF,YAAY,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAA;AAGvD,cAAc,UAAU,CAAA;AACxB,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAA;AACvC,YAAY,EACV,eAAe,EACf,qBAAqB,EACrB,sBAAsB,EACtB,mBAAmB,EACnB,qBAAqB,GACtB,MAAM,cAAc,CAAA;AACrB,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAA;AACjD,YAAY,EACV,oBAAoB,EACpB,0BAA0B,EAC1B,2BAA2B,EAC3B,wBAAwB,EACxB,0BAA0B,GAC3B,MAAM,mBAAmB,CAAA;AAG1B,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,MAAM,oBAAoB,CAAA;AACxD,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,wBAAwB,CAAA;AAChE,OAAO,EAAC,iBAAiB,EAAC,MAAM,2BAA2B,CAAA;AAC3D,YAAY,EAAC,iBAAiB,EAAC,MAAM,2BAA2B,CAAA;AAChE,OAAO,EAAC,oBAAoB,EAAC,MAAM,8BAA8B,CAAA;AACjE,OAAO,EAAC,gBAAgB,EAAC,MAAM,0BAA0B,CAAA;AACzD,OAAO,EAAC,UAAU,EAAC,MAAM,oBAAoB,CAAA;AAC7C,OAAO,EAAC,UAAU,EAAC,MAAM,yCAAyC,CAAA;AAClE,OAAO,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAA;AACjD,YAAY,EAAC,qBAAqB,EAAC,MAAM,sBAAsB,CAAA;AAC/D,OAAO,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAA;AACjD,YAAY,EAAC,qBAAqB,EAAC,MAAM,sBAAsB,CAAA;AAC/D,OAAO,EAAC,0BAA0B,EAAC,MAAM,oCAAoC,CAAA;AAC7E,OAAO,EAAC,iBAAiB,EAAC,MAAM,2BAA2B,CAAA;AAC3D,OAAO,EAAC,kBAAkB,EAAE,KAAK,eAAe,EAAC,MAAM,4BAA4B,CAAA;AACnF,OAAO,EAAC,OAAO,IAAI,yBAAyB,EAAC,MAAM,mCAAmC,CAAA;AACtF,OAAO,EAAC,sBAAsB,EAAC,MAAM,gCAAgC,CAAA;AACrE,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAA;AACnC,OAAO,EAAC,cAAc,EAAC,MAAM,wBAAwB,CAAA;AAGrD,OAAO,EAAC,eAAe,EAAC,MAAM,0BAA0B,CAAA;AACxD,YAAY,EAAC,UAAU,EAAC,MAAM,eAAe,CAAA;AAG7C,OAAO,EAAC,OAAO,IAAI,KAAK,EAAC,MAAM,SAAS,CAAA;AACxC,YAAY,EAAC,UAAU,EAAC,MAAM,SAAS,CAAA;AACvC,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAA;AACvC,YAAY,EACV,eAAe,EACf,oBAAoB,EACpB,mBAAmB,EACnB,uBAAuB,EACvB,sBAAsB,EACtB,0BAA0B,EAC1B,4BAA4B,EAC5B,6BAA6B,GAC9B,MAAM,cAAc,CAAA;AACrB,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAA;AACvC,YAAY,EAAC,eAAe,EAAE,qBAAqB,EAAE,qBAAqB,EAAC,MAAM,cAAc,CAAA;AAC/F,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAA;AACjD,YAAY,EAAC,oBAAoB,EAAC,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAC,OAAO,IAAI,YAAY,EAAC,MAAM,gBAAgB,CAAA;AACtD,YAAY,EAAC,qBAAqB,EAAE,sBAAsB,EAAE,wBAAwB,EAAC,MAAM,gBAAgB,CAAA;AAC3G,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,MAAM,UAAU,CAAA;AAC1C,YAAY,EAAC,WAAW,EAAC,MAAM,UAAU,CAAA;AACzC,OAAO,EAAC,OAAO,IAAI,WAAW,EAAC,MAAM,eAAe,CAAA;AACpD,YAAY,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAA;AACnD,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAA;AAC/B,YAAY,EAAC,WAAW,EAAC,MAAM,UAAU,CAAA;AAEzC,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,MAAM,cAAc,CAAA;AAClD,YAAY,EAAC,eAAe,EAAC,MAAM,cAAc,CAAA;AACjD,OAAO,EAAC,OAAO,IAAI,WAAW,EAAE,UAAU,EAAC,MAAM,eAAe,CAAA;AAChE,YAAY,EAAC,gBAAgB,EAAE,oBAAoB,EAAE,eAAe,EAAE,mBAAmB,EAAC,MAAM,eAAe,CAAA;AAC/G,OAAO,EAAC,OAAO,IAAI,WAAW,EAAC,MAAM,eAAe,CAAA;AACpD,YAAY,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAA;AACnD,YAAY,EAAC,gBAAgB,EAAE,oBAAoB,EAAC,MAAM,eAAe,CAAA;AACzE,OAAO,EAAC,OAAO,IAAI,aAAa,EAAC,MAAM,iBAAiB,CAAA;AACxD,YAAY,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAA;AACvD,OAAO,EAAC,OAAO,IAAI,WAAW,EAAC,MAAM,eAAe,CAAA;AACpD,OAAO,EAAC,OAAO,IAAI,YAAY,EAAC,MAAM,gBAAgB,CAAA;AACtD,YAAY,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAA;AACrD,OAAO,EAAC,OAAO,IAAI,OAAO,EAAC,MAAM,WAAW,CAAA;AAC5C,YAAY,EAAC,YAAY,EAAC,MAAM,WAAW,CAAA;AAC3C,OAAO,EAAC,MAAM,EAAC,MAAM,iBAAiB,CAAA;AACtC,YAAY,EAAC,WAAW,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,WAAW,EAAE,YAAY,EAAC,MAAM,iBAAiB,CAAA;AACjH,YAAY,EAAC,uBAAuB,EAAC,MAAM,yCAAyC,CAAA;AACpF,OAAO,EAAC,kBAAkB,EAAC,MAAM,yCAAyC,CAAA;AAC1E,OAAO,EAAC,OAAO,IAAI,KAAK,EAAC,MAAM,SAAS,CAAA;AACxC,YAAY,EAAC,UAAU,EAAC,MAAM,SAAS,CAAA;AACvC,OAAO,EAAC,OAAO,IAAI,WAAW,EAAC,MAAM,eAAe,CAAA;AACpD,YAAY,EACV,gBAAgB,EAChB,uBAAuB,EACvB,qBAAqB,EACrB,0BAA0B,GAC3B,MAAM,eAAe,CAAA;AACtB,OAAO,EAAC,4BAA4B,EAAC,MAAM,eAAe,CAAA;AAC1D,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,MAAM,UAAU,CAAA;AAC1C,YAAY,EAAC,WAAW,EAAE,eAAe,EAAE,eAAe,EAAC,MAAM,UAAU,CAAA;AAC3E,OAAO,EAAC,OAAO,IAAI,OAAO,EAAC,MAAM,WAAW,CAAA;AAC5C,YAAY,EAAC,YAAY,EAAC,MAAM,WAAW,CAAA;AAC3C,OAAO,EAAC,OAAO,IAAI,KAAK,EAAC,MAAM,SAAS,CAAA;AACxC,YAAY,EAAC,UAAU,EAAE,iBAAiB,EAAC,MAAM,SAAS,CAAA;AAC1D,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,MAAM,cAAc,CAAA;AAClD,YAAY,EAAC,eAAe,EAAC,MAAM,cAAc,CAAA;AACjD,OAAO,EAAC,OAAO,IAAI,IAAI,EAAC,MAAM,QAAQ,CAAA;AACtC,YAAY,EAAC,SAAS,EAAC,MAAM,QAAQ,CAAA;AACrC,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAA;AACjC,YAAY,EACV,YAAY,EACZ,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,yBAAyB,EACzB,0BAA0B,EAC1B,mBAAmB,EACnB,wBAAwB,GACzB,MAAM,WAAW,CAAA;AAClB,OAAO,EAAC,OAAO,IAAI,OAAO,EAAC,MAAM,WAAW,CAAA;AAC5C,YAAY,EAAC,YAAY,EAAC,MAAM,WAAW,CAAA;AAC3C,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,MAAM,cAAc,CAAA;AAClD,YAAY,EAAC,eAAe,EAAC,MAAM,cAAc,CAAA;AACjD,OAAO,EAAC,OAAO,IAAI,OAAO,EAAC,MAAM,WAAW,CAAA;AAC5C,YAAY,EAAC,YAAY,EAAE,mBAAmB,EAAC,MAAM,WAAW,CAAA;AAChE,OAAO,EAAC,OAAO,IAAI,MAAM,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,UAAU,CAAA;AAC7E,YAAY,EAAC,WAAW,EAAC,MAAM,UAAU,CAAA;AACzC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAA;AACzC,YAAY,EAAC,gBAAgB,EAAE,oBAAoB,EAAC,MAAM,eAAe,CAAA;AACzE,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,MAAM,cAAc,CAAA;AAClD,YAAY,EAAC,eAAe,EAAC,MAAM,cAAc,CAAA;AACjD,YAAY,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAA;AACrD,OAAO,EAAC,OAAO,IAAI,YAAY,EAAC,MAAM,gBAAgB,CAAA;AACtD,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAA;AACnD,YAAY,EACV,qBAAqB,EACrB,2BAA2B,EAC3B,+BAA+B,GAChC,MAAM,oBAAoB,CAAA;AAE3B,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,MAAM,UAAU,CAAA;AAC1C,YAAY,EAAC,WAAW,EAAC,MAAM,UAAU,CAAA;AACzC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAA;AACzC,YAAY,EACV,gBAAgB,EAChB,SAAS,IAAI,oBAAoB,EACjC,gBAAgB,IAAI,2BAA2B,EAC/C,SAAS,IAAI,oBAAoB,GAClC,MAAM,eAAe,CAAA;AACtB,OAAO,EAAC,OAAO,IAAI,OAAO,EAAC,MAAM,WAAW,CAAA;AAC5C,YAAY,EAAC,YAAY,EAAE,gBAAgB,EAAC,MAAM,WAAW,CAAA;AAC7D,OAAO,EAAC,OAAO,IAAI,OAAO,EAAC,MAAM,WAAW,CAAA;AAC5C,YAAY,EAAC,YAAY,EAAC,MAAM,WAAW,CAAA;AAC3C,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,MAAM,cAAc,CAAA;AAClD,YAAY,EAAC,eAAe,EAAC,MAAM,cAAc,CAAA;AACjD,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,MAAM,UAAU,CAAA;AAC1C,YAAY,EAAC,WAAW,EAAE,eAAe,EAAE,gBAAgB,EAAC,MAAM,UAAU,CAAA;AAC5E,OAAO,EAAC,OAAO,IAAI,YAAY,EAAC,MAAM,gBAAgB,CAAA;AACtD,YAAY,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAA;AACrD,OAAO,EAAC,OAAO,IAAI,SAAS,EAAC,MAAM,aAAa,CAAA;AAChD,YAAY,EAAC,cAAc,EAAE,oBAAoB,EAAC,MAAM,aAAa,CAAA;AACrE,OAAO,EAAC,OAAO,IAAI,mBAAmB,EAAC,MAAM,uBAAuB,CAAA;AACpE,YAAY,EAAC,wBAAwB,EAAC,MAAM,uBAAuB,CAAA;AACnE,OAAO,EAAC,OAAO,IAAI,IAAI,EAAC,MAAM,QAAQ,CAAA;AACtC,YAAY,EAAC,SAAS,EAAC,MAAM,QAAQ,CAAA;AACrC,OAAO,EAAC,OAAO,IAAI,QAAQ,EAAC,MAAM,YAAY,CAAA;AAC9C,YAAY,EACV,aAAa,EACb,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,GAClB,MAAM,YAAY,CAAA;AACnB,OAAO,EAAC,OAAO,IAAI,KAAK,EAAE,eAAe,EAAC,MAAM,SAAS,CAAA;AACzD,YAAY,EAAC,UAAU,EAAE,oBAAoB,EAAC,MAAM,SAAS,CAAA;AAC7D,OAAO,EAAC,OAAO,EAAC,MAAM,aAAa,CAAA;AACnC,YAAY,EAAC,YAAY,EAAC,MAAM,aAAa,CAAA;AAC7C,OAAO,EAAC,OAAO,IAAI,QAAQ,EAAC,MAAM,YAAY,CAAA;AAC9C,YAAY,EAAC,aAAa,EAAC,MAAM,YAAY,CAAA;AAE7C,OAAO,EAAC,OAAO,IAAI,QAAQ,EAAC,MAAM,YAAY,CAAA;AAC9C,YAAY,EAAC,aAAa,EAAC,MAAM,YAAY,CAAA;AAE7C,OAAO,EAAC,OAAO,IAAI,QAAQ,EAAC,MAAM,YAAY,CAAA;AAC9C,YAAY,EAAC,aAAa,EAAC,MAAM,YAAY,CAAA;AAE7C,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAA;AACnC,YAAY,EACV,aAAa,EACb,iBAAiB,EACjB,oBAAoB,EACpB,mBAAmB,EACnB,wBAAwB,GACzB,MAAM,YAAY,CAAA;AAEnB,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAA;AAC/C,YAAY,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAA;AAEzD,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAA;AAC3C,YAAY,EAAC,iBAAiB,EAAE,qBAAqB,EAAC,MAAM,gBAAgB,CAAA;AAE5E,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAA;AACrC,YAAY,EAAC,cAAc,EAAC,MAAM,aAAa,CAAA;AAE/C,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAA;AAC7B,YAAY,EAAC,UAAU,EAAE,cAAc,EAAC,MAAM,SAAS,CAAA;AAEvD,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAA;AACvC,YAAY,EACV,eAAe,EACf,UAAU,IAAI,oBAAoB,EAClC,YAAY,IAAI,sBAAsB,EACtC,cAAc,IAAI,wBAAwB,EAC1C,iBAAiB,IAAI,2BAA2B,GACjD,MAAM,cAAc,CAAA;AAErB,OAAO,EAAC,OAAO,IAAI,EAAE,EAAE,KAAK,EAAC,MAAM,MAAM,CAAA;AACzC,YAAY,EAAC,mBAAmB,EAAE,uBAAuB,EAAE,MAAM,EAAC,MAAM,MAAM,CAAA;AAE9E,OAAO,EAAC,WAAW,EAAC,MAAM,YAAY,CAAA;AACtC,YAAY,EAAC,gBAAgB,EAAC,MAAM,YAAY,CAAA"}
|
package/dist/index.js
CHANGED
|
@@ -32,7 +32,6 @@ export { UnderlineNav } from './UnderlineNav/index.js';
|
|
|
32
32
|
export { default as ActionBar } from './ActionBar/index.js';
|
|
33
33
|
export { Stack } from './Stack/index.js';
|
|
34
34
|
export { default as sx } from './sx.js';
|
|
35
|
-
export { default as Box } from './Box/Box.js';
|
|
36
35
|
export { default as Radio } from './Radio/Radio.js';
|
|
37
36
|
export { default as Avatar } from './Avatar/Avatar.js';
|
|
38
37
|
export { default as AvatarStack } from './AvatarStack/AvatarStack.js';
|
|
@@ -54,6 +54,13 @@
|
|
|
54
54
|
"required": false,
|
|
55
55
|
"description": "Custom className",
|
|
56
56
|
"defaultValue": ""
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"name": "gap",
|
|
60
|
+
"type": "'none' | 'condensed'",
|
|
61
|
+
"required": false,
|
|
62
|
+
"defaultValue": "'condensed'",
|
|
63
|
+
"description": "Horizontal gap scale between items (restricted to none or condensed)."
|
|
57
64
|
}
|
|
58
65
|
],
|
|
59
66
|
"subcomponents": [
|
|
@@ -3930,7 +3937,76 @@
|
|
|
3930
3937
|
"name": "NavList",
|
|
3931
3938
|
"status": "alpha",
|
|
3932
3939
|
"a11yReviewed": "2025-01-08",
|
|
3933
|
-
"stories": [
|
|
3940
|
+
"stories": [
|
|
3941
|
+
{
|
|
3942
|
+
"id": "components-navlist--default",
|
|
3943
|
+
"code": "() => (\n <PageLayout>\n <PageLayout.Pane position=\"start\">\n <NavList>\n <NavList.Item href=\"#\" aria-current=\"page\">\n Item 1\n </NavList.Item>\n <NavList.Item href=\"#\">Item 2</NavList.Item>\n <NavList.Item href=\"#\">Item 3</NavList.Item>\n </NavList>\n </PageLayout.Pane>\n <PageLayout.Content></PageLayout.Content>\n </PageLayout>\n)"
|
|
3944
|
+
},
|
|
3945
|
+
{
|
|
3946
|
+
"id": "components-navlist-features--expand-with-custom-items",
|
|
3947
|
+
"code": "() => {\n const items: {\n href: string\n text: string\n 'aria-current'?: 'page'\n }[] = [\n {\n href: '#',\n text: 'Item 4',\n 'aria-current': 'page',\n },\n {\n href: '#',\n text: 'Item 5',\n },\n {\n href: '#',\n text: 'Item 6',\n },\n {\n href: '#',\n text: 'Item 7',\n },\n {\n href: '#',\n text: 'Item 8',\n },\n {\n href: '#',\n text: 'Item 9',\n },\n ]\n const Item = ({\n leadingVisual,\n text,\n trailingVisual,\n ...rest\n }: CustomItemProps) => {\n return (\n <NavList.Item key={text} onClick={() => {}} href=\"#\" {...rest}>\n {leadingVisual ? (\n <NavList.LeadingVisual>\n <Octicon icon={leadingVisual} />\n </NavList.LeadingVisual>\n ) : null}\n {text}\n\n {trailingVisual ? (\n <NavList.TrailingVisual>\n {typeof trailingVisual === 'string' ? (\n trailingVisual\n ) : (\n <Octicon icon={trailingVisual as React.ElementType} />\n )}\n <VisuallyHidden>results</VisuallyHidden>\n </NavList.TrailingVisual>\n ) : null}\n </NavList.Item>\n )\n }\n return (\n <PageLayout>\n <PageLayout.Pane position=\"start\">\n <NavList>\n <NavList.Item href=\"#\">Item 1</NavList.Item>\n <NavList.Item href=\"#\">Item 2</NavList.Item>\n <NavList.Item href=\"#\">Item 3</NavList.Item>\n <NavList.GroupExpand\n label=\"Show more\"\n items={items}\n renderItem={Item}\n />\n </NavList>\n </PageLayout.Pane>\n <PageLayout.Content></PageLayout.Content>\n </PageLayout>\n )\n}"
|
|
3948
|
+
},
|
|
3949
|
+
{
|
|
3950
|
+
"id": "components-navlist-features--expand-with-pages",
|
|
3951
|
+
"code": "() => {\n const items = [\n {\n href: '#',\n text: 'Item 4',\n },\n {\n href: '#',\n text: 'Item 5',\n },\n {\n href: '#',\n text: 'Item 6',\n },\n {\n href: '#',\n text: 'Item 7',\n },\n {\n href: '#',\n text: 'Item 8',\n },\n {\n href: '#',\n text: 'Item 9',\n },\n ]\n return (\n <PageLayout>\n <PageLayout.Pane position=\"start\">\n <NavList>\n <NavList.Item href=\"#\" aria-current=\"page\">\n Item 1\n </NavList.Item>\n <NavList.Item href=\"#\">Item 2</NavList.Item>\n <NavList.Item href=\"#\">Item 3</NavList.Item>\n <NavList.GroupExpand pages={2} label=\"Show more\" items={items} />\n </NavList>\n </PageLayout.Pane>\n <PageLayout.Content></PageLayout.Content>\n </PageLayout>\n )\n}"
|
|
3952
|
+
},
|
|
3953
|
+
{
|
|
3954
|
+
"id": "components-navlist-features--group-with-expand-and-custom-items",
|
|
3955
|
+
"code": "() => {\n const Item = ({\n leadingVisual: LeadingVisual,\n text,\n trailingVisual: TrailingVisual,\n ...rest\n }: CustomItemProps) => {\n return (\n <NavList.Item onClick={() => {}} href=\"#\" {...rest} key={text}>\n {LeadingVisual ? (\n <NavList.LeadingVisual>\n <LeadingVisual />\n </NavList.LeadingVisual>\n ) : null}\n {text}\n\n {TrailingVisual ? (\n <NavList.TrailingVisual>\n {typeof TrailingVisual === 'string' ? (\n TrailingVisual\n ) : (\n <TrailingVisual />\n )}\n <VisuallyHidden>results</VisuallyHidden>\n </NavList.TrailingVisual>\n ) : null}\n </NavList.Item>\n )\n }\n const items = [\n {\n href: '#',\n text: 'Commits',\n leadingVisual: GitCommitIcon,\n trailingVisual: '32k',\n },\n {\n href: '#',\n text: 'Packages',\n leadingVisual: PackageIcon,\n trailingVisual: '1k',\n },\n {\n href: '#',\n text: 'Wikis',\n leadingVisual: BookIcon,\n trailingVisual: '121',\n },\n {\n href: '#',\n text: 'Topics',\n leadingVisual: MilestoneIcon,\n trailingVisual: '12k',\n },\n {\n href: '#',\n text: 'Marketplace',\n leadingVisual: TelescopeIcon,\n trailingVisual: ArrowRightIcon,\n },\n ]\n return (\n <NavList>\n <NavList.Group>\n <NavList.Item aria-current=\"page\">\n <NavList.LeadingVisual>\n <CodeIcon />\n </NavList.LeadingVisual>\n Code\n <NavList.TrailingVisual>3k</NavList.TrailingVisual>\n </NavList.Item>\n <NavList.Item>\n <NavList.LeadingVisual>\n <RepoIcon />\n </NavList.LeadingVisual>\n Repositories\n <NavList.TrailingVisual>713</NavList.TrailingVisual>\n </NavList.Item>\n <NavList.Item>\n <NavList.LeadingVisual>\n <IssueOpenedIcon />\n </NavList.LeadingVisual>\n Issues\n <NavList.TrailingVisual>6k</NavList.TrailingVisual>\n </NavList.Item>\n <NavList.Item>\n <NavList.LeadingVisual>\n <GitPullRequestIcon />\n </NavList.LeadingVisual>\n Pull requests\n <NavList.TrailingVisual>4k</NavList.TrailingVisual>\n </NavList.Item>\n <NavList.Item>\n <NavList.LeadingVisual>\n <CommentDiscussionIcon />\n </NavList.LeadingVisual>\n Discussions\n <NavList.TrailingVisual>236</NavList.TrailingVisual>\n </NavList.Item>\n <NavList.Item>\n <NavList.LeadingVisual>\n <PeopleIcon />\n </NavList.LeadingVisual>\n Users\n <NavList.TrailingVisual>10k</NavList.TrailingVisual>\n </NavList.Item>\n <NavList.GroupExpand items={items} renderItem={Item} />\n </NavList.Group>\n </NavList>\n )\n}"
|
|
3956
|
+
},
|
|
3957
|
+
{
|
|
3958
|
+
"id": "components-navlist-features--with-expand",
|
|
3959
|
+
"code": "() => {\n const items = [\n {\n href: '#',\n text: 'Item 4',\n },\n {\n href: '#',\n text: 'Item 5',\n },\n {\n href: '#',\n text: 'Item 6',\n },\n {\n href: '#',\n text: 'Item 7',\n },\n {\n href: '#',\n text: 'Item 8',\n },\n {\n href: '#',\n text: 'Item 9',\n },\n ]\n return (\n <PageLayout>\n <PageLayout.Pane position=\"start\">\n <NavList>\n <NavList.Item href=\"#\" aria-current=\"page\">\n Item 1\n </NavList.Item>\n <NavList.Item href=\"#\">Item 2</NavList.Item>\n <NavList.Item href=\"#\">Item 3</NavList.Item>\n <NavList.GroupExpand label=\"Show more\" items={items} />\n </NavList>\n </PageLayout.Pane>\n <PageLayout.Content></PageLayout.Content>\n </PageLayout>\n )\n}"
|
|
3960
|
+
},
|
|
3961
|
+
{
|
|
3962
|
+
"id": "components-navlist-features--with-expand-and-icons",
|
|
3963
|
+
"code": "() => {\n const items = [\n {\n href: '#',\n text: 'Item 4',\n },\n {\n href: '#',\n text: 'Item 5',\n },\n {\n href: '#',\n text: 'Item 6',\n },\n {\n href: '#',\n text: 'Item 7',\n },\n {\n href: '#',\n text: 'Item 8',\n },\n {\n href: '#',\n text: 'Item 9',\n },\n ]\n return (\n <PageLayout>\n <PageLayout.Pane position=\"start\">\n <NavList>\n <NavList.Item href=\"#\" aria-current=\"page\">\n Item 1\n </NavList.Item>\n <NavList.Item href=\"#\">Item 2</NavList.Item>\n <NavList.Item href=\"#\">Item 3</NavList.Item>\n <NavList.GroupExpand label=\"Show more\" items={items} />\n </NavList>\n </PageLayout.Pane>\n <PageLayout.Content></PageLayout.Content>\n </PageLayout>\n )\n}"
|
|
3964
|
+
},
|
|
3965
|
+
{
|
|
3966
|
+
"id": "components-navlist-features--with-group",
|
|
3967
|
+
"code": "() => (\n <PageLayout>\n <PageLayout.Pane position=\"start\">\n <NavList>\n <NavList.Group title=\"Group 1\">\n <NavList.Item aria-current=\"true\" href=\"#\">\n Item 1A\n </NavList.Item>\n <NavList.Item href=\"#\">Item 1B</NavList.Item>\n <NavList.Item href=\"#\">Item 1C</NavList.Item>\n </NavList.Group>\n <NavList.Group title=\"Group 2\">\n <NavList.Item href=\"#\">Item 2A</NavList.Item>\n <NavList.Item href=\"#\">Item 2B</NavList.Item>\n <NavList.Item href=\"#\">Item 2C</NavList.Item>\n </NavList.Group>\n </NavList>\n </PageLayout.Pane>\n <PageLayout.Content></PageLayout.Content>\n </PageLayout>\n)"
|
|
3968
|
+
},
|
|
3969
|
+
{
|
|
3970
|
+
"id": "components-navlist-features--with-group-expand",
|
|
3971
|
+
"code": "() => {\n const items1 = [\n {\n href: '#',\n text: 'Item 1D',\n },\n {\n href: '#',\n text: 'Item 1E',\n trailingAction: {\n label: 'Some action',\n icon: ArrowRightIcon,\n },\n },\n ]\n const items2 = [\n {\n href: '#',\n text: 'Item 2D',\n trailingVisual: BookIcon,\n },\n {\n href: '#',\n text: 'Item 2E',\n trailingVisual: FileDirectoryIcon,\n },\n ]\n return (\n <PageLayout>\n <PageLayout.Pane position=\"start\">\n <NavList>\n <NavList.Group title=\"Group 1\">\n <NavList.Item aria-current=\"true\" href=\"#\">\n Item 1A\n </NavList.Item>\n <NavList.Item href=\"#\">Item 1B</NavList.Item>\n <NavList.Item href=\"#\">Item 1C</NavList.Item>\n <NavList.GroupExpand label=\"More\" items={items1} />\n </NavList.Group>\n <NavList.Group title=\"Group 2\">\n <NavList.Item href=\"#\">Item 2A</NavList.Item>\n <NavList.Item href=\"#\">Item 2B</NavList.Item>\n <NavList.Item href=\"#\">Item 2C</NavList.Item>\n <NavList.GroupExpand label=\"Show\" items={items2} />\n </NavList.Group>\n </NavList>\n </PageLayout.Pane>\n <PageLayout.Content></PageLayout.Content>\n </PageLayout>\n )\n}"
|
|
3972
|
+
},
|
|
3973
|
+
{
|
|
3974
|
+
"id": "components-navlist-features--with-group-heading-links",
|
|
3975
|
+
"code": "() => (\n <PageLayout>\n <PageLayout.Pane position=\"start\">\n <NavList>\n <NavList.Group>\n <NavList.GroupHeading>\n <a href=\"#group-1\">Group 1</a>\n </NavList.GroupHeading>\n <NavList.Item aria-current=\"true\" href=\"#\">\n Item 1A\n </NavList.Item>\n <NavList.Item href=\"#\">Item 1B</NavList.Item>\n <NavList.Item href=\"#\">Item 1C</NavList.Item>\n </NavList.Group>\n <NavList.Group>\n <NavList.GroupHeading>\n <a href=\"#group-2\">Group 2</a>\n </NavList.GroupHeading>\n <NavList.Item href=\"#\">Item 2A</NavList.Item>\n <NavList.Item href=\"#\">Item 2B</NavList.Item>\n <NavList.Item href=\"#\">Item 2C</NavList.Item>\n </NavList.Group>\n </NavList>\n </PageLayout.Pane>\n <PageLayout.Content></PageLayout.Content>\n </PageLayout>\n)"
|
|
3976
|
+
},
|
|
3977
|
+
{
|
|
3978
|
+
"id": "components-navlist-features--with-inactive-items",
|
|
3979
|
+
"code": "() => (\n <PageLayout>\n <PageLayout.Pane position=\"start\">\n <NavList>\n <NavList.Item href=\"#\" inactiveText=\"Unavailable due to an outage\">\n Item 1\n </NavList.Item>\n <NavList.Item>\n Item 2\n <NavList.SubNav>\n <NavList.Item href=\"#\" aria-current=\"page\">\n Sub item 1\n </NavList.Item>\n <NavList.Item href=\"#\" inactiveText=\"Unavailable due to an outage\">\n Sub item 2\n </NavList.Item>\n </NavList.SubNav>\n </NavList.Item>\n <NavList.Item href=\"#\">Item 3</NavList.Item>\n </NavList>\n </PageLayout.Pane>\n <PageLayout.Content></PageLayout.Content>\n </PageLayout>\n)"
|
|
3980
|
+
},
|
|
3981
|
+
{
|
|
3982
|
+
"id": "components-navlist-features--with-nested-sub-items",
|
|
3983
|
+
"code": "() => (\n <PageLayout>\n <PageLayout.Pane position=\"start\">\n <NavList>\n <NavList.Item defaultOpen={true} href=\"#\">\n Item 1\n <NavList.SubNav>\n <NavList.Item href=\"#\">Sub item 1</NavList.Item>\n </NavList.SubNav>\n </NavList.Item>\n <NavList.Item href=\"#\">\n Item 2{/* NOTE: Don't nest SubNavs. For testing purposes only */}\n <NavList.SubNav>\n <NavList.Item href=\"#\">\n Sub item 1\n <NavList.SubNav>\n <NavList.Item href=\"#\">\n Sub item 1.1\n <NavList.SubNav>\n <NavList.Item href=\"#\">Sub item 1.1.1</NavList.Item>\n <NavList.Item href=\"#\">\n Sub item 1.1.2\n <NavList.SubNav>\n <NavList.Item href=\"#\">Sub item 1.1.2.1</NavList.Item>\n <NavList.Item href=\"#\" aria-current=\"page\">\n Sub item 1.1.2.2\n </NavList.Item>\n </NavList.SubNav>\n </NavList.Item>\n </NavList.SubNav>\n </NavList.Item>\n <NavList.Item href=\"#\">Sub item 1.2</NavList.Item>\n </NavList.SubNav>\n </NavList.Item>\n <NavList.Item href=\"#\">Sub item 2</NavList.Item>\n </NavList.SubNav>\n </NavList.Item>\n <NavList.Item href=\"#\">Item 3</NavList.Item>\n </NavList>\n </PageLayout.Pane>\n <PageLayout.Content></PageLayout.Content>\n </PageLayout>\n)"
|
|
3984
|
+
},
|
|
3985
|
+
{
|
|
3986
|
+
"id": "components-navlist-features--with-next-js-link",
|
|
3987
|
+
"code": "() => (\n <PageLayout>\n <PageLayout.Pane position=\"start\">\n <NavList>\n <NextJSLikeLink href=\"#\">\n <NavList.Item aria-current=\"page\">Item 1</NavList.Item>\n </NextJSLikeLink>\n <NextJSLikeLink href=\"#\">\n <NavList.Item>Item 2</NavList.Item>\n </NextJSLikeLink>\n <NextJSLikeLink href=\"#\">\n <NavList.Item>Item 3</NavList.Item>\n </NextJSLikeLink>\n </NavList>\n </PageLayout.Pane>\n <PageLayout.Content></PageLayout.Content>\n </PageLayout>\n)"
|
|
3988
|
+
},
|
|
3989
|
+
{
|
|
3990
|
+
"id": "components-navlist-features--with-react-router-link",
|
|
3991
|
+
"code": "() => (\n <PageLayout>\n <PageLayout.Pane position=\"start\">\n <NavList>\n <NavList.Item as={ReactRouterLikeLink} to=\"#\" aria-current=\"page\">\n Item 1\n </NavList.Item>\n <NavList.Item as={ReactRouterLikeLink} to=\"#\">\n Item 2\n </NavList.Item>\n <NavList.Item as={ReactRouterLikeLink} to=\"#\">\n Item 3\n </NavList.Item>\n </NavList>\n </PageLayout.Pane>\n <PageLayout.Content></PageLayout.Content>\n </PageLayout>\n)"
|
|
3992
|
+
},
|
|
3993
|
+
{
|
|
3994
|
+
"id": "components-navlist-features--with-reloads",
|
|
3995
|
+
"code": "() => {\n // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc\n const location = window.location\n const storyId = new URLSearchParams(location.search).get('id')\n const urlBase = `${location.origin + location.pathname}?id=${storyId}`\n const itemId = new URLSearchParams(location.search).get('itemId')\n return (\n <>\n <PageLayout>\n <PageLayout.Pane position=\"start\">\n <NavList>\n <NavList.Item\n href={`${urlBase}&itemId=1`}\n aria-current={itemId === '1' ? 'page' : 'false'}\n >\n Item 1\n </NavList.Item>\n <NavList.Item>\n Item 2\n <NavList.SubNav>\n <NavList.Item\n href={`${urlBase}&itemId=2.1`}\n aria-current={itemId === '2.1' ? 'page' : 'false'}\n >\n Sub item 2.1\n </NavList.Item>\n <NavList.Item\n href={`${urlBase}&itemId=2.2`}\n aria-current={itemId === '2.2' ? 'page' : 'false'}\n >\n Sub item 2.2\n </NavList.Item>\n </NavList.SubNav>\n </NavList.Item>\n <NavList.Item>\n Item 3\n <NavList.SubNav>\n <NavList.Item\n href={`${urlBase}&itemId=3.1`}\n aria-current={itemId === '3.1' ? 'page' : 'false'}\n >\n Sub item 3.1\n </NavList.Item>\n <NavList.Item\n href={`${urlBase}&itemId=3.2`}\n aria-current={itemId === '3.2' ? 'page' : 'false'}\n >\n Sub item 3.2\n </NavList.Item>\n </NavList.SubNav>\n </NavList.Item>\n </NavList>\n </PageLayout.Pane>\n <PageLayout.Content></PageLayout.Content>\n </PageLayout>\n </>\n )\n}"
|
|
3996
|
+
},
|
|
3997
|
+
{
|
|
3998
|
+
"id": "components-navlist-features--with-sub-items",
|
|
3999
|
+
"code": "() => (\n <PageLayout>\n <PageLayout.Pane position=\"start\">\n <NavList>\n <NavList.Item href=\"#\">Item 1</NavList.Item>\n <NavList.Item>\n Item 2\n <NavList.SubNav>\n <NavList.Item href=\"#\" aria-current=\"page\">\n Sub item 1\n </NavList.Item>\n <NavList.Item href=\"#\">Sub item 2</NavList.Item>\n </NavList.SubNav>\n </NavList.Item>\n <NavList.Item href=\"#\">Item 3</NavList.Item>\n </NavList>\n </PageLayout.Pane>\n <PageLayout.Content></PageLayout.Content>\n </PageLayout>\n)"
|
|
4000
|
+
},
|
|
4001
|
+
{
|
|
4002
|
+
"id": "components-navlist-features--with-trailing-action",
|
|
4003
|
+
"code": "() => {\n return (\n <PageLayout>\n <PageLayout.Pane position=\"start\">\n <NavList>\n <NavList.Item>\n <NavList.LeadingVisual>\n <FileDirectoryIcon />\n </NavList.LeadingVisual>\n Item 1\n <NavList.TrailingAction\n label=\"Expand sidebar\"\n icon={ArrowLeftIcon}\n />\n </NavList.Item>\n <NavList.Item>\n Item 2\n <NavList.TrailingAction\n as=\"a\"\n href=\"#\"\n label=\"Some action\"\n icon={ArrowRightIcon}\n />\n </NavList.Item>\n </NavList>\n </PageLayout.Pane>\n </PageLayout>\n )\n}"
|
|
4004
|
+
},
|
|
4005
|
+
{
|
|
4006
|
+
"id": "components-navlist-features--with-trailing-action-in-sub-item",
|
|
4007
|
+
"code": "() => {\n return (\n <PageLayout>\n <PageLayout.Pane position=\"start\">\n <NavList>\n <NavList.Item>\n <NavList.LeadingVisual>\n <FileDirectoryIcon />\n </NavList.LeadingVisual>\n Item 1\n <NavList.TrailingAction\n label=\"Expand sidebar\"\n icon={ArrowLeftIcon}\n />\n </NavList.Item>\n <NavList.Item>\n Item 2\n <NavList.TrailingAction\n as=\"a\"\n href=\"#\"\n label=\"Some action\"\n icon={ArrowRightIcon}\n />\n </NavList.Item>\n <NavList.Item>\n Item 3\n <NavList.SubNav>\n <NavList.Item href=\"#\">\n Sub item 1\n <NavList.TrailingAction\n label=\"Another action\"\n icon={BookIcon}\n />\n </NavList.Item>\n </NavList.SubNav>\n </NavList.Item>\n </NavList>\n </PageLayout.Pane>\n </PageLayout>\n )\n}"
|
|
4008
|
+
}
|
|
4009
|
+
],
|
|
3934
4010
|
"importPath": "@primer/react",
|
|
3935
4011
|
"props": [
|
|
3936
4012
|
{
|
|
@@ -4872,6 +4948,12 @@
|
|
|
4872
4948
|
"description": "An id to an element which uniquely labels the rendered main landmark",
|
|
4873
4949
|
"defaultValue": ""
|
|
4874
4950
|
},
|
|
4951
|
+
{
|
|
4952
|
+
"name": "as",
|
|
4953
|
+
"type": "React.ElementType",
|
|
4954
|
+
"defaultValue": "'main'",
|
|
4955
|
+
"description": "Change the root node to another HTML element or custom component."
|
|
4956
|
+
},
|
|
4875
4957
|
{
|
|
4876
4958
|
"name": "width",
|
|
4877
4959
|
"type": "| 'full' | 'medium' | 'large' | 'xlarge'",
|
|
@@ -6548,6 +6630,12 @@
|
|
|
6548
6630
|
"description": "An id to an element which uniquely labels the rendered main landmark",
|
|
6549
6631
|
"defaultValue": ""
|
|
6550
6632
|
},
|
|
6633
|
+
{
|
|
6634
|
+
"name": "as",
|
|
6635
|
+
"type": "React.ElementType",
|
|
6636
|
+
"defaultValue": "'main'",
|
|
6637
|
+
"description": "Change the root node to another HTML element or custom component."
|
|
6638
|
+
},
|
|
6551
6639
|
{
|
|
6552
6640
|
"name": "width",
|
|
6553
6641
|
"type": "| 'full' | 'medium' | 'large' | 'xlarge'",
|