Anlamsal Atlassian belirteçleri, sekiz piksellik boşluk ölçeği, gerçek Button, Lozenge ve Toggle API’leri ve gerekli Compiled stil ayarıyla bir iş planlama panosu oluşturun. Bir işi inceleyin, panoyu filtreleyin ve seçimi durumla karıştırmadan yerel bir iş öğesini taşıyın.
Doğrulanmış aralık ve biçim değerlerini örnek amaçlı renk paleti ve sistem yazı tipi yedeğiyle kullanan HTML/CSS yorumu; Jira veya yerel Atlaskit çalışma zamanı değildir. · Uygulama başvurusu
02
Atlassian tasarım sistemi Tasarım Başvurusu
Kodda tam anlamsal belirteç adlarını kullanın. Resmî başvuru, açık/koyu temaya göre değişen renk paleti takma adlarını gösterir; bu nedenle bu satırlarda sabit bir hex değeri uydurmak yerine takma adlar korunmuştur. Sayısal aralık ve köşe yarıçapı değerleri belgelenmiş ölçeklerden alınmıştır. Önizlemedeki hex renkleri örnek amaçlıdır, belirteç dışa aktarımı değildir.
Atlassian tasarım sistemi Herkese açık ADS paketleri ve gerçek stil oluşturma gereksinimi
Bir bileşeni içe aktarmak entegrasyonun tamamı değildir
Atlassian Design System bileşenleri @atlaskit altında yayımlanır; ancak daha geniş Atlaskit kataloğunda uygulamaya özel paketler de bulunur. Bu örnekte belgelenmiş üç temel bileşen olan Button, Lozenge ve Toggle'ın yanı sıra belirteçler ve CSS reset seçilmiştir. Veri modeli özellikle yerel tutulmuştur. Bu içe aktarımların hiçbiri Jira iş öğesi izinlerini, sprint mantığını veya bir arka uç sistemi sağlamaz.
Geçerli kurulum başvurusu, uygulama Compiled stillerini kendisi yazmasa bile platform paketlerini kullanan uygulamalar için Compiled entegrasyonunu gerektirir. Bu nedenle sağlanan Parcel yapılandırması örneğin bir parçasıdır. Paketleyici kurulumu olmadan kopyalanan bir Button içe aktarımı, eksik veya yanlış sıralanmış stiller üretebilir; bu, dipnotla geçiştirilebilecek görsel bir kusur değil, işlevsel bir entegrasyon sorunudur.
Atlassian tasarım sistemi Palet tahminleri yerine anlamsal belirteçleri kullanın
Bir belirteç bir amacı tanımlar
token("color.text") birincil ön plan rengidir; token("color.text.subtle") ise ikincil bilgileri belirtir. Seçili metin, tehlike metninden farklı bir rol kullanır. Pano, ana bölgesi için elevation.surface, gruplandırma bölgesi içinse elevation.surface.sunken kullanır. Adları amacı ifade ettiği için bu seçimler tema değiştiğinde de anlaşılır kalır.
Resmî katalog, bu roller için açık ve koyu palet takma adlarını sunar. Başvuru tablosu, tek ve kalıcı bir hex değeri vadetmek yerine bu bilgiyi korur. Gömülü örnekte örnek amaçlı bir palet kullanılır ve bu açıkça belirtilir. Renkleri yerel örneğin okunaklı olmasını sağlar; ancak üretim ortamındaki bir Atlaskit teması için alternatif bir doğruluk kaynağı değildir.
Atlassian tasarım sistemi Bilinçli kesirli adımlarla sekiz piksellik taban
Son eki yüzde olarak yorumlayın
space.100 değeri 8px, space.200 değeri 16px, space.025 değeri ise 2px'tir. Ölçekte kesirli adımlar bulunur; çünkü küçük boşluklar ve optik hizalama, tam sekiz piksellik birimlerden daha fazla hassasiyet gerektirir. Pano, ana içerik çevresinde space.300, yerel öğeler arasında ise space.150 kullanır. Belirteç çağrısı, üzerinde keyfî JavaScript aritmetiği yapmak için bir sayı yerine temaya duyarlı bir CSS değeri döndürür.
Aynı ilişki için aynı aralığı kullanın. Sorun anahtarıyla başlığı arasındaki mesafe, sorun listesini inceleme panelinden ayıran boşluktan daha küçük olmalıdır. Negatif aralık belirteçleri vardır, ancak standart pano düzeninde bunlara ihtiyaç yoktur. Yoğun bir çalışma yüzeyinde boşluk, ilgisiz öğeleri üst üste yaklaştırarak değil, düzenleme yoluyla sağlanmalıdır.
Atlassian tasarım sistemi Tipografi belirteçleri eksiksiz yazı tipi bildirimleridir
font.body değerini font-size içinde kullanmayın
Katalog, CSS font özelliği için bileşik yazı tipi belirteçlerini açıkça tanımlar. Örnekte sayfa başlığına font.heading.large, ayrıntı başlığına ise font.heading.medium atanmıştır. Bu belirteçlerden birini fontSize olarak kullanmak, amaçlanan kullanım sözleşmesini bozar. Kısa sorun özetleri için body rolü uygundur; çevredeki düzen okumayı destekliyorsa uzun açıklamalarda font.body.large kullanılabilir.
Mevcut uygulama yazı tipleri Atlassian Sans ve Atlassian Mono'dur. Sans, Inter Variable'dan; Mono ise JetBrains Mono'dan türetilmiştir. Sistemi tanımlarken bu kimlik önemlidir, ancak bu bağımsız önizleme bu yazı tiplerini yeniden dağıtmaz. Sistem yedek yazı tipini kullanır ve bunu açıkça belirtir. Üretimde benimserken rastgele bir yazı tipini yeniden adlandırmak yerine desteklenen yazı tipi dağıtım ve lisanslama yolunu kullanın.
Atlassian tasarım sistemi Çalışma yüzeyini açıklamak için şekil ve yükselti kullanın
Kart, bir nesne olduğu için yükseltilmiştir
Referans; çökük bir gruplama yüzeyini, yükseltilmiş kartları ve kaplama yüzeylerini birbirinden ayırır. Taşınabilir bir iş öğesi kavramsal olarak yükseltilmiş katmanda yer alırken pano sütunu bu öğeleri gruplar. Normal sayfanın parçası olan bir inceleme panelinin otomatik olarak kaplama gölgesine ihtiyacı yoktur. Yükseltinin önemli olduğu durumlarda yüzey ve gölge rollerini birlikte kullanın.
Mevcut şekil adları arasında 2px değerindeki radius.xsmall, 4px değerindeki radius.small ve 6px değerindeki radius.medium bulunur. Bunlar, bir geliştiricinin başka bir sistemden hatırlayabileceği eski border.radius yazımı değildir. Tabloda adlar tam olarak korunmuştur. Yerel denetim öğeleri kendilerine sağlanan stilleri kullanmalıdır; özel dış kapsayıcılar ise özel olarak oluşturulmuş sınıfları geçersiz kılmadan uygun rolü benimseyebilir.
Atlassian tasarım sistemi Düğme seçimi, sorun geçişinden farklıdır
Görünümü ve durumu bilinçli seçin
Doğrulanmış Button içe aktarma yolu @atlaskit/button/default/button şeklindedir. appearance="primary" ana eylemi vurgular; isSelected ise bu kompakt yerel örnekte geçerli sorunu işaretler. Tıklama yalnızca incelenen sorunu değiştirir. İş akışı durumunu düzenlemek için ayrı bir denetim kullanılır. Bu ayrım, bir satırı seçmenin işi fark ettirmeden başlatmasını veya tamamlamasını önler.
API ayrıca isLoading, isDisabled, spacing="compact" ve shouldFitContainer özelliklerini içerir. Yükleniyor durumu, devam eden bir işlemi ifade eder; kalıcı bir sorun durumu değildir. Devre dışı bırakılmış bir eylemin anlaşılır bir nedeni olmalıdır; çünkü klavye gezinmesinde devre dışı denetim öğeleri atlanabilir. Bu nedenle bağımsız pano, inceleme denetimlerini kullanılabilir tutar ve kullanıcının mevcut yerel durumu doğrudan incelemesine olanak verir.
Atlassian tasarım sistemi Lozenge ve Toggle farklı türde durumları ifade eder
Durum, etkileşim kipi değildir
Lozenge görünümleri arasında bilgi, tehlike ve başarı bulunur; örnekte bunlar Sürüyor, Engellendi ve Tamamlandı durumlarına karşılık gelir. Anlamı sözcükler taşır; renk yalnızca ek bir işarettir. Engellenmiş bir öğe seçildiğinde de engellenmiş olarak kalır. Sahip filtresinde isChecked ve onChange özelliklerine sahip Toggle kullanılır; çünkü bu boolean değer sorunları değil, panoda gösterilenleri değiştirir.
Yerel durum seçicisi bilerek basit tutulmuştur ve gerçek bir izin modelini temsil etmez. Üretim ortamında bir sorun geçişi için gerekçe, rol veya hizmet yanıtı gerekebilir. Yetkilendirme mantığını Lozenge bileşeninin dışında tutun ve doğrulanmış sonucu yalnızca hizmet onayladıktan sonra gösterin.
Seçim, şu anda incelenen sorunu belirtir.
İş akışı durumu, iş öğesinin kendisini tanımlar.
Sahip filtresi, sahipliği değiştirmeden görünür öğe kümesini değiştirir.
Atlassian tasarım sistemi Özel belirteç yüzeylerini oluşturmadan önce temayı başlatın
Genel tema yüklemesi eşzamansızdır
setGlobalTheme belge tema özniteliklerini günceller ve seçilen temayı CSS yükler. Giriş noktası, panoyu oluşturmadan önce bu işlemin tamamlanmasını bekler. Açık ve koyu temaları açıkça seçer; başlangıçta açık kip etkindir. Gerçek bir tercih denetimi, rastgele satır içi renkleri değiştirmek yerine aynı API üzerinden colorMode değerini güncelleyebilir.
Mevcut özel marka seçenekleri alfa olarak işaretlenmiştir ve UNSAFE API kullanır. Bu kılavuz, örneğin rengini değiştirmek uğruna kararsız bu yolu benimsemez. Önce kararlı anlamsal tema sözleşmesini koruyun; ardından deneysel özelleştirmeyi ayrı bir bağımlılık kararı olarak değerlendirin.
Atlassian tasarım sistemi Gerçek bir sorun inceleme etkileşimini doğrulayın
Sağlanan dosyaları birlikte kullanın
Yerel örnek için JSX giriş noktası, CSS sıfırlama içe aktarması ve her iki Parcel yapılandırma dosyası gerekir. Örnek; sorun koleksiyonunu, seçimi, sahip filtresini, durum eşlemesini ve canlı sonuç iletisini içerir. Bağımsız önizleme düzeni sütunlar ve inceleme paneliyle genişletir, ancak açıkça HTML yorumu olarak etiketlenmiştir. İkisi de Jira'ya bağlandığını iddia etmez.
Bir filtre seçili sorunu kapsam dışında bırakırsa yerel örnek, sorunun ayrıntılarını bilerek görünür tutar. Böylece okuyucu başka bir öğeye sessizce yönlendirilmek yerine mevcut öğeyi incelemeye devam edebilir. Üretim tasarımı farklı bir politika seçebilir; ancak bu politikayı açıklamalı ve anlamlı odağı korumalıdır. Davranışı hem dar bir görünüm alanında hem de tüm sütunlar görünürken doğrulayın.
WEB-18'i inceleyin, ardından iş akışı durumunu değiştirmeden başka bir sorun seçin.
Sahip filtresini etkinleştirin ve hangi sorunların görünür kaldığını kontrol edin.
Seçili yerel sorun durumunu değiştirin ve durum metniyle sütunun birbiriyle uyumlu olduğunu doğrulayın.
Filtreyi kaldırılmış panoya dönün ve aynı sorun kimliğini ve güncellenmiş durumu doğrulayın.
Belgenin tamamını index.html adıyla kaydedip tarayıcıda açın. Doğrulanmış aralık ve şekil değerlerini, örnek renk paletini ve sistem yazı tipi yedeğini kullanan HTML/CSS yorumu; Jira veya yerel Atlaskit çalışma zamanı değildir.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Issue board — Atlassian interpretation</title><style>*{box-sizing:border-box}body{margin:0;background:#fff;color:#172b4d;font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,select{font:inherit}button{cursor:pointer}header{padding:16px 24px;border-bottom:1px solid #dfe1e6;display:flex;align-items:center;justify-content:space-between;gap:16px}header strong{font-size:18px}.logo{color:#0c66e4;margin-right:12px}button{border:0;border-radius:4px;background:#f1f2f4;color:#172b4d;padding:8px 12px}button:hover{background:#dcdfe4}button:focus-visible,select:focus-visible{outline:3px solid #0c66e4;outline-offset:2px}.primary{background:#0c66e4;color:white}.primary:hover{background:#0055cc}main{padding:24px}.crumb{color:#626f86;font-size:12px}h1{font-size:24px;line-height:32px;margin:8px 0 16px}.tools{display:flex;align-items:center;gap:12px;margin-bottom:24px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:24px}.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}.column{background:#f7f8f9;min-height:280px;padding:8px;border-radius:6px}.column h2{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#626f86;margin:8px 4px 16px}.issue{text-align:left;background:white;box-shadow:0 1px 2px #091e4240;width:100%;margin-bottom:8px;padding:12px;display:block;border:2px solid transparent}.issue[aria-pressed=true]{border-color:#0c66e4}.issue:hover{background:#fff;border-color:#85b8ff}.issue strong{display:block;font-weight:500;min-height:46px}.meta{display:flex;justify-content:space-between;align-items:center;margin-top:20px;font-size:11px;color:#626f86}.avatar{display:inline-grid;place-items:center;width:24px;height:24px;background:#dfe1e6;border-radius:50%;font-weight:600}.tag{font-size:11px;line-height:18px;padding:1px 5px;font-weight:700;border-radius:3px;display:inline-block;background:#dfe1e6}.tag[data-status="In progress"]{background:#e9f2ff;color:#0055cc}.tag[data-status=Blocked]{background:#ffedeb;color:#ae2a19}.tag[data-status=Done]{background:#dcfff1;color:#216e4e}aside{border-left:1px solid #dfe1e6;padding-left:24px}aside h2{font-size:18px;line-height:26px;margin:12px 0 24px}dl{margin:0}dt{font-weight:600;margin:20px 0 8px}dd{margin:0}select{padding:8px;border:1px solid #8590a2;border-radius:4px;background:white;color:#172b4d;max-width:100%}.empty{padding:12px;color:#626f86;font-size:12px}footer{border-top:1px solid #dfe1e6;padding:16px 24px;color:#626f86;font-size:11px}#announcement{min-height:20px;color:#44546f;margin-top:16px}@media(max-width:720px){main{padding:16px}.layout{grid-template-columns:1fr}.board{grid-template-columns:1fr}.column{min-height:100px}aside{border-left:0;border-top:1px solid #dfe1e6;padding:16px 0 0}.issue strong{min-height:0}header{padding:16px}.tools{flex-wrap:wrap}}
</style><header><strong><span class="logo">▲</span>Product delivery</strong><span class="tag">LOCAL DEMO</span></header><main><div class="crumb">Projects / Website / Board</div><h1>Website release</h1><div class="tools"><label><input type="checkbox" id="mine"> Only Maya’s issues</label><button id="reset">Reset board</button></div><div class="layout"><section class="board" aria-label="Issues by status" id="board"></section><aside aria-label="Selected issue"><span id="key" class="crumb"></span><h2 id="title"></h2><span id="badge" class="tag"></span><dl><dt>Assignee</dt><dd id="owner"></dd><dt>Description</dt><dd id="description"></dd><dt><label for="status">Move issue to</label></dt><dd><select id="status"><option>To do</option><option>In progress</option><option>Blocked</option><option>Done</option></select></dd></dl><p id="announcement" role="status"></p></aside></div></main><footer>Independent HTML/CSS interpretation of Atlassian spacing, semantic status and persistent issue selection. System font and sample colors; no Jira connection.</footer><script>
const initial=[{id:'WEB-18',title:'Audit navigation labels',owner:'Maya Chen',status:'To do',description:'Review the wording of top-level links and check that each label describes its destination.'},{id:'WEB-21',title:'Connect locale switcher',owner:'Theo Park',status:'In progress',description:'Keep the current resource selected when a reader switches between supported languages.'},{id:'WEB-24',title:'Resolve missing image credits',owner:'Maya Chen',status:'Blocked',description:'The launch requires confirmation of the source and permitted use of two editorial images.'}];let issues=structuredClone(initial),selected='WEB-21';const board=document.querySelector('#board'),status=document.querySelector('#status');
function render(){board.replaceChildren();for(const state of ['To do','In progress','Blocked / Done']){const col=document.createElement('section');col.className='column';const entries=issues.filter(x=>(state==='Blocked / Done'?['Blocked','Done'].includes(x.status):x.status===state)&&(!document.querySelector('#mine').checked||x.owner==='Maya Chen'));const h=document.createElement('h2');h.textContent=state+' · '+entries.length;col.append(h);for(const issue of entries){const b=document.createElement('button');b.className='issue';b.setAttribute('aria-pressed',String(selected===issue.id));const t=document.createElement('strong');t.textContent=issue.title;const meta=document.createElement('span');meta.className='meta';meta.textContent=issue.id;const av=document.createElement('span');av.className='avatar';av.textContent=issue.owner.split(' ').map(x=>x[0]).join('');av.title=issue.owner;meta.append(av);b.append(t,meta);b.onclick=()=>{selected=issue.id;render();document.querySelector('#announcement').textContent='Selected '+issue.id};col.append(b)}if(!entries.length){const p=document.createElement('p');p.className='empty';p.textContent='No matching issues';col.append(p)}board.append(col)}const item=issues.find(x=>x.id===selected);document.querySelector('#key').textContent=item.id;document.querySelector('#title').textContent=item.title;document.querySelector('#owner').textContent=item.owner;document.querySelector('#description').textContent=item.description;const badge=document.querySelector('#badge');badge.textContent=item.status;badge.dataset.status=item.status;status.value=item.status}
status.onchange=()=>{const i=issues.find(x=>x.id===selected);i.status=status.value;render();document.querySelector('#announcement').textContent=i.id+' moved to '+i.status+' in this local board.'};document.querySelector('#mine').onchange=render;document.querySelector('#reset').onclick=()=>{issues=structuredClone(initial);selected='WEB-21';document.querySelector('#mine').checked=false;render();document.querySelector('#announcement').textContent='Board reset.'};render();
</script></html>
Sorun geçişleri yalnızca örnek panoyu etkiler. Bu HTML giriş noktası, ayrı Atlaskit uygulaması için gereken Compiled derleme yapılandırmasını kullanmaz.
Tam yerel uygulama girişi
Kurulumdan itibaren tam uygulama; odaklanmış API açıklamalarının yanında burada bir araya getirilmiştir. Kurulum bölümünde belgelenen paket ve derleme ön koşullarını izleyin.
jsx
// Existing React 18 project; use the Parcel configuration examples below.
// npm install @atlaskit/css-reset @atlaskit/tokens @atlaskit/button @atlaskit/lozenge @atlaskit/toggle
// npm install --save-dev parcel @compiled/parcel-config
// src/main.jsx; HTML entry contains <div id="root"></div> and a module script pointing here.
import * as React from 'react';
import {createRoot} from 'react-dom/client';
import '@atlaskit/css-reset';
import {token, setGlobalTheme} from '@atlaskit/tokens';
import Button from '@atlaskit/button/default/button';
import Lozenge from '@atlaskit/lozenge/lozenge';
import Toggle from '@atlaskit/toggle';
const initial = [
{id:'WEB-18',title:'Clarify first-project copy',owner:'Maya',status:'To do'},
{id:'WEB-21',title:'Review keyboard path',owner:'Alex',status:'In progress'},
{id:'WEB-24',title:'Resolve missing illustrations',owner:'Maya',status:'Blocked'}
];
const appearance = {'To do':'default','In progress':'information','Blocked':'danger','Done':'success'};
function Board() {
const [issues,setIssues]=React.useState(initial);
const [selected,setSelected]=React.useState('WEB-18');
const [mine,setMine]=React.useState(false);
const [notice,setNotice]=React.useState('');
const issue=issues.find(i=>i.id===selected);
return <main style={{padding:token('space.300'),color:token('color.text'),background:token('elevation.surface')}}>
<h1 style={{font:token('font.heading.large')}}>Onboarding improvements</h1>
<label htmlFor="mine">Assigned to Maya</label>
<Toggle id="mine" isChecked={mine} onChange={e=>setMine(e.currentTarget.checked)}/>
<div style={{display:'flex',flexWrap:'wrap',gap:token('space.300'),marginTop:token('space.200')}}>
<ul style={{flex:'1 1 280px',listStyle:'none',padding:0}}>
{issues.filter(i=>!mine||i.owner==='Maya').map(i=><li key={i.id} style={{marginBottom:token('space.150')}}>
<Button isSelected={i.id===selected} onClick={()=>setSelected(i.id)}>{i.id}: {i.title}</Button>
{' '}<Lozenge appearance={appearance[i.status]}>{i.status}</Lozenge>
</li>)}
</ul>
<section aria-label="Issue details" style={{flex:'1 1 280px',padding:token('space.200'),background:token('elevation.surface.sunken')}}>
<h2 style={{font:token('font.heading.medium')}}>{issue.id}: {issue.title}</h2>
<p>Owner: {issue.owner}</p>
<label htmlFor="status">Workflow state</label>{' '}
<select id="status" value={issue.status} onChange={event=>{
const status=event.target.value;
setIssues(items=>items.map(i=>i.id===issue.id?{...i,status}:i));
setNotice(`${issue.id} moved to ${status} in this local example.`);
}}>{Object.keys(appearance).map(s=><option key={s}>{s}</option>)}</select>
<p>This local demonstration has no Jira connection or permission rules.</p>
</section>
</div><p role="status">{notice}</p>
</main>;
}
async function start(){
await setGlobalTheme({light:'light',dark:'dark',colorMode:'light'});
createRoot(document.getElementById('root')).render(<Board/>);
}
start();
React pano mantığının tamamını ve aşağıdaki gerekli yapılandırma parçalarını ekleyin. Compiled tümleştirmesiyle Parcel kullanın; yalnızca CSS sıfırlama içe aktarmak, güncel paketler için yeterli değildir. Bu yerel prototipte yerel paket derlemesi yapıldığı iddia edilmemektedir.
Parcel, dağıtılan Compiled stillerini işlemelidir
Proje kök dizininde .parcelrc dosyasını oluşturun. Kurulum bölümünde listelenen bağımlılıkları yükledikten sonra Parcel'i HTML giriş noktasıyla başlatın.
openIssueDetail uygulama işleyicisidir; kurulumun tamamı seçim durumunu gösterir.
Durum etiketi, gerçekten bir geçiş etkileşimi sunmuyorsa menü gibi görünmemelidir.
04
Atlassian tasarım sistemi Yapay Zekâ Ajanı Kurulumu
Uygulamaya Başlangıç Noktası
React pano mantığının tamamını ve aşağıdaki gerekli yapılandırma parçalarını ekleyin. Compiled tümleştirmesiyle Parcel kullanın; yalnızca CSS sıfırlama içe aktarmak, güncel paketler için yeterli değildir. Bu yerel prototipte yerel paket derlemesi yapıldığı iddia edilmemektedir.
jsx
// Existing React 18 project; use the Parcel configuration examples below.
// npm install @atlaskit/css-reset @atlaskit/tokens @atlaskit/button @atlaskit/lozenge @atlaskit/toggle
// npm install --save-dev parcel @compiled/parcel-config
// src/main.jsx; HTML entry contains <div id="root"></div> and a module script pointing here.
import * as React from 'react';
import {createRoot} from 'react-dom/client';
import '@atlaskit/css-reset';
import {token, setGlobalTheme} from '@atlaskit/tokens';
import Button from '@atlaskit/button/default/button';
import Lozenge from '@atlaskit/lozenge/lozenge';
import Toggle from '@atlaskit/toggle';
const initial = [
{id:'WEB-18',title:'Clarify first-project copy',owner:'Maya',status:'To do'},
{id:'WEB-21',title:'Review keyboard path',owner:'Alex',status:'In progress'},
{id:'WEB-24',title:'Resolve missing illustrations',owner:'Maya',status:'Blocked'}
];
const appearance = {'To do':'default','In progress':'information','Blocked':'danger','Done':'success'};
function Board() {
const [issues,setIssues]=React.useState(initial);
const [selected,setSelected]=React.useState('WEB-18');
const [mine,setMine]=React.useState(false);
const [notice,setNotice]=React.useState('');
const issue=issues.find(i=>i.id===selected);
return <main style={{padding:token('space.300'),color:token('color.text'),background:token('elevation.surface')}}>
<h1 style={{font:token('font.heading.large')}}>Onboarding improvements</h1>
<label htmlFor="mine">Assigned to Maya</label>
<Toggle id="mine" isChecked={mine} onChange={e=>setMine(e.currentTarget.checked)}/>
<div style={{display:'flex',flexWrap:'wrap',gap:token('space.300'),marginTop:token('space.200')}}>
<ul style={{flex:'1 1 280px',listStyle:'none',padding:0}}>
{issues.filter(i=>!mine||i.owner==='Maya').map(i=><li key={i.id} style={{marginBottom:token('space.150')}}>
<Button isSelected={i.id===selected} onClick={()=>setSelected(i.id)}>{i.id}: {i.title}</Button>
{' '}<Lozenge appearance={appearance[i.status]}>{i.status}</Lozenge>
</li>)}
</ul>
<section aria-label="Issue details" style={{flex:'1 1 280px',padding:token('space.200'),background:token('elevation.surface.sunken')}}>
<h2 style={{font:token('font.heading.medium')}}>{issue.id}: {issue.title}</h2>
<p>Owner: {issue.owner}</p>
<label htmlFor="status">Workflow state</label>{' '}
<select id="status" value={issue.status} onChange={event=>{
const status=event.target.value;
setIssues(items=>items.map(i=>i.id===issue.id?{...i,status}:i));
setNotice(`${issue.id} moved to ${status} in this local example.`);
}}>{Object.keys(appearance).map(s=><option key={s}>{s}</option>)}</select>
<p>This local demonstration has no Jira connection or permission rules.</p>
</section>
</div><p role="status">{notice}</p>
</main>;
}
async function start(){
await setGlobalTheme({light:'light',dark:'dark',colorMode:'light'});
createRoot(document.getElementById('root')).render(<Board/>);
}
start();
Projeniz İçin Bir İstem
Ajan İstemi
Sağlanan React 18 Atlassian sorun örneğini, @atlaskit belirteçleri, CSS sıfırlama ve belgelenmiş Compiled Parcel tümleştirmesiyle oluşturun. Anlamsal belirteç çağrılarını, yazı tipi kısa yazım rollerini ve doğrulanmış Button/Lozenge/Toggle içe aktarmalarını kullanın. Seçimi, sahip filtresini ve iş akışı durumunu birbirinden bağımsız tutun. Seçili sorun bağlamını koruyun, yerel değişiklikleri duyurun ve Jira bağlantısı ya da gerçek izinler olduğunu iddia etmeyin.
05
Atlassian tasarım sistemi Kaynaklar ve Kapsam
Kamuya açık Atlassian Design System React paketlerinin OpenDesign incelemesi; Ekim 2026'da bağlantılı belgelerle karşılaştırılarak doğrulanmıştır. Gömülü pano, örnek renk değerleri ve kurgusal sorunlar içeren bir HTML/CSS yorumudur; Jira veya yerel Atlaskit çalışma zamanı değildir. Paketlere herkese açık erişim, Atlassian markasını kısıtlama olmaksızın kullanma hakkı ya da kurum içindekiyle aynı desteği alacağınız anlamına gelmez.
