René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Support multiple pseudo states simultaneously","articleBody":"### Is your feature request related to a problem? Please describe.\r\n\r\n---\r\n\r\n**Update**: Looks like there are methods to manipulate pseudoStates already:\r\n\r\n- `addPseudoClass`\r\n- `deletePseudoClass`\r\n\r\nThese might be enough to cover the use-case, though a helper API to make it easier to switch would be welcome.\r\n\r\n---\r\n\r\nNativeScript supports pseudo selectors to style views based on their state. For example\r\n\r\n```css\r\nButton:disabled {\r\n background-color: #333;\r\n}\r\n```\r\n\r\nHowever it does not support multiple pseudo states simultaneously. A good example where this would be useful is a Switch/Checkbox view:\r\n\r\n```html\r\n\u003cSwitch checked=\"true\" isEnabled=\"false\" /\u003e\r\n```\r\n\r\n```css\r\nSwitch:checked:disabled {\r\n background-color: #333;\r\n}\r\n```\r\n\r\nThe above css should set the background color of the switch when it is both checked and disabled.\r\n\r\n### Describe the solution you'd like\r\n\r\nA new API to handle multiple pseudo states simultaneously.\r\n\r\nRight now we have the `View._goToVisualState(state: string);` method.\r\n\r\nWe could handle visual states in an array, or for performance reasons a flag system would work too.\r\n\r\n```ts\r\n// clear previous state and set it to :checked:disabled (or :disabled:checked)\r\nthis.setPseudoState(PseudoState.CHECKED | PseudoState.DISABLED);\r\n\r\n// keep previous state and add :disabled\r\nthis.addPseudoState(PseudoState.DISABLED);\r\n\r\n// keep previous state and remove :disabled\r\nthis.removePseudoState(PseudoState.DISABLED);\r\n\r\n// keep previous state, but replace :disabled with :enabled\r\nthis.replacePseudoState(PseudoState.DISABLED, PseudoState.ENABLED);\r\n```\r\n\r\nThe api is open for debate.\r\n\r\nA key missing piece is support for custom PseudoState values - the API would need to consider those to be complete.\r\n\r\n### Describe alternatives you've considered\r\n\r\nWe can handle the different states with simple classes, however a pseudo based solution would be ideal.\r\n\r\n### Anything else?\r\n\r\nThis would be a killer feature for using TailwindCSS where different states can be targeted inline:\r\n\r\n```html\r\n\u003cSwitch \r\n  class=\"bg-gray-200 disabled:bg-gray-50 checked:bg-blue-300 text-blue-300 disabled:text-gray-300 checked:text-green-300\" \r\n  checked=\"isChecked\" \r\n  isEnabled=\"isEnabled\"\r\n/\u003e\r\n```\r\n\r\n### Please accept these terms\r\n\r\n- [X] I have searched the [existing issues](https://github.com/NativeScript/NativeScript/issues) as well as [StackOverflow](https://stackoverflow.com/questions/tagged/nativescript) and this has not been posted before\r\n- [X] I agree to follow this project's [Code of Conduct](https://github.com/NativeScript/NativeScript/blob/master/tools/notes/CONTRIBUTING.md#coc)","author":{"url":"https://github.com/rigor789","@type":"Person","name":"rigor789"},"datePublished":"2022-02-20T15:11:07.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2},"url":"https://github.com/9789/NativeScript/issues/9789"}