Given that Polaris is required/recommended in BFS, why isn’t there a dedicated board in this community?
When I try to migrate from Tailwind to Polaris, I don’t find an equivalent toggle button in Polaris. But I can find it in the Shopify admin => Settings => Customer accounts. How can I use this component?
1 Like
There’s not an official Polaris component for every one you see in the Shopify admin but @devwithalex created https://www.polariscomponents.com/ which includes some additional ones, including a knob/toggle component
3 Likes
Thanks for your components. But I use Vue & Polaris Vue. I don’t use React.
In that case, you’ll have to recreate it on your own. You can use the Knob Polaris Component as a base/reference
Rough demo , based on the react one (this is very rough, please don’t use as-is)
1 Like
Not sure what happened as I thought there was one but it ended up unresolved in discussions and pull requests?
Shopify:master ← Shopify:toggle-component
opened 03:08PM - 12 Nov 18 UTC
### WHY are these changes introduced?
Resolves https://github.com/Shopify/pol… aris-react/issues/594
Adds a new toggle component, based off [`Switch` in web](https://github.com/Shopify/web/blob/master/app/components/Switch/Switch.tsx).
### WHAT is this pull request doing?
I changed a few things. The disabled color uses `sky` instead of `ink` `lightest` because the contrast between enabled and disabled seemed difficult to distinguish for those with visual impairments. I added a border to compensate for this change.
I also used our transition speeds and easing.
I added some props:
`accessibilityLabel`
`label`
`labelHidden`
`prefix`
`suffix`
And I removed `name`.
##
### How to 🎩
🖥 [Local development instructions](https://github.com/Shopify/polaris-react/blob/master/README.md#development)
🗒 [General tophatting guidelines](https://github.com/Shopify/polaris-react/blob/master/documentation/Tophatting.md)
📄 [Changelog guidelines](https://github.com/Shopify/polaris-react/blob/master/documentation/Versioning%20and%20changelog.md)
<!--
Give as much information as needed to experiment with the component
in the playground.
-->
<details>
<summary>Copy-paste this code in <code>playground/Playground.tsx</code>:</summary>
```jsx
import * as React from 'react';
import {Page, Toggle} from '@shopify/polaris';
interface State {
checked: boolean;
}
export default class Playground extends React.Component<never, State> {
state: State = {
checked: true,
};
toggleToggle = (value: boolean) => {
this.setState({checked: value});
};
render() {
return (
<Page title="Playground">
<Toggle
label="Label"
labelHidden
prefix="Off"
suffix="On"
checked={this.state.checked}
onChange={this.toggleToggle}
/>
</Page>
);
}
}
```
</details>
### 🎩 checklist
* [x] Tested on [mobile](https://github.com/Shopify/polaris-react/blob/master/documentation/Tophatting.md#cross-browser-testing)
* [x] Tested on [multiple browsers](https://help.shopify.com/en/manual/intro-to-shopify/shopify-admin/supported-browsers)
* [x] Tested for [accessibility](https://github.com/Shopify/polaris-react/blob/master/documentation/Accessibility%20testing.md)
* [x] Updated [UNRELEASED.md](https://github.com/Shopify/polaris-react/blob/master/UNRELEASED.md)
<!--
When tophatting, please check the UNRELEASED entry for consistency, as per the [guidelines](https://github.com/Shopify/polaris-react/blob/master/documentation/Versioning%20and%20changelog.md).
-->
<!--
If you don't have access to Percy, please request access in the #polaris Slack channel.
-->
The primitives should all be there though, see the depreciated example for the setting-toggle UI
And the toggle icons:https://polaris.shopify.com/icons?q=toggle
See anything about dark-mode toggles in shopify|polaris for the patterns as that may lead somewhere though only one I know of is in restyle
