kyfx
/
playwright
mirror of https://github.com/microsoft/playwright.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore(web): replace static ID with React.useId (#33474)

This commit is contained in:
Simon Knott 2024-11-06 14:42:48 +01:00 committed by GitHub
parent f554f42b82
commit 0d92737a07
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 7 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/recorder/src/recorder.tsx
View File

@ -168,7 +168,6 @@ export const Recorder: React.FC<RecorderProps> = ({
sidebarSize={200}
main={<CodeMirrorWrapper text={source.text} language={source.language} highlight={source.highlight} revealLine={source.revealLine} readOnly={true} lineNumbers={true} />}
sidebar={<TabbedPane
id='recorder-sidebar'
rightToolbar={selectedTab === 'locator' || selectedTab === 'aria' ? [<ToolbarButton key={1} icon='files' title='Copy' onClick={() => copy((selectedTab === 'locator' ? locator : ariaSnapshot) || '')} />] : []}
tabs={[
{

1
packages/trace-viewer/src/ui/networkResourceDetails.tsx
View File

@ -31,7 +31,6 @@ export const NetworkResourceDetails: React.FunctionComponent<{
return <TabbedPane
dataTestId='network-request-details'
id='network-request-tabs'
leftToolbar={[<ToolbarButton key='close' icon='close' title='Close' onClick={onClose}></ToolbarButton>]}
tabs={[
{

3
packages/trace-viewer/src/ui/recorder/recorderView.tsx
View File

@ -151,7 +151,7 @@ export const Workbench: React.FunctionComponent = () => {
<ToolbarButton icon='color-mode' title='Toggle color mode' toggled={false} onClick={() => toggleTheme()}></ToolbarButton>
</Toolbar>;
const sidebarTabbedPane = <TabbedPane id='recorder-actions-tab' tabs={[actionsTab]} />;
const sidebarTabbedPane = <TabbedPane tabs={[actionsTab]} />;
const traceView = <TraceView
sdkLanguage={sdkLanguage}
callId={traceCallId}
@ -249,7 +249,6 @@ const PropertiesView: React.FunctionComponent<{
];
return <TabbedPane
id='properties-tabs'
tabs={tabs}
selectedTab={selectedPropertiesTab}
setSelectedTab={setSelectedPropertiesTab}

2
packages/trace-viewer/src/ui/workbench.tsx
View File

@ -348,7 +348,6 @@ export const Workbench: React.FunctionComponent<{
openPage={openPage} />}
sidebar={
<TabbedPane
id='actionlist-sidebar'
tabs={[actionsTab, metadataTab]}
selectedTab={selectedNavigatorTab}
setSelectedTab={setSelectedNavigatorTab}
@ -356,7 +355,6 @@ export const Workbench: React.FunctionComponent<{
}
/>}
sidebar={<TabbedPane
id='workbench-sidebar'
tabs={tabs}
selectedTab={selectedPropertiesTab}
setSelectedTab={selectPropertiesTab}

12
packages/web/src/components/tabbedPane.tsx
View File

@ -36,8 +36,8 @@ export const TabbedPane: React.FunctionComponent<{
setSelectedTab?: (tab: string) => void,
dataTestId?: string,
mode?: 'default' | 'select',
id: string,
}> = ({ tabs, selectedTab, setSelectedTab, leftToolbar, rightToolbar, dataTestId, mode, id }) => {
}> = ({ tabs, selectedTab, setSelectedTab, leftToolbar, rightToolbar, dataTestId, mode }) => {
const id = React.useId();
if (!selectedTab)
selectedTab = tabs[0].id;
if (!mode)
@ -53,7 +53,7 @@ export const TabbedPane: React.FunctionComponent<{
<TabbedPaneTab
key={tab.id}
id={tab.id}
ariaControls={`pane-${id}-tab-${tab.id}`}
ariaControls={`${id}-${tab.id}`}
title={tab.title}
count={tab.count}
errorCount={tab.errorCount}
@ -72,7 +72,7 @@ export const TabbedPane: React.FunctionComponent<{
suffix = ` (${tab.count})`;
if (tab.errorCount)
suffix = ` (${tab.errorCount})`;
return <option key={tab.id} value={tab.id} selected={tab.id === selectedTab} role='tab' aria-controls={`pane-${id}-tab-${tab.id}`}>{tab.title}{suffix}</option>;
return <option key={tab.id} value={tab.id} selected={tab.id === selectedTab} role='tab' aria-controls={`${id}-${tab.id}`}>{tab.title}{suffix}</option>;
})}
</select>
</div>}
@ -84,9 +84,9 @@ export const TabbedPane: React.FunctionComponent<{
tabs.map(tab => {
const className = 'tab-content tab-' + tab.id;
if (tab.component)
return <div key={tab.id} id={`pane-${id}-tab-${tab.id}`} role='tabpanel' aria-label={tab.title} className={className} style={{ display: selectedTab === tab.id ? 'inherit' : 'none' }}>{tab.component}</div>;
return <div key={tab.id} id={`${id}-${tab.id}`} role='tabpanel' aria-label={tab.title} className={className} style={{ display: selectedTab === tab.id ? 'inherit' : 'none' }}>{tab.component}</div>;
if (selectedTab === tab.id)
return <div key={tab.id} id={`pane-${id}-tab-${tab.id}`} role='tabpanel' aria-label={tab.title} className={className}>{tab.render!()}</div>;
return <div key={tab.id} id={`${id}-${tab.id}`} role='tabpanel' aria-label={tab.title} className={className}>{tab.render!()}</div>;
})
}
</div>