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.

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

feat(ui5-busy-indicator): added property text-placement #8471

Merged
merged 7 commits into from
Mar 20, 2024

Conversation

GerganaKremenska
Copy link
Member

@GerganaKremenska GerganaKremenska commented Mar 19, 2024

BGSOFUIRODOPI-3214

FIXES: #7701

packages/main/src/types/BusyIndicatorTextPlacement.ts Outdated Show resolved Hide resolved
packages/main/src/types/BusyIndicatorTextPlacement.ts Outdated Show resolved Hide resolved
packages/main/src/types/BusyIndicatorTextPlacement.ts Outdated Show resolved Hide resolved
packages/main/test/specs/BusyIndicator.spec.js Outdated Show resolved Hide resolved
packages/main/test/specs/BusyIndicator.spec.js Outdated Show resolved Hide resolved
@BorisDafov
Copy link

I approve the PR from UA perspective

@GerganaKremenska GerganaKremenska marked this pull request as ready for review March 20, 2024 08:53
@GerganaKremenska GerganaKremenska merged commit a494473 into main Mar 20, 2024
9 checks passed
@GerganaKremenska GerganaKremenska deleted the busy_idicator_text_placment branch March 20, 2024 09:03
text-align: center;
}

.ui5-busy-indicator-text-placement-top {
Copy link
Member

@ilhan007 ilhan007 Mar 20, 2024

Choose a reason for hiding this comment

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

Some points for improvement.

Instead of creating, switching classes:

get classes() {
   textPosition: {
		"ui5-busy-indicator-text-placement-top ": this.textPlacement === BusyIndicatorTextPlacement.Top,
		"ui5-busy-indicator-text-placement-bottom ": this.textPlacement === BusyIndicatorTextPlacement.Bottom,
    },
}
.ui5-busy-indicator-text-placement-top {
   margin-bottom: 0.5rem
}
.ui5-busy-indicator-text-placement-bottom {
   margin-top: 0.5rem;
}

you can just add styles based on the attribute:

:host([text-placement="Top"]) .ui5-busy-indicator-text {
   margin-bottom: 0.5rem
}

:host(:not([text-placement)) .ui5-busy-indicator-text,
:host([text-placement="Bottom"]) .ui5-busy-indicator-text {
     margin-top: 0.5rem;
}

We do it like this when we can - when the conditions are simple enough to cover with attribute selectors.

Copy link
Member Author

Choose a reason for hiding this comment

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

#8482 taking care of improvment

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feature Request]: make ui5-busyindicator more flexible in terms of text management
4 participants