@@ -327,12 +327,13 @@ class _EmojiAutocompleteItem extends StatelessWidget {
327
327
328
328
final EmojiAutocompleteResult option;
329
329
330
- static const _size = 32 .0 ;
331
- static const _notoColorEmojiTextSize = 25.7 ;
330
+ static const _size = 24 .0 ;
331
+ static const _notoColorEmojiTextSize = 19.3 ;
332
332
333
333
@override
334
334
Widget build (BuildContext context) {
335
335
final store = PerAccountStoreWidget .of (context);
336
+ final designVariables = DesignVariables .of (context);
336
337
final candidate = option.candidate;
337
338
338
339
// TODO deduplicate this logic with [EmojiPickerListEntry]
@@ -351,15 +352,26 @@ class _EmojiAutocompleteItem extends StatelessWidget {
351
352
? candidate.emojiName
352
353
: [candidate.emojiName, ...candidate.aliases].join (", " ); // TODO(#1080)
353
354
355
+ // TODO(design): emoji autocomplete results
356
+ // There's no design in Figma for emoji autocomplete results.
357
+ // Instead we adapt the design for the emoji picker to the
358
+ // context of autocomplete results as exemplified by _MentionAutocompleteItem.
359
+ // That means: emoji size, text size, text line-height, and font weight
360
+ // from emoji picker; text color (for contrast with background) and
361
+ // outer padding from _MentionAutocompleteItem; padding around emoji glyph
362
+ // to bring it to same size as avatar in _MentionAutocompleteItem.
354
363
return Padding (
355
364
padding: const EdgeInsets .symmetric (horizontal: 16.0 , vertical: 8.0 ),
356
365
child: Row (children: [
357
366
if (glyph != null ) ...[
358
- glyph,
359
- const SizedBox (width: 8 ),
367
+ Padding (padding: const EdgeInsets .all (6 ),
368
+ child: glyph),
369
+ const SizedBox (width: 6 ),
360
370
],
361
371
Expanded (
362
372
child: Text (
373
+ style: TextStyle (fontSize: 17 , height: 18 / 17 ,
374
+ color: designVariables.contextMenuItemLabel),
363
375
maxLines: 2 ,
364
376
overflow: TextOverflow .ellipsis,
365
377
label)),
0 commit comments