# Workday Canvas Tasarım Sistemi ## Workday Canvas Tasarım Sistemi Arayüz Önizlemesi Kurs başlıklarını filtreleyin, kursları bir kez ekleyin, seçimleri kaldırın ve canlı toplam süreyi karşılaştırın. ## Workday Canvas Tasarım Sistemi Tasarım Referansı Güncel Canvas Kit kaynak kodu ve Canvas belirteçleri sys.json. Aşağıdaki ham JSON adları, kaynak yollarıdır; uydurulmuş, oluşturulmuş CSS değişken adları değildir. Temel belirteçlere eşlenen değerler takma ad olarak gösterilmiştir; tarihli geçiş referansı açıkça geçmişe ait olarak belirtilmiştir. ### Güncel aralık anlamları | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | sys.padding.xs | {base.size.100} | Giriş alanının yatay iç boşluk rolü. | | sys.padding.md | {base.size.200} | Varsayılan bileşen iç boşluğu. | | sys.padding.xl | {base.size.300} | Kart iç boşluğu. | | sys.gap.sm | {base.size.100} | Kompakt kardeş öğeler arası boşluk. | | sys.gap.md | {base.size.200} | Varsayılan satır içi boşluk. | | sys.gap.xl | {base.size.400} | Kart kenar boşluğu. | | sys.gap.xxl | {base.size.800} | Bölümler arası boşluk. | ### Güncel tipografi ve şekil | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | sys.type.body.sm | font-size body.sm + line-height body.sm + normal weight | Birleşik gövde metni rolü. | | sys.font-size.body.sm | {base.size.200} | Temel gövde metni boyutu takma adı. | | sys.line-height.body.sm | {base.size.300} | Gövde metni satır aralığı takma adı. | | sys.font-weight.normal | {base.font-weight.400} | Güncel ad normal; regular değil. | | sys.shape.sm | {base.size.50} | Küçük yuvarlatma. | | sys.shape.md | {base.size.100} | Giriş alanı yuvarlatması. | | sys.shape.full | {base.size.75} × 100 | Tam yuvarlatma. | ### FormField bileşimi | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | FormField.Label | Connected label element | Giriş alanıyla oluşturulan ilişki. | | FormField.Input as={TextInput} | Polymorphic input slot | Eski label özelliği API değil. | | FormField.Hint | Linked helper content | Giriş alanından bekleneni açıklayın. | | orientation | vertical / horizontalStart / horizontalEnd | Güncel hizalama değerlerini kullanın. | | FormField.Field | Input and hint alignment wrapper | Yatay düzende kullanışlıdır. | ### TextInput uygulaması | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | grow | 100% width when true | Duyarlı giriş alanı genişlemesi. | | width | number or string | İsteğe bağlı geçersiz kılma. | | minimum width fallback | px2rem(280) | Dar üst kapsayıcı düzenlerini kontrol edin. | | error | error / caution styling | Doğrulama mantığını uygulama sağlar. | | transition | 0.2s box-shadow, 0.2s border-color | Kaynak koddaki gerçek geçiş. | | font size role | system.legacy.fontSize.subtext.lg | Bileşen iç işleyişini ilgisiz bir başlık türüyle değiştirmeyin. | ### PrimaryButton uygulaması | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | Background | brand.action.base, with legacy accent fallback | Kiracı markalaması. | | Hover | brand.action.dark or colorSpace.hover | Durum, eylem renginden türetilir. | | Pressed | brand.action.darkest or colorSpace.pressed | Belirgin basılı tutma durumu. | | variant="inverse" | Inverse surface and foreground roles | Uygun bir karşıtlık bağlamı için. | | Border radius | system.legacy.shape.full | Kaynak kod şu anda eski uyumluluğu koruyor. | ### Geçiş referansı; güncel belirteç adları değil | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | Former space.s → system.space.x4 | 1rem in 2023 migration table | Güncel kaynak kod, iç boşluk ile öğeler arası boşluğu birbirinden ayırır. | | Former space.m → system.space.x6 | 1.5rem in 2023 migration table | Eski adların hâlâ tercih edildiğini varsaymayın. | | Former borderRadius.m → system.shape.x1 | 0.25rem in 2023 migration table | Güncel kaynak kod, anlamsal şekil boyutlarını kullanır. | ## Workday Canvas Tasarım Sistemi Kapsamlı Kılavuz Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz. Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları. ## Workday Canvas Tasarım Sistemi Geçiş örneğini kopyalamadan önce güncel kaynak kodu inceleyin ### Aralıklar artık kullanım amacına göre ayrılıyor > Canvas, canvas-kit-react/tokens içindeki tişört bedeni biçimindeki boşluk sabitlerinden system.space numaralı belirteçlerine, oradan da padding ve gap gibi kaynak kategorilerine evrildi. Güncel sys.json, bunların temelindeki değerleri temel belirteçlere yapılan başvurular olarak ifade eder. Bu referans, sözcükleri birleştirerek CSS değişkeni uydurmak yerine, kaynakta gerçekten bulunan yolları korur. Geçiş tablosu, eski bir uygulamayı dönüştürürken hâlâ yararlıdır: önceki space.s değerinin neden bir rem değerine karşılık geldiğini açıklar. Bu, geçmişe ait bir kanıttır; her eski dışa aktarımın güncel arayüzde tercih edildiği anlamına gelmez. Önizlemede uygulama tercihi olarak açıkça 16 ve 24px aralıkları kullanılır; kitaplık belirteçlerinin adları konusunda yetkili kaynak, kaynak kod tablosudur. Destekleyici belirtimi okuyun ## Workday Canvas Tasarım Sistemi Renk, kiracıya ve bileşen durumuna bağlıdır ### Bir birincil düğme, sabit bir mavi renk örneğinden fazlasıdır PrimaryButton önce brand.action.base değerini okur; bu değer yoksa eski primary vurgusuna geri döner. Hover ve basılı tutma stilleri de durumları colorSpace yardımcılarıyla türetmeden önce brand eylem rollerine başvurur. Bu nedenle, sabit kodlanmış tek bir arka plan rengini değiştirmek bileşenin tema sözleşmesini yeniden oluşturamaz. Özgün öğrenme önizlemesi, ölçülü bir mavi uygulama paleti kullanır ve kendisini HTML yorumu olarak tanımlar. Belirli bir müşterinin kiracısını veya daha yeni Sana Canvas temasını yansıtmaz. Eksiksiz yerel örnek, bileşen renklerini yüklü belirteç katmanlarının sağlamasına olanak tanır. Destekleyici belirtimi okuyun ## Workday Canvas Tasarım Sistemi Birleşik roller satır yüksekliğini ve kalınlığı korur ### Boyut takma adı, stilin tamamı değildir Güncel body.sm tipografi nesnesi; yazı tipi ailesini, normal kalınlığı, gövde metni boyutunu ve satır aralığını bir araya getirir. Başlık rolleri kalın ağırlığı kullanır. Eski bir ekran görüntüsünden yalnızca piksel boyutunu seçmek bu ilişkileri kaybettirir. Kaynak koddaki ad normal'dır; eski geçiş metinlerinde görülen regular anahtarı kullanılmaz. Yazı tipleri Canvas Kit bileşen paketine dahil değildir. Yazı tipi yüklemeyi ayrı bir entegrasyon tercihi olarak ele alın; çevrimdışı örnek bir sistem yedeği kullanır ve Roboto veya Sana yazı tipini içerdiğini iddia etmez. Destekleyici belirtimi okuyun ## Workday Canvas Tasarım Sistemi FormField bileşik bir bileşendir ### Etiket, giriş alanı ve ipucunu alanın bir araya getirmesine izin verin Kaynak kod FormField.Label, FormField.Input ve FormField.Hint bileşenlerini sunar. TextInput öğesini Input'ın prop özelliği üzerinden geçirmek, modelin erişilebilir ilişkileri oluşturmasını sağlar. Bu yaklaşım, dış alana label özelliği ekleyip doğrudan içine sarmalanmamış bir giriş alanı yerleştiren eski örneklerden farklıdır. Yatay formlarda geçerli yönlendirme değerleri horizontalStart ve horizontalEnd'dir. FormField.Field, giriş alanını ve ipucunu bu hizalama içinde gruplar. Açıklama doğrudan etiketin ve denetimin altında yer aldığından filtremiz dikey kalır. - FormField.Label içine görünür, gerçek bir etiket yerleştirin. - TextInput öğesini bileşik Input yuvasından geçirin. - Filtre kapsamı için Hint kullanın. - Kısıtlar eklerken doğrulama mantığını uygulamada tutun. Destekleyici belirtimi okuyun ## Workday Canvas Tasarım Sistemi Büyüyen bir giriş alanı da esnek bir üst kapsayıcıya ihtiyaç duyar ### Asgari genişliği hesaba katın TextInput, kaynak kodunda px2rem ile ifade edilen 280px'lik varsayılan bir asgari genişliğe sahiptir. grow tam genişlik ister; ancak dar bir görünüm alanına sığması için katı, iki sütunlu bir üst kapsayıcıyı kendiliğinden esnek hâle getirmez. Çevrimdışı katalog, mobilde plan kenar çubuğunu kurs kartlarının altına taşır ve her düzen sütununun küçülmesine izin verir. Arama değeri sıradan bir React durum bilgisidir. Uygulama, üç kurs başlığında büyük-küçük harf duyarsız alt dize eşleşmesi yapar ve sonuç olmadığını açıkça gösterir. Filtre, seçilen kursları temizlemez; çünkü görünürlük ile plan üyeliği farklı durumlardır. Destekleyici belirtimi okuyun ## Workday Canvas Tasarım Sistemi Seçim, görünür sonuçlardan bağımsız olarak korunur ### Kararlı kurs kimlikleri kullanın ve toplamları türetin Her özgün kursun bir kimliği, başlığı ve süresi vardır. Seçilen liste kimlikleri saklar; görüntülenen toplam ise kurs kayıtlarından türetilir. Kataloğu filtrelemek, seçilmiş bir öğeyi kaldırmaz. Bir öğe kaldırıldığında Ekle eylemi hemen geri gelir ve toplam süre azalır. Bu, yerel planlamaya yönelik özgün bir senaryodur. Workday API'lerini çağırmaz, bir çalışanı kaydetmez veya bir öğrenme kaydını değiştirmez. Bu sınırı görünür tutmak, prototipin gerçek bir iş işlemi izlenimi vermesini önler. 1. Yalnızca katalog görünümünü filtreleyin. 2. Bir kurs kimliğini yalnızca bir kez ekleyin. 3. Seçili kursları ve toplam dakikayı bu kimliklerden türetin. 4. Aramayı sıfırlamadan bir seçimi kaldırın. Destekleyici belirtimi okuyun ## Workday Canvas Tasarım Sistemi Temalı bileşenleri beklemeden önce belirteçleri yükleyin ### Sağlayıcının ve CSS katmanlarının sorumlulukları farklıdır Güncel başlangıç kılavuzu örneği; uygulama giriş noktasında temel, marka, bileşen ve sistem değişkeni stillerini içe aktarır, ardından arayüzü CanvasProvider ile sarar. Sağlayıcı tek başına bu CSS tanımlarının yerini tutmaz. Buradaki kod bu bileşimi izler ve eksiksiz bir React kökü sağlar. Sana Canvas isteğe bağlıdır: değişkenleri sistem değişkenlerinden sonra yüklenir ve belgelenen html data-theme özelliği temayı seçer. Belge kökünü denetleyemeyen gömülü uygulamalar, açılır pencerelere tema aktarımı için özel bir sağlayıcı tema seçeneğine sahiptir. Paketleri yükseltirken bu temayı mevcut bir kiracıya yanlışlıkla eklemeyin. Destekleyici belirtimi okuyun ## Workday Canvas Tasarım Sistemi Bileşen Örnekleri ### Tamamlanmış, bağımsız ve etkileşimli örnek Belgenin tamamını index.html adıyla kaydedip tarayıcıda açın. Canvas etkileşim kalıplarının ve ölçülü kurumsal hiyerarşinin HTML özgün çevrimdışı yorumudur. Renk paleti ve düzen uygulama tercihleridir; Sana kiracısının görünümünü yansıtmaz. ``` Canvas learning plan interpretation
Learning workspacePersonal development · Local plan

