add new gv-select-native component

src/atoms/gv-select.js

@@ -27,7 +27,9 @@ import { InputElement } from '../mixins/input-element';
 import { withResizeObserver } from '../mixins/with-resize-observer';
 
 /**
- * A select component.
+ * A select component, is more like a list box...
+ * ⚠️ Please use `<gv-select-native>` component if you don't need strong customization.
+ * ⚠️ DO NO USE IT inside a `<gv-table>` component to avoid any scroll or overlapping issue.
  *
  * ## Details
  * * has @theme facet
@@ -414,7 +416,7 @@ export class GvSelect extends withResizeObserver(InputElement(LitElement)) {
         </div>
         ${this.readonly
           ? ''
-          : html` <ul class="${classMap(Object.assign({ select__list: true }))}">
+          : html` <ul class="${classMap(Object.assign({ select__list: true }))}" role="listbox" ?aria-expanded="${!this._isClosed}">
               ${this._options &&
               repeat(
                 this._options,
@@ -429,6 +431,8 @@ export class GvSelect extends withResizeObserver(InputElement(LitElement)) {
                     @click=${this._onSelect.bind(this, option)}
                     data-value="${option.value}"
                     .title="${ifDefined(option.title)}"
+                    role="option"
+                    ?aria-selected="${this.isSelected(option)}"
                   >
                     ${option.label}
                   </li>

src/index.js

@@ -13,6 +13,7 @@ export { GvLink } from './atoms/gv-link';
 export { GvMessage } from './atoms/gv-message';
 export { GvMetric } from './atoms/gv-metric';
 export { GvRelativeTime } from './atoms/gv-relative-time';
+export { GvSelectNative } from './atoms/gv-select-native';
 export { GvSelect } from './atoms/gv-select';
 export { GvSpinner } from './atoms/gv-spinner';
 export { GvState } from './atoms/gv-state';

src/mixins/input-element.js

@@ -49,13 +49,16 @@ export function InputElement(ParentClass) {
           }
 
           :host([invalid]) :not(.clipboard) input,
+          :host([invalid]) :not(.clipboard) ::slotted(.input),
           :host([invalid]) :not(.clipboard) .box-icon-left,
-          :host([invalid]) :not(.clipboard) textarea {
+          :host([invalid]) :not(.clipboard) textarea,
+          :host([invalid]) :not(.clipboard) select {
             box-shadow: inset 3px 0 0 var(--gv-input-invalid--bxshc, var(--gv-theme-color-error, #da1a1b));
           }
 
           :host([readonly]) :not(.clipboard) input,
-          :host([readonly]) .textarea {
+          :host([readonly]) :not(.clipboard) ::slotted(.input),
+          :host([readonly]) .textarea :host([readonly]) :not(.clipboard) select {
             border-left: 1px solid var(--gv-input--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9));
           }
 

src/organisms/gv-schema-form-control.js

@@ -20,6 +20,7 @@ import '../atoms/gv-input';
 import '../atoms/gv-input-message';
 import '../atoms/gv-text';
 import '../atoms/gv-select';
+import '../atoms/gv-select-native';
 import '../atoms/gv-switch';
 import '../molecules/gv-code';
 import '../molecules/gv-expression-language';
@@ -98,7 +99,10 @@ export class GvSchemaFormControl extends UpdateAfterBrowser(LitElement) {
       return 'gv-schema-form-control-object';
     }
     if ((this.control.enum || (this.control.items && this.control.items.enum)) && !this.isAutocomplete()) {
-      return 'gv-select';
+      if (this.control.type === 'array') {
+        return 'gv-select';
+      }
+      return 'gv-select-native';
     } else if (isComplexArray(this.control)) {
       return 'gv-schema-form-array';
     } else if (this.control.type === 'array') {
@@ -414,6 +418,7 @@ export class GvSchemaFormControl extends UpdateAfterBrowser(LitElement) {
         }
 
         gv-select,
+        gv-select-native,
         gv-input,
         gv-code,
         gv-switch,
@@ -423,6 +428,7 @@ export class GvSchemaFormControl extends UpdateAfterBrowser(LitElement) {
         }
 
         gv-select:hover,
+        gv-select-native:hover,
         gv-autocomplete:hover {
           z-index: 70;
         }

src/styles/input.js

@@ -119,6 +119,7 @@ export const input = css`
   /* BASE */
   input,
   ::slotted(input),
+  ::slotted(.input),
   .input {
     border: var(--gv-input--bdw, 1px) var(--gv-input--bds, solid) var(--gv-input--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9));
     box-sizing: border-box;
@@ -139,6 +140,7 @@ export const input = css`
   /* SIZE */
   .large input,
   .large ::slotted(input),
+  .large ::slotted(.input),
   .large .input {
     padding: var(--input-large--p);
     font-size: var(--input-large--fz);
@@ -148,6 +150,7 @@ export const input = css`
 
   .medium input,
   .medium ::slotted(input),
+  .medium ::slotted(.input),
   .medium .input {
     padding: var(--input-medium--p);
     font-size: var(--input-medium--fz);
@@ -157,6 +160,7 @@ export const input = css`
 
   .small input,
   .small ::slotted(input),
+  .small ::slotted(.input),
   .small .input {
     padding: var(--input-small--p);
     font-size: var(--input-small--fz);
@@ -234,9 +238,13 @@ export const input = css`
   }
 
   input:required,
+  .input:required,
   ::slotted(input:required),
+  ::slotted(.input:required),
   input:invalid,
