Atlantica

Atlantica

  • Atlantica Design
  • API React Native
  • Help

›Componentes

Atlantica Design

  • Introdução
  • Princípios de Design
  • Glossário

Arquitetura

  • Molecules e Atoms
  • Tokens & Props
  • Nomeando Tokens

Componentes

    Atoms

    • Avatar Base
    • Button Toggle Base
    • Button Base
    • Divider Base
    • Icon Button Base
    • Icon Base
    • Image Base
    • Text Input Base
    • Label Base
    • Switch Base

    Molecules

    • ActionListCard
    • Avatar Editor
    • Button
    • ATLCardList
    • Checkbox
    • ATLChips
    • Comment List Preview
    • Comment
    • Cover
    • DateTimePicker
    • ATLDialog
    • ATLDivider
    • Double Button
    • Dropdown
    • Event Cell
    • Event Title
    • Floating Action Button (FAB)
    • Horizontal User List
    • Icon Label
    • ATLIconizedText
    • Image Logo
    • ImagePicker
    • Label Button
    • List Divider
    • ATLNavigationButton
    • Notification
    • Post
    • SearchBox
    • SettingsItem
    • Single Image
    • ATLSpacing
    • StatusListCard
    • ATLSummary
    • SurveyPost
    • ATLSwitchButton
    • ATLTextBody
    • ATLTextHead
    • TextInput
    • Title
    • UserInfo
    • UserListCard

Comment

Base+Avatar

Função

A função desta molécula é acomodar comentários de usuários em módulos sociais de aplicativos, acompanhado de Time Stamp. Pode conter indicação se comentário foi editado, botão com mais ações, funcionalidade de responder, curtir e thread.

Estrutura Básica

estrutura_basica

Espaçamentos

  1. horizontalMargin, como Margem Lateral
  2. horizontalPaddingAvatar, como Espaçamento Interno do Avatar
  3. horizontalPadding, como Espaçamento Interno
  4. verticalUpperMargin, como Margem Superior
  5. verticalBottomMargin, como Margem Inferior

Átomos

  1. Avatar, como User Avatar
  2. Thread, como Thread
  3. Label, como User Name
  4. 2 LabelButtons, como Reply Button e Like Button
  5. 3 Labels, como TimeStamp, Separador e Edit Marker
  6. ButtonIcon, como Indicator
  7. Label, como Comment Text
  8. ButtonIcon, como More Actions

Prop-Token Mapping

Props da Molécula

PropTokenDefault ValueUse
horizontalMarginSpacingMarginal161
horizontalPaddingSpacingMarginal162
horizontalPaddingAvatarSpacingBase83
verticalUpperMarginSpacingBase84
verticalBottomMarginSpacingMarginal165
avatarBaseProps--6
threadBaseProps--7
userNameBaseProps--8
labelButtonBaseProps--9
labelAuxiliaryBaseProps--10
buttonIconLikeBaseProps--11
labelCommentTextBaseProps--12
buttonIconMoreButtonBaseProps--13

avatarBaseProps

PropTokenDefault Value
sizeSizeAvatarComment48
borderColorColorPrimary#A94CC9
borderRadiusBorderRadiusAvatar24
borderWidthBorderWidthAvatar0

threadBaseProps

PropTokenDefault Value
widthWidthThreadRegular1
colorColorSurfaceLightNeutral#9E9E9E

userNameBaseProps

userNameBasePropsTokenDefault Value
fontFamilyFontFamilyBrandSF Pro Display / Robot
fontSizeFontSizeHeading16
fontWeightFontWeightBoldBold (700)
lineHeightLineHeightTitle24
multilineLimitMultilineLimitTitle1
textAlignTextAlignmentHeadingLeft
textCaseTextCaseHighlightSentence
textColorColorPrimary#A94CC9
opacityOpacityDisabled0.3

labelButtonBaseProps

