Skip to content

Commit

Permalink
Merge branch 'next-major' into mp/styled-components-optional-peerdep
Browse files Browse the repository at this point in the history
  • Loading branch information
@mperrotti
mperrotti committed Jul 10, 2023
2 parents 26c19f1 + a8dbf4a commit 3afc06b
Show file tree
Hide file tree
Showing 6 changed files with 2,636 additions and 2,778 deletions.
5 changes: 5 additions & 0 deletions .changeset/odd-socks-hunt.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/react': major
---

The Autocomplete component no longer uses the deprecated ActionList component. There have been minor API updates, but it's largely the same.
171 changes: 88 additions & 83 deletions docs/content/Autocomplete.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,14 +63,14 @@ A function may be passed to the `filterFn` prop if this default filtering behavi
<Autocomplete.Overlay>
<Autocomplete.Menu
items={[
{text: 'main', id: 0},
{text: 'autocomplete-tests', id: 1},
{text: 'a11y-improvements', id: 2},
{text: 'button-bug-fixes', id: 3},
{text: 'radio-input-component', id: 4},
{text: 'release-1.0.0', id: 5},
{text: 'text-input-implementation', id: 6},
{text: 'visual-design-tweaks', id: 7},
{text: 'main', id: '0'},
{text: 'autocomplete-tests', id: '1'},
{text: 'a11y-improvements', id: '2'},
{text: 'button-bug-fixes', id: '3'},
{text: 'radio-input-component', id: '4'},
{text: 'release-1.0.0', id: '5'},
{text: 'text-input-implementation', id: '6'},
{text: 'visual-design-tweaks', id: '7'},
]}
selectedItemIds={[]}
aria-labelledby="autocompleteLabel-basic"
Expand All @@ -86,7 +86,7 @@ In this example, we're passing a [TextInputWithTokens](/TextInputWithTokens) com

```javascript live noinline
const CustomTextInputExample = () => {
const [tokens, setTokens] = React.useState([{text: 'zero', id: 0}])
const [tokens, setTokens] = React.useState([{text: 'zero', id: '0'}])
const selectedTokenIds = tokens.map(token => token.id)
const [selectedItemIds, setSelectedItemIds] = React.useState(selectedTokenIds)
const onTokenRemove = tokenId => {
Expand Down Expand Up @@ -122,14 +122,14 @@ const CustomTextInputExample = () => {
<Autocomplete.Overlay>
<Autocomplete.Menu
items={[
{text: 'zero', id: 0},
{text: 'one', id: 1},
{text: 'two', id: 2},
{text: 'three', id: 3},
{text: 'four', id: 4},
{text: 'five', id: 5},
{text: 'six', id: 6},
{text: 'seven', id: 7},
{text: 'zero', id: '0'},
{text: 'one', id: '1'},
{text: 'two', id: '2'},
{text: 'three', id: '3'},
{text: 'four', id: '4'},
{text: 'five', id: '5'},
{text: 'six', id: '6'},
{text: 'seven', id: '7'},
]}
selectedItemIds={selectedItemIds}
onSelectedChange={onSelectedChange}
Expand All @@ -154,14 +154,14 @@ render(<CustomTextInputExample />)
<Autocomplete.Input />
<Autocomplete.Menu
items={[
{text: 'main', id: 0},
{text: 'autocomplete-tests', id: 1},
{text: 'a11y-improvements', id: 2},
{text: 'button-bug-fixes', id: 3},
{text: 'radio-input-component', id: 4},
{text: 'release-1.0.0', id: 5},
{text: 'text-input-implementation', id: 6},
{text: 'visual-design-tweaks', id: 7},
{text: 'main', id: '0'},
{text: 'autocomplete-tests', id: '1'},
{text: 'a11y-improvements', id: '2'},
{text: 'button-bug-fixes', id: '3'},
{text: 'radio-input-component', id: '4'},
{text: 'release-1.0.0', id: '5'},
{text: 'text-input-implementation', id: '6'},
{text: 'visual-design-tweaks', id: '7'},
]}
selectedItemIds={[]}
aria-labelledby="autocompleteLabel-withoutOverlay"
Expand Down Expand Up @@ -192,9 +192,9 @@ function getColorCircle(color) {

const CustomRenderedItemExample = () => {
const [tokens, setTokens] = React.useState([
{text: 'enhancement', id: 1, fillColor: '#a2eeef'},
{text: 'bug', id: 2, fillColor: '#d73a4a'},
{text: 'good first issue', id: 3, fillColor: '#0cf478'},
{text: 'enhancement', id: '1', fillColor: '#a2eeef'},
{text: 'bug', id: '2', fillColor: '#d73a4a'},
{text: 'good first issue', id: '3', fillColor: '#0cf478'},
])
const selectedTokenIds = tokens.map(token => token.id)
const [selectedItemIds, setSelectedItemIds] = React.useState(selectedTokenIds)
Expand Down Expand Up @@ -236,18 +236,23 @@ const CustomRenderedItemExample = () => {
<Autocomplete.Overlay>
<Autocomplete.Menu
items={[
{leadingVisual: getColorCircle('#a2eeef'), text: 'enhancement', id: 1, metadata: {fillColor: '#a2eeef'}},
{leadingVisual: getColorCircle('#d73a4a'), text: 'bug', id: 2, metadata: {fillColor: '#d73a4a'}},
{
leadingVisual: getColorCircle('#a2eeef'),
text: 'enhancement',
id: '1',
metadata: {fillColor: '#a2eeef'},
},
{leadingVisual: getColorCircle('#d73a4a'), text: 'bug', id: '2', metadata: {fillColor: '#d73a4a'}},
{
leadingVisual: getColorCircle('#0cf478'),
text: 'good first issue',
id: 3,
id: '3',
metadata: {fillColor: '#0cf478'},
},
{leadingVisual: getColorCircle('#ffd78e'), text: 'design', id: 4, metadata: {fillColor: '#ffd78e'}},
{leadingVisual: getColorCircle('#ff0000'), text: 'blocker', id: 5, metadata: {fillColor: '#ff0000'}},
{leadingVisual: getColorCircle('#a4f287'), text: 'backend', id: 6, metadata: {fillColor: '#a4f287'}},
{leadingVisual: getColorCircle('#8dc6fc'), text: 'frontend', id: 7, metadata: {fillColor: '#8dc6fc'}},
{leadingVisual: getColorCircle('#ffd78e'), text: 'design', id: '4', metadata: {fillColor: '#ffd78e'}},
{leadingVisual: getColorCircle('#ff0000'), text: 'blocker', id: '5', metadata: {fillColor: '#ff0000'}},
{leadingVisual: getColorCircle('#a4f287'), text: 'backend', id: '6', metadata: {fillColor: '#a4f287'}},
{leadingVisual: getColorCircle('#8dc6fc'), text: 'frontend', id: '7', metadata: {fillColor: '#8dc6fc'}},
]}
selectedItemIds={selectedItemIds}
onSelectedChange={onSelectedChange}
Expand Down Expand Up @@ -289,14 +294,14 @@ const CustomSortAfterMenuClose = () => {
<Autocomplete.Overlay>
<Autocomplete.Menu
items={[
{text: 'main', id: 0},
{text: 'autocomplete-tests', id: 1},
{text: 'a11y-improvements', id: 2},
{text: 'button-bug-fixes', id: 3},
{text: 'radio-input-component', id: 4},
{text: 'release-1.0.0', id: 5},
{text: 'text-input-implementation', id: 6},
{text: 'visual-design-tweaks', id: 7},
{text: 'main', id: '0'},
{text: 'autocomplete-tests', id: '1'},
{text: 'a11y-improvements', id: '2'},
{text: 'button-bug-fixes', id: '3'},
{text: 'radio-input-component', id: '4'},
{text: 'release-1.0.0', id: '5'},
{text: 'text-input-implementation', id: '6'},
{text: 'visual-design-tweaks', id: '7'},
]}
selectedItemIds={selectedItemIds}
aria-labelledby="autocompleteLabel-sortAfterClose"
Expand Down Expand Up @@ -333,14 +338,14 @@ const CustomSearchFilter = () => {
<Autocomplete.Overlay>
<Autocomplete.Menu
items={[
{text: 'main', id: 0},
{text: 'autocomplete-tests', id: 1},
{text: 'a11y-improvements', id: 2},
{text: 'button-bug-fixes', id: 3},
{text: 'radio-input-component', id: 4},
{text: 'release-1.0.0', id: 5},
{text: 'text-input-implementation', id: 6},
{text: 'visual-design-tweaks', id: 7},
{text: 'main', id: '0'},
{text: 'autocomplete-tests', id: '1'},
{text: 'a11y-improvements', id: '2'},
{text: 'button-bug-fixes', id: '3'},
{text: 'radio-input-component', id: '4'},
{text: 'release-1.0.0', id: '5'},
{text: 'text-input-implementation', id: '6'},
{text: 'visual-design-tweaks', id: '7'},
]}
selectedItemIds={[]}
aria-labelledby="autocompleteLabel-customFilter"
Expand Down Expand Up @@ -419,14 +424,14 @@ const InOverlayWithCustomScrollContainerRef = () => {
<Box overflow="auto" flexGrow={1} ref={scrollContainerRef}>
<Autocomplete.Menu
items={[
{text: 'main', id: 0},
{text: 'autocomplete-tests', id: 1},
{text: 'a11y-improvements', id: 2},
{text: 'button-bug-fixes', id: 3},
{text: 'radio-input-component', id: 4},
{text: 'release-1.0.0', id: 5},
{text: 'text-input-implementation', id: 6},
{text: 'visual-design-tweaks', id: 7},
{text: 'main', id: '0'},
{text: 'autocomplete-tests', id: '1'},
{text: 'a11y-improvements', id: '2'},
{text: 'button-bug-fixes', id: '3'},
{text: 'radio-input-component', id: '4'},
{text: 'release-1.0.0', id: '5'},
{text: 'text-input-implementation', id: '6'},
{text: 'visual-design-tweaks', id: '7'},
]}
selectedItemIds={[]}
customScrollContainerRef={scrollContainerRef}
Expand All @@ -448,14 +453,14 @@ render(<InOverlayWithCustomScrollContainerRef />)
```javascript live noinline
const MultiSelect = () => {
const items = [
{text: 'main', id: 0},
{text: 'autocomplete-tests', id: 1},
{text: 'a11y-improvements', id: 22},
{text: 'button-bug-fixes', id: 3},
{text: 'radio-input-component', id: 4},
{text: 'release-1.0.0', id: 5},
{text: 'text-input-implementation', id: 6},
{text: 'visual-design-tweaks', id: 7},
{text: 'main', id: '0'},
{text: 'autocomplete-tests', id: '1'},
{text: 'a11y-improvements', id: '2'},
{text: 'button-bug-fixes', id: '3'},
{text: 'radio-input-component', id: '4'},
{text: 'release-1.0.0', id: '5'},
{text: 'text-input-implementation', id: '6'},
{text: 'visual-design-tweaks', id: '7'},
]
const [selectedItemIds, setSelectedItemIds] = React.useState([])
const onSelectedChange = newlySelectedItems => {
Expand Down Expand Up @@ -514,14 +519,14 @@ const MultiSelectAddNewItem = () => {
}

const [localItemsState, setLocalItemsState] = React.useState([
{text: 'main', id: 0},
{text: 'autocomplete-tests', id: 1},
{text: 'a11y-improvements', id: 22},
{text: 'button-bug-fixes', id: 3},
{text: 'radio-input-component', id: 4},
{text: 'release-1.0.0', id: 5},
{text: 'text-input-implementation', id: 6},
{text: 'visual-design-tweaks', id: 7},
{text: 'main', id: '0'},
{text: 'autocomplete-tests', id: '1'},
{text: 'a11y-improvements', id: '2'},
{text: 'button-bug-fixes', id: '3'},
{text: 'radio-input-component', id: '4'},
{text: 'release-1.0.0', id: '5'},
{text: 'text-input-implementation', id: '6'},
{text: 'visual-design-tweaks', id: '7'},
])
const getItemById = id => localItemsState.find(item => item.id === id)
const [filterVal, setFilterVal] = React.useState('')
Expand Down Expand Up @@ -625,14 +630,14 @@ export function AutocompleteWithContextInternal() {
<Autocomplete.Overlay>
<Autocomplete.Menu
items={[
{text: 'main', id: 0},
{text: 'autocomplete-tests', id: 1},
{text: 'a11y-improvements', id: 2},
{text: 'button-bug-fixes', id: 3},
{text: 'radio-input-component', id: 4},
{text: 'release-1.0.0', id: 5},
{text: 'text-input-implementation', id: 6},
{text: 'visual-design-tweaks', id: 7},
{text: 'main', id: '0'},
{text: 'autocomplete-tests', id: '1'},
{text: 'a11y-improvements', id: '2'},
{text: 'button-bug-fixes', id: '3'},
{text: 'radio-input-component', id: '4'},
{text: 'release-1.0.0', id: '5'},
{text: 'text-input-implementation', id: '6'},
{text: 'visual-design-tweaks', id: '7'},
]}
selectedItemIds={[]}
selectionVariant="single"
Expand Down
Loading

0 comments on commit 3afc06b

Please sign in to comment.