Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace ad hoc badges with Badge component #68086

Closed
wants to merge 4 commits into from
Closed

Replace ad hoc badges with Badge component #68086

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b39c9b4
Replace span with Badge component in block editor list view
prasadkarmalkar Dec 18, 2024
8aab6b5
Export badge component
prasadkarmalkar Dec 18, 2024
44a48b8
Replace span with Badge component in site editor
prasadkarmalkar Dec 18, 2024
c552875
Replace span with Badge component in Inspector in page editor
prasadkarmalkar Dec 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 2 additions & 8 deletions packages/block-editor/src/components/list-view/block-select-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import clsx from 'clsx';
* WordPress dependencies
*/
import {
Badge,
Copy link
Member

Choose a reason for hiding this comment

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

We currently don't expose Badge as a public component. You'll have to use the private API unlock mechanism to use it, see #68062 for a similar example.

__experimentalHStack as HStack,
__experimentalTruncate as Truncate,
} from '@wordpress/components';
Expand Down Expand Up @@ -116,14 +117,7 @@ function ListViewBlockSelectButton(
<Truncate ellipsizeMode="auto">{ blockTitle }</Truncate>
</span>
{ blockInformation?.anchor && (
<span className="block-editor-list-view-block-select-button__anchor-wrapper">
<Truncate
className="block-editor-list-view-block-select-button__anchor"
ellipsizeMode="auto"
>
{ blockInformation.anchor }
</Truncate>
</span>
<Badge>{ blockInformation.anchor }</Badge>
) }
{ isSticky && (
<span className="block-editor-list-view-block-select-button__sticky">
Expand Down
21 changes: 0 additions & 21 deletions packages/block-editor/src/components/list-view/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -398,27 +398,6 @@
}
}

.block-editor-list-view-block-select-button__anchor-wrapper {
position: relative;
max-width: min(110px, 40%);
width: 100%;
}

.block-editor-list-view-block-select-button__anchor {
position: absolute;
right: 0;
transform: translateY(-50%);
background: rgba($black, 0.1);
border-radius: $radius-x-small;
padding: 2px 6px;
max-width: 100%;
box-sizing: border-box;
}

&.is-selected .block-editor-list-view-block-select-button__anchor {
background: rgba($black, 0.3);
}

.block-editor-list-view-block-select-button__lock,
.block-editor-list-view-block-select-button__sticky {
line-height: 0;
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export {
default as Autocomplete,
useAutocompleteProps as __unstableUseAutocompleteProps,
} from './autocomplete';
export { default as Badge } from './badge';
export { default as BaseControl, useBaseControlProps } from './base-control';
export {
/** @deprecated Import `BorderBoxControl` instead. */
Expand Down
5 changes: 2 additions & 3 deletions packages/editor/src/components/post-card-panel/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
__experimentalHStack as HStack,
__experimentalVStack as VStack,
__experimentalText as Text,
Badge,
} from '@wordpress/components';
import { store as coreStore } from '@wordpress/core-data';
import { useSelect } from '@wordpress/data';
Expand Down Expand Up @@ -111,9 +112,7 @@ export default function PostCardPanel( {
>
{ title }
{ pageTypeBadge && postIds.length === 1 && (
<span className="editor-post-card-panel__title-badge">
{ pageTypeBadge }
</span>
<Badge>{ pageTypeBadge }</Badge>
) }
</Text>
<PostActions
Expand Down
12 changes: 0 additions & 12 deletions packages/editor/src/components/post-card-panel/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,15 +38,3 @@
color: $gray-700;
}
}

.editor-post-card-panel__title-badge {
background: $gray-100;
color: $gray-800;
padding: 0 $grid-unit-05;
border-radius: $radius-small;
font-size: 12px;
font-weight: 400;
flex-shrink: 0;
line-height: $grid-unit-05 * 5;
display: inline-block;
}
10 changes: 0 additions & 10 deletions packages/fields/src/fields/page-title/style.scss
View file
Open in desktop

This file was deleted.

6 changes: 3 additions & 3 deletions packages/fields/src/fields/page-title/view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import type { Settings } from '@wordpress/core-data';

import { Badge } from '@wordpress/components';
/**
* Internal dependencies
*/
Expand All @@ -27,11 +27,11 @@ export default function PageTitleView( { item }: { item: CommonPost } ) {
return (
<BaseTitleView item={ item } className="fields-field__page-title">
{ [ frontPageId, postsPageId ].includes( item.id as number ) && (
<span className="fields-field__page-title__badge">
<Badge>
{ item.id === frontPageId
? __( 'Homepage' )
: __( 'Posts Page' ) }
</span>
</Badge>
) }
</BaseTitleView>
);
Expand Down
Loading