Make room to grow

Choose a few focused lessons for your learning plan.

Search filters the catalog; your selected courses stay in the plan.

Independent HTML interpretation of Canvas composition patterns. Original palette, course illustrations and content; no Workday account or enrollment service is connected.

``` Kod referansı - Bir kurs eklemek örnek öğrenme planını değiştirir. Yerel örnek ayrıca CanvasProvider'ı ve bileşik FormField API bileşenini gösterir; kayıt işlemi gönderilmez. ### Bileşik alan ve seçilebilir öğrenme öğeleri FormField giriş ilişkisini oluşturur, TextInput özgün kurs verilerini filtreler ve her PrimaryButton bir öğeyi bir kez ekler. Kaldırma işlemi seçilen toplamı yeniden hesaplar. ``` // In a React 18+ application with a bundler: // npm install @workday/canvas-kit-react @workday/canvas-tokens-web @workday/canvas-kit-styling @emotion/react @emotion/styled import React,{useState} from 'react'; import {createRoot} from 'react-dom/client'; import {CanvasProvider} from '@workday/canvas-kit-react/common'; import {FormField} from '@workday/canvas-kit-react/form-field'; import {TextInput} from '@workday/canvas-kit-react/text-input'; import {PrimaryButton} from '@workday/canvas-kit-react/button'; import {system} from '@workday/canvas-tokens-web'; import {cssVar} from '@workday/canvas-kit-styling'; import '@workday/canvas-tokens-web/css/base/_variables.css'; import '@workday/canvas-tokens-web/css/brand/_variables.css'; import '@workday/canvas-tokens-web/css/component/_variables.css'; import '@workday/canvas-tokens-web/css/system/_variables.css'; // Default theme example; do not silently add a Sana theme to an existing tenant. const courses=[{id:'feedback',name:'Giving useful feedback',minutes:25},{id:'planning',name:'Planning a focused week',minutes:20},{id:'meetings',name:'Running inclusive meetings',minutes:30}]; function LearningPlan(){ const [query,setQuery]=useState(''),[chosen,setChosen]=useState([]); const visible=courses.filter(c=>c.name.toLowerCase().includes(query.toLowerCase())); const selected=courses.filter(c=>chosen.includes(c.id)); return

