Skip to content

Commit d93e19c

Browse files
im3dabasiaim3dabasia
committed
chore: Unify classnames of the component
1 parent 2d216f2 commit d93e19c

3 files changed

Lines changed: 19 additions & 20 deletions

File tree

‎packages/block-editor/src/components/icon-picker-modal/icon-grid.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,36 +7,36 @@ import { safeHTML } from '@wordpress/dom';
77

88
export default function IconGrid( { icons, onSelect, value } ) {
99
return (
10-
<div className="wp-block-icon__inserter-grid">
10+
<div className="block-editor-icon-picker-modal__grid">
1111
{ ! icons?.length ? (
12-
<div className="wp-block-icon__inserter-grid-no-results">
12+
<div className="block-editor-icon-picker-modal__grid-no-results">
1313
<p>{ __( 'No results found.' ) }</p>
1414
</div>
1515
) : (
1616
<div
17-
className="wp-block-icon__inserter-grid-icons-list"
17+
className="block-editor-icon-picker-modal__grid-icons-list"
1818
aria-label={ __( 'Icon library' ) }
1919
>
2020
{ icons.map( ( icon ) => {
2121
return (
2222
<Button
2323
key={ icon.name }
24-
className="wp-block-icon__inserter-grid-icons-list-item"
24+
className="block-editor-icon-picker-modal__grid-icons-list-item"
2525
onClick={ () => onSelect?.( icon.name ) }
2626
variant={
2727
icon.name === value ? 'primary' : undefined
2828
}
2929
__next40pxDefaultSize
3030
>
31-
<span className="wp-block-icon__inserter-grid-icons-list-item-icon">
31+
<span className="block-editor-icon-picker-modal__grid-icons-list-item-icon">
3232
<span
33-
className="wp-block-icon__inserter-grid-icons-list-item-svg"
33+
className="block-editor-icon-picker-modal__grid-icons-list-item-svg"
3434
dangerouslySetInnerHTML={ {
3535
__html: safeHTML( icon.content ),
3636
} }
3737
/>
3838
</span>
39-
<span className="wp-block-icon__inserter-grid-icons-list-item-title">
39+
<span className="block-editor-icon-picker-modal__grid-icons-list-item-title">
4040
{ icon.label }
4141
</span>
4242
</Button>

‎packages/block-editor/src/components/icon-picker-modal/modal.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,13 +46,13 @@ export default function IconPickerModal( {
4646

4747
return (
4848
<Modal
49-
className="wp-block-icon__inserter-modal"
49+
className="block-editor-icon-picker-modal"
5050
title={ title }
5151
onRequestClose={ onRequestClose }
5252
isFullScreen
5353
>
54-
<div className="wp-block-icon__inserter">
55-
<div className="wp-block-icon__inserter-header">
54+
<div className="block-editor-icon-picker-modal__inserter">
55+
<div className="block-editor-icon-picker-modal__header">
5656
<SearchControl
5757
value={ searchInput }
5858
onChange={ debouncedSetSearchInput }

‎packages/block-editor/src/components/icon-picker-modal/style.scss‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,49 @@
11
@use "@wordpress/base-styles/variables" as *;
22

33
// Styles for the icon picker modal UI.
4-
// These classnames intentionally match the existing Icon block inserter styles
5-
// so the UI stays consistent while the picker is migrated into block-editor.
4+
// Use block-editor-prefixed classnames to keep styles scoped to the package.
65

7-
.wp-block-icon__inserter {
6+
.block-editor-icon-picker-modal__inserter {
87
padding: 0 $grid-unit-30;
98
margin: 0 (-1 * $grid-unit-30);
109
}
1110

12-
.wp-block-icon__inserter-header {
11+
.block-editor-icon-picker-modal__header {
1312
align-items: center;
1413
display: flex;
1514
justify-content: space-between;
1615
margin-bottom: $grid-unit-20;
1716
}
1817

19-
.wp-block-icon__inserter-grid-icons-list {
18+
.block-editor-icon-picker-modal__grid-icons-list {
2019
display: grid;
2120
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
2221
}
2322

24-
.wp-block-icon__inserter-grid-no-results {
23+
.block-editor-icon-picker-modal__grid-no-results {
2524
display: flex;
2625
justify-content: center;
2726
}
2827

29-
.wp-block-icon__inserter-grid-icons-list-item {
28+
.block-editor-icon-picker-modal__grid-icons-list-item {
3029
display: flex;
3130
flex-direction: column;
3231
height: auto !important;
3332
}
3433

35-
.wp-block-icon__inserter-grid-icons-list-item-icon {
34+
.block-editor-icon-picker-modal__grid-icons-list-item-icon {
3635
padding: $grid-unit-15;
3736
}
3837

3938
// Ensure the injected SVG renders consistently (the old HtmlRenderer applied
4039
// width directly to the root SVG element).
41-
.wp-block-icon__inserter-grid-icons-list-item-svg svg {
40+
.block-editor-icon-picker-modal__grid-icons-list-item-svg svg {
4241
display: block;
4342
width: 24px;
4443
height: 24px;
4544
}
4645

47-
.wp-block-icon__inserter-grid-icons-list-item-title {
46+
.block-editor-icon-picker-modal__grid-icons-list-item-title {
4847
font-size: $font-size-small;
4948
padding: $grid-unit-05 $grid-unit-05 $grid-unit-10;
5049
overflow: hidden;

0 commit comments

Comments
 (0)