Skip to content
This repository has been archived by the owner on Mar 15, 2023. It is now read-only.

Update dependency tocas to v4.2.3 #106

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Update dependency tocas to v4.2.3 #106

wants to merge 1 commit into from

Conversation

renovate[bot]
Copy link
Contributor

@renovate renovate bot commented Sep 26, 2022 •
edited
Loading

Mend Renovate

This PR contains the following updates:

Package Change Age Adoption Passing Confidence Type Update
tocas 4.0.4 -> 4.2.3 age adoption passing confidence dependencies minor
tocas 4.0.4 -> 4.2.3 age adoption passing confidence minor

Release Notes

teacat/tocas

v4.2.3: Tocas 4.2.3

Compare Source

修正

  • 避免 Tocas 重複監聽被重複渲染的元素 (#​907, 1782069)。

修改

  • [Tooltip] 暫時移除 Tooltip 避免撞到邊緣的外距間隔，主要是計算問題會有偏移 (fd31b2f)。

v4.2.2: Tocas 4.2.2

Compare Source

修正

  • 移除先前修正 MutationObserver 忘記移除 characterData: true 的多餘監聽 (a54d0cf)。

v4.2.1: Tocas 4.2.1

Compare Source

修正

  • 修正 Vue.js 因為使用非正規 DOM 編輯方式而導致 Tocas JS 無法使用 MutationObserver 監聽的問題 (821d90e)。

新增

  • [Grid] column 新增了 is-center-aligned 可以讓欄位成為 display: flex; 並置中內容 (a5f9fef)。
  • 對 <html> 新增 is-medium 來將字體大小改為 15px，這是預設值通常不需要特別套用 (9d41aa5)。

v4.2.0: Tocas 4.2.0

Compare Source

⚠️ 破壞性異動 ⚠️

這些破壞性異動仍可以繼續在 4.2.0 版本中正常使用，但在未來的版本可能隨時都會被移除，請盡快改為新用法。這些樣式被移至 /src/deprecated_420.css。

  • [Accordion] 改為使用 HTML 原生的 <details> 標籤 (#​882, ab82979)。
  • [Grid] 多項功能被移除：is-doubling、is-stackable，請透過新的響應式系統搭配 is-x-columns 跟 is-stacked 使用。
  • HTML 的 [data-scale] 與 [data-scheme] 改為 is- 用法（如：is-small 跟 is-dark） (#​896)。
  • 舊有的響應式系統完全重構，如 is-minimal-x, is-standard-x, is-maximal-x 都不再支援（包含網格系統的 is-minimal-5 用法…等），請使用新的響應式系統。
  • is-dark, is-light, is-inverted 都改為 u- 前輟，如：u-dark。
  • is-dark-only, is-light-only 改為 u-dark-hidden 跟 u-light-hidden 而且作用相反，需要額外注意。

新元件

  • [App Drawer] 可以讓左、右、下出現置頂的抽屜 (58f5631)。
  • [App Topbar] 可以呈現像應用程式那樣的頂部按鈕列 (5f2d867)。
  • [Timeline] 能以時間軸的方式陳列事情發生的經過 (70b8982)。
  • [Buttons] 新的按鈕群組，用以呈現類似 Split Button 樣式，可以讓按鈕旁邊緊鄰另一個按鈕 (#​865, 92eb54b)。
  • 新增數個 JavaScript 模組：Dropdown, Tooltip, Toggle, Tab。

修正

  • [App Layout] 每個 .cell 現在都是 overflow: auto 來修正會在容器異常 Scrollable 的問題 (#​900, a273064)。
  • [Procedure] 因為多行文字而造成 .indicator 扁掉的問題 (#​883, f334bd7)。
  • [Dropdown] 修正 Dropdown 的 z-index 穿透更上層的 Modal 問題 (#​853, 119054a)。
  • [Button] 修正帶有 is-large 的 Icon 在 is-labeled-icon 按鈕會不成比例的 em 問題 (#​849, ccdd4a7)。
  • [Button] is-loading 會因為帶有 is-labeled-icon 樣式而看起來很奇怪 (#​850, f72b9b7)。
  • [Button] 修正 is-ghost 的 Loading 顏色 (#​868, f00c809)。
  • [Select] 項目的圖示大小跟 Dropdown 的 1.1em 不相符而看起來不對齊 (#​857, dda2048)。
  • [Select] is-solid 會因為 CSS 優先順序而永遠無法套用 is-acitve 樣式的問題 (#​858, dda2048)。
  • [Icon] 圖示的 z-index 會突破 Mask (#​876, 0fdaaf6)。
  • [Tab] Item 裡面的文字與圖示現在會上下垂直置中避免跑位 (#​864, e8838a2)。
  • [Tab] 修正 Item 若是 <button> 則會跑位的問題 (#​859, 4c075cd)。
  • is-dark-only 原本只會相依使用者裝置的 color-scheme 但卻忽略了套用 is-dark 元素的條件 (#​888, 95772e3)。

修改

  • [Procedure] 簡化結構，已經不再需要 .line 元素 (#​899, 79ec645)。
  • [Dropdown] 項目套用 min-width: 0 來支援 text-overflow (3643801)。
  • [Dropdown] 項目裡的 Avatar 會有負外距來讓對齊看起來更整齊 (#​854, 49c49cb)。
  • [Imageset] is-portrait 因為人像重點通常在上面，現在預設會以置上裁切為主 (#​862, 2d3616f)。
  • [Imageset] is-portrait 左側欄位為了更妥善地呈現主體照片，比起右側欄位會有更大的佔比 (#​860, 2d3616f)。
  • [Button] is-labeled-icon 裡的圖示現在會以 1.2em 大一點的尺寸顯示 (f69ce39)。
  • [Table] 調整了 <td> 的 is-padded 樣式相關內距 (8e05327)。
  • [Grid] 已經不再使用 display: grid 並改回使用 display: flex (cf9ff32)。
  • [File] 現在也跟其他 Input 一樣預設都是 100% 流動寬度 (#​871, 90e1256)。
  • [Text] 沒有公開的 is-x-lines 的 is-1-line 改為複數的 is-1-lines (fa0f323)。
  • [Tab] 圖示現在是 1.1em 尺寸，變得更大一點了 (4c075cd)。
  • 移除了英文版本的文件，因為目前沒時間維護 (36a69c4)。
  • 更新到 FontAwesome 6.3.0 (3362365)。

新增

  • [Checklist] 新增了 is-info 跟 is-warning 的項目用來呈現資訊與警告項目 (#​890, a40b794)。
  • [Container] 新增 is-padded 和 is-fitted 來變更內距大小，很適合響應式設計在行動裝置上減小內距 (#​893, 1581215)。
  • [Dropdown] 新增 is-top-center 跟 is-bottom-center 來置中上下邊的選單 (#​855, 3e8675e)。
  • [Control] 新的 is-stacked 可以搭配響應式設計在行動裝置上層疊 (#​845, 715a4c0)。
  • [Loading] 可以水平置中的 is-centered (2eb22eb)。
  • [Content] 現在可以上下或左右單獨使用 is-fitted (d0aaa50)。
  • [Header] 現在和 Text 一樣有了 is-lowercased 與 is-uppercased 可以強制英文字母大小寫 (#​878, 15a659c)。
  • [Rating] 現在支援 is-input 來讓使用者可以透過 checkbox 評分了 (#​881, f3ad84b)。
  • [Button] 因為 is-secondary 按鈕在 is-secondary Content 上會不太明顯，所以新增一個 is-tertiary 樣式來暫時解決這個問題 (#​810, f72b9b7)。
  • [Select] 透過 is-multiple 來使用複選的 [multiple] (#​884, 01955e9)。
  • [Table] 新的 is-fitted 無內距的樣式 (#​874, 8a5d2d0)。
  • [Input] 新增 is-relaxed 可以讓高度更高來呈現較寬鬆的模樣 (8784caa)。
  • [Close] 新增一個更大的 is-big 尺寸 (#​851, 07726d7)。
  • [Close] 新的 is-rounded 正圓角樣式 (#​852, 07726d7)。
  • [Flag] 新增 is-zz-flag 或 is-unknown-flag 來代表未知的國旗 (#​875, 23a8a1b)。
  • [Grid] 新的 is-1-columns 來呈現只有一欄的欄位，通常用於響應式設計在 is-x-columns 之間切換 (#​891, 73144d8)。
  • [Grid] 新增 is-reversed, is-stacked 和 is-order-x (e3f597e)。
  • [Menu] 現在也支援 is-horizontally-padded 來增加項目的內距 (#​869, 722c580)。
  • Switch, Checkbox 跟 Radio 現在有 is-solo 樣式可以用來呈現沒有文字只有開關的模樣 (#​833, 7ed49f3)。
  • 未公開的 Tocas Email 元件，可以檢視 /examples/email 先行預覽 (#​866, fa1c2ae)。
  • 大部分的元件現已支援 Accent Color 領銜主色，可以替元件加上主要色系 (e56c86b)。
  • 全新的響應式系統可以透過 中斷點:樣式 來更加彈性地切換樣式 (#​894)。

筆記

Grid 已經不再是 display: grid 並改回使用 display: flex (cf9ff32)。

Tocas 4 試圖在 Grid 元件使用 display: grid 來取代 Tocas 2 時的 display: flex 設計，結果不僅沒有變得更彈性，反而更加地綁手綁腳了。

舉例來說，沒有辦法像 Flexbox 那樣反轉欄位順序或是填滿剩餘空間；即便有，也沒有辦法自動將欄位換到下一列。

總之，display: grid 更像是給已經有一個排版設計的網頁使用，現在改回 Flexbox 設計之後，Tocas Grid 現在也多了幾項功能（例如：is-reversed 跟 is-order-x）。

Accordion 改用 <details> (#​882, ab82979)。

正如 #​882 說的那樣，使用者可以自行使用 .ts-row 來得到近似原本的設計，現在改為使用 HTML 原生的 <details> 可以更快地擁有一個簡易可折疊內容的功能。

基於 JavaScript 的全新的響應式系統 (#​894)。

原先 Tocas 4 試圖簡化響應式設計系統，使用 CSS 來將介面劃分為 minimal、standard 和 maximal，希望使用者能以最小化、標準、最大化來決定介面上應該要有哪些元素。

但很快地這個系統並不可靠，主要的問題有這幾項：

  1. 依靠視窗寬度來決定元素的斷點實在是太過無用，例如：頁面上已經變得很擁擠，卻因為視窗還是很寬而無法觸發 CSS 的中斷點設定。
  2. 使用者可能有自訂樣式想要在行動裝置使用，但是要跟 Tocas UI 的中斷點同時觸發，就還要跑來看原始碼複製裝置中斷點的定義，實在太過繁瑣。
  3. 中斷點的定義寫死在 Tocas CSS 裡而不能自行修改，因為 Media Query 不支援從 CSS Variables 裡面讀取。
  4. 每個中斷點都要有重複的樣式，一個樣式如果有四個中斷點，就要重複寫四次。

在思考後，決定使用類似 Tailwind 那樣的 mobile:is-small 定義，但因為 Tocas 沒有編譯器，因此以 JavaScript 搭配 Mutation Observer 作為基礎系統。現在搭配 Tocas JS，可以透過 CSS Variable 定義中斷點，甚至還支援 Container Query，也可以使用中斷點來切換自己的樣式。

全域樣式 Utilities 系統 (0510e8e)。

全域樣式可以在任何元素上使用（甚至不是 Tocas UI 的元件），例如：想要隱藏某些元素，就勢必要有一個 is-hidden 樣式。

起初的前輟是 has- 但某些命名仍不太符合文法（如：has-dark、has-hidden），所以決定改為 u- 前輟。

v4.1.0: Tocas 4.1.0

Compare Source

修正

  1. 修正 Input 無法在 iOS 上輸入的錯誤 (#​826, 57a9d0c)。
  2. Button 的 is-ghost 無法與 is-negative 語意搭配使用的問題 (#​827, 3831d32)。
  3. 讓 Circular Icon Button 為正圓形 (acc5ffc)。
  4. 修正 Imageset 的高度問題，同時修正 is-circular 圓角不正確的問題 (#​832, f4ea2e0)。
  5. 修正響應式不在 768px 斷點生效的問題 (#​823, 3db2399)。

修改

  1. 修改 CSS 樣式順序讓 is-padded 可以在套用 is-dense 的 Table 上生效 (fa394d7)。
  2. 降低 Tocas UI 對於連結顏色修改的 CSS 選擇器權重 (84cfe83)。
  3. Notice 改用 block 讓容器過短時能讓文字與標題以更好地方式呈現 (#​808, 3be8611)。
  4. 將所有的按鈕、輸入欄位、下拉選單高度標準化 (#​829, 4eeb083)。
  5. 所有的文字輸入欄位現在都是流動寬度 (#​842, 27cd2ae)。
  6. 升級到 Font Awesome 6.2.0 (0150d57)。

新增

  1. 新樣式供 Procedure 元件的步驟在標記為完成 is-completed 時，線條可以是一半 is-half (384e431)。
  2. 對 Input 為 [type="color"] 樣式支援 (14151f3)。
  3. Progress 現在有 is-empty 可以在沒有進度時隱藏進度條 (#​820, 76d6991)。
  4. 將 Dropdown 從 Menu 中拆出來成為一個獨立的元件 (#​837, #​819, a0156fe)。

文件

  1. 更新箱型容器部份的圖片範例原始碼 (#​834, f802dfc)。
  2. 提昇小部份 A11y 國際規範格式 (#​838, 1f6778e)。

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about these updates again.

  • If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.

@renovate renovate bot changed the title Update dependency tocas to v4.1.0 Update dependency tocas to v4.2.3 Mar 12, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
0 participants