-
-
Notifications
You must be signed in to change notification settings - Fork 9
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
Spinner implementation #120 #135
base: main
Are you sure you want to change the base?
Conversation
<div class="hoo-spinner-xsmall"></div> | ||
<div class="hoo-spinner-small"></div> | ||
<div class="hoo-spinner-medium"></div> | ||
<div class="hoo-spinner-large"></div> |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
@StfBauer What do I do about merge conflicts in the pre built css? |
I will resolve it but need to first look at some other issues. It will go into the next version for sure. Don't bother. |
Spinner implementation based on styles from Fluent React, but adopted to fit into htwoo's convention.