Build a learning plan

Find a course setQuery(e.target.value)}/> Filter the three example course titles. {!visible.length&&

No matching courses.

}

Your local plan

{selected.length} courses · {selected.reduce((sum,c)=>sum+c.minutes,0)} minutes

No enrollment is submitted.

; } createRoot(document.getElementById('root')).render(); ``` Kod referansı - PrimaryButton her bağımsız kurs öğesine aittir; planın tamamı yanıltıcı bir kayıt eylemi içermez. - Kaldırma işlemi, uygulamaya ait yerel bir düğme kullanır. - Devre dışı Added durumu yinelemeyi önler; canlı sayaç ise değişikliği doğrular. ## Workday Canvas Tasarım Sistemi Yapay Zekâ Aracısı Kurulumu ### Uygulamaya Başlangıç Noktası Paketlenmiş bir uygulama için eksiksiz React bileşimi. Güncel CanvasProvider ve belirteç CSS kurulumu; özgün kurs verileri ve yerel kaldırma denetimleri. Uzak kayıt işlemi yoktur. Kaynak kod incelendi; bu çalışma alanında paket derlemesi yapılmadı. ``` // In a React 18+ application with a bundler: // npm install @workday/canvas-kit-react @workday/canvas-tokens-web @workday/canvas-kit-styling @emotion/react @emotion/styled import React,{useState} from 'react'; import {createRoot} from 'react-dom/client'; import {CanvasProvider} from '@workday/canvas-kit-react/common'; import {FormField} from '@workday/canvas-kit-react/form-field'; import {TextInput} from '@workday/canvas-kit-react/text-input'; import {PrimaryButton} from '@workday/canvas-kit-react/button'; import {system} from '@workday/canvas-tokens-web'; import {cssVar} from '@workday/canvas-kit-styling'; import '@workday/canvas-tokens-web/css/base/_variables.css'; import '@workday/canvas-tokens-web/css/brand/_variables.css'; import '@workday/canvas-tokens-web/css/component/_variables.css'; import '@workday/canvas-tokens-web/css/system/_variables.css'; // Default theme example; do not silently add a Sana theme to an existing tenant. const courses=[{id:'feedback',name:'Giving useful feedback',minutes:25},{id:'planning',name:'Planning a focused week',minutes:20},{id:'meetings',name:'Running inclusive meetings',minutes:30}]; function LearningPlan(){ const [query,setQuery]=useState(''),[chosen,setChosen]=useState([]); const visible=courses.filter(c=>c.name.toLowerCase().includes(query.toLowerCase())); const selected=courses.filter(c=>chosen.includes(c.id)); return

Build a learning plan

Find a course setQuery(e.target.value)}/> Filter the three example course titles. {!visible.length&&

No matching courses.

}

Your local plan

{selected.length} courses · {selected.reduce((sum,c)=>sum+c.minutes,0)} minutes

No enrollment is submitted.

; } createRoot(document.getElementById('root')).render(); ``` ### Projeniz İçin Bir İstem ``` Mevcut Canvas FormField bileşimini ve token CSS katmanlarını kullanın. Kurs filtrelemesini seçim durumundan ayrı tutun, yinelenen seçimleri engelleyin ve toplam dakikayı hesaplayın. Anlamsal roller aracılığıyla kiracı temasını koruyun; geçmişteki numaralı aralık adlarını güncel tercih edilen kaynak kategorileriyle karıştırmayın. ``` ## Workday Canvas Tasarım Sistemi Kaynakları ve Kapsamı Bağımsız OpenDesign referansı. Çalışan kaydı veya Workday API kullanılmaz. Güncel kaynak adları ile eski geçiş adları açıkça birbirinden ayrılmıştır. - Canvas Kit kurulumu Güncel içe aktarmalar, sağlayıcı ve Sana sınırı. - Güncel sistem token kaynağı Aralık kategorileri, tipografi ve şekil takma adları. - FormField kaynağı Bileşik API ve yönlendirme. - TextInput kaynağı Boyutlandırma ve durum stilleri. - PrimaryButton kaynağı Marka temasını dikkate alan durum rolleri. - Düğme kaynağı Devralınan davranış ve simge yönü. - Geçmiş geçiş Eski adlar yalnızca geçiş referansı olarak korunur. ## Workday Canvas Tasarım Sistemi İlgili Kaynaklar ### Zendesk Garden Gerçek tema takma adları, tipografi ve köşe yarıçapı ölçekleri, eksiksiz bir yanıt oluşturucu, görünürlüğü gözeten yerel taslaklar ve alan kurtarma özellikleri içeren bir Garden destek çalışması kılavuzu. ### Adeo Mozaic Mozaic’in 16px sihirli birimini, birbiriyle uyumlu 48px kontrollerini, gerçek SCSS içe aktarımlarını ve BEM sınıflarını kullanarak işlevsel bir miktar kontrolü düzeni oluşturun. Raf planlayıcı; sınırları, türü belirtilmiş hataları ve yerel malzeme özetini görünür kılar. ### Adobe Spectrum Seçilebilir bir yaratıcı varlık tablosu ve dışa aktarma ön ayarı inceleyicisiyle React Spectrum v3’ü keşfedin. Provider temalarını ve giriş ölçeğini, desteklenen stil özelliklerini, anahtarlı koleksiyonları ve v3 ile daha yeni Spectrum 2 uygulaması arasındaki farkı öğrenin. - [Uygulama başvurusu](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/form-field/lib/FormField.tsx) - [Kaynak](https://raw.githubusercontent.com/Workday/canvas-tokens/main/packages/canvas-tokens/tokens/web/sys.json) - [Kaynak](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/form-field/lib/FormField.tsx) - [Kaynak](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/text-input/lib/TextInput.tsx) - [Kaynak](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/button/lib/PrimaryButton.tsx) - [Kaynak](https://github.com/Workday/canvas-tokens/discussions/77) - [Destekleyici belirtimi okuyun](https://raw.githubusercontent.com/Workday/canvas-tokens/main/packages/canvas-tokens/tokens/web/sys.json) - [Destekleyici belirtimi okuyun](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/button/lib/PrimaryButton.tsx) - [Destekleyici belirtimi okuyun](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/form-field/lib/FormField.tsx) - [Destekleyici belirtimi okuyun](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/text-input/lib/TextInput.tsx) - [Destekleyici belirtimi okuyun](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/button/lib/Button.tsx) - [Destekleyici belirtimi okuyun](https://github.com/Workday/canvas-kit) - [Kod referansı](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/form-field/lib/FormField.tsx) - [Canvas Kit kurulumu Güncel içe aktarmalar, sağlayıcı ve Sana sınırı.](https://github.com/Workday/canvas-kit) - [Güncel sistem token kaynağı Aralık kategorileri, tipografi ve şekil takma adları.](https://raw.githubusercontent.com/Workday/canvas-tokens/main/packages/canvas-tokens/tokens/web/sys.json) - [FormField kaynağı Bileşik API ve yönlendirme.](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/form-field/lib/FormField.tsx) - [TextInput kaynağı Boyutlandırma ve durum stilleri.](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/text-input/lib/TextInput.tsx) - [PrimaryButton kaynağı Marka temasını dikkate alan durum rolleri.](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/button/lib/PrimaryButton.tsx) - [Düğme kaynağı Devralınan davranış ve simge yönü.](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/button/lib/Button.tsx) - [Geçmiş geçiş Eski adlar yalnızca geçiş referansı olarak korunur.](https://github.com/Workday/canvas-tokens/discussions/77)