wpds ui kit

Kit UI WPDS

Kit UI Sistem Desain Washington Post (WPDS) adalah mono-repo dari kit UI kami dan situs dokumentasi kami.

Grafik ketergantungan

Contoh grafik ketergantungan untuk mengimpor tombol dari kit.

 LR FOLKCHART
A ["@WashingtonPost/WPDS-THEME"]-> B ["@WashingtonPost/WPDS-UI-KIT"]
C ["@WashingtonPost/WPDS-tombol"]-> B ["@WashingtonPost/WPDS-UI-KIT"]
A ["@washingtonpost/wpds-tema"]-> c ["@washingtonpost/wpds-tombol"]
Klik "https://github.com/wpmedia/wpds-ui-kit/tree/main/ui/theme"
Klik B "https://github.com/wpmedia/wpds-ui-kit/tree/main/ui/kit"
Klik C "https://github.com/wpmedia/wpds-ui-kit/tree/main/ui/button"

Struktur proyek ini sangat terinspirasi oleh Chakra UI, Radix UI, dan lainnya.

Satu impor untuk pengguna, banyak paket yang diimpor di @washingtonpost/wpds-ui-kit .

npm i @washingtonpost/wpds-ui-kit

Informasi tambahan

• Baca tentang cara membangun fitur untuk situs React Anda menggunakan kit UI kami pada panduan bereaksi kami.
• Jika Anda ingin berkontribusi pada kit WPDS UI kami, silakan merujuk ke dokumen kontribusi.
• Jangan ragu untuk menghubungi #WPDS di Slack jika Anda memiliki pertanyaan atau mengalami masalah apa pun.
• Jelajahi situs DOCS untuk contoh penggunaan dan dokumentasi tambahan pada setiap komponen. Anda juga dapat menemukan sumber daya tambahan di bawah sumber daya, panduan, dan halaman dukungan.
• Ada juga situs buku cerita yang hanya digunakan untuk pengembangan komponen. Jika Anda mencari contoh kode atau informasi tentang cara menggunakan komponen tertentu, silakan merujuk ke build.washingtonpost.com.

Perbaikan

• Sebelum V1.5.1, komponen Button memiliki density: "compact" . Setelah meningkatkan, default akan menjadi density: "default" , jadi Anda akan ingin memeriksa tombol apa pun yang digunakan dalam kode Anda untuk regresi dan secara manual menerapkan density: "compact" sesuai kebutuhan.

   < Button
    density = "compact"
    . . .

• Sebelum V0.12, globalStyles berisi transisi yang diterapkan secara global ke semua properti CSS pada semua elemen. Setelah meningkatkan elemen komponen apa pun yang mengandalkan transisi itu perlu menerapkan satu secara lokal menggunakan variabel tema WPDS.

   transition : theme . transitions . allFast ,
  // or
  transition : `background ${ theme . transitions . fast } ${ theme . transitions . inOut `

• Sebelum v0.15, globalStyles berisi penghapusan global margin dan padding untuk semua elemen. Setelah meningkatkan elemen komponen apa pun yang mengandalkan memiliki jarak yang dihapus perlu menambahkan aturan jarak dengan gaya lokal ke komponen.

Lisensi

Proyek ini dikembangkan di bawah lisensi MIT.