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
5 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
When I apply for BFS, the tester requires me to use a contextual save bar but not an auto-save when the button is toggled. I use a toggle button on the settings page. There is no other options required saving on the page. Why is it so stupid?
Now: 1 click to save when the button is toggled
The comment:
Form inputs should be saved using the App Bridge Contextual Save Bar API. This also applies to forms within max modals. Continuous data validation or auto-save for forms is incongruous with the standard Shopify admin save UX. See this screenshot and our App Design Guidelines for details. The new App Bridge version must be implemented on all pages with a save or auto-save. Once implemented remove any save buttons as they will become redundant. Ensure to update this throughout the entire app.
