Crea un tablero de planificación de incidencias con tokens semánticos de Atlassian, una escala de espaciado de ocho píxeles, las API reales de Button, Lozenge y Toggle, y la configuración de estilos requerida para Compiled. Consulta una incidencia, filtra el tablero y mueve un elemento de trabajo local sin confundir la selección con el estado.
Interpretación de HTML/CSS con valores verificados de espaciado y forma, una paleta de colores ilustrativa y una alternativa de fuente del sistema; no es un entorno de ejecución de Jira ni de Atlaskit nativo. · Referencia de implementación
02
Referencia de diseño de sistema de diseño Atlassian
Usa en el código los nombres exactos de los tokens semánticos. La referencia oficial expone alias de la paleta de colores que varían entre los temas claro y oscuro, por lo que estas filas conservan los alias en lugar de inventar un valor hexadecimal estable. Los valores numéricos de espaciado y radio proceden de las escalas documentadas. Los colores hexadecimales de la vista previa son ilustrativos, no una exportación de tokens.
Sistema de diseño Atlassian Paquetes públicos de ADS y los requisitos reales de estilo
Importar un componente no basta para completar la integración
Atlassian Design System Los componentes se publican bajo @atlaskit, pero el catálogo general de Atlaskit también incluye paquetes específicos para aplicaciones. Este ejemplo elige tres primitivas documentadas: Button, Lozenge y Toggle, además de tokens y CSS reset. Su modelo de datos es deliberadamente local. Ninguna de esas importaciones proporciona permisos de incidencias de Jira, lógica de sprints ni un backend.
La referencia actual de configuración exige integrar Compiled en las aplicaciones que consumen paquetes de la plataforma, aunque no generen estilos con Compiled. Por eso, la configuración de Parcel incluida forma parte del ejemplo. Copiar una importación de Button sin configurar el empaquetador puede dar lugar a estilos incompletos o con un orden incorrecto; se trata de un problema funcional de integración, no de una nota estética menor.
Sistema de diseño Atlassian Usa tokens semánticos en vez de hacer conjeturas sobre la paleta
Cada token define una función
token("color.text") es el color de primer plano principal, mientras que token("color.text.subtle") se usa para información secundaria. El texto seleccionado tiene una función distinta de la del texto de peligro. El tablero usa elevation.surface en su área principal y elevation.surface.sunken en una sección agrupada. Estas opciones siguen siendo comprensibles cuando cambia el tema, porque sus nombres expresan su propósito.
El catálogo oficial proporciona equivalencias de paleta para temas claros y oscuros para estas funciones. La tabla de referencia conserva esa información en lugar de prometer un único valor hexadecimal permanente. El ejemplo integrado usa una paleta ilustrativa y así lo indica. Sus colores hacen legible el ejemplo local, pero no sustituyen la fuente de verdad para un tema de Atlaskit en producción.
Sistema de diseño Atlassian Una base de ocho píxeles con incrementos fraccionarios deliberados
Interpreta el sufijo como un porcentaje
space.100 equivale a 8px; space.200, a 16px; space.025, a 2px. La escala incluye incrementos fraccionarios porque los espacios pequeños y la alineación óptica requieren más precisión que las unidades enteras de ocho píxeles. El tablero usa space.300 alrededor del contenido principal y space.150 entre elementos locales. Una llamada al token devuelve un valor CSS adaptado al tema, no un número sobre el que realizar JavaScript operaciones aritméticas arbitrarias.
Usa el mismo espacio para la misma relación. La distancia entre la clave de una incidencia y su título debería ser menor que la separación entre la lista de incidencias y el inspector. Existen tokens de espaciado negativo, pero el diseño habitual del tablero no los necesita. Una superficie de trabajo densa debería ganar espacio mediante la composición, no superponiendo elementos que no guardan relación.
Sistema de diseño Atlassian Los tokens tipográficos son declaraciones de fuente completas
No asignes font.body a font-size
El catálogo define explícitamente tokens tipográficos compuestos para la propiedad CSS font. En el ejemplo, se asigna font.heading.large al título de la página y font.heading.medium al título del detalle. Usar uno de estos tokens como fontSize descartaría el contrato previsto. La función de texto del cuerpo es adecuada para resúmenes breves de incidencias, mientras que las descripciones extensas pueden usar font.body.large si el diseño que las rodea facilita la lectura.
Las tipografías actuales de la aplicación son Atlassian Sans y Atlassian Mono. Sans está basada en Inter Variable; Mono, en JetBrains Mono. Esa identidad importa al describir el sistema, pero esta vista previa independiente no redistribuye esas fuentes. Usa una fuente alternativa del sistema y lo indica. Para adoptar el sistema en producción, hay que usar la vía compatible de distribución de fuentes y licencias, en lugar de cambiar el nombre de una tipografía cualquiera.
Sistema de diseño Atlassian Usa la forma y la elevación para explicar la superficie de trabajo
Una tarjeta está elevada porque es un objeto
La referencia distingue entre superficies agrupadas hundidas, tarjetas elevadas y superficies superpuestas. Conceptualmente, un elemento de trabajo movible pertenece a la capa elevada, mientras que una columna del tablero agrupa esos elementos. Un inspector integrado en la página habitual no necesita automáticamente una sombra de superposición. Combina las funciones de superficie y sombra cuando la elevación sea relevante.
Los nombres de forma actuales incluyen radius.xsmall, de 2px; radius.small, de 4px; y radius.medium, de 6px. No son la denominación antigua border.radius que quizá recuerdes de otro sistema. La tabla conserva los nombres exactos. Los controles nativos deberían usar los estilos proporcionados; los contenedores externos personalizados pueden adoptar la función correspondiente sin sobrescribir clases generadas privadas.
Sistema de diseño Atlassian Seleccionar un botón no es lo mismo que cambiar el estado de una incidencia
Elige deliberadamente una apariencia y un estado
La importación de Button verificada es @atlaskit/button/default/button. appearance="primary" destaca una acción principal; isSelected marca la incidencia actual en este ejemplo compacto con controles nativos. Al hacer clic, solo cambia la incidencia inspeccionada. Un control independiente edita el estado del flujo de trabajo. Esta separación evita que seleccionar una fila inicie o complete el trabajo de forma silenciosa.
API También incluye isLoading, isDisabled, spacing="compact" y shouldFitContainer. El estado de carga representa una operación en curso, no un estado permanente de la incidencia. Una acción deshabilitada necesita una explicación comprensible, ya que los controles deshabilitados pueden omitirse durante la navegación con teclado. Por eso, el tablero independiente mantiene disponibles los controles de inspección y permite revisar directamente el estado local actual.
Sistema de diseño Atlassian La pastilla y el interruptor comunican tipos distintos de estado
El estado no es un modo de interacción
Las apariencias de Lozenge incluyen información, peligro y éxito, que el ejemplo asigna a En curso, Bloqueada y Hecha. El significado lo transmiten las palabras; el color es redundante. Una incidencia bloqueada sigue bloqueada cuando se selecciona. El filtro de responsable usa Toggle con isChecked y onChange, porque ese valor booleano modifica las incidencias que muestra el tablero, no el estado de ninguna incidencia.
El selector de estado local es deliberadamente sencillo y no implica un modelo real de permisos. Una transición de incidencia en producción puede requerir un motivo, un rol o una respuesta del servicio. Mantén esa lógica de autorización fuera de Lozenge y muestra el resultado confirmado solo después de que el servicio lo haya establecido.
La selección identifica la incidencia que se está consultando.
El estado del flujo de trabajo describe la propia incidencia.
El filtro de responsable cambia el conjunto visible sin modificar quién es responsable.
Sistema de diseño Atlassian Inicializa el tema antes de mostrar superficies con tokens personalizados
La carga del tema global es asíncrona
setGlobalTheme actualiza los atributos del tema del documento y carga el tema seleccionado CSS. La entrada espera a que termine esa operación antes de mostrar el tablero. Selecciona explícitamente los temas claro y oscuro, con el modo claro activo inicialmente. Un control de preferencias real puede actualizar colorMode mediante el mismo API, en lugar de sustituir los colores por otros aleatorios en línea.
Las opciones actuales de marca personalizada están marcadas como alfa y usan un API UNSAFE. Esta guía no adopta esa vía inestable solo para cambiar los colores del ejemplo. Primero, conserva el contrato estable del tema semántico; después, evalúa la personalización experimental como una decisión de dependencia independiente.
Sistema de diseño Atlassian Valida una interacción real de consulta de incidencias
Usa conjuntamente los archivos proporcionados
El ejemplo nativo necesita la entrada JSX, la importación del restablecimiento CSS y ambos archivos de configuración de Parcel. Incluye la colección de incidencias, la selección, el filtro de responsable, la asignación de estados y un mensaje de resultado dinámico. La vista previa independiente amplía la composición con columnas y un panel de inspección, pero sigue siendo una interpretación HTML claramente identificada. Ninguno de los dos ejemplos afirma conectarse a Jira.
Cuando un filtro excluye la incidencia seleccionada, el ejemplo nativo conserva deliberadamente sus detalles. Así, quien consulta el tablero puede seguir examinando el objeto en lugar de que se le cambie silenciosamente a otra incidencia. Un diseño de producción puede optar por otra política, pero debería explicarla y mantener un foco significativo. Verifica el comportamiento tanto en una ventana estrecha como con todas las columnas visibles.
Inspecciona WEB-18 y luego selecciona otra incidencia sin cambiar su estado del flujo de trabajo.
Activa el filtro de responsable y comprueba qué incidencias siguen visibles.
Cambia el estado local de la incidencia seleccionada y comprueba que el texto de estado y la columna coincidan.
Vuelve al tablero sin filtros y confirma que se conservan la identidad de la misma incidencia y el estado actualizado.
Sistema de diseño Atlassian Ejemplos de componentes del sistema de diseño
Muestra interactiva independiente completa
Guarda el documento completo como index.html y ábrelo en un navegador. Interpretación HTML/CSS con valores de espaciado y forma verificados, una paleta de colores ilustrativa y fuentes del sistema como alternativa; no es un entorno de ejecución de Jira ni de Atlaskit nativo.
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>
Las transiciones de incidencias solo afectan al tablero de ejemplo. Esta entrada HTML no utiliza la configuración de compilación Compiled necesaria para la implementación independiente de Atlaskit.
Entrada de implementación nativa completa
La implementación completa de la configuración, reunida aquí junto con las explicaciones específicas de API. Sigue los requisitos documentados de paquetes y compilación en la sección de configuración.
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();
Lógica completa del tablero React más los fragmentos de configuración requeridos que aparecen a continuación. Usa Parcel con la integración de Compiled; importar solo el restablecimiento CSS no basta para los paquetes actuales. No se afirma que este prototipo local compile los paquetes nativos.
Parcel debe procesar los estilos Compiled distribuidos
Crea .parcelrc en la raíz del proyecto. Inicia Parcel con su entrada HTML después de instalar las dependencias indicadas en la configuración.
openIssueDetail es el controlador de la aplicación; la configuración completa muestra el estado de selección.
No hagas que la etiqueta de estado parezca un menú, a menos que realmente permita cambiar el estado.
04
Sistema de diseño Atlassian Configuración del agente de IA
Punto de partida para la implementación
Lógica completa del tablero React más los fragmentos de configuración requeridos que aparecen a continuación. Usa Parcel con la integración de Compiled; importar solo el restablecimiento CSS no basta para los paquetes actuales. No se afirma que este prototipo local compile los paquetes nativos.
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();
Una instrucción para tu proyecto
Instrucción para el agente
Crea el ejemplo proporcionado de 18 incidencias de Atlassian React con @atlaskit tokens, el restablecimiento CSS y la integración documentada de Compiled con Parcel. Usa llamadas a tokens semánticos, roles abreviados de tipografía e importaciones verificadas de Button/Lozenge/Toggle. Mantén independientes la selección, el filtro de responsable y el estado del flujo de trabajo. Conserva el contexto de la incidencia seleccionada, anuncia los cambios locales y no afirmes que hay conexión con Jira ni permisos reales.
05
Sistema de diseño Atlassian Fuentes y alcance
OpenDesign estudio de los paquetes públicos Atlassian Design System React, contrastado con la documentación enlazada en octubre de 2026. El tablero integrado es una interpretación HTML/CSS con valores de paleta ilustrativos e incidencias ficticias; no es Jira ni un entorno de ejecución de Atlaskit nativo. El acceso a paquetes públicos no implica derechos ilimitados sobre la marca de Atlassian ni el mismo nivel de asistencia disponible internamente.
