[BUG] Radio button styling on iOS 13.3 and below

jakobe commented 3 years ago

Describe the bug On iOS version <=13.3 the radio button icon isn't styled correctly regarding

background color (default, pressed and disabled states),
elevation (checked state)
size of check mark
focus ring (but we don't apply the focus ring on touch devices anyway)

To Reproduce

Go to https://cookbook.kirby.design/examples/radio on iOS version 13.3 or less
See missing styles (as mentioned above)

Kirby version

vNext (when initial Radio PR #1232 has been merged and published, probably 1.4.0)

Expected behavior Should have same styling as when seen in desktop Chrome or iOS Safari >=13.4 The specs can be found here: https://zpl.io/VxEMDJk

Screenshots ❌ Wrong:

✅ Expected:

Please complete the following information:

OS: iOS 13.3
Browser: Chrome+Safari
Browser 13.3

Additional context iOS <=13.3 doesn't support CSS Shadow Parts which is used to style the ion-radio. This can be "polyfilled" by checking for CSS Shadow Parts support ('part' in HTMLElement.prototype) and applying the missing styles by extracting selectors with ::part and applying the styled properties through the shadow dom of the ion-radio component:

function polyfillCssShadowParts() {
  const supportsCssShadowParts = 'part' in HTMLElement.prototype;
  if (supportsCssShadowParts) return;
  /* Todo: extract relevant css into shadowPartsCss.. */
  const ionRadio = this.ionRadioElement.nativeElement;
  const componentOnReady = (ionRadio as any).componentOnReady as () => Promise<void>;
  if (typeof componentOnReady === 'function') {
    await componentOnReady.bind(ionRadio)();
  }
  const styleElement = ionRadio.shadowRoot.querySelector<HTMLStyleElement>('style');
  this.renderer.appendChild(styleElement, this.renderer.createText(shadowPartsCss));
}

See: https://github.com/PolymerLabs/part-theme/blob/master/lib/part-theme.js#L94 for a regex example.

Tasks:

[ ] Move issue from "Ready to do" -> "in progress" on our project board
[ ] Create Fix Branch
[ ] Create test reproducing the error
[ ] Fix
[ ] If relevant Update Examples and Showcase
[ ] Push commits to GitHub
[ ] Open a pull request (remember to add closes #issueno to the description) and ask @kirbydesign/kirby-guild for review
[ ] Merge to master and delete branch ⁒

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because of no recent activity. It will be closed in 10 weeks if no further activity occurs. Thank you for your contributions.

alxzak commented 3 years ago

This issue will be closed due to backlog prioritization and pruning. https://github.com/kirbydesign/designsystem/discussions/1704#discussion-3522993

kirbydesign / designsystem

[BUG] Radio button styling on iOS 13.3 and below #1244

Tasks: