[Bug] bootstrap v8.2.1 does not include loading classes when manual import components

molequetu commented 2 months ago

Describe the bug Upgrading to latest release as of Q3 2024, and kendo-bootstrap theme to v.8.2.1, we noticed that generated css does not contain anymore the classes responsible for loading spinners, e.g .k-loading-mask and more. This does not happen in previous version as of v8.0.1.

To reproduce Import in package.json package as "@progress/kendo-theme-bootstrap": "8.2.1", and a scss file with manual import components

@import "@progress/kendo-theme-bootstrap/scss/typography/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/utils/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/grid/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/treelist/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/combobox/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/numerictextbox/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/multiselect/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/dropdownlist/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/datetimepicker/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/datepicker/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/timepicker/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/maskedtextbox/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/listbox/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/editor/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/dialog/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/window/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/tooltip/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/tabstrip/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/treeview/_index.scss";

Go to grid component, and search. no loading indicator is shown only the text 'Loading...'. Same for all components

Expected behavior Should generate .k-loading classes in order to render loading spinners / icons Working example with classes needed

.k-loading-mask,
.k-loading-image,
.k-loading-color {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
}
.k-loading-mask *,
.k-loading-mask *::before,
.k-loading-mask *::after, .k-loading-mask::before, .k-loading-mask::after,
.k-loading-image *,
.k-loading-image *::before,
.k-loading-image *::after,
.k-loading-image::before,
.k-loading-image::after,
.k-loading-color *,
.k-loading-color *::before,
.k-loading-color *::after,
.k-loading-color::before,
.k-loading-color::after {
  box-sizing: border-box;
}

.k-loading-mask {
  z-index: 100;
}
.k-loading-mask.k-opaque .k-loading-color {
  opacity: 1;
}

.k-loading-text {
  text-indent: -4000px;
  text-align: center;
  position: absolute;
}

.k-loading-image {
  z-index: 2;
}

.k-loading-color {
  opacity: 0.3;
}

.k-i-loading {
  width: 1em;
  height: 1em;
  line-height: 1;
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  position: relative;
  background-color: transparent;
  box-sizing: border-box;
}
.k-i-loading::before, .k-i-loading::after {
  box-sizing: border-box;
}

.k-i-loading::before,
.k-i-loading::after,
.k-loading-image::before,
.k-loading-image::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  content: "";
  box-sizing: inherit;
  border-radius: 50%;
  border-width: 0.05em;
  border-style: solid;
  border-color: currentColor;
  border-top-color: transparent;
  border-bottom-color: transparent;
  background-color: transparent;
}

.k-icon.k-i-loading::before,
.k-icon.k-i-loading::after {
  content: "";
}

.k-i-loading::before,
.k-loading-image::before {
  margin-top: -0.5em;
  margin-left: -0.5em;
  width: 1em;
  height: 1em;
  animation: k-loading-animation 0.7s linear infinite;
}

.k-i-loading::after,
.k-loading-image::after {
  margin-top: -0.25em;
  margin-left: -0.25em;
  width: 0.5em;
  height: 0.5em;
  animation: k-loading-animation reverse 1.4s linear infinite;
}

.k-loading-image::before,
.k-loading-image::after {
  content: "";
  border-width: 1px;
  border-width: clamp(0.015em, 1px, 1px);
  font-size: 4em;
}

@keyframes k-loading-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Screenshots

Affected package (please remove the unneeded items)

theme-bootstrap

Affected suites (please remove the unneeded items)

Kendo UI for jQuery
Kendo UI for ASPNET MVC

Affected browsers (please remove the unneeded items)

All

Build system information (please remove the unneeded items)

Not Applicable

molequetu commented 1 month ago

Hello @epetrow, any news on this; Is there any other workaround to import loader styles correctly;

epetrow commented 1 month ago

Hi @molequetu, in the case of manually importing components you will also need to include the loader styles into your stylesheet.

@import "@progress/kendo-theme-bootstrap/scss/typography/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/utils/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/grid/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/treelist/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/combobox/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/numerictextbox/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/multiselect/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/dropdownlist/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/datetimepicker/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/datepicker/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/timepicker/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/maskedtextbox/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/listbox/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/editor/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/dialog/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/window/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/tooltip/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/tabstrip/_index.scss";
@import "@progress/kendo-theme-bootstrap/scss/treeview/_index.scss";
// loader styles included
@import "@progress/kendo-theme-bootstrap/scss/loader/_index.scss";

molequetu commented 1 month ago

Hi @epetrow, adding manually import for loader, does have some effect of showing loading icons, but as I can see it renders font icons and not svg that was rendering before this change (and the generated CSS is different from the one I pasted above that was generated automatically by the imported components)

Especially, the css added after importing loader is the following

.k-loader {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  line-height: 0;
}

.k-loader-canvas {
  display: flex;
  position: relative;
}

.k-loader-segment {
  border-radius: 50%;
  background-color: currentColor;
  position: absolute;
}

.k-loader-sm {
  padding: calc(var(--kendo-spacing-1, 0.25rem)/2);
}
.k-loader-sm .k-loader-segment {
  width: var(--kendo-spacing-1, 0.25rem);
  height: var(--kendo-spacing-1, 0.25rem);
}

.k-loader-md {
  padding: calc(var(--kendo-spacing-2, 0.5rem)/2);
}
.k-loader-md .k-loader-segment {
  width: var(--kendo-spacing-2, 0.5rem);
  height: var(--kendo-spacing-2, 0.5rem);
}

.k-loader-lg {
  padding: calc(var(--kendo-spacing-4, 1rem)/2);
}
.k-loader-lg .k-loader-segment {
  width: var(--kendo-spacing-4, 1rem);
  height: var(--kendo-spacing-4, 1rem);
}

@keyframes pulsing-2-segment {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
.k-loader-pulsing-2 .k-loader-canvas {
  align-items: center;
}
.k-loader-pulsing-2 .k-loader-segment:nth-child(1) {
  left: 0;
  transform: scale(1.5);
  transform-origin: 0 50%;
  animation: pulsing-2-segment 1s ease infinite;
  animation-delay: -0.5s;
}
.k-loader-pulsing-2 .k-loader-segment:nth-child(2) {
  right: 0;
  transform-origin: 100% 50%;
  animation: pulsing-2-segment 1s ease infinite;
}
.k-loader-pulsing-2.k-loader-sm .k-loader-canvas {
  width: calc(var(--kendo-spacing-1, 0.25rem)*3);
  height: calc(var(--kendo-spacing-1, 0.25rem)*1.5);
}
.k-loader-pulsing-2.k-loader-md .k-loader-canvas {
  width: calc(var(--kendo-spacing-2, 0.5rem)*3);
  height: calc(var(--kendo-spacing-2, 0.5rem)*1.5);
}
.k-loader-pulsing-2.k-loader-lg .k-loader-canvas {
  width: calc(var(--kendo-spacing-4, 1rem)*3);
  height: calc(var(--kendo-spacing-4, 1rem)*1.5);
}

@keyframes spinner-3-segment {
  0% {
    top: 0;
    left: 50%;
  }
  33.3333% {
    top: 100%;
    left: 0;
  }
  66.6666% {
    top: 100%;
    left: 100%;
  }
  100% {
    top: 0;
    left: 50%;
  }
}
.k-loader-spinner-3 .k-loader-segment {
  transform: translate(-50%, -50%);
}
.k-loader-spinner-3 .k-loader-segment:nth-child(1) {
  top: 0;
  left: 50%;
  animation: spinner-3-segment 2s ease infinite;
}
.k-loader-spinner-3 .k-loader-segment:nth-child(2) {
  top: 100%;
  left: 0;
  animation: spinner-3-segment 2s ease infinite;
  animation-delay: -0.6666666667s;
}
.k-loader-spinner-3 .k-loader-segment:nth-child(3) {
  top: 100%;
  left: 100%;
  animation: spinner-3-segment 2s ease infinite;
  animation-delay: -1.3333333333s;
}
.k-loader-spinner-3.k-loader-sm .k-loader-canvas {
  margin: calc(var(--kendo-spacing-1, 0.25rem)/2);
  width: calc(var(--kendo-spacing-1, 0.25rem)*4 - var(--kendo-spacing-1, 0.25rem));
  height: calc(var(--kendo-spacing-1, 0.25rem)*4*0.8660254038 - var(--kendo-spacing-1, 0.25rem));
}
.k-loader-spinner-3.k-loader-md .k-loader-canvas {
  margin: calc(var(--kendo-spacing-2, 0.5rem)/2);
  width: calc(var(--kendo-spacing-2, 0.5rem)*4 - var(--kendo-spacing-2, 0.5rem));
  height: calc(var(--kendo-spacing-2, 0.5rem)*4*0.8660254038 - var(--kendo-spacing-2, 0.5rem));
}
.k-loader-spinner-3.k-loader-lg .k-loader-canvas {
  margin: calc(var(--kendo-spacing-4, 1rem)/2);
  width: calc(var(--kendo-spacing-4, 1rem)*4 - var(--kendo-spacing-4, 1rem));
  height: calc(var(--kendo-spacing-4, 1rem)*4*0.8660254038 - var(--kendo-spacing-4, 1rem));
}

@keyframes spinner-4-segment-1 {
  0% {
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
  33.3% {
    top: 0;
    left: 0;
    transform: translateX(0) translateY(0);
  }
  66.6% {
    top: 0;
    left: 0;
    transform: translateX(0) translateY(0);
  }
  100% {
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
}
@keyframes spinner-4-segment-2 {
  0% {
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
  33.3% {
    top: 0;
    left: 100%;
    transform: translateX(-100%) translateY(0);
  }
  66.6% {
    top: 0;
    left: 100%;
    transform: translateX(-100%) translateY(0);
  }
  100% {
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
}
@keyframes spinner-4-segment-3 {
  0% {
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
  33.3% {
    top: 100%;
    left: 100%;
    transform: translateX(-100%) translateY(-100%);
  }
  66.6% {
    top: 100%;
    left: 100%;
    transform: translateX(-100%) translateY(-100%);
  }
  100% {
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
}
@keyframes spinner-4-segment-4 {
  0% {
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
  33.3% {
    top: 100%;
    left: 0;
    transform: translateX(0) translateY(-100%);
  }
  66.6% {
    top: 100%;
    left: 0;
    transform: translateX(0) translateY(-100%);
  }
  100% {
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
}
@keyframes spinner-4 {
  0% {
    transform: rotate(0);
  }
  33.3% {
    transform: rotate(0);
  }
  66.6% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
.k-loader-spinner-4 .k-loader-canvas {
  animation: spinner-4 1.833s ease infinite;
}
.k-loader-spinner-4 .k-loader-segment {
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.k-loader-spinner-4 .k-loader-segment:nth-child(1) {
  animation: spinner-4-segment-1 1.833s ease infinite;
}
.k-loader-spinner-4 .k-loader-segment:nth-child(2) {
  animation: spinner-4-segment-2 1.833s ease infinite;
}
.k-loader-spinner-4 .k-loader-segment:nth-child(3) {
  animation: spinner-4-segment-3 1.833s ease infinite;
}
.k-loader-spinner-4 .k-loader-segment:nth-child(4) {
  animation: spinner-4-segment-4 1.833s ease infinite;
}
.k-loader-spinner-4.k-loader-sm .k-loader-canvas {
  width: calc(var(--kendo-spacing-1, 0.25rem)*4);
  height: calc(var(--kendo-spacing-1, 0.25rem)*4);
}
.k-loader-spinner-4.k-loader-md .k-loader-canvas {
  width: calc(var(--kendo-spacing-2, 0.5rem)*4);
  height: calc(var(--kendo-spacing-2, 0.5rem)*4);
}
.k-loader-spinner-4.k-loader-lg .k-loader-canvas {
  width: calc(var(--kendo-spacing-4, 1rem)*4);
  height: calc(var(--kendo-spacing-4, 1rem)*4);
}

.k-loader-container {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20001;
}
.k-loader-container .k-loader {
  padding: 0;
}

.k-loader-container,
.k-loader-container-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.k-loader-container-overlay {
  opacity: 0.5;
}

.k-loader-container-inner {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
}

.k-loader-container-panel {
  border-width: 1px;
  border-style: solid;
  border-radius: var(--kendo-border-radius-md, 0.25rem);
}

.k-loader-container-sm .k-loader-container-inner {
  padding: var(--kendo-spacing-4, 1rem);
  gap: var(--kendo-spacing-1, 0.25rem);
}
.k-loader-container-sm .k-loader-container-label {
  font-size: var(--kendo-font-size-sm, inherit);
}

.k-loader-container-md .k-loader-container-inner {
  padding: var(--kendo-spacing-5, 1.25rem);
  gap: var(--kendo-spacing-2, 0.5rem);
}
.k-loader-container-md .k-loader-container-label {
  font-size: var(--kendo-font-size, inherit);
}

.k-loader-container-lg .k-loader-container-inner {
  padding: var(--kendo-spacing-6, 1.5rem);
  gap: var(--kendo-spacing-3, 0.75rem);
}
.k-loader-container-lg .k-loader-container-label {
  font-size: var(--kendo-font-size-lg, inherit);
}

.k-loader-top .k-loader-container-inner {
  flex-direction: column;
  text-align: center;
}

.k-loader-end .k-loader-container-label {
  order: -1;
}

.k-loading-mask,
.k-loading-image,
.k-loading-color {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
}
.k-loading-mask *,
.k-loading-mask *::before,
.k-loading-mask *::after, .k-loading-mask::before, .k-loading-mask::after,
.k-loading-image *,
.k-loading-image *::before,
.k-loading-image *::after,
.k-loading-image::before,
.k-loading-image::after,
.k-loading-color *,
.k-loading-color *::before,
.k-loading-color *::after,
.k-loading-color::before,
.k-loading-color::after {
  box-sizing: border-box;
}

.k-loading-mask {
  z-index: 100;
}
.k-loading-mask.k-opaque .k-loading-color {
  opacity: 1;
}

.k-loading-text {
  text-indent: -4000px;
  text-align: center;
  position: absolute;
  color: currentColor;
}

.k-loading-image {
  z-index: 2;
  color: currentColor;
}

.k-loading-color {
  background-color: var(--kendo-color-surface-alt, #ffffff);
  opacity: 0.3;
}

.k-i-loading {
  width: 1em;
  height: 1em;
  line-height: 1;
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  position: relative;
  background-color: transparent;
  box-sizing: border-box;
  color: currentColor;
}
.k-i-loading::before, .k-i-loading::after {
  box-sizing: border-box;
}

.k-i-loading::before,
.k-i-loading::after,
.k-loading-image::before,
.k-loading-image::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  content: "";
  box-sizing: inherit;
  border-radius: 50%;
  border-width: 0.05em;
  border-style: solid;
  border-color: currentColor;
  border-top-color: transparent;
  border-bottom-color: transparent;
  background-color: transparent;
}

.k-icon.k-i-loading::before,
.k-icon.k-i-loading::after {
  content: "";
}

.k-i-loading::before,
.k-loading-image::before {
  margin-top: -0.5em;
  margin-left: -0.5em;
  width: 1em;
  height: 1em;
  animation: k-loading-animation 0.7s linear infinite;
}

.k-i-loading::after,
.k-loading-image::after {
  margin-top: -0.25em;
  margin-left: -0.25em;
  width: 0.5em;
  height: 0.5em;
  animation: k-loading-animation reverse 1.4s linear infinite;
}

.k-loading-image::before,
.k-loading-image::after {
  content: "";
  border-width: 1px;
  border-width: clamp(0.015em, 1px, 1px);
  font-size: 4em;
}

@keyframes k-loading-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.k-i-loading::before,
.k-loading-image::before {
  border-color: currentColor;
  border-right-color: transparent !important;
}
.k-i-loading::after,
.k-loading-image::after {
  display: none !important;
}

.k-loading-image::before {
  border-width: var(--kendo-spacing-1, 0.25rem);
}

.k-loader-primary {
  color: var(--kendo-color-primary, #2596be);
}

.k-loader-secondary {
  color: #212529;
}

.k-loader-tertiary {
  color: var(--kendo-color-tertiary, #6f42c1);
}

.k-loader-info {
  color: var(--kendo-color-info, #17a2b8);
}

.k-loader-success {
  color: var(--kendo-color-success, #28a745);
}

.k-loader-warning {
  color: var(--kendo-color-warning, #ffc107);
}

.k-loader-error {
  color: var(--kendo-color-error, #dc3545);
}

.k-loader-dark {
  color: var(--kendo-color-dark, #212529);
}

.k-loader-light {
  color: var(--kendo-color-light, #f8f9fa);
}

.k-loader-inverse {
  color: var(--kendo-color-dark, #212529);
}

.k-loader-container-panel {
  background-color: #ffffff;
  border-color: var(--kendo-color-border, rgba(33, 37, 41, 0.13));
}

.k-loader-container-inner .k-text-secondary,
.k-loader-container-inner .\!k-text-secondary {
  color: #212529 !important;
}

Also, from which version of kendo-themes is requried to mannualy add loader component; It was working prior to v8.0,1 Any workaround on this;

epetrow commented 1 month ago

Hi @molequetu,

In version 8.1.0, we’ve streamlined all loading-related styling into a single loader component in order to simplify maintenance and consistency across the project. If you’re importing individual component styles rather than the entire theme, you’ll need to manually add the loader.

Regarding your question about rendering font instead of SVG icons, this behavior is tied to the components and isn’t influenced by the theme styles.

To help you more efficiently, could you share a sample demo project so I can investigate the issue directly?

molequetu commented 1 month ago

Hi @epetrow and thank you for the feedback.

Unfortunately I cannot share a sample project atm. I will try to describe you the behavior in more detail.

In version prior to 8.1.0, e.g with kendo version 2024.1.319 - March 18, 2024 and kendo themes as of "@progress/kendo-theme-bootstrap": "7.2.1", and without any change about manually import for loader, the visualized loading spinner renders as loading_svg

In version of 8.1.0 of kendo themes and kendo version of 2024.3.806, the visualized loading spinner renders as loading_fomt

If I add to the latest the generated css that I included in my first comment and not manually import new loader styles as suggested, I get the behavior of 7.2.1. If I add import for loader, i get the mentioned behaviour

So it seems that if I change the CSS for the loading styles, I got another behavior regarding the loading spinner in all components.

This is weird because it seems that theme styles change the loading icon spinner

epetrow commented 1 month ago

Hey @molequetu,

Thank you for the provided details. Are you certain that you have been using the Kendo Bootstrap theme?

There are a few other notable differences between the two screenshots, namely in the font sizes. Also I have tried replicating the issue in this sample dojo where I have used the provided component and theme versions, however there is no visual difference in the loading icon spinner.

Could you please view the aforementioned dojo and let me know if there is something I am missing?

Also in the future, please bare in mind that if you need assistance with speficic scenarios or configuration it is advisable to open a ticket in our support system .

telerik / kendo-themes

[Bug] bootstrap v8.2.1 does not include loading classes when manual import components #5167