Recent bugs in primer/react.

[hardihardi]

Description

Here are some recent open bugs in the primer/react repository:

1. ActionList.TrailingAction does not fit ActionList.Item parent

   • Created by: prichodko
   • Assignee: langermank
   • Created: 10 hours ago
   • Updated: 8 hours ago
   • Description: The ActionList.TrailingAction component within ActionList.Item is causing a layout issue. The underlying IconButton exceeds the available height of 20px, causing unwanted expansion of the wrapping element.
   • Comments: 2

2. Stack does not properly forward ref

   • Created by: iansan5653
   • Created: 53 days ago
   • Updated: 1 day ago
   • Description: Stack appears to accept a ref prop based on the TypeScript types, but this ref is not actually bound to the underlying element.
   • Comments: 8

3. SelectPanel inside Dialog v2 footer incorrectly chooses its anchor side on opening (memex)

   • Created by: anleac
   • Assignee: joshblack
   • Created: 08 November 2023
   • Updated: 3 days ago
   • Description: SelectPanel does not correctly pick the direction to open in when used inside Dialog V2 footer, leading to the panel opening off the page downwards.
   • Comments: 21

4. Portal is not ssr compat - accesses document during render

   • Created by: mattcosta7
   • Created: 08 September 2023
   • Updated: 4 days ago
   • Description: When using InlineAutocomplete, we inherit usage of <Portal /> rendering on page load, which isn't SSR compatible.
   • Comments: 7

5. Portal Hardcoded Z-Index Buries Components

   • Created by: ntrappe-msft
   • Created: 24 May 2024
   • Updated: 5 days ago
   • Description: Problems arise from mixing Primer and non-Primer components due to Primer Portal setting a div with z-index of 1, causing non-Primer components with their own z-indices to be buried.
   • Comments: 4

6. Dialog V2 does not work when stacked over Overlays or other components using useOnClickOutside

   • Created by: iansan5653
   • Created: 03 February 2023
   • Updated: 6 days ago
   • Description: Dialog component does not use useOnClickOutside, causing issues when stacked over Overlay or AnchoredOverlay.
   • Comments: 9

7. Sub-component pattern cause error when used in React Server Components

   • Created by: joshblack
   • Created: 07 March 2024
   • Updated: 6 days ago
   • Description: When using a component with sub-component pattern like PageLayout, it cannot be used in a React Server Component.
   • Comments: 6

8. UnderlineNav items collapses into the more menu then it is wrapped with a flex

   • Created by: broccolinisoup
   • Created: 23 February 2024
   • Updated: 6 days ago
   • Description: When UnderlineNav is placed into a flex container, items are collapsed into the menu despite there being enough space.
   • Comments: 5

9. ActionMenu.Anchor should only accept button

   • Created by: siddharthkp
   • Created: 45 days ago
   • Updated: 25 days ago
   • Description: ActionMenu.Anchor should validate its children and only accept a button to avoid accessibility issues.
   • Comments: 3

10. SelectPanel bug when we have static items list is inside same component

    • Created by: eriknyk
    • Created: 10 July 2024
    • Updated: 25 days ago
    • Description: SelectPanel works buggy when static items list is inside the same component.
    • Comments: 2

There are 25 open bug issues in total.

Steps to reproduce

To reproduce the errors described above, please follow these steps.

Reproducing ActionList.TrailingAction Layout Issue

1. Open CodeSandbox: Use the @primer/react template on CodeSandbox.
2. Modify the Component:

   import React from 'react';
   import { ActionList, IconButton } from '@primer/react';
   import { TrashIcon } from '@primer/octicons-react';
   
   function App() {
     return (
       <ActionList>
         <ActionList.Item>
           <ActionList.LeadingVisual>
             <CommentIcon />
           </ActionList.LeadingVisual>
           Thread Name
           <ActionList.Description variant="inline">
             <RelativeTime date={new Date()} format="relative" />
           </ActionList.Description>
           <ActionList.TrailingAction
             icon={TrashIcon}
             label="Delete conversation"
             onClick={() => {}}
           />
         </ActionList.Item>
       </ActionList>
     );
   }
   
   export default App;

3. Run the Project: Observe the layout issue with ActionList.TrailingAction.

Reproducing Stack Ref Forwarding Issue

1. Open CodeSandbox: Use the @primer/react template on CodeSandbox.
2. Modify the Component:

   import React, { useRef, useEffect } from 'react';
   import { Stack } from '@primer/react';
   
   function Example() {
     const ref = useRef<HTMLDivElement>(null);
   
     useEffect(() => {
       console.log(ref.current);
     }, []);
   
     return <Stack ref={ref}>contents</Stack>;
   }
   
   export default Example;

3. Run the Project: Observe that the console logs null instead of an HTMLDivElement.

Reproducing SelectPanel in Dialog V2 Footer Issue

1. Open CodeSandbox: Use the @primer/react template on CodeSandbox.
2. Modify the Component:

   import React, { useState } from 'react';
   import { Dialog, SelectPanel } from '@primer/react';
   
   function App() {
     const [open, setOpen] = useState(true);
   
     return (
       <Dialog isOpen={open} onDismiss={() => setOpen(false)}>
         <Dialog.Header>Dialog Title</Dialog.Header>
         <Dialog.Body>
           <p>Dialog Body</p>
         </Dialog.Body>
         <Dialog.Footer>
           <SelectPanel
             title="Select an option"
             items={[
               { text: 'Option 1', id: 1 },
               { text: 'Option 2', id: 2 },
             ]}
             placeholder="Filter options"
           />
         </Dialog.Footer>
       </Dialog>
     );
   }
   
   export default App;

