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