Comments (5)
I will updated it and will come to discuss it in detail.
from ato-ui.
@Mohamed-Kaizen I love your switches. Definitely much nicer than the current ones. It'd be awesome to integrate them into the library, so go for it. :)
It might also be nice to have a prop to control the animation speed if that's possible. What do you think? Maybe have 3 different options if we want to limit it. And having the possibility of having the icons inside the sliding button or in the background is also pretty cool actually, like in that first example of yours.
Just make sure that when you update the switch you keep using the relveant tokens: bg-primary/surface
and rounded-btn
, etc. These might change in the future while I'm updating the designer, but for now they're the relevant ones.
from ato-ui.
before i send PR, i created playground to get your feedback
Just make sure that when you update the switch you keep using the relveant tokens:
bg-primary/surface
androunded-btn
, etc. These might change in the future while I'm updating the designer, but for now they're the relevant ones.
I used the theme in my playground. Any suggestion of what i miss or need to add ?
It might also be nice to have a prop to control the animation speed if that's possible. What do you think? Maybe have 3 different options if we want to limit it.
We could use variables like --switch-animation
, --switch-animation-duration
, etc. to control the animation speed. This would allow users to modify the animation speed without touching other transition properties, but it would also mean that they would have to remember a lot of --something variables.
Alternatively, we could use props as you suggested like bgAnimation
, textAnimation
, and circleAnimation
. This would mean that users would only need to remember three props, but they would need to copy and paste the rest of the transition properties if they only want to change one property.
what do you think ?
from ato-ui.
@Mohamed-Kaizen this looks great.
A few comments:
For the inactive and active background color use the props like in the old switch. Then you can add them to the element classes. Use bg-primary-500
as the default active color and some surface color that looks nice in dark and light mode on the website (bg-surface-300-400
for example).
The shape of the switch will be defined by the theme, so for the roundedness use the rounded-btn
class instead of rounded-3xl
. I'm currently updating the theme designer, so in the future there will be a separate class for it, so that buttons and switches don't have to be the same shape, but I'll update that later on.
We could use variables like --switch-animation, --switch-animation-duration, etc. to control the animation speed. This would allow users to modify the animation speed without touching other transition properties, but it would also mean that they would have to remember a lot of --something variables.
Alternatively, we could use props as you suggested like bgAnimation, textAnimation, and circleAnimation. This would mean that users would only need to remember three props, but they would need to copy and paste the rest of the transition properties if they only want to change one property.
I was thinking we could have a transitionDurations
prop, where all default duration times can be overwritten. If you want to change one duration time you probably need to change all the others as well, so it makes sense to keep them in one object, but since all keys are optional they can also just set one if they want. I think we only need to have the duration-...
classes in there. This way users can also turn the durations off if they want with duration-0
. Something like this:
types.ts
// all values are optional for this type
export type SwitchTransitionDurations = {
icon?: string;
onOffSlots?: string;
background?: string;
}
// define default durations (I just picked random ones)
// put it in types.ts so it's visible in the documentation later
export const defaultDurations = {
icon: 'duration-400',
background: 'duration-500',
onOffSlots: 'duration-400'
};
switch.svelte
<script lang="ts">
// ... props
export let transitionDurations: SwitchTransitionDurations = {};
// overwrite default durations
$: durations = { ...defaultDurations, transitionDurations };
</script>
<!-- html stuff as example -->
<button class="{durations.background} other-classes" />
Also, if the users only use icons instead of text there would need to be a label for the switch for it to be accessible. In the old one I had an ariaLabel
attribute that could be hidden, which still made it available for screen readers. What do you think about adding this?
The headless example we have for the switch can be left as it currently is, this way there's two variations. For the radio group I also made two variations of the component, but I don't think for the switch it would make sense since they are too similar (?). Otherwise the old switch would also have to be update to look good for RTL.
And last point, we should still have the different available sizes as before I think. Let me know if you have thoughts on these.
from ato-ui.
@Mohamed-Kaizen awesome, yeah it will be easier to discuss in the PR :)
from ato-ui.
Related Issues (20)
- 🐞 Shortcut search build failes due to import of presets
- 🐞 `shiki` not working on search page
- 🐞 Designer page does not look good on very small screens
- ⚒️ Move to using Melt-UI
- 📖 Update looks of documentation
- 🎨 Rethink design system HOT 4
- 🐞 Saving files is really slow
- ✅ 1.0 Checklist
- ⚒️ Svelte preprocessor for UnoCSS HOT 2
- ⚒️ Switch from Changesets to changeloggithub
- ⚒️ Add linting to workflow
- 🌟 Slider component
- Table component HOT 2
- Chart Component HOT 2
- 🌟 Color Picker Component
- 🌟 Date Range Picker
- Shallow routing example for dialog
- 🌟 Calendar component
- 🌟 Popover component
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ato-ui.