https://mattermost-proto-playground-elias.vercel.app/assets/mobile-menu-item.guideline-nY74xnfr.js

1import{cd as x,ce as e,dr as l,cs as t,d1 as j,cC as u,dn as m,dp as p,dq as c}from"./index-C84RuTgJ.js";function h(i){const n={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...x(),...i.components},{AnatomyStage:o,Divider:r,DocUiEmbed:a,Num:s}=n;return o||d("AnatomyStage"),r||d("Divider"),a||d("DocUiEmbed"),s||d("Num"),e.jsxs(e.Fragment,{children:[e.jsxs(n.p,{children:[`The Mobile Menu Item is the touch-sized row used in iOS menus and bottom
2sheets. It mirrors the desktop `,e.jsx(n.a,{href:"/components/menu-item",children:"Menu Item"}),` structure —
3label, optional leading and trailing visuals, secondary label, tag, and
4destructive styling — with Body 200 type, larger icons, and no hover chrome.`]}),`
5`,e.jsx(n.p,{children:"Use the Specimen tab for the full Default / Active matrix."}),`
6`,e.jsx(n.p,{children:`Prefer desktop Menu Item in web menus and popovers. Prefer Mobile Menu Item in
7mobile sheets and action lists.`}),`
8`,e.jsx(r,{}),`
9`,e.jsx(n.h2,{id:"anatomy",children:e.jsx(n.a,{href:"#anatomy",children:"Anatomy"})}),`
10`,e.jsx(n.p,{children:"Four parts, same as desktop. Only the label is required."}),`
11`,e.jsxs(o,{style:{flexDirection:"column",gap:"0",alignItems:"stretch",maxWidth:"414px",margin:"0 auto var(--spacing-m)"},children:[e.jsx(l,{label:"Profile",leadingVisual:e.jsx(t,{glyph:e.jsx(j,{}),size:"20"})}),e.jsx(l,{label:"Notifications",secondaryLabel:"All activity",secondaryLabelPosition:"Inline",leadingVisual:e.jsx(t,{glyph:e.jsx(u,{}),size:"20"})}),e.jsx(l,{label:"Preferences",secondaryLabel:"Theme, language, time zone",leadingVisual:e.jsx(t,{glyph:e.jsx(p,{}),size:"20"}),trailingElement:!0,trailingVisual:e.jsx(t,{glyph:e.jsx(m,{}),size:"20"}),divider:!0})]}),`
12`,e.jsxs(n.ul,{children:[`
13`,e.jsxs(n.li,{children:[e.jsx(s,{children:"1"})," ",e.jsx(n.strong,{children:"Label"})," — Body 200 action or option text. Required."]}),`
14`,e.jsxs(n.li,{children:[e.jsx(s,{children:"2"})," ",e.jsx(n.strong,{children:"Leading element"})," — optional 20px icon, avatar, or emoji."]}),`
15`,e.jsxs(n.li,{children:[e.jsx(s,{children:"3"})," ",e.jsx(n.strong,{children:"Secondary label"}),` — optional metadata; Inline for short tags,
16Below (Stacked) for longer copy at Body 75 with secondary emphasis.`]}),`
17`,e.jsxs(n.li,{children:[e.jsx(s,{children:"4"})," ",e.jsx(n.strong,{children:"Trailing element"})," — optional check, chevron, or badge."]}),`
18`,e.jsxs(n.li,{children:[e.jsx(s,{children:"5"})," ",e.jsx(n.strong,{children:"Divider"})," — optional hairline under the row for grouping."]}),`
19`]}),`
20`,e.jsx(r,{}),`
21`,e.jsx(n.h2,{id:"states",children:e.jsx(n.a,{href:"#states",children:"States"})}),`
22`,e.jsx(n.p,{children:`Mobile Menu Items do not use hover. Tap feedback and selection use the Active
23fill.`}),`
24`,e.jsxs(n.table,{children:[e.jsx(n.thead,{children:e.jsxs(n.tr,{children:[e.jsx(n.th,{children:"State"}),e.jsx(n.th,{children:"Use when"})]})}),e.jsxs(n.tbody,{children:[e.jsxs(n.tr,{children:[e.jsx(n.td,{children:"Default"}),e.jsx(n.td,{children:"Resting row."})]}),e.jsxs(n.tr,{children:[e.jsx(n.td,{children:"Active"}),e.jsxs(n.td,{children:["Row is pressed or selected (",e.jsx(n.code,{children:"active"})," prop or ",e.jsx(n.code,{children:":active"}),")."]})]}),e.jsxs(n.tr,{children:[e.jsx(n.td,{children:"Focus"}),e.jsx(n.td,{children:"Keyboard focus has landed on the row."})]}),e.jsxs(n.tr,{children:[e.jsx(n.td,{children:"Disabled"}),e.jsx(n.td,{children:"The action isn’t available right now."})]})]})]}),`
25`,e.jsx(n.p,{children:`Active (non-destructive) uses button-bg at 8% over the channel background.
26Destructive Active fills with danger color and inverts label and icons.`}),`
27`,e.jsx(r,{}),`
28`,e.jsx(n.h2,{id:"variants",children:e.jsx(n.a,{href:"#variants",children:"Variants"})}),`
29`,e.jsx(n.h3,{id:"destructive",children:e.jsx(n.a,{href:"#destructive",children:"Destructive"})}),`
30`,e.jsx(n.p,{children:`Use for irreversible actions — leave a channel, delete, sign out. Pair with
31confirmation where needed.`}),`
32`,e.jsx(a,{children:e.jsxs("div",{style:{display:"flex",flexDirection:"column",maxWidth:"414px"},children:[e.jsx(l,{label:"Sign out",destructive:!0,leadingVisual:e.jsx(t,{glyph:e.jsx(c,{}),size:"20"})}),e.jsx(l,{label:"Sign out",destructive:!0,active:!0,leadingVisual:e.jsx(t,{glyph:e.jsx(c,{}),size:"20"})})]})}),`
33`,e.jsx(n.h3,{id:"divider",children:e.jsx(n.a,{href:"#divider",children:"Divider"})}),`

34`,e.jsxs(n.p,{children:["Set ",e.jsx(n.code,{children:"divider"}),` when the row should show a bottom hairline between groups in a
35sheet or menu list.`]}),`
36`,e.jsx(r,{}),`
37`,e.jsx(n.h2,{id:"implementation",children:e.jsx(n.a,{href:"#implementation",children:"Implementation"})}),`
38`,e.jsxs(n.p,{children:[`For props and copy-ready examples, see the
39`,e.jsx(n.a,{href:"/components/mobile-menu-item/specimen",children:"Mobile Menu Item specimen"}),"."]})]})}function b(i={}){const{wrapper:n}={...x(),...i.components};return n?e.jsx(n,{...i,children:e.jsx(h,{...i})}):h(i)}function d(i,n){throw new Error("Expected component `"+i+"` to be defined: you likely forgot to import, pass, or provide it.")}export{b as default};