Skip to content

Commit

Permalink
Deprecate position prop for PageLayout.Pane, update stories and tests. (
Browse files Browse the repository at this point in the history
#3389)

* Deprecate position prop for PageLayout.Pane, update stories and tests.

* Create hungry-spies-remember.md

* Fix typo in docs.

* Revert PRs that are breaking dotcom to get the current release out (#3408)

* Revert "Refactor(ActionList): ActionList.Item should render content as a button if parent is not interactive. (#3284)"

This reverts commit 08d7d5d.

* Revert "Address ToggleSwitch a11y feedback (#3251)"

This reverts commit 580f165.

* Revert "Revert "Refactor FilteredActionList to address a11y violations and use new ActionList. (#3247)" (#3349)"

This reverts commit a6b4169.

* Revert "fix: prevent closing menu when `event.preventDefault()` is called on `ActionList.Item`'s `onSelect` handler by @gr2m (#3346)"

This reverts commit 6304923.

* Revert "Refactor FilteredActionList to address a11y violations and use new ActionList. (#3247)"

This reverts commit e865e3e.

* Revert "fix(ActionList): update to read from group context if selectionVariant is defined (#3269)"

This reverts commit 21ec626.

* Revert "Add back check for GroupContext in ActionList.Selection to fix issues introduced to github/github (#3267)"

This reverts commit 332a1af.

* Revert "Fix create-slots utils path (#3223)"

This reverts commit f50997f.

* Revert "Allow up to 4 levels of nesting for the NavList (#3343)"

This reverts commit 786013e.

* Revert "NavList: Fix group dividers (#3328)"

This reverts commit 1fd6d32.

* Revert "StyledOcticon/Octicon: Update the render func to use `React.forwardRef()` (#3293)"

This reverts commit 027d214.

* Revert "Rename component StyledOcticon to Octicon (#3148)"

This reverts commit ac437bb.

* Revert "Update PRC ActionList implementation to have similar semantics to PVC. (#2878)"

This reverts commit 87883c3.

* Update generated/components.json

* Revert "Bump @primer/react-octicons to v19.0.1 (#3266)"

This reverts commit 9532977.

* Revert "Remove aria-hidden=true from spans with required asterisk (#3320)"

This reverts commit 47b7ea0.

* Rename component StyledOcticon to Octicon (#3148)

* Rename component StyledOcticon to Octicon

* Update generated/components.json

* Create .changeset/swift-cows-rest.md

* Fix snapshot

* Add segments to progressbar (#3114)

* Allow ProgressBar to either be given child segments or just a progress value.

* Update ProgressBar docs.

* Fix progress bar tests.

* Create dry-weeks-compete.md

* Fix errors from CI.

* Rename ProgressBar.Segment to ProgressBar.Item.

* Pass backgroundColor instead of bg to get away from system props, simplify children check in ProgressBar.

* Updated snapshots.

* Updated snapshots using --no-cache flag.

* refactor(CircleOcticon): Move files to folder, add storybook and e2e tests. (#3119)

* Reorganize CircleOcticon files, add story and e2e tests.

* Add index file.

* Update generated/components.json

* refactor(CircleBadge): move files into folder, add e2e tests. (#3118)

* Reorganize CircleBadge, add e2e tests.

* Update generated/components.json

* test(vrt): update snapshots

* Update docs reference.

---------

Co-authored-by: radglob <radglob@users.noreply.github.com>

* Update generated/components.json

* test(vrt): update snapshots

---------

Co-authored-by: radglob <radglob@users.noreply.github.com>

* Refactor(Popover): move files into folder, add storybook and e2e tests. (#3135)

* Move files into folder, add storybook and e2e tests.

* Update generated/components.json

* test(vrt): update snapshots

---------

Co-authored-by: radglob <radglob@users.noreply.github.com>

* refactor(ButtonGroup): move files to folder. (#3117)

* Reorganize ButtonGroup component and stories.

* Update generated/components.json

* Add e2e tests.

* test(vrt): update snapshots

* refactor(CircleBadge): move files into folder, add e2e tests. (#3118)

* Reorganize CircleBadge, add e2e tests.

* Update generated/components.json

* test(vrt): update snapshots

* Update docs reference.

---------

Co-authored-by: radglob <radglob@users.noreply.github.com>

* replace createRef with useRef (#3124)

* replace createRef with useRef

* changeset

* missed null

* refactor(FilterList): add files to folder, add storybook and e2e tests. (#3122)

* Reorganize FilterList files into folder, add storybook and e2e tests.

* Update generated/components.json

* test(vrt): update snapshots

---------

Co-authored-by: radglob <radglob@users.noreply.github.com>

* Refactor(FilteredSearch): move files to folder, add storybook and e2e tests. (#3125)

* Move files to folder, add storybook and e2e tests.

* Add aria-label to TextInput, fix docs reference.

* Update generated/components.json

* test(vrt): update snapshots

* replace createRef with useRef (#3124)

* replace createRef with useRef

* changeset

* missed null

* refactor(FilterList): add files to folder, add storybook and e2e tests. (#3122)

* Reorganize FilterList files into folder, add storybook and e2e tests.

* Update generated/components.json

* test(vrt): update snapshots

---------

Co-authored-by: radglob <radglob@users.noreply.github.com>

* Fix generated components.

---------

Co-authored-by: radglob <radglob@users.noreply.github.com>
Co-authored-by: Matthew Costabile <mattcosta7@github.com>

* Refactor(LabelGroup): add files to folder, add storybook and e2e tests. (#3131)

* Move files to folder, add storybook and e2e tests.

* Update generated/components.json

* test(vrt): update snapshots

---------

Co-authored-by: radglob <radglob@users.noreply.github.com>

* test(e2e): update ActionMenu e2e test to remove custom contrast rules (#3130)

* test(e2e): update ActionMenu e2e test to remove custom contrast rules

* test(vrt): update snapshots

* test: remove multiple sections test

* test(e2e): restore rule exception for ActionMenu

---------

Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

* NavList SSR: use useIsomorphicLayoutEffect instead of useLayoutEffect (#3127)

* use useIsomorphicLayoutEffect

* Create .changeset/fast-panthers-refuse.md

---------

Co-authored-by: Josh Black <joshblack@github.com>

* Bump @primer/primitives to `7.11.5` (#3120)

* npm install @primer/primitives@7.11.5

* Updating`theme-preval` snapshots

* Re-run

```
npm run build
npm run test -- -u
```

So that /themePreval.test.ts.snap also gets the new timestamp

* Update `theme-preval` snapshots docs

* Create .changeset/old-falcons-learn.md

* test(vrt): update snapshots

---------

Co-authored-by: simurai <simurai@users.noreply.github.com>

* Update RelativeTime stories (#3136)

* Update RelativeTime stories

* Update generated/components.json

---------

Co-authored-by: colebemis <colebemis@users.noreply.github.com>

* chore(deps-dev): bump @types/jest-axe from 3.5.3 to 3.5.5 (#3141)

Bumps [@types/jest-axe](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/jest-axe) from 3.5.3 to 3.5.5.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/jest-axe)

---
updated-dependencies:
- dependency-name: "@types/jest-axe"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump @rollup/plugin-typescript from 11.0.0 to 11.1.0 (#3138)

Bumps [@rollup/plugin-typescript](https://github.com/rollup/plugins/tree/HEAD/packages/typescript) from 11.0.0 to 11.1.0.
- [Release notes](https://github.com/rollup/plugins/releases)
- [Changelog](https://github.com/rollup/plugins/blob/master/packages/typescript/CHANGELOG.md)
- [Commits](https://github.com/rollup/plugins/commits/commonjs-v11.1.0/packages/typescript)

---
updated-dependencies:
- dependency-name: "@rollup/plugin-typescript"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump eslint-plugin-primer-react from 2.0.2 to 2.0.3 (#3140)

* chore(deps-dev): bump eslint-plugin-primer-react from 2.0.2 to 2.0.3

Bumps [eslint-plugin-primer-react](https://github.com/primer/eslint-plugin-primer-react) from 2.0.2 to 2.0.3.
- [Release notes](https://github.com/primer/eslint-plugin-primer-react/releases)
- [Changelog](https://github.com/primer/eslint-plugin-primer-react/blob/main/CHANGELOG.md)
- [Commits](primer/eslint-plugin-primer-react@v2.0.2...v2.0.3)

---
updated-dependencies:
- dependency-name: eslint-plugin-primer-react
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

* chore(eslint): remove unnecessary disable

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

* chore(deps-dev): bump babel-plugin-styled-components from 2.0.2 to 2.1.1 (#3139)

* chore(deps-dev): bump babel-plugin-styled-components from 2.0.2 to 2.1.1

Bumps [babel-plugin-styled-components](https://github.com/styled-components/babel-plugin-styled-components) from 2.0.2 to 2.1.1.
- [Release notes](https://github.com/styled-components/babel-plugin-styled-components/releases)
- [Commits](styled-components/babel-plugin-styled-components@v2.0.2...v2.1.1)

---
updated-dependencies:
- dependency-name: babel-plugin-styled-components
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

* test(snapshots): update snapshots

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

* chore(project): update project to use Node.js v18 LTS (#3133)

* chore(project): update project to use Node.js v18 LTS

* chore: add legacy openssl option for docs builds

* chore: update devcontainer image

---------

Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

* Use SSR-compatible slot implementation in CheckboxGroup/RadioGroup (#3146)

* Update slots for checkbox group and radio group

* Update useSlot return type

* Update exports test

* Create .changeset/young-queens-notice.md

* Update comment indentation

* Add segments to progressbar (#3114)

* Allow ProgressBar to either be given child segments or just a progress value.

* Update ProgressBar docs.

* Fix progress bar tests.

* Create dry-weeks-compete.md

* Fix errors from CI.

* Rename ProgressBar.Segment to ProgressBar.Item.

* Pass backgroundColor instead of bg to get away from system props, simplify children check in ProgressBar.

* Updated snapshots.

* Updated snapshots using --no-cache flag.

* Update generated/components.json

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: radglob <radglob@users.noreply.github.com>
Co-authored-by: Matthew Costabile <mattcosta7@github.com>
Co-authored-by: Josh Black <joshblack@github.com>
Co-authored-by: Josh Black <joshblack@users.noreply.github.com>
Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>
Co-authored-by: simurai <simurai@github.com>
Co-authored-by: simurai <simurai@users.noreply.github.com>
Co-authored-by: Cole Bemis <colebemis@github.com>
Co-authored-by: colebemis <colebemis@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* docs(project): move code of conduct under .github (#3145)

Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

* Add npm workspaces structure to primer/react (#3074)

* test(axe): default `color-contrast` check to false

* chore: update generate script to not conditionally disable contrast checks

* Create adr-015-npm-workspaces.md

* docs: update adr

* Update adr-015-npm-workspaces.md

---------

Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

* Update generated/components.json

* change styled_octicon key

* Update generated/components.json

* Update generated/components.json

* Update generated/components.json

* Octicon folder

* Fix package-lock

* Fix imports

* update path

* Update generated/components.json

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: jonrohan <jonrohan@users.noreply.github.com>
Co-authored-by: Jeremy Neal <radglob@github.com>
Co-authored-by: radglob <radglob@users.noreply.github.com>
Co-authored-by: Matthew Costabile <mattcosta7@github.com>
Co-authored-by: Josh Black <joshblack@github.com>
Co-authored-by: Josh Black <joshblack@users.noreply.github.com>
Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>
Co-authored-by: simurai <simurai@github.com>
Co-authored-by: simurai <simurai@users.noreply.github.com>
Co-authored-by: Cole Bemis <colebemis@github.com>
Co-authored-by: colebemis <colebemis@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Josep Martins <josepmartins@github.com>

* Allow up to 4 levels of nesting for the NavList (#3343)

* allows up to 4 levels of nesting for the NavList

* adds changeset

* Update src/NavList/NavList.tsx

Co-authored-by: Cole Bemis <colebemis@github.com>

* updates snapshots

---------

Co-authored-by: Cole Bemis <colebemis@github.com>

* fix: prevent closing menu when `event.preventDefault()` is called on `ActionList.Item`'s `onSelect` handler by @gr2m (#3346)

* fix: prevent closing menu when `event.preventDefault()` is called on `ActionList.Item`'s `onSelect` handler (#3163)

* test: prevent closing menu when `event.preventDefault()` is called on `ActionList.Item`'s `onSelect` handler

Failing test for #3162

* fix: prevent closing menu when `event.preventDefault()` is called on `ActionList.Item`ߴs `onSelect` handler

* add storybook example: Delayed Menu Close

* update docs

* docs: changeset

* Update changelog

---------

Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>

* Update generated/components.json

---------

Co-authored-by: Gregor Martynus <39992+gr2m@users.noreply.github.com>
Co-authored-by: siddharthkp <siddharthkp@users.noreply.github.com>

* Revert "PageLayout.Content should not use main landmark by default. (#3154)"

This reverts commit fed1c57.

* Revert "Update `PageLayout` docs around `<main>` usage (#3323)"

This reverts commit e1904b2.

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: broccolinisoup <broccolinisoup@users.noreply.github.com>
Co-authored-by: Jon Rohan <yes@jonrohan.codes>
Co-authored-by: jonrohan <jonrohan@users.noreply.github.com>
Co-authored-by: Jeremy Neal <radglob@github.com>
Co-authored-by: radglob <radglob@users.noreply.github.com>
Co-authored-by: Matthew Costabile <mattcosta7@github.com>
Co-authored-by: Josh Black <joshblack@github.com>
Co-authored-by: Josh Black <joshblack@users.noreply.github.com>
Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>
Co-authored-by: simurai <simurai@github.com>
Co-authored-by: simurai <simurai@users.noreply.github.com>
Co-authored-by: Cole Bemis <colebemis@github.com>
Co-authored-by: colebemis <colebemis@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Josep Martins <josepmartins@github.com>
Co-authored-by: Mike Perrotti <mperrotti@github.com>
Co-authored-by: Gregor Martynus <39992+gr2m@users.noreply.github.com>
Co-authored-by: siddharthkp <siddharthkp@users.noreply.github.com>

* Version Packages (#3218)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* Update changeset to mention changed component.

* Put changed components comment after changeset write up.

* Fix some spacing issues, docs and story changes.

* Update snapshots, formatting and linting.

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Armağan <broccolinisoup@github.com>
Co-authored-by: broccolinisoup <broccolinisoup@users.noreply.github.com>
Co-authored-by: Jon Rohan <yes@jonrohan.codes>
Co-authored-by: jonrohan <jonrohan@users.noreply.github.com>
Co-authored-by: radglob <radglob@users.noreply.github.com>
Co-authored-by: Matthew Costabile <mattcosta7@github.com>
Co-authored-by: Josh Black <joshblack@github.com>
Co-authored-by: Josh Black <joshblack@users.noreply.github.com>
Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>
Co-authored-by: simurai <simurai@github.com>
Co-authored-by: simurai <simurai@users.noreply.github.com>
Co-authored-by: Cole Bemis <colebemis@github.com>
Co-authored-by: colebemis <colebemis@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Josep Martins <josepmartins@github.com>
Co-authored-by: Mike Perrotti <mperrotti@github.com>
Co-authored-by: Gregor Martynus <39992+gr2m@users.noreply.github.com>
Co-authored-by: siddharthkp <siddharthkp@users.noreply.github.com>
Co-authored-by: GitHub Design Systems Bot <30705008+primer-css@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
  • Loading branch information
21 people authored Jul 18, 2023
1 parent bec599d commit 57c4bdf
Show file tree
Hide file tree
Showing 12 changed files with 350 additions and 392 deletions.
7 changes: 7 additions & 0 deletions .changeset/hungry-spies-remember.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@primer/react": patch
---

Deprecates position prop for PageLayout.Pane. Users will receive a console warning when it is used.

<!-- Changed components: PageLayout -->
27 changes: 18 additions & 9 deletions generated/components.json
Original file line number Diff line number Diff line change
Expand Up @@ -637,7 +637,7 @@
},
{
"name": "size",
"type": "number",
"type": "number | { narrow?: number; regular?: number; wide?: number; }",
"defaultValue": "20",
"description": "The size of the avatar in pixels."
},
Expand Down Expand Up @@ -697,6 +697,18 @@
"defaultValue": "false",
"description": "Align the avatars to the right"
},
{
"name": "disableExpand",
"type": "boolean",
"defaultValue": "false",
"description": "Do not spread the avatars on hover"
},
{
"name": "size",
"type": "number | { narrow?: number; regular?: number; wide?: number; }",
"defaultValue": "20",
"description": "The size of the avatar children in pixels."
},
{
"name": "sx",
"type": "SystemStyleObject"
Expand Down Expand Up @@ -1724,7 +1736,7 @@
"stories": [
{
"id": "components-filteredsearch--default",
"code": "() => (\n <FilteredSearch>\n <ActionMenu>\n <ActionMenu.Button as=\"summary\">Filter</ActionMenu.Button>\n <ActionMenu.Overlay>\n <ActionList>\n <ActionList.Item>Item 1</ActionList.Item>\n <ActionList.Item>Item 2</ActionList.Item>\n <ActionList.Item>Item 3</ActionList.Item>\n </ActionList>\n </ActionMenu.Overlay>\n </ActionMenu>\n <TextInput aria-label=\"filtered-search\" leadingVisual={SearchIcon} />\n </FilteredSearch>\n)"
"code": "() => (\n <FilteredSearch>\n <ActionMenu>\n <ActionMenu.Button as=\"summary\">Filter</ActionMenu.Button>\n <ActionMenu.Overlay>\n <ActionList>\n <ActionList.Item>Item 1</ActionList.Item>\n <ActionList.Item>Item 2</ActionList.Item>\n <ActionList.Item>Item 3</ActionList.Item>\n </ActionList>\n </ActionMenu.Overlay>\n </ActionMenu>\n <TextInput aria-label=\"Filtered search\" leadingVisual={SearchIcon} />\n </FilteredSearch>\n)"
}
],
"props": [
Expand Down Expand Up @@ -2797,7 +2809,8 @@
"name": "position",
"type": "| 'start' | 'end' | { narrow?: | 'start' | 'end' regular?: | 'start' | 'end' wide?: | 'start' | 'end' }",
"defaultValue": "'end'",
"description": ""
"description": "",
"deprecated": true
},
{
"name": "positionWhenNarrow",
Expand Down Expand Up @@ -4370,7 +4383,7 @@
"name": "resize",
"type": "'both' | 'horizontal' | 'vertical' | 'none'",
"defaultValue": "'both'",
"description": "Changes background color to a higher contrast color"
"description": "Changes the resize behavior"
},
{
"name": "validationStatus",
Expand All @@ -4382,10 +4395,6 @@
"name": "ref",
"type": "React.RefObject<HTMLTextAreaElement>"
},
{
"name": "ref",
"type": "React.RefObject<HTMLTextareaElement>"
},
{
"name": "as",
"type": "React.ElementType",
Expand Down Expand Up @@ -4708,7 +4717,7 @@
"stories": [
{
"id": "components-treeview--default",
"code": "() => (\n <nav aria-label=\"Files changed\">\n <TreeView aria-label=\"Files changed\">\n <TreeView.Item id=\"src\" defaultExpanded>\n <TreeView.LeadingVisual>\n <TreeView.DirectoryIcon />\n </TreeView.LeadingVisual>\n src\n <TreeView.SubTree>\n <TreeView.Item id=\"src/Avatar.tsx\">\n <TreeView.LeadingVisual>\n <FileIcon />\n </TreeView.LeadingVisual>\n Avatar.tsx\n <TreeView.TrailingVisual>\n <Octicon\n icon={DiffAddedIcon}\n color=\"success.fg\"\n aria-label=\"added\"\n />\n </TreeView.TrailingVisual>\n </TreeView.Item>\n <TreeView.Item id=\"src/Button.tsx\" current>\n <TreeView.LeadingVisual>\n <FileIcon />\n </TreeView.LeadingVisual>\n Button.tsx\n <TreeView.TrailingVisual>\n <Octicon\n icon={DiffModifiedIcon}\n color=\"attention.fg\"\n aria-label=\"modified\"\n />\n </TreeView.TrailingVisual>\n </TreeView.Item>\n </TreeView.SubTree>\n </TreeView.Item>\n <TreeView.Item id=\"package.json\">\n <TreeView.LeadingVisual>\n <FileIcon />\n </TreeView.LeadingVisual>\n package.json\n <TreeView.TrailingVisual>\n <Octicon\n icon={DiffModifiedIcon}\n color=\"attention.fg\"\n aria-label=\"modified\"\n />\n </TreeView.TrailingVisual>\n </TreeView.Item>\n </TreeView>\n </nav>\n)"
"code": "() => (\n <nav aria-label=\"Files changed\">\n <TreeView aria-label=\"Files changed\">\n <TreeView.Item id=\"src\" defaultExpanded>\n <TreeView.LeadingVisual>\n <TreeView.DirectoryIcon />\n </TreeView.LeadingVisual>\n src\n <TreeView.SubTree>\n <TreeView.Item id=\"src/Avatar.tsx\">\n <TreeView.LeadingVisual>\n <FileIcon />\n </TreeView.LeadingVisual>\n Avatar.tsx\n <TreeView.TrailingVisual>\n <Octicon\n icon={DiffAddedIcon}\n color=\"success.fg\"\n aria-label=\"Added\"\n />\n </TreeView.TrailingVisual>\n </TreeView.Item>\n <TreeView.Item id=\"src/Button.tsx\" current>\n <TreeView.LeadingVisual>\n <FileIcon />\n </TreeView.LeadingVisual>\n Button.tsx\n <TreeView.TrailingVisual>\n <Octicon\n icon={DiffModifiedIcon}\n color=\"attention.fg\"\n aria-label=\"Modified\"\n />\n </TreeView.TrailingVisual>\n </TreeView.Item>\n </TreeView.SubTree>\n </TreeView.Item>\n <TreeView.Item id=\"package.json\">\n <TreeView.LeadingVisual>\n <FileIcon />\n </TreeView.LeadingVisual>\n package.json\n <TreeView.TrailingVisual>\n <Octicon\n icon={DiffModifiedIcon}\n color=\"attention.fg\"\n aria-label=\"Modified\"\n />\n </TreeView.TrailingVisual>\n </TreeView.Item>\n </TreeView>\n </nav>\n)"
},
{
"id": "components-treeview-features--files",
Expand Down
3 changes: 2 additions & 1 deletion src/PageLayout/PageLayout.docs.json
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,8 @@
"name": "position",
"type": "| 'start' | 'end' | { narrow?: | 'start' | 'end' regular?: | 'start' | 'end' wide?: | 'start' | 'end' }",
"defaultValue": "'end'",
"description": ""
"description": "",
"deprecated": true
},
{
"name": "positionWhenNarrow",
Expand Down
96 changes: 41 additions & 55 deletions src/PageLayout/PageLayout.features.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -83,49 +83,42 @@ export const StickyPane: Story = args => (
<PageLayout.Header padding="normal" divider="line">
<Placeholder label="Header" height={64} />
</PageLayout.Header>
<PageLayout.Content padding="normal" width="large">
<PageLayout.Pane resizable padding="normal" divider="line" sticky={args.sticky} aria-label="Side pane">
<Box sx={{display: 'grid', gap: 3}}>
{Array.from({length: args.numParagraphsInContent}).map((_, i) => {
const testId = `content${i}`
{Array.from({length: args.numParagraphsInPane}).map((_, i) => {
const testId = `paragraph${i}`
return (
<Box key={i} as="p" sx={{margin: 0}}>
<span data-testid={testId}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus
et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet
massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus
in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod
nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare.
massa purus.
</span>
</Box>
)
})}
</Box>
</PageLayout.Content>
<PageLayout.Pane
position="start"
resizable
padding="normal"
divider="line"
sticky={args.sticky}
aria-label="Side pane"
>
</PageLayout.Pane>
<PageLayout.Content padding="normal" width="large">
<Box sx={{display: 'grid', gap: 3}}>
{Array.from({length: args.numParagraphsInPane}).map((_, i) => {
const testId = `paragraph${i}`
{Array.from({length: args.numParagraphsInContent}).map((_, i) => {
const testId = `content${i}`
return (
<Box key={i} as="p" sx={{margin: 0}}>
<span data-testid={testId}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus
et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet
massa purus.
massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus
in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod
nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare.
</span>
</Box>
)
})}
</Box>
</PageLayout.Pane>
</PageLayout.Content>
<PageLayout.Footer padding="normal" divider="line">
<Placeholder label="Footer" height={64} />
</PageLayout.Footer>
Expand Down Expand Up @@ -158,32 +151,32 @@ export const NestedScrollContainer: Story = args => (
<PageLayout.Header padding="normal" divider="line">
<Placeholder label="Header" height={64} />
</PageLayout.Header>
<PageLayout.Content padding="normal" width="large">
<PageLayout.Pane padding="normal" divider="line" sticky aria-label="Side pane">
<Box sx={{display: 'grid', gap: 3}}>
{Array.from({length: args.numParagraphsInContent}).map((_, i) => (
{Array.from({length: args.numParagraphsInPane}).map((_, i) => (
<Box key={i} as="p" sx={{margin: 0}}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus
et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet
massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus
in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod
nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare.
massa purus.
</Box>
))}
</Box>
</PageLayout.Content>
<PageLayout.Pane position="start" padding="normal" divider="line" sticky aria-label="Side pane">
</PageLayout.Pane>
<PageLayout.Content padding="normal" width="large">
<Box sx={{display: 'grid', gap: 3}}>
{Array.from({length: args.numParagraphsInPane}).map((_, i) => (
{Array.from({length: args.numParagraphsInContent}).map((_, i) => (
<Box key={i} as="p" sx={{margin: 0}}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus
et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet
massa purus.
massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus
in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod
nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare.
</Box>
))}
</Box>
</PageLayout.Pane>
</PageLayout.Content>
<PageLayout.Footer padding="normal" divider="line">
<Placeholder label="Footer" height={64} />
</PageLayout.Footer>
Expand Down Expand Up @@ -228,6 +221,23 @@ export const CustomStickyHeader: Story = args => (
Custom sticky header
</Box>
<PageLayout rowGap="none" columnGap="none" padding="none" containerWidth="full">
<PageLayout.Pane padding="normal" divider="line" aria-label="Aside pane" sticky offsetHeader={args.offsetHeader}>
<Box sx={{display: 'grid', gap: 3}}>
{Array.from({length: args.numParagraphsInPane}).map((_, i) => {
const testId = `paragraph${i}`
return (
<Box key={i} as="p" sx={{margin: 0}}>
<span data-testid={testId}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius
tellus et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec
sit amet massa purus.
</span>
</Box>
)
})}
</Box>
</PageLayout.Pane>
<PageLayout.Content padding="normal" width="large">
<Box sx={{display: 'grid', gap: 3}} data-testid="scrollContainer">
{Array.from({length: args.numParagraphsInContent}).map((_, i) => {
Expand All @@ -248,30 +258,6 @@ export const CustomStickyHeader: Story = args => (
})}
</Box>
</PageLayout.Content>
<PageLayout.Pane
position="start"
padding="normal"
divider="line"
aria-label="Aside pane"
sticky
offsetHeader={args.offsetHeader}
>
<Box sx={{display: 'grid', gap: 3}}>
{Array.from({length: args.numParagraphsInPane}).map((_, i) => {
const testId = `paragraph${i}`
return (
<Box key={i} as="p" sx={{margin: 0}}>
<span data-testid={testId}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius
tellus et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec
sit amet massa purus.
</span>
</Box>
)
})}
</Box>
</PageLayout.Pane>
<PageLayout.Footer padding="normal" divider="line">
<Placeholder label="Footer" height={64} />
</PageLayout.Footer>
Expand Down Expand Up @@ -306,7 +292,7 @@ export const ResizablePane: Story = () => (
<PageLayout.Header>
<Placeholder height={64} label="Header" />
</PageLayout.Header>
<PageLayout.Pane resizable position="start">
<PageLayout.Pane resizable>
<Placeholder height={320} label="Pane" />
</PageLayout.Pane>
<PageLayout.Content>
Expand All @@ -323,7 +309,7 @@ export const ScrollContainerWithinPageLayoutPane: Story = () => (
<Box sx={{overflow: 'auto'}}>
<Placeholder label="Above inner scroll container" height={120} />
<PageLayout rowGap="none" columnGap="none" padding="none" containerWidth="full">
<PageLayout.Pane position="start" padding="normal" divider="line" sticky aria-label="Sticky pane">
<PageLayout.Pane padding="normal" divider="line" sticky aria-label="Sticky pane">
<Box sx={{overflow: 'auto'}}>
<PageLayout.Pane padding="normal">
<Placeholder label="Inner scroll container" height={800} />
Expand Down
33 changes: 0 additions & 33 deletions src/PageLayout/PageLayout.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,6 @@ const meta: Meta = {
'Content.hidden.regular': false,
'Content.hidden.narrow': false,
'Content.hidden.wide': false,
'Pane.position.regular': 'end',
'Pane.position.narrow': 'end',
'Pane.position.wide': 'end',
'Pane.width': 'medium',
'Pane.sticky': false,
'Pane.resizable': false,
Expand Down Expand Up @@ -205,31 +202,6 @@ const meta: Meta = {
table: {category: 'Content props'},
},

// Pane prop controls
'Pane.position.regular': {
type: {
name: 'enum',
value: ['start', 'end'],
},
control: {type: 'radio'},
table: {category: 'Pane props'},
},
'Pane.position.narrow': {
type: {
name: 'enum',
value: ['start', 'end'],
},
control: {type: 'radio'},
table: {category: 'Pane props'},
},
'Pane.position.wide': {
type: {
name: 'enum',
value: ['start', 'end'],
},
control: {type: 'radio'},
table: {category: 'Pane props'},
},
'Pane.width': {
type: {
name: 'enum',
Expand Down Expand Up @@ -382,11 +354,6 @@ const Template: Story = args => (
</PageLayout.Content>
{args['Render pane?'] ? (
<PageLayout.Pane
position={{
narrow: args['Pane.position.narrow'],
regular: args['Pane.position.regular'],
wide: args['Pane.position.wide'],
}}
width={args['Pane.width']}
minWidth={args['Pane.minWidth']}
sticky={args['Pane.sticky']}
Expand Down
4 changes: 2 additions & 2 deletions src/PageLayout/PageLayout.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,10 @@ describe('PageLayout', () => {
<PageLayout.Header divider="line" dividerWhenNarrow="filled">
Header
</PageLayout.Header>
<PageLayout.Content>Content</PageLayout.Content>
<PageLayout.Pane position="start" divider="line" dividerWhenNarrow="filled">
<PageLayout.Pane divider="line" dividerWhenNarrow="filled">
Pane
</PageLayout.Pane>
<PageLayout.Content>Content</PageLayout.Content>
<PageLayout.Footer dividerWhenNarrow="line">Footer</PageLayout.Footer>
</PageLayout>
</ThemeProvider>,
Expand Down
Loading

0 comments on commit 57c4bdf

Please sign in to comment.