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

Spinner implementation #120 #135

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Spinner implementation #120 #135

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
75bb8e4
Spinner implementation #120
May 16, 2024
20f3a69
Pseudo patterns
Jun 3, 2024
722a17e
px to rem
Jun 3, 2024
b32f7a8
Merge remote-tracking branch 'upstream/main'
Jun 17, 2024
5ca6056
Modifier classes
Jun 17, 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
4 changes: 4 additions & 0 deletions htwoo-core/src/_patterns/atoms/loading/spinner.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<div class="hoo-spinner-xsmall"></div>
<div class="hoo-spinner-small"></div>
<div class="hoo-spinner-medium"></div>
<div class="hoo-spinner-large"></div>
Copy link
Contributor

Choose a reason for hiding this comment

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

Don't put all the spinner in just one file. This avoid's to get reused - Instead use variations of the spinner like:
https://patternlab.io/docs/using-pseudo-patterns/

Also the default verison is missing.

Copy link
Author

Choose a reason for hiding this comment

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

Gave it a try. I am completely new to Pattern Lab.

Default and Medium is equivalent. Can remove one of them, whichever you prefer.

Copy link
Contributor

Choose a reason for hiding this comment

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

Just show the default one. Add a markdown that it equals the medium spinner.

One thing we could do in case of the spinner have something like this:

.hoo-spinner{
    
    &.xsmall{
    }

    &.small{
    }
    
     &.large{
    }
    
}

So default spinner with modifier classes.

Copy link
Author

Choose a reason for hiding this comment

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

Actually, I think I tried modifier classes at first but found that .medium collided with some other already existing style. Because of that I went with the appoarch in the PR. It also seemed to be more in line with other styles such as .hoo-button, .hoo-button-primary, rather than .hoo-button.primary.

But if you prefer the style in your example we can go with that of course.

Copy link
Contributor

Choose a reason for hiding this comment

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

All in all great work so far.
Shouldn't those already be scope to the outer classes? Cannot recal that we had a medium in there that is not scoped.

Copy link
Author

@gabbsmo gabbsmo Jun 10, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

There is a non scoped .medium selector in pattern-scaffolding.scss.

Copy link
Contributor

@StfBauer StfBauer Jun 14, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Not anymore and it was not part of htwoo anyways. scoped it now to body.

Check out the core-v2.5.0 branch.

Copy link
Author

Choose a reason for hiding this comment

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

Thanks. I pushed changes that use modifier classes instead of one class per size.

Copy link
Contributor

Choose a reason for hiding this comment

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

Thank you will check it out and merge it for the version.

3 changes: 3 additions & 0 deletions htwoo-core/src/_patterns/atoms/loading/spinner.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
---
order: 30
---
49 changes: 48 additions & 1 deletion htwoo-core/src/css/htwoo.min.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion htwoo-core/src/css/pattern-scaffolding.css
View file
Open in desktop

Large diffs are not rendered by default.

49 changes: 48 additions & 1 deletion htwoo-core/src/css/style.css
View file
Open in desktop

Large diffs are not rendered by default.

49 changes: 48 additions & 1 deletion htwoo-core/src/css/style.prod.css
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions htwoo-core/src/styles/01-atoms/loading/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
@forward "progress";
@forward "shimmer";
@forward "spinner";
51 changes: 51 additions & 0 deletions htwoo-core/src/styles/01-atoms/loading/_spinner.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
/*
* Animation from Fluent React
* MIT license: https://github.com/microsoft/fluentui/blob/master/packages/react/LICENSE
*/
@keyframes hoo-spinner {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}
}

%hoo-spinner {
display: block;
box-sizing: border-box;
border-radius: 50%;
border-width: 1.5px;
gabbsmo marked this conversation as resolved.
Show resolved Hide resolved
border-style: solid;
border-color: var(--themePrimary) var(--themeLight) var(--themeLight);
border-image: initial;
animation-name: hoo-spinner;
animation-duration: 1.3s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67);
}

.hoo-spinner-medium {
@extend %hoo-spinner;
width: 1.25rem;
height: 1.25rem;
}

.hoo-spinner-xsmall {
@extend %hoo-spinner;
width: 0.75rem;
height: 0.75rem;
}

.hoo-spinner-small {
@extend %hoo-spinner;
width: 1rem;
height: 1rem;
}

.hoo-spinner-large {
@extend %hoo-spinner;
width: 1.75rem;
height: 1.75rem;
}