From 6385da971ded1458fe9259c26e5c3a36f19febc5 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Tue, 21 Nov 2017 22:41:25 -0600 Subject: [PATCH] fix(radio): fix keyboard focus css --- .../core/src/components/radio/radio.ios.scss | 21 +++++ .../core/src/components/radio/radio.md.scss | 21 +++++ packages/core/src/components/radio/radio.scss | 20 ----- packages/core/src/components/radio/radio.tsx | 86 +++++++++---------- 4 files changed, 81 insertions(+), 67 deletions(-) diff --git a/packages/core/src/components/radio/radio.ios.scss b/packages/core/src/components/radio/radio.ios.scss index 6536f37a57..becdd3be1f 100644 --- a/packages/core/src/components/radio/radio.ios.scss +++ b/packages/core/src/components/radio/radio.ios.scss @@ -90,6 +90,27 @@ $radio-ios-item-end-margin-start: ($item-ios-padding-start / 2) !default; } +// iOS Radio: Keyboard Focus +// ----------------------------------------- + +.radio-key .radio-icon::after { + position: absolute; + top: -8px; + left: -9px; + + display: block; + + width: 36px; + height: 36px; + + background: #86A8DF; + opacity: .3; + + border-radius: 50%; + content: ''; +} + + // iOS Radio Within An Item // ----------------------------------------- diff --git a/packages/core/src/components/radio/radio.md.scss b/packages/core/src/components/radio/radio.md.scss index 021092bf33..817370fc33 100644 --- a/packages/core/src/components/radio/radio.md.scss +++ b/packages/core/src/components/radio/radio.md.scss @@ -124,6 +124,27 @@ $radio-md-item-end-margin-start: 0 !default; } +// Material Design Radio: Keyboard Focus +// ----------------------------------------- + +.radio-key .radio-icon::after { + position: absolute; + top: -12px; + left: -12px; + + display: block; + + width: 36px; + height: 36px; + + background: #86A8DF; + opacity: .3; + + border-radius: 50%; + content: ''; +} + + // Material Design Radio Within An Item // ----------------------------------------- diff --git a/packages/core/src/components/radio/radio.scss b/packages/core/src/components/radio/radio.scss index 5370390b52..0cbba6c39a 100644 --- a/packages/core/src/components/radio/radio.scss +++ b/packages/core/src/components/radio/radio.scss @@ -24,23 +24,3 @@ ion-radio input { -moz-appearance: none; appearance: none; } - -.radio-outline { - display: none; -} - -.radio-key .radio-outline { - position: absolute; - top: 5px; - left: 10px; - - display: block; - - width: 36px; - height: 36px; - - background: #86A8DF; - opacity: .3; - - border-radius: 50%; -} diff --git a/packages/core/src/components/radio/radio.tsx b/packages/core/src/components/radio/radio.tsx index 38cee67124..eb419c06ab 100644 --- a/packages/core/src/components/radio/radio.tsx +++ b/packages/core/src/components/radio/radio.tsx @@ -1,5 +1,5 @@ import { BlurEvent, CheckedInputChangeEvent, FocusEvent, RadioButtonInput, StyleEvent } from '../../utils/input-interfaces'; -import { Component, ComponentDidLoad, ComponentDidUnload, ComponentWillLoad, CssClassMap, Event, EventEmitter, Listen, Prop, PropDidChange, State } from '@stencil/core'; +import { Component, ComponentDidLoad, ComponentDidUnload, ComponentWillLoad, CssClassMap, Event, EventEmitter, Prop, PropDidChange, State } from '@stencil/core'; import { createThemedClasses } from '../../utils/theme'; @@ -14,44 +14,14 @@ import { createThemedClasses } from '../../utils/theme'; } }) export class Radio implements RadioButtonInput, ComponentDidLoad, ComponentDidUnload, ComponentWillLoad { - didLoad: boolean; - inputId: string; - nativeInput: HTMLInputElement; - styleTmr: any; + private didLoad: boolean; + private inputId: string; + private nativeInput: HTMLInputElement; + private styleTmr: any; @State() keyFocus: boolean; - /** - * @output {RadioEvent} Emitted when the radio loads. - */ - @Event() ionRadioDidLoad: EventEmitter; - - /** - * @output {RadioEvent} Emitted when the radio unloads. - */ - @Event() ionRadioDidUnload: EventEmitter; - - /** - * @output {Event} Emitted when the styles change. - */ - @Event() ionStyle: EventEmitter; - - /** - * @output {Event} Emitted when the radio button is selected. - */ - @Event() ionSelect: EventEmitter; - - /** - * @output {Event} Emitted when the radio button has focus. - */ - @Event() ionFocus: EventEmitter; - - /** - * @output {Event} Emitted when the radio button loses focus. - */ - @Event() ionBlur: EventEmitter; - /** * @input {string} The color to use from your Sass `$colors` map. * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. @@ -85,6 +55,36 @@ export class Radio implements RadioButtonInput, ComponentDidLoad, ComponentDidUn */ @Prop({ mutable: true }) value: string; + /** + * @output {RadioEvent} Emitted when the radio loads. + */ + @Event() ionRadioDidLoad: EventEmitter; + + /** + * @output {RadioEvent} Emitted when the radio unloads. + */ + @Event() ionRadioDidUnload: EventEmitter; + + /** + * @output {Event} Emitted when the styles change. + */ + @Event() ionStyle: EventEmitter; + + /** + * @output {Event} Emitted when the radio button is selected. + */ + @Event() ionSelect: EventEmitter; + + /** + * @output {Event} Emitted when the radio button has focus. + */ + @Event() ionFocus: EventEmitter; + + /** + * @output {Event} Emitted when the radio button loses focus. + */ + @Event() ionBlur: EventEmitter; + componentWillLoad() { this.inputId = 'ion-rb-' + (radioButtonIds++); @@ -135,8 +135,8 @@ export class Radio implements RadioButtonInput, ComponentDidLoad, ComponentDidUn } @PropDidChange('disabled') - disabledChanged(val: boolean) { - this.nativeInput.disabled = val; + disabledChanged(isDisabled: boolean) { + this.nativeInput.disabled = isDisabled; this.emitStyle(); } @@ -153,7 +153,8 @@ export class Radio implements RadioButtonInput, ComponentDidLoad, ComponentDidUn } onChange() { - this.onClick(); + this.checked = true; + this.nativeInput.focus(); } onKeyUp() { @@ -169,14 +170,6 @@ export class Radio implements RadioButtonInput, ComponentDidLoad, ComponentDidUn this.ionBlur.emit(); } - @Listen('click') - onClick() { - if (!this.checked && !this.disabled) { - this.checked = true; - this.nativeInput.focus(); - } - } - hostData() { const hostAttrs: any = { 'class': { @@ -198,7 +191,6 @@ export class Radio implements RadioButtonInput, ComponentDidLoad, ComponentDidUn
, -
,