Skip to content

Commit

Permalink
Fix Tabs styling in Font Library modal (#65330)
Browse files Browse the repository at this point in the history 
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: DaniGuardiola <daniguardiola@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
  • Loading branch information
@mirka @ciampo
4 people authored Sep 16, 2024
1 parent 38e74db commit 4ca78cd
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 36 deletions.
52 changes: 26 additions & 26 deletions packages/edit-site/src/components/global-styles/font-library-modal/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,39 +66,39 @@ function FontLibraryModal( {
isFullScreen
className="font-library-modal"
>
<div className="font-library-modal__tabs">
<Tabs defaultTabId={ defaultTabId }>
<Tabs defaultTabId={ defaultTabId }>
<div className="font-library-modal__tablist">
<Tabs.TabList>
{ tabs.map( ( { id, title } ) => (
<Tabs.Tab key={ id } tabId={ id }>
{ title }
</Tabs.Tab>
) ) }
</Tabs.TabList>
{ tabs.map( ( { id } ) => {
let contents;
switch ( id ) {
case 'upload-fonts':
contents = <UploadFonts />;
break;
case 'installed-fonts':
contents = <InstalledFonts />;
break;
default:
contents = <FontCollection slug={ id } />;
}
return (
<Tabs.TabPanel
key={ id }
tabId={ id }
focusable={ false }
>
{ contents }
</Tabs.TabPanel>
);
} ) }
</Tabs>
</div>
</div>
{ tabs.map( ( { id } ) => {
let contents;
switch ( id ) {
case 'upload-fonts':
contents = <UploadFonts />;
break;
case 'installed-fonts':
contents = <InstalledFonts />;
break;
default:
contents = <FontCollection slug={ id } />;
}
return (
<Tabs.TabPanel
key={ id }
tabId={ id }
focusable={ false }
>
{ contents }
</Tabs.TabPanel>
);
} ) }
</Tabs>
</Modal>
);
}
Expand Down
19 changes: 9 additions & 10 deletions packages/edit-site/src/components/global-styles/font-library-modal/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,18 +129,17 @@ $footer-height: 70px;
padding-bottom: $grid-unit-20;
}

.font-library-modal__tabs {
[role="tablist"] {
position: sticky;
top: 0;
border-bottom: 1px solid $gray-300;
background: $white;
margin: 0 #{$grid-unit-40 * -1};
padding: 0 $grid-unit-20;
z-index: 1;
}
.font-library-modal__tablist {
position: sticky;
top: 0;
border-bottom: 1px solid $gray-300;
background: $white;
margin: 0 #{$grid-unit-40 * -1};
padding: 0 $grid-unit-20;
z-index: 1;
}


.font-library-modal__upload-area {
align-items: center;
display: flex;
Expand Down

1 comment on commit 4ca78cd

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 4ca78cd.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/10882099830
📝 Reported issues:

Please sign in to comment.