Karma seçim, filtrelenmiş boş durumlar ve geri alma özelliklerine sahip eksiksiz bir editoryal inceleme kuyruğunda Seeds’in gerçek herkese açık renk, boşluk, ürün tipografisi ve kenarlık belirteçlerini inceleyin.
Sprout Social Seeds Tasarım Sistemi Ürün Tokenları ve Çalışma Zamanı Kapsamı
Ürün temellerini kullanın
Seeds, ürün tipografisini marka tipografisinden ayırır. Kuyrukta, yayımlanmış renk, aralık ve kenarlık tokenlarıyla birlikte herkese açık tipografi paketindeki gerçek sistem yazı tipi ailesi tokenı kullanılır. Pazarlama yazı tipi yüklenip ürün sistemini yeniden ürettiği iddia edilmez. Referans ile örneğin karşılaştırılabilir kalması için kurulumda paket sürümleri sabitlenmiştir.
Tokenları bileşenlerden ayırın
Seeds token paketlerini yüklemek değişkenleri kullanıma sunar; gönderi düzenleyicisi veya React bileşen ağacı oluşturmaz. Bu incelemedeki kartlar, seçim mantığı ve yerel inceleme eylemi özgün OpenDesign kodudur. Sayfa, token tabanlı bir uygulama kullandığını özellikle belirtir. Yerel Seeds React bileşenlerinin, resmî bileşen kaynaklarında açıklanan kendi entegrasyon gereksinimleri vardır.
Sprout Social Seeds Tasarım Sistemi Palet, Aralık ve Tipografi Referansları
Tam token adlarını kullanın
Referansta 12px için --space-size--350 ve 8px için --border-radius-600 gibi dışa aktarılan gerçek adlar yer alır. Bu adlar, ölçek etiketini çarparak çıkarılamaz. CSS token dosyalarını doğrudan içe aktarır ve değişkenlerini kullanır; böylece okuyucu, tahminî bir palet yerine görüntülenen bir değerin sabitlenmiş dağıtımdaki karşılığını izleyebilir.
rem tabanını göz önünde bulundurun
Aralık paketi hem piksel hem de rem biçimlerini sunar. Örneğin 16px’lik adım, 18px tabanını yansıtan 0.8888888888888888rem olarak da gösterilir. Bu incelemede amaçlanan aralığı açıkça belirtmek için piksel tokenları kullanılır. Bu rem değerlerini 16px kök boyutunda düşünmeden kullanmak, yoğunluğu korumak yerine değiştirir.
Sprout Social Seeds Tasarım Sistemi Editoryal Kartları ve İnceleme Bağlamı
Her kartı etkileşimden önce de kullanışlı kılın
Her kartta bir kanal, bir durum, özgün bir başlık ve tamamlanmış kısa bir gönderi bulunur. İkincil bir açılır bölümde inceleme ölçütleri yer alır. İçerik, alıştırma amacıyla oluşturulmuş kurgusal materyaldir ve çalışma alanının hiçbir sosyal hesapla bağlantısı yoktur. Böylece kart, gerçek gönderilere veya analizlere erişim olduğu izlenimini vermeden inandırıcı bir görevi aktarabilir.
Marka vurgularını okuma deneyiminin gerisinde tutun
Mavi, özgün kuyruğun inceleme eylemini belirtir; yeşil de “İncelemeye hazır” metnine eşlik eder. Bu rol atamaları, gerçek palet öğelerinden yararlanan uygulama tercihleridir. Anlam yalnızca rengi görmeye bağlı kalmasın diye durum her zaman metinle de belirtilir. Kenarlıklar ve aralıklar üç gönderiyi birbirinden ayırır; okunabilir içeriğin yerine süs amaçlı yer tutucular kullanmaz.
Sprout Social Seeds Tasarım Sistemi Görünür Seçim ve Karma Durum
Toplu seçimi geçerli görünümle sınırlayın
Görünür gönderileri seç eylemi, filtrelenmiş kümede çalışır. Görünür birkaç karttan yalnızca birini seçmek, toplu seçim kutusunu yerel belirsiz durumuna getirir. Filtrenin değiştirilmesi seçimi temizleyerek gizli bir kaydın sonraki bir eylemle değiştirilmesini önler. Görünür sayısı hem gösterilen hem de seçilen öğe sayısını bildirir.
Toplu seçim yalnızca görünür kayıtlar için geçerlidir.
Karma seçim, yerel indeterminate özelliğini kullanır.
Sprout Social Seeds Tasarım Sistemi Filtrelenmiş Boş Durumlar ve Geri Alma
Boş kuyruğun kurtarılabilir olmasını sağlayın
Taslak görünümündeyken tüm görünür taslakları incelemeye hazır olarak işaretlemek, doğal olarak boş bir sonuç bırakır. Boş durum, kayıtların hâlâ mevcut olduğunu açıklar ve Tüm gönderileri göster seçeneğini sunar. Bilinen bir yerel sonuç için yükleme simgesi göstermez veya sahte bir ağ hatası oluşturmaz. Eşleşme olmaması ile hiç kayıt bulunmaması arasındaki ayrım görünür kalır.
Son gerçek değişikliği geri alın
Uygulama, önceki durumu yalnızca son inceleme eylemiyle değiştirilen kayıtlar için saklar. Geri al, bu değerleri geri yükler, geçerli görünümü yeniden oluşturur ve odağı filtreye taşır. İlgisiz kayıtları sıfırlamaz veya yayımlanmış bir sosyal gönderiyi geri almış gibi davranmaz. Sonraki bir toplu işlem, kullanılabilir tek geri alma işleminin yerini alır; böylece “Son değişikliği geri al” etiketiyle tutarlılık korunur.
Sprout Social Seeds Tasarım Sistemi Eksiksiz, Çalıştırılabilir Kuyruk ve Kontroller
Dört token dağıtımının tümünü kullanın
Kaynak, özgün kompozisyon stil sayfasından önce renk, boşluk, tipografi ve kenarlık CSS öğelerini içe aktarır. main.js, seeds.css ve HTML kabuğunun tamamını birlikte kaydedin. Önizleme, uzak yazı tipleri veya arka uç kullanmadan aynı genel değerleri ve uygulama kodunu derler. Kesin paket sürümleri kurulum komutunda belirtilmiştir.
Sabitlenmiş dört Seeds tasarım token'ı paketini yükleyin.
Sağlanan giriş dosyasını, CSS öğesini ve kök HTML öğesini kaydedin.
Filtreyi değiştirmeden önce karma seçimi test edin.
Toplu inceleme sonrasında filtrelenmiş boş durumdan kurtarma ve geri alma işlevlerini doğrulayın.
Durum birleşimini test edin
Bir gönderi seçip toplu işlemlerdeki karma durumu doğrulayın. Durumu Taslak olarak değiştirin ve seçimin temizlendiğini kontrol edin. Görünür taslakları seçip hazır olarak işaretleyin ve boş sonucu inceleyin. Geri alıp iki taslağın geri geldiğini doğrulayın, ardından tüm gönderileri gösterin. Telefon genişliğinde kartlar tek bir okuma sütununa dönüşürken etiketler ve inceleme kontrolleri erişilebilir kalır.
Sprout Social Seeds Tasarım Sistemi Bileşen Örnekleri
main.js — eksiksiz editoryal sıra
Özgün veriler, filtre, karma seçim, toplu değişiklik ve geri alma.
JavaScript
import '@sproutsocial/seeds-color/dist/seeds-color.css';
import '@sproutsocial/seeds-space/dist/seeds-space.css';
import '@sproutsocial/seeds-typography/dist/seeds-typography.css';
import '@sproutsocial/seeds-border/dist/seeds-border.css';
import './seeds.css';
let items=[{id:'p1',title:'A clearer first step',channel:'Team updates',copy:'A useful guide starts with the task someone needs to complete. This week, we are revisiting the first step in our workshop toolkit.',status:'Draft'},{id:'p2',title:'Room for different perspectives',channel:'Community notes',copy:'Good workshop preparation creates more than an agenda. It gives people time to think and more than one way to contribute.',status:'Draft'},{id:'p3',title:'From notes to next actions',channel:'Team updates',copy:'Close a conversation with a decision, an owner and a date to look again. Keep open questions visible alongside the agreed next step.',status:'Ready for review'}];let chosen=new Set(),previous=null;
document.querySelector('#root').innerHTML=`<main><header><div><p class="eyebrow">OpenDesign · Editorial practice</p><h1>A small queue, ready for a closer look</h1><p>Prepare original sample posts for review. This workspace does not connect to social accounts or publish content.</p></div><span class="badge">3 sample posts</span></header><section class="filters" aria-label="Queue controls"><label>Status <select id="filter"><option>All posts</option><option>Draft</option><option>Ready for review</option></select></label><label class="select-all"><input type="checkbox" id="all">Select visible posts</label><button id="review" disabled>Mark ready for review</button></section><p id="count" role="status"></p><div id="posts"></div><section id="empty" hidden><h2>No posts in this view</h2><p>Your sample posts remain available in the full queue.</p><button id="clear">Show all posts</button></section><div id="notice" hidden><p id="message" role="status"></p><button id="undo">Undo last change</button></div><footer>Uses the published Seeds color, space, typography and border token packages. The post cards, selection model and local review action are original OpenDesign code, not Sprout Social’s application or native React components.</footer></main>`;
function visible(){let value=document.querySelector('#filter').value;return items.filter(x=>value==='All posts'||x.status===value)}
function updateSelection(){let rows=visible(),selected=rows.filter(x=>chosen.has(x.id));const all=document.querySelector('#all');all.checked=rows.length>0&&selected.length===rows.length;all.indeterminate=selected.length>0&&selected.length<rows.length;all.disabled=!rows.length;document.querySelector('#review').disabled=!selected.some(x=>x.status==='Draft');document.querySelector('#count').textContent=`${rows.length} posts shown · ${selected.length} selected`;}
function render(){let rows=visible();chosen=new Set([...chosen].filter(id=>rows.some(x=>x.id===id)));const root=document.querySelector('#posts');root.replaceChildren(...rows.map(x=>{let a=document.createElement('article');a.innerHTML=`<div class="post-head"><label><input type="checkbox" data-id="${x.id}" aria-label="Select ${x.title}" ${chosen.has(x.id)?'checked':''}><span class="channel">${x.channel}</span></label><span class="status ${x.status==='Draft'?'draft':'ready'}">${x.status}</span></div><h2>${x.title}</h2><p class="copy">${x.copy}</p><details><summary>Review checklist</summary><ul><li>The first sentence makes the subject clear.</li><li>The wording describes a real next step.</li><li>The post does not promise an unavailable feature.</li></ul></details>`;a.querySelector('input').onchange=e=>{e.target.checked?chosen.add(x.id):chosen.delete(x.id);updateSelection()};return a}));document.querySelector('#empty').hidden=rows.length>0;updateSelection();}
document.querySelector('#filter').onchange=()=>{chosen.clear();render()};document.querySelector('#all').onchange=e=>{chosen=new Set(e.target.checked?visible().map(x=>x.id):[]);render()};document.querySelector('#review').onclick=()=>{let changed=items.filter(x=>chosen.has(x.id)&&x.status==='Draft');if(!changed.length)return;previous=changed.map(x=>({id:x.id,status:x.status}));changed.forEach(x=>x.status='Ready for review');chosen.clear();render();document.querySelector('#notice').hidden=false;document.querySelector('#message').textContent=`${changed.length} ${changed.length===1?'post marked':'posts marked'} ready for review locally. Nothing was published.`;};document.querySelector('#undo').onclick=()=>{previous?.forEach(p=>{items.find(x=>x.id===p.id).status=p.status});previous=null;render();document.querySelector('#notice').hidden=true;document.querySelector('#filter').focus()};document.querySelector('#clear').onclick=()=>{document.querySelector('#filter').value='All posts';render();document.querySelector('#filter').focus()};render();
Kök Vite index.html dosyasını bu dosyayla değiştirin.
04
Sprout Social Seeds Tasarım Sistemi Ajanı Kurulumu
Uygulamaya Başlangıç Noktası
Bunlar genel kullanıma açık token paketleridir. Eksiksiz inceleme uygulaması, yukarıda sağlanan özgün koddur.
sh
npm create vite@latest seeds-review -- --template vanilla
cd seeds-review
npm install
npm install @sproutsocial/[email protected] @sproutsocial/[email protected] @sproutsocial/[email protected] @sproutsocial/[email protected]
# Save index.html at root; main.js and seeds.css in src.
npm run dev
Projeniz İçin Bir İstem
Ajan İstemi
Sağlanan editoryal sırayı, genel kullanıma açık sabitlenmiş Seeds token CSS paketini kullanarak oluşturun. Gerçek token adlarını, sistemin ürün tipografisini, yalnızca görünür öğelerin seçilmesini, yerel karma durumu, yalnızca taslaklara uygulanan toplu güncellemeleri, boş durumdan kurtarmayı ve tek adımlı geri almayı koruyun. Özgün örnek içeriği muhafaza edin; bağlı bir sosyal hesap veya yayınlama işlemi olduğu izlenimini asla vermeyin.
05
Sprout Social Seeds Tasarım Sistemi Kaynakları ve Kapsamı
Yayımlanmış Seeds token paketlerini kullanan özgün bir OpenDesign uygulaması. Kartlar ve inceleme iş akışı özgün HTML/JavaScript öğeleridir; yerel Seeds React bileşenleri değildir. Herhangi bir sosyal hesap bağlı değildir ve hiçbir şey yayımlanmaz.
