V1 Overall Review

[kuaniscreative]

為了 v1 的收尾及 v2 的準備，開這個討論串來搜集使用上的經驗。如果在使用上，有覺得 mezzanine 很好地解決了什麼問題、現在有什麼使用或設計上的困難點，或是想要新增的 feature等等，麻煩在以下提出。提出時希望段落首行能夠有個標題讓大家知道與什麼有關，大概的形式是這樣： [層級]｜[討論方向]｜[主題]，例如：Select ｜Feature request｜同時需要 multiple 與 searchable的功能 或是 Overall｜Reflection｜客製化困難。以下提供幾個 label 讓大家有個參考：

層級：

• Overall
• Develop Structure -- 和現有的 mezzanine 架構有關
• Design -- 和 UI/UX 有關
• Select... -- component 名稱

討論方向：

• Reflection -- 使用體驗回饋
• Feature Request -- 現在還沒有但希望有的功能
• Improvement -- 提出困難點的解決方式

不限於使用以上 label，有個具體的層級與討論方向即可。

另外以下列出前次會議提出的大方向：

1. 需要文件支援
2. 表單類的元件 API 統整，主要需要解決常用 props 在各 component 間有些微差異的部分

大家也可以針對以上兩個提出更細節的想法。

[kuaniscreative]

Overall｜Reflection｜客製化困難

使用過程中發現：當設計稿的 design system 與現有的 mezzanine design system 有差時，改動會很困難。
例如：

1. button 要自定義 hover 顏色時，因為有 variant 跟 primary 等的交互作用，幾乎是每種狀況都要特殊處理，且處理方式必須透過 implement 的時候複寫 css-variables 才能達到。
2. checkbox 改變 hover 顏色，會因為 css 套用層級的關係，選取器需要寫到兩層才能夠複寫掉。

example:

.mzn-input-check:hover {
  .mzn-checkbox {
    border-color: var(--palette-brand-blue-2);
  }

  .mzn-checkbox--checked {
    border-color: var(--palette-brand-blue-2);
    background-color: var(--palette-brand-blue-2);
  }
}

.mzn-input-check--error .mzn-checkbox {
  border-color: var(--palette-red-3);

  &:not(.mzn-checkbox--checked):hover {
    background-color: initial;
    border-color: var(--palette-red-3);
  }
}

解決辦法？

土法煉鋼。
我想說是不是可以定義出一個 component 可以修改的空間，再去檢視目前的狀況需要如何修改。
以 checkbox 為例，可能需要有：

• 修改 input-check hover background
• 修改 checkbox(那個點擊框框)的 hover 顏色
• 修改 checkbox 那個 checkmark

再根據這些情況去檢視現在的 component 要如何完成這些改寫。如果能列出來，未來使用上也比較好套用這些改動

[travor20814]

Table｜Reflection｜render function params 順序調換

目前 Table columns render 的給法是

render: (column, source) => '',

使用下來發現幾乎都使用到 source 而已，導致很常出現以下這種 code

render: (_, source) => source.company.name,

解決辦法

讓比較常被使用到的參數放在前面

render: (source, column) => source.company.name,

額外

• 會影響到現有 Table 的使用方式，所以此項變動會需要至少升中版號