SSR-3242 Implement Dropdown Custom CSS property

docs/document/docs/components/desktop/dropdown.md

@@ -66,6 +66,21 @@ Here is a list of available constructors:
 | :--- | :--- | :--- | :--- | :--- |
 | options | object | {} | Object that includes component properties | |
 
+### Custom CSS
+> Please check [Custom CSS feature guide](../../getting-started/custom-css.md) at first.
+
+Here is a list of properties that can be used for modifying component style:<br>
+"toggle" means the area of the Dropdown button.
+#### Property
+| Name |
+| :--- |
+| --kuc-dropdown-toggle-width |
+| --kuc-dropdown-toggle-height |
+| --kuc-dropdown-font-size |
+| --kuc-dropdown-toggle-color |
+| --kuc-dropdown-menu-color |
+| --kuc-dropdown-menu-color-selected |
+
 ---
 ## Sample Code
 

docs/document/website/translated_docs/ja/version-1.11.0/components/desktop/dropdown.md

@@ -0,0 +1,131 @@
+---
+id: version-1.11.0-dropdown
+title: Dropdown
+sidebar_label: Dropdown
+original_id: dropdown
+---
+
+## Overview
+
+Dropdown は複数選択肢の中から一つの値を選択することができます。
+
+<div class="sample-container" id="dropdown">
+  <div id="sample-container__components"></div>
+</div>
+<script src="/js/samples/desktop/dropdown.js"></script>
+
+---
+
+## Specification
+
+### Property
+
+使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | "" | コンポーネントの class 名 ||
+| error | string | "" | エラーに表示するテキスト | 未指定、あるいは空文字の場合、error は表示されない |
+| id | string | "" | コンポーネントの id 名 ||
+| label | string | "" | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
+| value *1 | string | "" | 選択されている値 | value と selectedIndex が未指定の場合、何も選択されない<br>重複する value を指定し、selectedIndex を指定しない場合、Item.value で最初にマッピングされた value の項目が選択され、selectedIndex にはその選択肢のインデックス番号が入る<br>value が文字列以外の場合、エラーを出力する |
+| selectedIndex *1 | number | -1 | 選択されている値のインデックス番号 | items 内に重複する Item.value がある場合、どの Item.value が選択されるか指定するためのプロパティ<br>value が未指定で、selectedIndex に有効な値が指定されている場合、 そのインデックス番号の選択肢が選択される<br>value に重複した Item.value が指定され、selectedIndex の値が value 内の重複した Item.value とマッピングした場合、そのインデックス番号の選択肢が選択される<br>selectedIndex が数値以外の場合、エラーを出力する |
+| disabled | boolean | false | コンポーネントの編集可/不可設定 ||
+| requiredIcon | boolean | false | コンポーネントの必須アイコン表示/非表示設定 ||
+| visible | boolean | true | コンポーネントの表示/非表示設定 ||
+| items | Array\<Item\> | [] | 表示する選択肢一覧 | items が配列以外の場合、エラーを出力する |
+| Item.label | string | null | 各選択肢のテキスト | Item.label が未指定の場合、UI 上は Item.value の値が表示される |
+| Item.value | string | null | 各選択肢の値 | Item.value に重複の値を指定できる |
+
+> *1: Item.value に重複した値を指定できる。重複した値を指定する場合、value と selectedIndex プロパティを使って制御することができる。<br>
+> 例: `items = [{label: 'Orange', value: 'fruit'}, {label: 'Apple', value: 'fruit'}, {label: 'Carrot', value: 'vegetable'}]` を指定する
+>
+> - 以下のように value を指定、selectedIndex を未指定の場合:
+>   - value = 'fruit': 最初の値が選択される。
+>   - value = 'other': 何も選択されない。
+>
+> - 以下のように value を未指定、selectedIndex を指定する場合:
+>   - selectedIndex = 1: 2番目の値が選択される。
+>   - selectedIndex = 99: 何も選択されない。
+
+### Event
+
+指定できるイベントの一覧です。
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | 値が変更された時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br><br>event.detail で以下の値を受け取ることができる<br>event.detail.oldValue : 変更前の value の値<br>event.detail.value : 変更後の value の値 |
+
+### Constructor
+
+Dropdown(options)<br>
+使用できるコンストラクタの一覧です。
+
+#### Parameter
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | {} | コンポーネントのプロパティを含むオブジェクト | |
+
+### Custom CSS
+> [Custom CSS](../../getting-started/custom-css.md) をご確認ください。
+
+コンポーネントのスタイルを変更するために使用できるプロパティの一覧です。<br>
+"toggle" means the area of the Dropdown button.
+#### Property
+| Name |
+| :--- |
+| --kuc-dropdown-toggle-width |
+| --kuc-dropdown-toggle-height |
+| --kuc-dropdown-font-size |
+| --kuc-dropdown-toggle-color |
+| --kuc-dropdown-menu-color |
+| --kuc-dropdown-menu-color-selected |
+
+---
+## Sample Code
+
+>[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
+
+全てのパラメータを指定した場合のサンプルコードです。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+const dropdown = new Kuc.Dropdown({
+  label: 'Fruit',
+  requiredIcon: true,
+  items: [
+    {
+      label: 'orange',
+      value: 'Orange'
+    },
+    {
+      label: 'apple',
+      value: 'Apple'
+    }
+  ],
+  value: 'Orange',
+  selectedIndex: 0,
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false
+});
+space.appendChild(dropdown);
+
+dropdown.addEventListener('change', event => {
+  console.log(event);
+});
+```
+
+---
+
+## Related Articles
+
+- [Cleaning check list customization](../../guides/cleaning-check-list-customization.md)
+- [Format setting plug-in](../../guides/format-setting-plugin.md)
+- [Table and ReadOnlyTable customization](../../guides/table-readonly-table-customization.md)

docs/document/website/versioned_docs/version-1.11.0/components/desktop/dropdown.md

@@ -0,0 +1,131 @@
+---
+id: version-1.11.0-dropdown
+title: Dropdown
+sidebar_label: Dropdown
+original_id: dropdown
+---
+
+## Overview
+
+The Dropdown component allows the user to select one out of several options.
+
+<div class="sample-container" id="dropdown">
+  <div id="sample-container__components"></div>
+</div>
+<script src="/js/samples/desktop/dropdown.js"></script>
+
+---
+
+## Specification
+
+### Property
+
+Here is a list of properties that can be used for modifying the component:
+
+| Name  | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | Component class name | |
+| error | string | ""  | Text to be displayed in error | Error will not be displayed if unspecified or empty |
+| id | string | ""  | Component id name | |
+| label | string | ""  | Label for the component | Label is not displayed if unspecified or empty |
+| value *1 | string | ""  | Selected value | No option will be selected if the `value` and `selectedIndex` are unspecified<br>If setting duplicated value and not setting `selectedIndex`, the first mapped value item in `Item.value` will be selected and `selectedIndex` will be the index number<br>Will result an error if the value is not a string |
+| selectedIndex *1 | number | -1  | Index of selected item | It supports specifying which duplicated `Item.value` will be selected if there is duplicated `Item.value` in `items`<br>If `value` is not set and `selectedIndex` is valid, item that has the index number will be selected<br>If `value` is set with duplicated `Item.value` and `selectedIndex` value maps with duplicated `Item.value` specified in `value`, the item that has the index number will be selected<br>Will result an error if the value of `selectedIndex` is not a number |
+| disabled | boolean | false | Enable/Disable the component | |
+| requiredIcon | boolean | false | Show/Hide the required icon | |
+| visible | boolean | true | Show/Hide the component | |
+| items | Array\<Item\> | []  | List of options to display | Will result an error if the value of items is not an array |
+| Item.label | string | null | Text label for each option | If `Item.label` is unspecified, the value of `Item.value` is displayed on the UI |
+| Item.value | string | null | Value of each option | Can set duplicated value in `Item.value` |
+
+> *1: You can set duplicated value in `Item.value`. In case setting duplicated value, you can handle selected item using `value` and `selectedIndex` property.<br>
+> Example: When setting `items = [{label: 'Orange', value: 'fruit'}, {label: 'Apple', value: 'fruit'}, {label: 'Carrot', value: 'vegetable'}]`
+>
+> - If setting `value` and not setting `selectedIndex` as follows:
+>   - value = 'fruit': The first item will be selected.
+>   - value = 'other': No item will be selected.
+>
+> - If not setting `value` and setting `selectedIndex` as follows:
+>   - selectedIndex = 1: The second item will be selected.
+>   - selectedIndex = 99: No item will be selected.
+
+### Event
+
+Here is a list of events that can be specified:
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | Event handler when the value has been changed | It will pass the event object as the argument<br><br>You can receive the following values in event.detail<br>event.detail.oldValue : Value before the change<br>event.detail.value : Value after changing |
+
+### Constructor
+
+Dropdown(options)<br>
+Here is a list of available constructors:
+
+#### Parameter
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | {} | Object that includes component properties | |
+
+### Custom CSS
+> Please check [Custom CSS feature guide](../../getting-started/custom-css.md) at first.
+
+Here is a list of properties that can be used for modifying component style:<br>
+"toggle" means the area of the Dropdown button.
+#### Property
+| Name |
+| :--- |
+| --kuc-dropdown-toggle-width |
+| --kuc-dropdown-toggle-height |
+| --kuc-dropdown-font-size |
+| --kuc-dropdown-toggle-color |
+| --kuc-dropdown-menu-color |
+| --kuc-dropdown-menu-color-selected |
+
+---
+## Sample Code
+
+> Please check the [package installation](../../getting-started/quick-start.md#installation) method first.
+
+Here is a sample code when all parameters are specified:
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+const dropdown = new Kuc.Dropdown({
+  label: 'Fruit',
+  requiredIcon: true,
+  items: [
+    {
+      label: 'orange',
+      value: 'Orange'
+    },
+    {
+      label: 'apple',
+      value: 'Apple'
+    }
+  ],
+  value: 'Orange',
+  selectedIndex: 0,
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false
+});
+space.appendChild(dropdown);
+
+dropdown.addEventListener('change', event => {
+  console.log(event);
+});
+```
+
+---
+
+## Related Articles
+
+- [Cleaning check list customization](../../guides/cleaning-check-list-customization.md)
+- [Format setting plug-in](../../guides/format-setting-plugin.md)
+- [Table and ReadOnlyTable customization](../../guides/table-readonly-table-customization.md)

src/dropdown/index.ts

@@ -2,7 +2,6 @@ import { html, PropertyValues, svg } from "lit";
 import { property, query, queryAll, state } from "lit/decorators.js";
 
 import { ERROR_MESSAGE } from "../base/constant";
-import { getWidthElmByContext } from "../base/context";
 import { visiblePropConverter } from "../base/converter";
 import { BaseError } from "../base/error";
 import {
@@ -276,7 +275,6 @@ let exportDropdown;
 
     async updated() {
       await this.updateComplete;
-      this._updateContainerWidth();
       if (this._selectorVisible) {
         this._setMenuPosition();
         this._scrollToView();
@@ -522,14 +520,6 @@ let exportDropdown;
       this._buttonEl.removeAttribute("aria-activedescendant");
     }
 
-    private _updateContainerWidth() {
-      const MIN_WIDTH = 180;
-      let labelWidth = this._labelEl.getBoundingClientRect().width;
-      if (labelWidth === 0) labelWidth = getWidthElmByContext(this._labelEl);
-      labelWidth = labelWidth > MIN_WIDTH ? labelWidth : MIN_WIDTH;
-      this._groupEl.style.width = labelWidth + "px";
-    }
-
     private _getScrollbarWidthHeight() {
       const scrollDiv = document.createElement("div");
       scrollDiv.style.cssText =

src/dropdown/style.ts

@@ -26,8 +26,8 @@ export const DROPDOWN_CSS = `
     font-size: 14px;
     color: #333333;
     vertical-align: top;
-    width: 180px;
-    min-width: 180px;
+    width: var(--kuc-dropdown-toggle-width, 180px);
+    min-width: var(--kuc-dropdown-toggle-width, 180px);
     line-height: 1.5;
   }
   kuc-dropdown[hidden] {
@@ -51,17 +51,18 @@ export const DROPDOWN_CSS = `
     display: none;
   }
   .kuc-dropdown__group__toggle {
-    height: 40px;
+    height: var(--kuc-dropdown-toggle-height, 40px);
     box-sizing: border-box;
     box-shadow: 1px 1px 1px #ffffff inset;
     border: 1px solid #e3e7e8;
-    color: #3498db;
+    color: var(--kuc-dropdown-toggle-color, #3498db);
     background-color: #f7f9fa;
     padding: 0 0 0 24px;
-    display: flex;
+    display: grid;
+    grid: auto / auto-flow;
     align-items: center;
     justify-content: space-between;
-    width: 100%;
+    width: var(--kuc-dropdown-toggle-width, 100%);
     cursor: pointer;
   }
   .kuc-dropdown__group__toggle:focus {
@@ -75,7 +76,7 @@ export const DROPDOWN_CSS = `
     color: #888888;
   }
   .kuc-dropdown__group__toggle__selected-item-label {
-    font-size: 14px;
+    font-size: var(--kuc-dropdown-font-size, 14px);
     text-align: left;
     white-space: nowrap;
     overflow: hidden;
@@ -106,7 +107,8 @@ export const DROPDOWN_CSS = `
     position: relative;
     cursor: pointer;
     white-space: nowrap;
-
+    color: var(--kuc-dropdown-menu-color, #333333);
+    font-size: var(--kuc-dropdown-font-size, 14px);
   }
   .kuc-dropdown__group__select-menu__item__icon {
     position: absolute;
@@ -115,7 +117,7 @@ export const DROPDOWN_CSS = `
     margin-top: -5px;
   }
   .kuc-dropdown__group__select-menu__item[aria-selected="true"] {
-    color: #3498db;
+    color: var(--kuc-dropdown-menu-color-selected, #3498db);
   }
   .kuc-dropdown__group__select-menu__highlight[role="option"] {
     background-color: #e2f2fe;