Skip to content

Commit

Permalink
feat(switch): add <rh-switch> (#1513)
Browse files Browse the repository at this point in the history
* docs: draft release notes

* fix(tabs): improve long tab content with container queries (#1411)

* fix(tabs): improve long tab content with container queries

* chore(tabs): add changeset

* docs(tabs): update long tab content

* docs: update .changeset/silver-hornets-cry.md

---------

Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>

* feat(switch): add rh-switch element

* chore(switch): delete pf-switch.css

* chore(switch): lint

* fix(switch): remove box-shadow per design

* docs(switch): add color-context demo

* docs(switch): remove unneeded element internals polyfill import

* fix(switch): rename css props and document

* docs(switch): update readme

* docus(switch): update docs stubs

* chore(switch): add changeset

* docs(switch): remove unused reverse boolean attr

* chore(switch): remove unused demo.css

* chore(switch): update changeset

* fix(switch): add color context consumer

* docs(switch): remove unused styles

* docs(switch): correct disabled background color

* docs(switch): revert the last commit

* docs(switch): correct label color

* fix(switch): update dark mode colors

* fix(switch): correct light theme label color

* docs(switch): update repoStatus shortcodes

* feat(skip-link): add `<rh-skip-link>` (#1515)

* feat(skip-link): add `<rh-skip-link>`

* chore(skip-link): add changeset

* docs(skip-link): add appropriate screenshot

* fix: added lightdom-shim.css to export

* chore: add Adam Johnson to contributors list

* chore(skip-link): update readme

* fix(skip-link): implement lightdom-shim

* docs(skip-link): added JSDoc

* docs(skip-link): enlarge screenshot

* test(skip-link): add tests

* chore(skip-link): lint tests

* fix(skip-link): remove empty demo files

* fix(skip-link): create container and move styles

* fix(skip-link): reformat `.changeset`

* fix(skip-link): add important to every CSS property

* docs(skip-link): reformat `.changeset`.

* fix(skip-link): Remove `!important` from lightdom shim.

* fix(skip-link): set `font-size`

* refactor(skip-link): change container `id` name

* test(skip-link): refactor tests

* feat: add more skip links docs content

Note: There are a few images that still need to be added.

* feat: add images to accessibility page

* feat: add static image of skip link to Overview subpage

* docs(skip-link): add sample element

* feat: add deprecation alert to skip navigation page

* test(skip-link): use `aTimeout` for focus test

* feat: make the best practices more clear

* docs(skip-link): add repoStatus

* docs(skip-links): remove extraneous repoStatus shortcodes

---------

Co-authored-by: marionnegp <[email protected]>
Co-authored-by: Steven Spriggs <[email protected]>

* feat(back-to-top): add `<rh-back-to-top>` (#1517)

* feat(back-to-top): add `<rh-back-to-top>`

* chore(back-to-top): lint

* fix(back-to-top): support dev server and docs demo

* fix(back-to-top): suggestion for focus ring when on differnt backgrounds

* docs(back-to-top): update readme

* test(back-to-top): add tests

* chore(back-to-top): add changeset

* docs(back-to-top): remove comment

* chore(back-to-top): update changeset with example

* chore(back-to-top): remove unused demo.css

* docs(back-to-top): improve screenshot

* docs(back-to-top): attempt fix for playground view

* fix(back-to-top): change attribute to visible="always"

* docs(back-to-top): add back to top to repo status

* docs: fix bug when component isnt yet in the repoStatus.yml

* docs(back-to-top): update shortcodes for repoStatus

---------

Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>

* fix!: context types (#1518)

* fix(lib)!: context types

webcomponents-cg/community-protocols#59
made a breaking change to the way the context protocol works.
This commit brings our types in line with the new types on the protocol

* fix(context)!: adapt our contexts to new types

see lit/lit#4614 and https://github.com/webcomponents-cg/community-protocols/pull/59/files

* docs: create changeset

---------

Co-authored-by: Steven Spriggs <[email protected]>

* feat(code-block): actions and line numbers (#1496)

* feat(code-block): wip extensions

* feat(code-block): wrap

* feat(code-block): show more

* perf(code-block): don't clone to compute lines

thanks @nikkimk!

* feat(code-block): line numbers

* feat(code-block): icons

still tbd: switching text of toggle button from "toggle wrap" to "toggle overflow" - probably should be a pattern thing

* fix(code-block): toggle slots for actions

* fix(code-block): style adjustments

* fix(code-block): classic css whoopsie

* fix(code-block): gradient

this was fun to debug. the key insight is that pseudo elements of a grid
are *also* grid items

* docs(code-block): changesets

* docs(code-block): jsdoc

* fix(code-block): review notes

* docs(code-block): remove expandable demo

it was decided (cc @coreyvickery) that expandable would automatically determined

* docs(code-block): remove card with tabs demo

should be revisited after PFE3/TabsAriaController

* fix(code-block): refactor in anticipation of rh-fab

* fix(code-block): polish up actions

* fix(code-block): wrap fab state

* fix(code-block): badge, not tag

* fix: 🦄

* fix(code-block): remove actions slot

* fix(code-block): expand button styles

* fix(code-block): tooltip state in wrap

* feat: update code for action buttons in color context demo

---------

Co-authored-by: marionnegp <[email protected]>

* chore: update to @patternfly/pfe-core version 3.0 (#1508)

* chore: update patternfly/elements dep to 3.0

* chore: update lit and typescript deps

* chore: update typescript config and declaration

* fix(tile): update internals controller instantiation

* fix(button): update internals controller instantiation

* fix(accordion): update rti api for setting active item

* fix(menu): update rti api for setting active item

* fix(navigation-secondary): update rti api for setting active item

* fix(subnav): update rti api for setting active item

* fix(tabs): update rti api for setting active item

* chore: remove pfe elements from dep to a devDep add pfe-core as dep

* docs(dialog): remove unneeded imports from demo

* chore: lint

* chore: update deps

* test(tile): tile group a11y spec

* chore: node version

* docs: remove cases of band shortcode

* docs: uxdot-search a11y tweaks

* docs: 11ty plugins

* docs: import package

* fix(button): lint a11y in template

* fix(audio-player): label dialog from it's opening button

* chore: add playwright browser install to test workflow

* fix(tooltip): a11y template linting

* fix(tabs): use context instead of lightdom classes

* docs: add @lit/context to importMap

* style(tabs): lint css

* fix(tabs) revert use context instead of lightdom classes

* fix(tabs): Reverts 4b27d24

* chore: update lit/context to 1.1.1

* fix(menu): implement updated RTIC api

* test(menu): remove pageup and pagedown tests reserved for scrolling page

* refactor: no side effects in getters

* test(footer): deflake tests

* test(tooltip): assert on ax tree instead of shadow root

* fix(tooltip): invert css to hide content until open / initialized

* fix(tabs): use aria-tabs-controller

* fix(tabs): refactor using pfe-core 3

* fix(tabs): tab context

* fix(tabs): box context

---------

Co-authored-by: Benny Powers <[email protected]>
Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>

* fix(switch): use updated InternalsController api

* fix(switch): fix accessibility of labels

* fix(switch): remove usage of as type

* chore: eslint 9 (#1523)

* chore: update linters

* style: lint everything

* chore: add optional dependency for rollup-darwin-x64

* style: lint line length and autofixes

* chore: add .cache files to eslint ignore

* style(tile): lint line length

* style: more linting

* fix(tile): replace mistakenly deleted expression

* fix(navigation-secondary): query for all nav links

update RTIC usage

* fix(navigation-secondary): update items on slotchange

* test(skip-link): visibility assertion

---------

Co-authored-by: Steven Spriggs <[email protected]>

* feat(site-status): add `<rh-site-status>` (#1507)

* feat(site-status): add site-status

* fix(site-status): add missing export

* chore(site-stutus): fix comment

* fix(site-status): lint

* fix(site-status): add color-context

* test(site-staus): fix missing semi colon

* fix(site-status): remove errant import

* fix(site-status): allow endpoint to be overridden

* docs(site-status): add incorrect endpoint demo

* docs(site-status): correct auto generated template for demo

* test(site-status): improve tests

* fix(site-status): lint

* fix(site-status): lint

* fix(site-status): ugh lint...

* fix(site-status): revert customizable endpoint, add href to status page link

* test(site-status): improve tests

* docs(site-status): add status demos

* docs(site-status): stub docs

* docs(site-status): add jsdoc

* docs: add site-status to related items

* fix(site-status): add type guard for api response

* docs(site-status): update readme

* docs(site-status): imporove jsdoc

* docs(site-status): add docs pages and images

* chore(site-status): add changeset

* chore(site-status): update changeset to include example

* chore(site-status): remove unused demo files

* fix(site-status): remove unused part

* style(site-status): reorder type

* fix(site-status): make #isApiStatus static

* fix(site-status): class decorators cant be use with static private identifier

* fix(site-status): move getStatus to firstUpdated, remove extraneous throw

* fix(site-status): handle capitalization in css

* fix(site-status): correct first letter uppercase style

* fix(site-status): revert response error removal

* fix(site-status): remove status as statusText includes the 404 text.

* fix(site-status): correct viewbox attr

* docs(site-status): add repoStatus

* test(site-status): use sinon for fetch stub

* test(site-status): remove unused aTimeout

* fix(site-status): switch api call to a try catch

* fix(site-status): remove contextProvider not used in design spec

* fix(site-status): use block instead of display contents on host

* fix(site-status): move restore of fetch to top describes

* fix(site-status): implement loading-text slot for translations and accessibility with aria-polite and aria-busy

* docs(site-status): improve demos with loading state demo

* fix(site-status): add focus and hover states

* docs(site-status): add if status is still loading to accessibility

* fix(site-status): readding color context provider

* chore(site-status): lint

* fix(site-status): remove context provider add dark styles

* docs(site-status): readding arg check to fetch override

* chore(site-status): lint

* chore: bad merge on deps

* chore(switch): lint

* fix(back-to-top): bad merge, duplicate docs pages

* fix(switch): make state css props private

* test(switch): update tests to match new switch refactor

* docs(switch): update demos to new format

* fix(switch): return when no messages are slotted

* test(switch): fix test to include space in wrapping label

* docs(switch): remove reversed attribute from demo

* fix(switch): style messages inline

* fix(switch): ensure updating of labels when checked property changes

* fix(switch): add reversed, and native RTL support

* fix(switch): add dark background when checked

* chore(switch): lint

* docs(switch): improve color context demo

* fix(switch): fix focus ring on dark

* docs(switch): improve demo layouts

* docs(switch): improve demo, removed label

* docs(switch): fix describedby associations

* fix(switch): update message color for contexts

* docs(switch): update color context demo

* fix(switch): support dark color-palette

* feat(docs): add content to switch docs

* feat(docs): change "text label" to "status message"

* feat(docs): comment out empty image shortcodes to avoid DP/npm error

* feat(docs): comment out more empty image shortcodes to avoid DP/npm error

* feat(docs): add images and alt text

* feat(docs): update sample element and add info about status messages and form labels

* docs(switch): update to newer format

* chore: remove responsive from repo status for switch

* docs(switch): update image sizes in examples

* docs(switch): remove playground from overview

* chore: remove changesets added by bad merge

* refactor: use slots for messages, prefer attrs

* docs(switch): simplify demos

* fix(switch): ariaMixin polyfill

* fix(switch): remove extra dom in favor of pseudo elements

* test(switch): update test to newer slotted api

* test(switch): add tests for attribute based messages

* fix(switch): set disabled colors

* fix(switch): improve calc for position

* docs(switch): add color-palette

* docs(switch): center best practice images

* Change message's text color for dark, disabled switches

---------

Co-authored-by: Benny Powers <[email protected]>
Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>
Co-authored-by: Adam Johnson <[email protected]>
Co-authored-by: marionnegp <[email protected]>
  • Loading branch information
5 people authored Jul 12, 2024
1 parent c803486 commit 4e09f6f
Show file tree
Hide file tree
Showing 46 changed files with 2,050 additions and 0 deletions.
15 changes: 15 additions & 0 deletions .changeset/wild-steaks-play.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
---
"@rhds/elements": minor
---

✨ Added `<rh-switch>`

A switch toggles the state of a setting (between on and off). Switches and checkboxes can often be used interchangeably, but the switch provides a more explicit, visible representation on a setting.

html```
<rh-switch id="a" checked></rh-switch>
<label for="a">
<span data-state="on">Message when on</span>
<span data-state="off" hidden>Message when off</span>
</label>
```
3 changes: 3 additions & 0 deletions docs/_data/relatedItems.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,9 @@ rh-subnav:
- rh-navigation
- rh-navigation-secondary
- skip-navigation
rh-switch:
- rh-button
- form
rh-table:
- rh-code-block
rh-tabs:
Expand Down
12 changes: 12 additions & 0 deletions docs/_data/repoStatus.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -286,6 +286,18 @@
status: Ready
- name: Documentation
status: Ready
- name: "Switch"
type: "Element"
overallStatus: "New"
libraries:
- name: Figma library
status: Ready
- name: RH Elements
status: Ready
- name: WebRH
status: Planned
- name: Documentation
status: Ready
- name: "Table"
type: "Element"
overallStatus: "New"
Expand Down
29 changes: 29 additions & 0 deletions elements/rh-switch/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
# Switch
A switch toggles the state of a setting (between on and off).


## Installation

If using npm/bundlers:

```bash
npm install @rhds/elements
```

Then once installed, import it to your application:

```js
import '@rhds/elements/rh-button/rh-button.js';
```

## Usage
A switch toggles the state of a setting (between on and off). Switches provide a more explicit, visible representation on a setting.


```html
<rh-switch id="a" checked></rh-switch>
<label for="a">
<span data-state="on">Message when on</span>
<span data-state="off" hidden>Message when off</span>
</label>
```
33 changes: 33 additions & 0 deletions elements/rh-switch/demo/check-icon.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<section>
<form>
<fieldset>
<legend>Checked with label</legend>
<rh-switch id="switch-a"
accessible-label="Switch A"
message-on="Message when on"
message-off="Message when off"
checked
show-check-icon></rh-switch>
</fieldset>
</form>
</section>

<script type="module">
import '@rhds/elements/rh-switch/rh-switch.js';
</script>

<style>
section {
margin: 2rem;
}

fieldset {
display: grid;
grid-template-columns: max-content max-content;
gap: var(--rh-space-lg, 16px);
}

label {
color: var(--rh-color-text-primary-on-light, #151515);
}
</style>
56 changes: 56 additions & 0 deletions elements/rh-switch/demo/color-context.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<rh-context-demo>
<rh-switch accessible-label="Checked"
message-on="Checked on"
message-off="Checked off"
checked></rh-switch>
<rh-switch accessible-label="Unchecked"
message-on="Unchecked on"
message-off="Unchecked off"></rh-switch>

<rh-switch accessible-label="Checked with icon"
message-on="Checked with icon on"
message-off="Checked with icon off"
checked
show-check-icon></rh-switch>
<rh-switch accessible-label="Unchecked with icon"
message-on="Unchecked with icon on"
message-off="Unchecked with icon off"
show-check-icon></rh-switch>

<rh-switch accessible-label="Checked disabled"
message-on="Disabled checked on"
message-off="Disabled checked off"
checked
disabled></rh-switch>
<rh-switch accessible-label="Unchecked disabled"
message-on="Disabled unchecked on"
message-off="Disabled unchecked off"
disabled></rh-switch>

<rh-switch accessible-label="Checked disabled with icon"
message-on="Disabled checked with icon on"
message-off="Disabled checked with icon off"
show-check-icon
checked
disabled></rh-switch>
<rh-switch accessible-label="Unchecked disabled with icon"
message-on="Disabled unchecked with icon on"
message-off="Disabled unchecked with icon off"
show-check-icon
disabled></rh-switch>
</rh-context-demo>

<script type="module">
import '@rhds/elements/rh-switch/rh-switch.js';
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
</script>

<style>
rh-context-demo::part(demo) {
display: flex;
align-items: start;
flex-wrap: wrap;
gap: var(--rh-space-lg, 16px);
}
</style>

45 changes: 45 additions & 0 deletions elements/rh-switch/demo/disabled.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<section>
<form>
<fieldset>
<legend>Checked and Disabled</legend>
<rh-switch id="switch-a"
disabled
message-on="Message when on"
message-off="Message when off"
accessible-label="Switch A"
checked></rh-switch>
</fieldset>
<fieldset>
<label for="switch-b">Switch B</label>
<rh-switch disabled
id="switch-b"
message-on="Message when on"
message-off="Message when off"
checked></rh-switch>
</fieldset>
</form>
</section>

<script type="module">
import '@rhds/elements/rh-switch/rh-switch.js';
</script>

<style>
section {
margin: 2rem;
}

fieldset {
display: grid;
grid-template-columns: max-content max-content;
gap: var(--rh-space-lg, 16px);
}

label {
color: var(--rh-color-text-primary-on-light, #151515);
}

rh-switch:is(:disabled) ~ label {
color: var(--rh-color-text-secondary-on-light, #4d4d4d);
}
</style>
89 changes: 89 additions & 0 deletions elements/rh-switch/demo/fieldset.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<section>
<p>A switch toggles the state of a setting (between on and off). Switches provide a more explicit, visible representation on a setting.</p>
<form>
<fieldset id="fieldset-a">
<legend>Option A</legend>
<rh-switch id="switch-a"
accessible-label="Switch A"
message-on="Message when on"
message-off="Message when off"
checked></rh-switch>
</fieldset>

<fieldset id="fieldset-b">
<legend>Option B (Explicit label)</legend>
<label for="switch-b">Switch B</label>
<rh-switch id="switch-b"
message-on="Message when on"
message-off="Message when off"
checked></rh-switch>
</fieldset>

<fieldset id="form-disabled">
<legend>Form Disabled State</legend>
<label for="disable-fieldset-a">Disable Fieldset A</label>
<rh-switch id="disable-fieldset-a"
message-on="Fieldset A is disabled"
message-off="ieldset A is enabled"
aria-controls="fieldset-a"></rh-switch>

<label for="disable-switch-a">Disable Switch A</label>
<rh-switch id="disable-switch-a"
message-on="Switch A is disabled"
message-off="Switch A is enabled"
aria-controls="switch-a"></rh-switch>

<label for="disable-fieldset-b">Disable Fieldset B</label>
<rh-switch id="disable-fieldset-b"
message-on="Fieldset A is disabled"
message-off="Fieldset A is enabled"
aria-controls="fieldset-b"></rh-switch>

<label for="disable-switch-b">Disable Switch B</label>
<rh-switch id="disable-switch-b"
message-on="Switch A is disabled"
message-off="Switch A is enabled"
aria-controls="switch-b"></rh-switch>
</fieldset>
</form>
</section>

<script type="module">
import '@rhds/elements/rh-switch/rh-switch.js';

document.getElementById('form-disabled').addEventListener('change', /** @this{HTMLFieldsetElement}*/function(event) {
const controlsId = event.target.getAttribute('aria-controls');
const controls = document.getElementById(controlsId);
controls.toggleAttribute('disabled', event.target.checked);
if (controlsId.includes('fieldset') && event.target.checked === true) {
// eg update disable-switch-a state
const suffix = [...controlsId].pop();
document.getElementById(`disable-switch-${suffix}`).checked = event.target.checked;
}
});
</script>

<style>
section {
margin: 2rem;
}

fieldset {
display: grid;
grid-template-columns: max-content max-content;
gap: var(--rh-space-lg, 16px);
}

fieldset:has(#reversed) {
grid-template-columns: max-content min-content;
}

label {
color: var(--rh-color-text-primary-on-light, #151515);
font-weight: var(--rh-font-weight-heading-medium, 500);
}

rh-switch:is(:disabled) ~ label {
color: var(--rh-color-text-secondary-on-light, #4d4d4d);
}
</style>
54 changes: 54 additions & 0 deletions elements/rh-switch/demo/nested-in-label.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<section>
<form id="nested-label">
<fieldset>
<legend>Nested in a label</legend>
<label> Dark Mode
<rh-switch name="status"
message-on="On"
message-off="Off"
checked></rh-switch>
</label>
<rh-button type="submit">Submit</rh-button>
<output>Submit to read status</output>
</fieldset>
</form>
</section>

<script type="module">
import '@rhds/elements/rh-switch/rh-switch.js';
import '@rhds/elements/rh-button/rh-button.js';

document.getElementById('nested-label').addEventListener('submit', /** @this {HTMLFormElement} */function(event) {
event.preventDefault();
this.querySelector('output').textContent = `Dark mode ${this.elements.status.checked ? 'On' : 'Off'}`;
});
</script>

<style>
section {
padding: 1em;
}

fieldset {
display: grid;
grid-template-columns: min-content max-content;
gap: var(--rh-c-switch--ColumnGap, var(--rh-c-switch__label--PaddingLeft, 1rem));
&:has(#reversed) {
grid-template-columns: max-content min-content;
}
}

label {
color: var(--rh-color-text-primary-on-light, #151515);
}

#nested-label fieldset {
display: flex;
flex-wrap: wrap;
align-items: center;
}

#nested-label output {
width: 100%;
}
</style>
Loading

0 comments on commit 4e09f6f

Please sign in to comment.