-  ::slotted(input:invalid) {
+  .input:invalid,
+  ::slotted(input:invalid),
+  ::slotted(.input:invalid) {
     box-shadow: none;
   }
 

stories/atoms/gv-select-native.stories.js

@@ -0,0 +1,102 @@
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import '../../src/atoms/gv-select-native';
+import { makeStory } from '../lib/make-story';
+
+export default {
+  title: 'Atoms/gv-select-native',
+  component: 'gv-select-native',
+};
+
+const conf = {
+  component: 'gv-select-native',
+  css: `
+    :host {
+      height: 250px;
+    }
+
+    gv-select-native {
+      width: 100%;
+      max-width: 500px;
+    }
+  `,
+};
+
+const options = [
+  {},
+  { label: 'Application 1', value: '1' },
+  { label: 'Application 2', value: '2' },
+  { label: 'Application 3', value: '3' },
+  { value: '4' },
+  'Application 5',
+];
+
+const items = [
+  { options },
+  {
+    label: 'Associer une application',
+    placeholder: 'Trouver une application',
+    options,
+  },
+];
+
+export const Simple = makeStory(conf, {
+  items,
+});
+
+export const Small = makeStory(conf, {
+  items: items.map((p) => ({ ...p, small: true })),
+});
+
+export const Large = makeStory(conf, {
+  items: items.map((p) => ({ ...p, large: true, value: options[2].value })),
+});
+
+export const Required = makeStory(conf, {
+  items: items.map((p) => ({ ...p, required: true })),
+});
+
+export const Readonly = makeStory(conf, {
+  items: items.map((p) => ({ ...p, required: true, readonly: true, value: 1 })),
+});
+
+export const Disabled = makeStory(conf, {
+  items: items.map((p) => ({ ...p, disabled: true })),
+});
+
+export const DisabledAndRequired = makeStory(conf, {
+  items: items.map((p) => ({ ...p, disabled: true, required: true })),
+});
+
+export const Skeleton = makeStory(conf, {
+  items: items.map((p) => ({ ...p, skeleton: true })),
+});
+
+const hundredOptions = Array.from(Array(100), (x, index) => index + 1).map((i) => {
+  return { label: `Application ${i}`, value: `${i}` };
+});
+
+export const HundredOptions = makeStory(conf, {
+  items: items.map((p) => ({ ...p, options: hundredOptions })),
+});
+
+export const MultipleSelection = makeStory(conf, {
+  items: items.map((p) => ({ ...p, multiple: true })),
+});
+
+export const SingleOption = makeStory(conf, {
+  items: items.map((p) => ({ ...p, options: [options[0]], required: true })),
+});

stories/molecules/gv-table.stories.js

@@ -148,7 +148,7 @@ export const components = makeStory(conf, {
         data: [
           { field: 'name', label: 'Name' },
           { field: 'value', label: 'Component', type: 'gv-input', attributes: { clipboard: true } },
-          { label: 'List', type: 'gv-select', attributes: { options: ['Admin', 'Owner'] } },
+          { label: 'List', type: 'gv-select-native', attributes: { options: ['Admin', 'Owner'] } },
           { label: 'Button', type: 'gv-button', attributes: { innerHTML: 'Click me !' } },
           {
             label: 'Confirm',
@@ -194,7 +194,7 @@ export const dynamicRows = makeStory(conf, {
           {
             field: 'name',
             label: 'Name',
-            type: (item) => (item._new ? 'gv-input' : item._select ? 'gv-select' : 'label'),
+            type: (item) => (item._new ? 'gv-input' : item._select ? 'gv-select-native' : 'label'),
             attributes: {
               innerHTML: (item) => (item._new ? '' : item.name),
               required: true,

stories/organisms/gv-schema-form.test.js

@@ -55,6 +55,7 @@ describe('S C H E M A  F O R M', () => {
     'hidden',
     'readonly',
     'writeonly',
+    'whitelist',
   ];
 
   const checkControl = (id, attributes = []) => {
@@ -96,6 +97,7 @@ describe('S C H E M A  F O R M', () => {
       checkControl('useResponseCacheHeaders');
       checkControl('select');
       checkControl('multiselect');
+      checkControl('whitelist');
       done();
     });
   });
@@ -139,6 +141,7 @@ describe('S C H E M A  F O R M', () => {
         checkControl('cron', { value: '*/30 * * * * SUN-MON' });
         checkControl('disabled', { value: 'Simple Test' });
         checkControl('hidden', { value: 'not visible', hidden: true });
+        checkControl('whitelist', {});
         done();
       }, 0);
     });

stories/resources/schemas/mixed.json

@@ -192,6 +192,32 @@
       "description": "Example for writeonly",
       "type": "string",
       "writeOnly": true
+    },
+    "whitelist": {
+      "title": "Whitelist",
+      "type": "array",
+      "items": {
+        "title": "Rule",
+        "type": "object",
+        "id": "urn:jsonschema:io:gravitee:policy:resourcefiltering:configuration:Resource",
+        "properties": {
+          "pattern": {
+            "type": "string",
+            "title": "Path pattern",
+            "description": "Ant-style path patterns"
+          },
+          "methods": {
+            "title": "Methods",
+            "description": "HTTP Methods",
+            "type": "array",
+            "items": {
+              "type": "string",
+              "enum": ["CONNECT", "DELETE", "GET", "HEAD", "OPTIONS", "PATCH", "POST", "PUT", "TRACE"]
+            }
+          }
+        },
+        "required": ["pattern"]
+      }
     }
   },
   "required": ["multiselect", "timeToLiveSeconds"],

wc/gv-select-native.js

@@ -0,0 +1 @@
+import '../src/atoms/gv-select-native';