fix(tile): add hoverable attribute to avoid double focus in radio whe…

…n interactive (#80)
ovh · Jun 26, 2023 · 9429178 · 9429178
1 parent d4b221f
commit 9429178
Show file tree

Hide file tree

Showing 18 changed files with 79 additions and 138 deletions.
diff --git a/packages/libraries/core/src/components/tile/ods-tile-attributes.ts b/packages/libraries/core/src/components/tile/ods-tile-attributes.ts
@@ -21,9 +21,9 @@ export interface OdsTileAttributes extends OdsRadioizable, OdsCheckboxable, OdsC
   disabled: boolean;
   flex?: boolean;
   /**
-   * If the tile can be have interactive pseudo-classes or not
+   * If the tile can have hoverable pseudo-classes or not
    */
-  interactive?: boolean;
+  hoverable?: boolean;
   /**
    * indicate if the tile has to be displayed in focused state
    */

diff --git a/packages/libraries/core/src/components/tile/ods-tile-controller.spec.ts b/packages/libraries/core/src/components/tile/ods-tile-controller.spec.ts
@@ -80,26 +80,6 @@ describe('spec:ods-tile-controller', () => {
       });
     });
 
-    describe('methods:getTabIndex', () => {
-      [false, true].forEach(disabled => {
-        [false, true].forEach(interactive => {
-          if (!disabled && interactive) {
-            it('should return 0 [false, true]', () => {
-              setup({disabled, interactive: interactive});
-              const index = controller.getTabIndex();
-              expect(index).toBe(0);
-            });
-          } else {
-            it(`should return -1 [${disabled}, ${interactive}]`, () => {
-              setup({disabled, interactive: interactive});
-              const index = controller.getTabIndex();
-              expect(index).toBe(-1);
-            });
-          }
-        });
-      });
-    });
-
     describe('methods:handleClick', () => {
       it('should call console.log', () => {
         setup();

diff --git a/packages/libraries/core/src/components/tile/ods-tile-controller.ts b/packages/libraries/core/src/components/tile/ods-tile-controller.ts
@@ -43,13 +43,6 @@ export class OdsTileController extends OdsComponentController<OdsTile> {
     });
   }
 
-  getTabIndex(): number {
-    if (!this.component.disabled && this.component.interactive) {
-      return 0;
-    }
-    return -1;
-  }
-
   handleClick(): void {
     // todo make a animation onclick
     this.logger.log('[tile]', 'clicked');

diff --git a/packages/libraries/core/src/components/tile/ods-tile-default-attributes.ts b/packages/libraries/core/src/components/tile/ods-tile-default-attributes.ts
@@ -9,7 +9,7 @@ export const odsTileDefaultAttributesDoc = {
   color: OdsThemeColorIntent.default,
   disabled: false,
   flex: false,
-  interactive: false,
+  hoverable: false,
   hasFocus: false,
   loading: false,
   rounded: true,

diff --git a/packages/libraries/core/src/components/tile/ods-tile-mock.ts b/packages/libraries/core/src/components/tile/ods-tile-mock.ts
@@ -12,7 +12,7 @@ export class OdsTileMock implements OdsTile<OdsTileMethods, OdsTileEvents> {
   color?: OdsThemeColorIntent;
   disabled = false;
   flex?: boolean;
-  interactive?: boolean;
+  hoverable?: boolean;
   hasFocus = false;
   loading = false;
   rounded?: boolean;

diff --git a/packages/libraries/testing/src/components/tile/ods-tile-base-attributes.ts b/packages/libraries/testing/src/components/tile/ods-tile-base-attributes.ts
@@ -9,7 +9,7 @@ export const odsTileBaseAttributes: OdsTileAttributes = {
   checking: false,
   color: OdsThemeColorIntent.default,
   disabled: false,
-  interactive: false,
+  hoverable: false,
   loading: false,
   rounded: true,
   size: OdsTileSize.md,

diff --git a/packages/starters/react-vite/src/demo/Demo.tsx b/packages/starters/react-vite/src/demo/Demo.tsx
@@ -61,10 +61,10 @@ const Demo: React.FC = () => (
     <h5>Ods Tile in radio group</h5>
     <OsdsRadioGroup>
       <OsdsRadio value="A">
-        <OsdsTile interactive>Radio-group with Radio & Tile in it (option A)</OsdsTile>
+        <OsdsTile hoverable>Radio-group with Radio & Tile in it (option A)</OsdsTile>
       </OsdsRadio>
       <OsdsRadio value="B">
-        <OsdsTile interactive>Radio-group with Radio & Tile in it (option B)</OsdsTile>
+        <OsdsTile hoverable>Radio-group with Radio & Tile in it (option B)</OsdsTile>
       </OsdsRadio>
     </OsdsRadioGroup>
 

diff --git a/packages/starters/react/src/demo/Demo.tsx b/packages/starters/react/src/demo/Demo.tsx
@@ -61,10 +61,10 @@ const Demo: React.FC = () => (
     <h5>Ods Tile in radio group</h5>
     <OsdsRadioGroup>
       <OsdsRadio value="A">
-        <OsdsTile interactive>Radio-group with Radio & Tile in it (option A)</OsdsTile>
+        <OsdsTile hoverable>Radio-group with Radio & Tile in it (option A)</OsdsTile>
       </OsdsRadio>
       <OsdsRadio value="B">
-        <OsdsTile interactive>Radio-group with Radio & Tile in it (option B)</OsdsTile>
+        <OsdsTile hoverable>Radio-group with Radio & Tile in it (option B)</OsdsTile>
       </OsdsRadio>
     </OsdsRadioGroup>
 

diff --git a/packages/starters/vue-vite/src/demo/Demo.vue b/packages/starters/vue-vite/src/demo/Demo.vue
@@ -58,10 +58,10 @@ function handleMyButtonClick() {
     <h5>Ods Tile in radio group</h5>
     <OsdsRadioGroup>
       <OsdsRadio value="A">
-        <OsdsTile interactive>Radio-group with Radio & Tile in it (option A)</OsdsTile>
+        <OsdsTile hoverable>Radio-group with Radio & Tile in it (option A)</OsdsTile>
       </OsdsRadio>
       <OsdsRadio value="B">
-        <OsdsTile interactive>Radio-group with Radio & Tile in it (option B)</OsdsTile>
+        <OsdsTile hoverable>Radio-group with Radio & Tile in it (option B)</OsdsTile>
       </OsdsRadio>
     </OsdsRadioGroup>
 

diff --git a/packages/stencil/components/radio/src/index.html b/packages/stencil/components/radio/src/index.html
@@ -27,6 +27,18 @@
 </osds-radio-group>
 <p id="radio-group-a-info"></p>
 
+
+<p>radio with interactive or hoverable component inside</p>
+<osds-radio-group id="radio-group-b">
+  <osds-radio value="val-tile1">
+    <osds-tile hoverable="true">myTile1</osds-tile>
+  </osds-radio>
+  <osds-radio value="val-tile2">
+    <osds-tile interactive="true">myTile2</osds-tile>
+  </osds-radio>
+</osds-radio-group>
+
+
 <script type="module">
   document.addEventListener('odsInitialized', ({detail}) => {
     const instance = detail.instance;

diff --git a/packages/stencil/components/tile/src/components/osds-tile/osds-tile.e2e.screenshot.ts b/packages/stencil/components/tile/src/components/osds-tile/osds-tile.e2e.screenshot.ts
@@ -41,8 +41,8 @@ describe('e2e:osds-tile', () => {
       actionDescription: "disabled",
       action: () => el.setProperty("disabled", true)
     }, {
-      actionDescription: "interactive",
-      action: () => el.setProperty("interactive", true)
+      actionDescription: "hoverable",
+      action: () => el.setProperty("hoverable", true)
     },
     // TODO: don't test screenshot animated screen without freeze it
     // {

diff --git a/packages/stencil/components/tile/src/components/osds-tile/osds-tile.scss b/packages/stencil/components/tile/src/components/osds-tile/osds-tile.scss
@@ -30,7 +30,7 @@
   }
 }
 
-[interactive]:not([disabled]) {
+[hoverable]:not([disabled]) {
   @include osds-tile-on-selected-host() {
     cursor: pointer;
   }
@@ -109,19 +109,12 @@ slot[name="end"] {
         background-position: 0 0;
       }
     }
-
   }
-
 }
 
 // apply the theme template for the component
 @include ods-theme-component() {
   @include osds-tile-theme-color();
   @include osds-tile-theme-size();
   @include osds-tile-theme-typography();
-
-  :host([interactive]:focus-visible) {
-    outline-style: dashed;
-    outline-width: 2px;
-  }
 }
diff --git a/packages/stencil/components/tile/src/components/osds-tile/osds-tile.spec.ts b/packages/stencil/components/tile/src/components/osds-tile/osds-tile.spec.ts
@@ -167,12 +167,12 @@ describe('spec:osds-tile', () => {
       });
     });
 
-    describe('interactive', () => {
-      odsUnitTestAttribute<OdsTileAttributes, 'interactive'>({
-        ...getAttributeContextOptions<OdsTileAttributes, OsdsTile, 'interactive'>({
-          name: 'interactive',
+    describe('hoverable', () => {
+      odsUnitTestAttribute<OdsTileAttributes, 'hoverable'>({
+        ...getAttributeContextOptions<OdsTileAttributes, OsdsTile, 'hoverable'>({
+          name: 'hoverable',
           list: [false, true],
-          defaultValue: odsTileDefaultAttributes.interactive,
+          defaultValue: odsTileDefaultAttributes.hoverable,
           ...config
         })
       });
@@ -186,12 +186,6 @@ describe('spec:osds-tile', () => {
       expect(controller.validateAttributes).toHaveBeenCalledTimes(1);
     });
 
-    it('should call controller.getTabIndex', async () => {
-      await setup();
-      expect(controller.getTabIndex).toHaveBeenCalledWith();
-      expect(controller.getTabIndex).toHaveBeenCalledTimes(1);
-    });
-
     it('should call controller.handleClick on component click', async () => {
       await setup();
       root?.click();

diff --git a/packages/stencil/components/tile/src/components/osds-tile/osds-tile.tsx b/packages/stencil/components/tile/src/components/osds-tile/osds-tile.tsx
@@ -42,8 +42,8 @@ export class OsdsTile implements OdsTile<OdsStencilMethods<OdsTileMethods>, OdsS
   /** @see OdsTileAttributes.rounded */
   @Prop({ reflect: true }) public rounded?: boolean = odsTileDefaultAttributes.rounded;
 
-  /** @see OdsTileAttributes.interactive */
-  @Prop({ reflect: true }) public interactive?: boolean = odsTileDefaultAttributes.interactive;
+  /** @see OdsTileAttributes.hoverable */
+  @Prop({ reflect: true }) public hoverable?: boolean = odsTileDefaultAttributes.hoverable;
 
   /** @see OdsTileAttributes.loading */
   @Prop({ reflect: true }) public loading: boolean = odsTileDefaultAttributes.loading;
@@ -73,7 +73,6 @@ export class OsdsTile implements OdsTile<OdsStencilMethods<OdsTileMethods>, OdsS
     return (
       <Host {...{
         onClick: () => this.controller.handleClick(),
-        tabindex: this.controller.getTabIndex(),
       }}>
         <slot name={'start'}></slot>
         <span class={'tile__centered-text'}>

diff --git a/packages/stencil/components/tile/src/components/osds-tile/styles/osds-tile.color.scss b/packages/stencil/components/tile/src/components/osds-tile/styles/osds-tile.color.scss
@@ -12,9 +12,9 @@
     }
   }
 
-  &[interactive]:not([disabled]) {
+  &[hoverable]:not([disabled]) {
     @include ods-and-one-hue-foreach-theme-color('100') using($color) {
-      :host(&:focus), :host(&:hover), :host(&[has-focus]) {
+      :host(&:hover) {
         border-color: $color;
         background-color: $color;
       }
@@ -54,9 +54,9 @@
     }
   }
 
-  &[interactive]:not([disabled]) {
+  &[hoverable]:not([disabled]) {
     @include ods-and-one-hue-foreach-theme-color('100') using($color) {
-      :host(&:focus), :host(&:hover), :host(&[has-focus]) {
+      :host(&:hover) {
         background-color: $color;
       }
     }
@@ -69,7 +69,7 @@
 
   &[checked] {
     @include ods-and-one-hue-foreach-theme-color('500') using($color) {
-      :host(&), :host(&:focus), :host(&:hover), :host(&[has-focus]) {
+      :host(&), :host(&:hover) {
         border-color: $color;
       }
     }
@@ -99,9 +99,9 @@
     }
   }
 
-  &[interactive]:not([disabled]) {
+  &[hoverable]:not([disabled]) {
     @include ods-and-one-hue-foreach-theme-color('100') using($color) {
-      :host(&:focus), :host(&:hover), :host(&[has-focus]) {
+      :host(&:hover) {
         border-color: $color;
         background-color: $color;
       }
@@ -116,7 +116,7 @@
 
   &[checked] {
     @include ods-and-one-hue-foreach-theme-color('500') using($color) {
-      :host(&), :host(&:focus), :host(&:hover), :host(&[has-focus]) {
+      :host(&), :host(&:hover) {
         border-color: $color;
       }
     }
@@ -148,9 +148,9 @@
     }
   }
 
-  &[interactive]:not([disabled]) {
+  &[hoverable]:not([disabled]) {
     @include ods-and-one-hue-foreach-theme-color('100') using($color) {
-      :host(&:focus), :host(&:hover), :host(&[has-focus]){
+      :host(&:hover){
         background-color: transparent;
         border-color: $color;
       }
@@ -165,7 +165,7 @@
 
   &[checked] {
     @include ods-and-one-hue-foreach-theme-color('500') using($color) {
-      :host(&), :host(&:focus), :host(&:hover), :host(&[has-focus]) {
+      :host(&), :host(&:hover) {
         border-color: $color;
       }
     }
@@ -226,24 +226,4 @@
   [variant='hollow'] {
     @include osds-tile-theme-color-variant-hollow();
   }
-
-  :not([disabled]):focus,:not([disabled])[has-focus]  {
-    @include osds-tile-on-selected-host() {
-      outline-color: var(--ods-color-gray-500);
-    }
-  }
-
-  :not([disabled])[contrasted]:focus,:not([disabled])[contrasted][has-focus] {
-    @include osds-tile-on-selected-host() {
-      outline-color: var(--ods-color-gray-000);
-    }
-  }
-
-  [interactive] {
-    @include ods-and-one-hue-foreach-theme-color('500') using($color) {
-      :host(&:focus-visible) {
-        outline-color: $color;
-      }
-    }
-  }
 }
diff --git a/...ges/stencil/components/tile/src/docs/osds-tile/properties/usage.interactive.mdx b/...ges/stencil/components/tile/src/docs/osds-tile/properties/usage.interactive.mdx
diff --git a/packages/stencil/components/tile/src/docs/osds-tile/usage.mdx b/packages/stencil/components/tile/src/docs/osds-tile/usage.mdx
@@ -1,6 +1,5 @@
 import CheckedProperty from '@ovhcloud/ods-stencil-tile/src/docs/osds-tile/properties/usage.checked.mdx';
 import DisabledProperty from '@ovhcloud/ods-stencil-tile/src/docs/osds-tile/properties/usage.disabled.mdx';
-import InteractiveProperty from '@ovhcloud/ods-stencil-tile/src/docs/osds-tile/properties/usage.interactive.mdx';
 import SizeProperty from '@ovhcloud/ods-stencil-tile/src/docs/osds-tile/properties/usage.size.mdx';
 import VariantProperty from '@ovhcloud/ods-stencil-tile/src/docs/osds-tile/properties/usage.variant.mdx';
 import RoundedProperty from '@ovhcloud/ods-stencil-tile/src/docs/osds-tile/properties/usage.rounded.mdx';
@@ -44,9 +43,6 @@ import GenericStyle from '@ovhcloud/ods-core/docs/generic-style.mdx';
 ### Size
 <SizeProperty />
 
-### Interactive
-<InteractiveProperty />
-
 ### Checked
 <CheckedProperty />