3. Run the Project: Observe the SelectPanel opening off the page downwards.

Reproducing Portal SSR Compatibility Issue

1. Open CodeSandbox: Use the @primer/react template on CodeSandbox.
2. Modify the Component:

   import React from 'react';
   import { InlineAutocomplete } from '@primer/react';
   
   function App() {
     return <InlineAutocomplete />;
   }
   
   export default App;

3. Run the Project: Observe the SSR compatibility issue with document during render.

Reproducing Portal Z-Index Issue

1. Open CodeSandbox: Use the @primer/react template on CodeSandbox.
2. Modify the Component:

   import React from 'react';
   import { ActionMenu } from '@primer/react';
   
   function App() {
     return (
       <div style={{ position: 'fixed', zIndex: 50 }}>
         <ActionMenu>
           <ActionMenu.Button>Color Mode</ActionMenu.Button>
           <ActionMenu.Overlay>
             <ActionMenu.Item>Light Mode</ActionMenu.Item>
             <ActionMenu.Item>Dark Mode</ActionMenu.Item>
           </ActionMenu.Overlay>
         </ActionMenu>
       </div>
     );
   }
   
   export default App;

3. Run the Project: Observe the z-index issue causing the overlay to be buried.

Reproducing Dialog V2 Click Outside Issue

1. Open CodeSandbox: Use the @primer/react template on CodeSandbox.
2. Modify the Component:

   import React, { useState, useRef } from 'react';
   import { Button, Overlay, Dialog } from '@primer/react';
   
   function App() {
     const [overlayVisible, setOverlayVisible] = useState(false);
     const buttonRef = useRef(null);
   
     return (
       <>
         <Button onClick={() => setOverlayVisible(true)} ref={buttonRef}>
           Open Overlay
         </Button>
         {overlayVisible && (
           <Overlay
             returnFocusRef={buttonRef}
             onClickOutside={() => setOverlayVisible(false)}
             onEscape={() => setOverlayVisible(false)}
           >
             <Button onClick={() => setDialogVisible(true)}>Open Dialog</Button>
           </Overlay>
         )}
       </>
     );
   }
   
   export default App;

3. Run the Project: Observe the click outside issue with Dialog and Overlay.

Reproducing Sub-Component Pattern Error

1. Open CodeSandbox: Use the @primer/react template on CodeSandbox.
2. Modify the Component:

   import React from 'react';
   import { PageLayout } from '@primer/react';
   
   export default function IndexPage() {
     return (
       <PageLayout>
         <PageLayout.Header>Header</PageLayout.Header>
         <PageLayout.Content>Content</PageLayout.Content>
       </PageLayout>
     );
   }

3. Run the Project: Observe the error in React Server Components.

Reproducing UnderlineNav Flex Issue

1. Open CodeSandbox: Use the @primer/react template on CodeSandbox.
2. Modify the Component:

   import React from 'react';
   import { Box, UnderlineNav } from '@primer/react';
   
   function App() {
     return (
       <Box sx={{ display: 'flex' }}>
         <UnderlineNav aria-label="Repository">
           <UnderlineNav.Item href="#" aria-current="page">
             Item 1
           </UnderlineNav.Item>
           <UnderlineNav.Item href="#">Item 2</UnderlineNav.Item>
         </UnderlineNav>
       </Box>
     );
   }
   
   export default App;

3. Run the Project: Observe the items collapsing into the menu despite enough space.

Reproducing ActionMenu.Anchor Button Issue

1. Open CodeSandbox: Use the @primer/react template on CodeSandbox.
2. Modify the Component:

   import React from 'react';
   import { ActionMenu, IconButton } from '@primer/react';
   import { FilterIcon } from '@primer/octicons-react';
   
   function App() {
     return (
       <ActionMenu>
         <ActionMenu.Anchor>
           <div className="relative">
             <IconButton aria-label="Filter files in tree" icon={FilterIcon} />
             <div aria-label="Showing only changed files" className="active-indicator" />
           </div>
         </ActionMenu.Anchor>
       </ActionMenu>
     );
   }
   
   export default App;

3. Run the Project: Observe the accessibility issue with ActionMenu.Anchor.

Reproducing SelectPanel Static Items Issue

1. Open CodeSandbox: Use the @primer/react template on CodeSandbox.
2. Modify the Component:

   import React, { useState } from 'react';
   import { SelectPanel, Button } from '@primer/react';
   import { TriangleDownIcon } from '@primer/octicons-react';
   
   function SelectorDemo() {
     const items = [
       { text: 'enhancement', description: 'Something to enhancement', id: 1 },
       { text: 'bug', description: `Something isn't working`, id: 2 },
     ];
   
     const [selected, setSelected] = useState([]);
     const [filter, setFilter] = useState('');
     const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
     const [open, setOpen] = useState(false);
   
     return (
       <>
         <h1>Multi Select Panel</h1>
         <SelectPanel
           title="Select labels"
           subtitle="Use labels to organize issues and pull requests"
           renderAnchor={({ children, 'aria-labelledby': ariaLabelledBy, ...anchorProps }) => (
             <Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps} aria-haspopup="dialog">
               {children ?? 'Select Labels'}
             </Button>
           )}
           placeholderText="Filter labels"
           open={open}
           onOpenChange={setOpen}
           items={filteredItems}
           selected={selected}
           onSelectedChange={setSelected}
           onFilterChange={setFilter}
           showItemDividers={true}
           overlayProps={{ width: 'small', height: 'xsmall' }}
         />
       </>
     );
   }
   
   export default SelectorDemo;

3. Run the Project: Observe the issue with SelectPanel when static items list is inside the same component.

Version

v35.2.0

Browser

No response