From 616da632af6ddb72b210faa2eb8964f3a5447426 Mon Sep 17 00:00:00 2001 From: Bruno Sastre Date: Fri, 12 Sep 2025 01:10:45 -0300 Subject: [PATCH 1/2] Mercury | Paginator : Rename selected page part that was outdated --- .../src/components/paginator/_paginator-styles.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/mercury/src/components/paginator/_paginator-styles.scss b/packages/mercury/src/components/paginator/_paginator-styles.scss index 5248ffc48..30a527070 100644 --- a/packages/mercury/src/components/paginator/_paginator-styles.scss +++ b/packages/mercury/src/components/paginator/_paginator-styles.scss @@ -38,7 +38,7 @@ color: var(--mer-icon__neutral); padding: var(--mer-spacing--2xs) var(--mer-spacing--xs); - &--active { + &--selected { background: var(--mer-accent__primary); color: var(--mer-text__on-primary); } @@ -70,7 +70,7 @@ // [".paginator::part(items-per-page-info)"] - /// @param {String} $paginator__navigation-page-selector: [".paginator::part(page)"] - /// @param {String} $paginator__navigation-page-not-selected-selector: [".paginator::part(page page-not-selected)"] - -/// @param {String} $paginator__navigation-page-active-selector: [".paginator::part(page page-active)"] - +/// @param {String} $paginator__navigation-page-selected-selector: [".paginator::part(page selected)"] - /// @param {String} $paginator__navigation-pages-selector: [".paginator::part(pages)"] - /// @param {String} $paginator__first-button-selector [".paginator::part(first__button)"] - /// @param {String} $paginator__last-button-selector [".paginator::part(last__button)"] - @@ -107,8 +107,8 @@ $paginator__navigation-page-selector: ".paginator::part(page)", $paginator__navigation-page-not-selected-selector: ".paginator::part(page page-not-selected)", - $paginator__navigation-page-active-selector: - ".paginator::part(page page-active)", + $paginator__navigation-page-selected-selector: + ".paginator::part(page selected)", $paginator__navigation-pages-selector: ".paginator::part(pages)", $paginator__first-button-selector: ".paginator::part(first__button)", $paginator__last-button-selector: ".paginator::part(last__button)", @@ -202,9 +202,9 @@ } } - #{$paginator__navigation-page-active-selector} { + #{$paginator__navigation-page-selected-selector} { @extend %body-semi-bold-s; - @extend %paginator__pages__button--active; + @extend %paginator__pages__button--selected; } @include combo-box( From 979dc60e2cf3c17fecfc1c8bd569d0ecca207a22 Mon Sep 17 00:00:00 2001 From: Bruno Sastre Date: Fri, 12 Sep 2025 01:15:10 -0300 Subject: [PATCH 2/2] Mercury | Paginator : Update test bundles --- .../src/tests/bundles/expected-bundle-content/all.json | 8 ++++---- .../expected-bundle-content/components/paginator.json | 10 +++++----- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/mercury/src/tests/bundles/expected-bundle-content/all.json b/packages/mercury/src/tests/bundles/expected-bundle-content/all.json index 082fee444..aee9c4ad1 100644 --- a/packages/mercury/src/tests/bundles/expected-bundle-content/all.json +++ b/packages/mercury/src/tests/bundles/expected-bundle-content/all.json @@ -241,9 +241,9 @@ ".icon-sm { --ch-image-size: var(--mer-icon__box--sm); --ch-image-background-size: var(--mer-icon__size--sm); }", ".input-error { --control__border-color: var(--control__border-color--error); }", ".input:disabled { --control__bg-color: var(--control__background-color--disabled); --control__border-color: var(--control__border-color--disabled); --control__color: var(--control__color--disabled); --ch-placeholder-color: var(--control-placeholder__color--disabled); }", - ".label, .paginator::part(items-per-page__label), .radio-group::part(radio__label), .pill, .checkbox::part(label), .body-semi-bold-xs, .body-semi-bold-s, .paginator::part(page page-active), .tabular-grid-column, .body-semi-bold-m, .button-primary, .button-primary-destructive, .button-primary-success, .dropdown.button-primary::part(expandable-button), .segmented-control-filled .segmented-control-item::part(action), .button-secondary, .button-secondary-destructive, .chat-live-audio-button, .dropdown.button-secondary::part(expandable-button), .chat::part(send-button), .chat::part(stop-response-button), .body-semi-bold-l, .body-semi-bold-xl { font-weight: var(--font-weight-semi-bold); }", + ".label, .paginator::part(items-per-page__label), .radio-group::part(radio__label), .pill, .checkbox::part(label), .body-semi-bold-xs, .body-semi-bold-s, .paginator::part(page selected), .tabular-grid-column, .body-semi-bold-m, .button-primary, .button-primary-destructive, .button-primary-success, .dropdown.button-primary::part(expandable-button), .segmented-control-filled .segmented-control-item::part(action), .button-secondary, .button-secondary-destructive, .chat-live-audio-button, .dropdown.button-secondary::part(expandable-button), .chat::part(send-button), .chat::part(stop-response-button), .body-semi-bold-l, .body-semi-bold-xl { font-weight: var(--font-weight-semi-bold); }", ".label, .paginator::part(items-per-page__label), .switch-large, .radio-group::part(radio__label), .pill, .navigation-list::part(item__caption tooltip), .list-box::part(item__action), .list-box::part(group__action), .combo-box, .paginator::part(items-per-page__combo-box), .checkbox::part(label), .chat::part(send-input), .input, .paginator::part(go-to__input), .dropdown::part(action), .body-italic-m, .combo-box[part=\"ch-combo-box-render--placeholder\"], .input[part*=\"ch-edit--empty-value\"], .body-semi-bold-m, .button-primary, .button-primary-destructive, .button-primary-success, .dropdown.button-primary::part(expandable-button), .segmented-control-filled .segmented-control-item::part(action), .button-secondary, .button-secondary-destructive, .chat-live-audio-button, .dropdown.button-secondary::part(expandable-button), .chat::part(send-button), .chat::part(stop-response-button) { font-size: var(--font-size-body-m); }", - ".label, .paginator::part(items-per-page__label), .tree-view, .tooltip::part(window), .switch-small, .switch-large, .tabular-grid, .property-grid, .tabular-grid-cell .combo-box, .property-grid-cell .combo-box, .tabular-grid-cell .input, .property-grid-cell .input, .radio-group::part(radio__label), .pill, .navigation-list::part(item__caption tooltip), .list-box::part(item__action), .list-box::part(group__action), .combo-box, .paginator::part(items-per-page__combo-box), .checkbox::part(label), .chat::part(header__time), .chat::part(send-input), .input, .paginator::part(go-to__input), .dropdown::part(action), .body-italic-xs, .body-italic-s, .body-italic-m, .combo-box[part=\"ch-combo-box-render--placeholder\"], .input[part*=\"ch-edit--empty-value\"], .body-italic-l, .body-italic-xl, .body-semi-bold-xs, .body-semi-bold-s, .paginator::part(page page-active), .tabular-grid-column, .body-semi-bold-m, .button-primary, .button-primary-destructive, .button-primary-success, .dropdown.button-primary::part(expandable-button), .segmented-control-filled .segmented-control-item::part(action), .button-secondary, .button-secondary-destructive, .chat-live-audio-button, .dropdown.button-secondary::part(expandable-button), .chat::part(send-button), .chat::part(stop-response-button), .body-semi-bold-l, .body-semi-bold-xl, .body-regular-xs, .chat::part(file-footer), .body-regular-s, .paginator, .flexible-layout::part(tab block closable), .flexible-layout::part(tab block not-closable), .flexible-layout::part(tab inline-start), .flexible-layout::part(tab inline-end), .tab::part(tab block closable), .tab::part(tab block not-closable), .tab::part(tab inline-start), .tab::part(tab inline-end), .body-regular-l, .body-regular-xl { line-height: var(--line-height-tight); }", + ".label, .paginator::part(items-per-page__label), .tree-view, .tooltip::part(window), .switch-small, .switch-large, .tabular-grid, .property-grid, .tabular-grid-cell .combo-box, .property-grid-cell .combo-box, .tabular-grid-cell .input, .property-grid-cell .input, .radio-group::part(radio__label), .pill, .navigation-list::part(item__caption tooltip), .list-box::part(item__action), .list-box::part(group__action), .combo-box, .paginator::part(items-per-page__combo-box), .checkbox::part(label), .chat::part(header__time), .chat::part(send-input), .input, .paginator::part(go-to__input), .dropdown::part(action), .body-italic-xs, .body-italic-s, .body-italic-m, .combo-box[part=\"ch-combo-box-render--placeholder\"], .input[part*=\"ch-edit--empty-value\"], .body-italic-l, .body-italic-xl, .body-semi-bold-xs, .body-semi-bold-s, .paginator::part(page selected), .tabular-grid-column, .body-semi-bold-m, .button-primary, .button-primary-destructive, .button-primary-success, .dropdown.button-primary::part(expandable-button), .segmented-control-filled .segmented-control-item::part(action), .button-secondary, .button-secondary-destructive, .chat-live-audio-button, .dropdown.button-secondary::part(expandable-button), .chat::part(send-button), .chat::part(stop-response-button), .body-semi-bold-l, .body-semi-bold-xl, .body-regular-xs, .chat::part(file-footer), .body-regular-s, .paginator, .flexible-layout::part(tab block closable), .flexible-layout::part(tab block not-closable), .flexible-layout::part(tab inline-start), .flexible-layout::part(tab inline-end), .tab::part(tab block closable), .tab::part(tab block not-closable), .tab::part(tab inline-start), .tab::part(tab inline-end), .body-regular-l, .body-regular-xl { line-height: var(--line-height-tight); }", ".label--disabled { --label__color: var(--label__color--disabled); }", ".label--disabled { --label__color: var(--label__color--disabled); }", ".layout { --spacing-body-block-start: var(--mer-spacing--md); --spacing-body-block-end: var(--mer-spacing--md); --spacing-body-inline-start: var(--mer-spacing--lg); --spacing-body-inline-end: var(--mer-spacing--lg); display: grid; gap: var(--mer-spacing--md); }", @@ -289,7 +289,7 @@ ".paginator::part(items-per-page__combo-box) { inline-size: 80px; }", ".paginator::part(last__button)::before { --button-arrow-icon: var(--icon__system_chevron-pag-right_primary--enabled); }", ".paginator::part(next__button)::before { --button-arrow-icon: var(--icon__system_chevron-right_primary--enabled); }", - ".paginator::part(page page-active) { background: var(--mer-accent__primary); color: var(--mer-text__on-primary); }", + ".paginator::part(page selected) { background: var(--mer-accent__primary); color: var(--mer-text__on-primary); }", ".paginator::part(page) { border-radius: var(--mer-border__radius--sm); color: var(--mer-icon__neutral); padding: var(--mer-spacing--2xs) var(--mer-spacing--xs); }", ".paginator::part(page):hover { color: var(--mer-icon__on-primary--hover); background-color: var(--item__bg-color--selected-hover); }", ".paginator::part(pages) { gap: var(--mer-spacing--xs); }", @@ -477,7 +477,7 @@ ".tree-view { --ch-tree-view-item-custom-padding-inline-start: var(--mer-spacing--xs); --ch-tree-view-item-gap: var(--mer-spacing--xs); --ch-tree-view-item__checkbox-size: var(--mer-spacing--md); --ch-tree-view-item__expandable-button-size: var(--mer-spacing--md); --ch-tree-view-item__image-size: var(--mer-spacing--md); --ch-tree-view-item__background-image-size: var(--mer-icon__box--md); --ch-tree-view-item__line--inset-inline-end: 4px; --tree-view__min-inline-size: max-content; --tree-view-item-custom__padding-inline-end: var(--mer-spacing--2xs); --tree-view-item-dashed-line__border-color: var(--mer-text__on-surface); --tree-view-item-dashed-line__opacity: 0.3; --tree-view-item-header__padding-block: calc(var(--mer-spacing--3xs)); --tree-view-item-downloading__inline-size: var(--mer-spacing--sm); --tree-view-item-downloading__block-size: var(--mer-spacing--sm); --tree-view-item-downloading__border: var(--mer-border__width--md) solid var(--mer-accent__primary--active); line-height: var(--tree-view-item__line-height); min-inline-size: var(--tree-view__min-inline-size); }", ".tree-view { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb__bg-color) var(--scrollbar-track__bg-color); }", ".tree-view, .tooltip::part(window), .switch-small, .switch-large, .tabular-grid, .property-grid, .tabular-grid-cell .combo-box, .property-grid-cell .combo-box, .tabular-grid-cell .input, .property-grid-cell .input, .navigation-list::part(item__caption tooltip), .list-box::part(item__action), .list-box::part(group__action), .combo-box, .paginator::part(items-per-page__combo-box), .chat::part(send-input), .input, .paginator::part(go-to__input), .dropdown::part(action), .body-regular-xs, .chat::part(file-footer), .body-regular-s, .paginator, .flexible-layout::part(tab block closable), .flexible-layout::part(tab block not-closable), .flexible-layout::part(tab inline-start), .flexible-layout::part(tab inline-end), .tab::part(tab block closable), .tab::part(tab block not-closable), .tab::part(tab inline-start), .tab::part(tab inline-end), .body-regular-l, .body-regular-xl { font-weight: var(--font-weight-regular); }", - ".tree-view, .tooltip::part(window), .switch-small, .tabular-grid, .property-grid, .tabular-grid-cell .combo-box, .property-grid-cell .combo-box, .tabular-grid-cell .input, .property-grid-cell .input, .chat::part(header__time), .body-italic-s, .body-semi-bold-s, .paginator::part(page page-active), .tabular-grid-column, .body-regular-s, .paginator, .flexible-layout::part(tab block closable), .flexible-layout::part(tab block not-closable), .flexible-layout::part(tab inline-start), .flexible-layout::part(tab inline-end), .tab::part(tab block closable), .tab::part(tab block not-closable), .tab::part(tab inline-start), .tab::part(tab inline-end) { font-size: var(--font-size-body-s); }", + ".tree-view, .tooltip::part(window), .switch-small, .tabular-grid, .property-grid, .tabular-grid-cell .combo-box, .property-grid-cell .combo-box, .tabular-grid-cell .input, .property-grid-cell .input, .chat::part(header__time), .body-italic-s, .body-semi-bold-s, .paginator::part(page selected), .tabular-grid-column, .body-regular-s, .paginator, .flexible-layout::part(tab block closable), .flexible-layout::part(tab block not-closable), .flexible-layout::part(tab inline-start), .flexible-layout::part(tab inline-end), .tab::part(tab block closable), .tab::part(tab block not-closable), .tab::part(tab inline-start), .tab::part(tab inline-end) { font-size: var(--font-size-body-s); }", ".tree-view::-webkit-scrollbar { width: var(--scrollbar__size); height: var(--scrollbar__size); }", ".tree-view::-webkit-scrollbar-corner { background: var(--scrollbar-corner__bg); }", ".tree-view::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb__bg-color); border-radius: var(--scrollbar-thumb__border-radius); }", diff --git a/packages/mercury/src/tests/bundles/expected-bundle-content/components/paginator.json b/packages/mercury/src/tests/bundles/expected-bundle-content/components/paginator.json index 0f69c37fb..5918714dc 100644 --- a/packages/mercury/src/tests/bundles/expected-bundle-content/components/paginator.json +++ b/packages/mercury/src/tests/bundles/expected-bundle-content/components/paginator.json @@ -24,12 +24,12 @@ ".paginator::part(items-per-page__combo-box):focus { border-color: var(--borders-un-border-color__focused); }", ".paginator::part(items-per-page__combo-box):hover { --control__border-color: var(--control__border-color--hover); }", ".paginator::part(items-per-page__label) { font-size: var(--font-size-body-m); }", - ".paginator::part(items-per-page__label), .paginator::part(page page-active) { font-weight: var(--font-weight-semi-bold); }", - ".paginator::part(items-per-page__label), .paginator::part(page page-active), .paginator { line-height: var(--line-height-tight); }", + ".paginator::part(items-per-page__label), .paginator::part(page selected) { font-weight: var(--font-weight-semi-bold); }", + ".paginator::part(items-per-page__label), .paginator::part(page selected), .paginator { line-height: var(--line-height-tight); }", ".paginator::part(last__button)::before { --button-arrow-icon: var(--icon__system_chevron-pag-right_primary--enabled); }", ".paginator::part(next__button)::before { --button-arrow-icon: var(--icon__system_chevron-right_primary--enabled); }", - ".paginator::part(page page-active) { background: var(--mer-accent__primary); color: var(--mer-text__on-primary); }", - ".paginator::part(page page-active), .paginator { font-size: var(--font-size-body-s); }", + ".paginator::part(page selected) { background: var(--mer-accent__primary); color: var(--mer-text__on-primary); }", + ".paginator::part(page selected), .paginator { font-size: var(--font-size-body-s); }", ".paginator::part(page) { border-radius: var(--mer-border__radius--sm); color: var(--mer-icon__neutral); padding: var(--mer-spacing--2xs) var(--mer-spacing--xs); }", ".paginator::part(page):hover { color: var(--mer-icon__on-primary--hover); background-color: var(--item__bg-color--selected-hover); }", ".paginator::part(pages) { gap: var(--mer-spacing--xs); }", @@ -43,4 +43,4 @@ ".paginator::part(window) { border-style: var(--items-container__border-style); border-width: var(--items-container__border-width); border-radius: var(--items-container__border-radius); background-color: var(--elevation-background-color, var(--items-container__bg-color)); border-color: var(--elevation-border-color, var(--items-container__border-color)); padding-block: var(--items-container__padding-block); padding-inline: var(--items-container__padding-inline); gap: var(--items-container__gap); box-shadow: var(--items-container__box-shadow); font-style: normal; }", "@keyframes spin { \n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}", "paginator__previous-button-selector, paginator__next-button-selector, paginator__last-button-selector, paginator__first-button-selector { padding: calc((var(--control__block-size) - 2*var(--control__border-width) - var(--mer-icon__box--md))/2); border-width: var(--control__border-width); border-style: var(--control__border-style); border-color: var(--control__border-color); border-radius: var(--control__border-radius); }" -] +] \ No newline at end of file