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

Jump to bottom

DataViews: consolidate CSS selectors naming schema #57651

Merged
merged 5 commits into from Jan 9, 2024
Merged

DataViews: consolidate CSS selectors naming schema #57651

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f29073f
.dataviews__filters-custom-menu-radio-item-prefix to .dataviews-filte…
oandregal Jan 8, 2024
05a69b3
.dataviews__filters-view-actions to .dataviews-filters__view-actions
oandregal Jan 8, 2024
f171947
Use .dataviews-view-table everywhere & remove unused classes
oandregal Jan 8, 2024
957e6f4
Use .dataviews-view-list everywhere
oandregal Jan 8, 2024
8ddabf7
Use .dataviews-view-grid everywhere
oandregal Jan 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/dataviews/src/dataviews.js
View file
Open in desktop
Expand Up @@ -57,7 +57,7 @@ export default function DataViews( {
<VStack spacing={ 0 } justify="flex-start">
<HStack
alignment="flex-start"
className="dataviews__filters-view-actions"
className="dataviews-filters__view-actions"
>
<HStack justify="start" wrap>
{ search && (
Expand Down
2 changes: 1 addition & 1 deletion packages/dataviews/src/dropdown-menu-helper.js
View file
Open in desktop
Expand Up @@ -48,7 +48,7 @@ export const DropdownMenuRadioItemCustom = forwardRef(
<Icon icon={ radioCheck } />
) : (
<span
className="dataviews__filters-custom-menu-radio-item-prefix"
className="dataviews-filters__custom-menu-radio-item-prefix"
aria-hidden="true"
></span>
)
Expand Down
32 changes: 16 additions & 16 deletions packages/dataviews/src/style.scss
View file
Open in desktop
Expand Up @@ -10,7 +10,7 @@
}
}

.dataviews__filters-view-actions {
.dataviews-filters__view-actions {
padding: $grid-unit-15 $grid-unit-40;
.components-search-control {
flex-grow: 1;
Expand Down Expand Up @@ -55,7 +55,7 @@
margin: $grid-unit-40 0 $grid-unit-20;
}

.dataviews-table-view {
.dataviews-view-table {
width: 100%;
text-indent: 0;
border-color: inherit;
Expand Down Expand Up @@ -89,8 +89,8 @@
th:first-child {
padding-left: $grid-unit-40;

.dataviews-table-header-button,
.dataviews-table-header {
.dataviews-view-table-header-button,
.dataviews-view-table-header {
margin-left: - #{$grid-unit-10};
}
}
Expand Down Expand Up @@ -129,7 +129,7 @@
}
}

.dataviews-table-header-button {
.dataviews-view-table-header-button {
padding: $grid-unit-05 $grid-unit-10;
font-size: 11px;
text-transform: uppercase;
Expand All @@ -148,12 +148,12 @@
}
}

.dataviews-table-header {
.dataviews-view-table-header {
padding-left: $grid-unit-05;
}
}

.dataviews-grid-view {
.dataviews-view-grid {
margin-bottom: $grid-unit-30;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
padding: 0 $grid-unit-40;
Expand Down Expand Up @@ -221,7 +221,7 @@
}
}

.dataviews-list-view {
.dataviews-view-list {
margin: 0;

li {
Expand All @@ -235,7 +235,7 @@
}
}

.dataviews-list-view__item {
.dataviews-view-list__item {
padding: $grid-unit-15 $grid-unit-40;
cursor: default;
&:focus,
Expand All @@ -252,16 +252,16 @@
}
}

.dataviews-list-view__item-selected,
.dataviews-list-view__item-selected:hover {
.dataviews-view-list__item-selected,
.dataviews-view-list__item-selected:hover {
background-color: $gray-100;

&:focus {
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
}
}

.dataviews-list-view__media-wrapper {
.dataviews-view-list__media-wrapper {
min-width: $grid-unit-40;
height: $grid-unit-40;
border-radius: $grid-unit-05;
Expand All @@ -281,19 +281,19 @@
}
}

.dataviews-list-view__media-placeholder {
.dataviews-view-list__media-placeholder {
min-width: $grid-unit-40;
height: $grid-unit-40;
background-color: $gray-200;
}

.dataviews-list-view__fields {
.dataviews-view-list__fields {
color: $gray-700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

.dataviews-list-view__field {
.dataviews-view-list__field {
margin-right: $grid-unit-15;

&:last-child {
Expand All @@ -312,7 +312,7 @@
padding: 0 $grid-unit-40;
}

.dataviews__filters-custom-menu-radio-item-prefix {
.dataviews-filters__custom-menu-radio-item-prefix {
display: block;
width: 24px;
}
2 changes: 1 addition & 1 deletion packages/dataviews/src/view-grid.js
View file
Open in desktop
Expand Up @@ -42,7 +42,7 @@ export default function ViewGrid( {
gap={ 8 }
columns={ 2 }
alignment="top"
className="dataviews-grid-view"
className="dataviews-view-grid"
>
{ usedData.map( ( item ) => (
<VStack
Expand Down
14 changes: 7 additions & 7 deletions packages/dataviews/src/view-list.js
View file
Open in desktop
Expand Up @@ -46,7 +46,7 @@ export default function ViewList( {
};

return (
<ul className="dataviews-list-view">
<ul className="dataviews-view-list">
{ usedData.map( ( item ) => {
return (
<li key={ getItemId( item ) }>
Expand All @@ -56,29 +56,29 @@ export default function ViewList( {
aria-pressed={ selection.includes( item.id ) }
onKeyDown={ onEnter( item ) }
className={ classNames(
'dataviews-list-view__item',
'dataviews-view-list__item',
{
'dataviews-list-view__item-selected':
'dataviews-view-list__item-selected':
selection.includes( item.id ),
}
) }
onClick={ () => onSelectionChange( [ item ] ) }
>
<HStack spacing={ 3 } alignment="flex-start">
<div className="dataviews-list-view__media-wrapper">
<div className="dataviews-view-list__media-wrapper">
{ mediaField?.render( { item } ) || (
<div className="dataviews-list-view__media-placeholder"></div>
<div className="dataviews-view-list__media-placeholder"></div>
) }
</div>
<HStack>
<VStack spacing={ 1 }>
{ primaryField?.render( { item } ) }
<div className="dataviews-list-view__fields">
<div className="dataviews-view-list__fields">
{ visibleFields.map( ( field ) => {
return (
<span
key={ field.id }
className="dataviews-list-view__field"
className="dataviews-view-list__field"
>
{ field.render( {
item,
Expand Down
10 changes: 5 additions & 5 deletions packages/dataviews/src/view-table.js
View file
Open in desktop
Expand Up @@ -90,7 +90,7 @@ const HeaderMenu = forwardRef( function HeaderMenu(
trigger={
<Button
size="compact"
className="dataviews-table-header-button"
className="dataviews-view-table-header-button"
ref={ ref }
variant="tertiary"
>
Expand Down Expand Up @@ -357,9 +357,9 @@ function ViewTable( {
const sortValues = { asc: 'ascending', desc: 'descending' };

return (
<div className="dataviews-table-view-wrapper">
<div>
<table
className="dataviews-table-view"
className="dataviews-view-table"
aria-busy={ isLoading }
aria-describedby={ tableNoticeId }
>
Expand Down Expand Up @@ -410,7 +410,7 @@ function ViewTable( {
) ) }
{ !! actions?.length && (
<th data-field-id="actions">
<span className="dataviews-table-header">
<span className="dataviews-view-table-header">
{ __( 'Actions' ) }
</span>
</th>
Expand Down Expand Up @@ -450,7 +450,7 @@ function ViewTable( {
</tbody>
</table>
<div
className={ classNames( 'dataviews-table-status', {
className={ classNames( {
'dataviews-loading': isLoading,
'dataviews-no-results': ! hasData && ! isLoading,
} ) }
Expand Down