labelButtonBasePropsTokenDefault Value
fontFamilyFontFamilyButtonSF Pro Display / Robot
fontSizeFontSizeButton12
fontWeightFontWeightBoldBold (700)
lineHeightLineHeightBase20
multilineLimitMultilineLimitButton1
textAlignTextAlignmentButtonCenter
textCaseTextCaseButtonUppercase
textColorColorPrimary#A94CC9
opacityOpacityDisabled0.3

labelAuxiliaryBaseProps

labelAuxiliaryBasePropsTokenDefault Value
fontFamilyFontFamilyBaseundefined
fontSizeFontSizeFormAuxiliary12
fontWeightFontWeightBoldBold (700)
lineHeightLineHeightBase20
textAlignTextAlignmentBodyLeft
textCaseTextCaseBodyNone
textColorColorLightNeutral#9E9E9E

buttonIconLikeBaseProps

buttonIconLikeBasePropsTokenDefault Value
sizeSizeIconAuxiliary16
tintColorColorPrimary#A94CC9

labelCommentBaseProps

labelCommentBasePropsTokenDefault Value
fontFamilyFontFamilyBaseundefined
fontSizeFontSizeBody14
fontWeightFontWeightNormalRegular (400)
lineHeightLineHeightBase20
textAlignTextAlignmentBodyLeft
textCaseTextCaseBodyNone
textColorColorDarkNeutral#212121

buttonIconMoreBaseProps

buttonIconMoreBasePropsTokenDefault Value
sizeSizeIconBase24
tintColorColorMediumNeutral#464646

Reações

Responsividade

reacoes_responsividade

Quando o tamanho da tela se altera o conteúdo do Comment Text é o único átomo que pode crescer em número de linhas. Os demais átomos se mantém em uma linha e se o conteúdo for muito extenso aparecem reticências. Os espaçamentos internos continuam os mesmo. O User Avatar e o More Actions permanecem alinhados ao topo da molécula. Recomendamos que sejam usadas ações objetivas em TimeStamp, Reply Button e Like Button.

Conteúdo

reacoes_conteudo

O Comment Text dita a altura da molécula, podendo crescer até o limite de caracteres, se houver. O User Name só possui uma linha, caso não caiba na largura da tela, aparecem reticências. Os outros átomos se ajustam a largura da tela e com o mesmo alinhamento.

Estados

estados

Quando o comentário não foi editado, ou o projeto não propor edições aos comentários, o Separador e o EditMarker não ficam visíveis.

Tipos

Comment Simple

tipos_comment

Tem a mesma função da molécula original descrita a cima, mas sem UserAvatar e Thread, portanto não há horizontalPaddingAvatar.

Reply+Avatar

tipos_reply_avatar

Usado para responder comentário inicial quando usado a molécula Comment+Avatar. Thread permanece na mesma posição, empurrando os átomos para serem alinhados ao horizontalPaddingAvatar e duplicando o horizontalPaddingAvatar. O UserAvatar diminui para indicar que é uma resposta do comentário a cima.

avatarBaseProps

PropTokenDefault Value
sizeSizeAvatarComment ⇒ SizeAvatarReply48 ⇒ 24

Reply Simple

tipos_reply

Mesma função que a molécula de Reply+Avatar, mas sem UserAvatar e com Thread, para ser usada quando o comentário inicial for a molécula Comment.

← Comment List PreviewCover →
  • Função
  • Estrutura Básica
    • Espaçamentos
    • Átomos
    • Prop-Token Mapping
  • Reações
    • Responsividade
    • Conteúdo
  • Estados
  • Tipos
    • Comment Simple
    • Reply+Avatar
    • Reply Simple
Atlantica
Docs
Getting Started (or other categories)Guides (or other categories)API Reference (or other categories)
Community
User ShowcaseStack OverflowProject ChatTwitter
More
BlogGitHubStar
Facebook Open Source
Copyright © 2019 Your Name or Your Company Name