Conversation
Agora é possível definir o layout da description-list usando o modo grid pra auto-posicionar as colunas sem fazer expansão da largura, ideal pra quando temos mais itens em linha do que o modo flex
Contributor
📝 WalkthroughWalkthroughAdds grid layout support to SmaeDescriptionList via a new Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Deploying smae with
|
| Latest commit: |
d5fef65
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://52a18d76.smae.pages.dev |
| Branch Preview URL: | https://feature-add-modo-grid-no-sma.smae.pages.dev |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
frontend/src/components/SmaeDescriptionList.vue (1)
60-64: Consider adding a runtimevalidatorfor thelayoutpropThe TypeScript type
String as () => 'flex' | 'grid'protects at compile time, but any runtime value slips through silently (falling back to flex). Avalidatorwould emit a Vue development warning for misuse.♻️ Proposed addition
layout: { type: String as () => 'flex' | 'grid', required: false, default: 'flex', + validator: (value: string) => ['flex', 'grid'].includes(value), },🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/components/SmaeDescriptionList.vue` around lines 60 - 64, The layout prop in SmaeDescriptionList.vue currently uses only a TypeScript annotation and can accept invalid runtime values; add a runtime validator to the layout prop definition (the prop named "layout") that returns true only for 'flex' or 'grid' (e.g., value => value === 'flex' || value === 'grid') so Vue emits a dev warning on invalid values and preserves the existing default 'flex'.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@frontend/src/components/SmaeDescriptionList.md`:
- Line 85: The props table entry for larguraMinima is inaccurate: update the
default to match the component prop default (empty string) and add a note that a
CSS fallback of 180px is applied via the .description-list--grid rule
(--dl-item-min-width: 180px); reference the prop name larguraMinima and the CSS
class .description-list--grid in the SmaeDescriptionList.md content so readers
understand the empty-string default and the separate stylesheet fallback.
- Around line 280-289: The HTML example for the grid layout incorrectly shows an
inline style that is only produced when the larguraMinima prop is set; update
the example in SmaeDescriptionList.md to reflect the true default output by
removing the inline `style="--dl-item-min-width: 180px;"` from the <dl> example
(or alternatively add a brief comment that it appears only if larguraMinima is
provided), and mention that the inline style is generated by the estiloContainer
logic when larguraMinima is passed so readers can reproduce the 180px value by
using the larguraMinima prop.
In `@frontend/src/components/SmaeDescriptionList.vue`:
- Around line 104-108: The grid branch currently concatenates resultado.class
into a string which breaks when atributosDoItem.class is an array or object; in
the isGrid/larguraBase === '100%' block (where você reads const classeExistente
= resultado.class) change the assignment to keep an array instead of joining
into a string — e.g. set resultado.class = [classeExistente,
'description-list__item--full'].filter(Boolean) (do not .join(' ')) so Vue's
native class merging handles string/array/object inputs correctly.
---
Nitpick comments:
In `@frontend/src/components/SmaeDescriptionList.vue`:
- Around line 60-64: The layout prop in SmaeDescriptionList.vue currently uses
only a TypeScript annotation and can accept invalid runtime values; add a
runtime validator to the layout prop definition (the prop named "layout") that
returns true only for 'flex' or 'grid' (e.g., value => value === 'flex' || value
=== 'grid') so Vue emits a dev warning on invalid values and preserves the
existing default 'flex'.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@frontend/src/components/SmaeDescriptionList.md`:
- Around line 280-289: Update the grid HTML example in SmaeDescriptionList.md so
it no longer shows the inline style unconditionally: use the <dl> with class
"description-list description-list--grid" without style for the case where
larguraMinima is not provided (CSS fallback applies), and add a separate example
that includes the inline style (e.g., style="--dl-item-min-width: 250px;") to
demonstrate when the larguraMinima prop is used; reference the class
"description-list description-list--grid" and the prop name larguraMinima to
make the intent clear.
robsonsobral
requested changes
Feb 20, 2026
| Com `larguraMinima` fornecida, o inline style é adicionado: | ||
|
|
||
| ```html | ||
| <dl class="description-list description-list--grid" style="--dl-item-min-width: 250px;"> |
Collaborator
There was a problem hiding this comment.
Ê, laia! As larguras em px!
- Adiciona validator ao prop 'layout' para garantir apenas valores 'flex' ou 'grid' - Converte largura mínima padrão de 180px para 13rem (alinhado com font-size: 14px do projeto)
- Alterar exemplos de 200px/250px para 15rem - Alterar default de 180px para 13rem (~180px) - Alinhar unidades com font-size: 14px do projeto
|
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
frontend/src/components/SmaeDescriptionList.vue (1)
100-111: Optional: avoid the unconditional shallow copy when grid mode doesn't mutateresultado.
resultado = { ...atributos }is created at line 105 before theisGridbranch. WhenisGridistrueandlarguraBase !== '100%', the function returnsresultadounchanged — a needless allocation. The early-return pattern used for!larguraBaseat line 101 could be reused here.♻️ Proposed refactor
- const resultado = { ...atributos }; - - if (isGrid.value) { + if (isGrid.value) { if (larguraBase === '100%') { + const resultado = { ...atributos }; const classeExistente = resultado.class; resultado.class = [classeExistente, 'description-list__item--full'].filter(Boolean); + return resultado; } + return atributos; } else { + const resultado = { ...atributos }; ... return resultado; } - - return resultado;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/components/SmaeDescriptionList.vue` around lines 100 - 111, The function currently always creates a shallow copy `resultado = { ...atributos }` even when no mutation occurs; change the logic to avoid that allocation by only copying when needed: if `!larguraBase` return `atributos`, and if `isGrid.value` is false or `larguraBase !== '100%'` return `atributos` directly; only create a shallow copy and set `resultado.class = [existing, 'description-list__item--full']` when `isGrid.value` is true and `larguraBase === '100%'` (use the existing symbols `atributos`, `resultado`, `isGrid`, `larguraBase`, `class`, `description-list__item--full` to locate the code).frontend/src/components/SmaeDescriptionList.md (1)
214-216: Optional: clarify thatlarguraBasevalues other than'100%'only take effect in flex mode.Line 216 describes
larguraBaseas accepting "qualquer valor CSS válido paraflex-basis", but in grid mode only'100%'produces a visible effect (it maps togrid-column: 1 / -1viadescription-list__item--full). Any other value (e.g.'20em') is silently ignored. A brief note would prevent silent misbehavior for consumers who switch tolayout="grid".📝 Suggested addition
A largura dos itens pode ser controlada através da propriedade `larguraBase` (em `itensSelecionados` ou em itens de `lista`), que aceita qualquer valor CSS válido para `flex-basis`: + +> **Nota:** no modo `grid`, apenas `'100%'` tem efeito (faz o item ocupar toda a largura via `grid-column: 1 / -1`). Demais valores são ignorados.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/components/SmaeDescriptionList.md` around lines 214 - 216, Update the documentation for the larguraBase prop to note that while it accepts any valid CSS flex-basis value (used on itensSelecionados or lista), values other than '100%' only take effect when the component is in flex mode; in grid mode (layout="grid") only '100%' is mapped to the full-width behavior via the description-list__item--full rule and other values are ignored. Mention larguraBase, itensSelecionados, lista, layout="grid" and description-list__item--full so readers can locate the related code and avoid silent misbehavior when switching layouts.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@frontend/src/components/SmaeDescriptionList.md`:
- Line 303: Update the docs to accurately reflect the CSS: change the
description mentioning `flex: 1` to state that `.description-list__item` uses
`flex: 1 1 auto` (not `flex: 1`), explain that this means items use their
natural/content width as the flex-basis before growing, and note the practical
impact for users when sizing items with `larguraBase` (i.e., items will start at
content size then grow, not from 0%). Reference the `.description-list__item`
selector and the `larguraBase` prop in the updated text so consumers understand
the exact sizing behavior.
---
Nitpick comments:
In `@frontend/src/components/SmaeDescriptionList.md`:
- Around line 214-216: Update the documentation for the larguraBase prop to note
that while it accepts any valid CSS flex-basis value (used on itensSelecionados
or lista), values other than '100%' only take effect when the component is in
flex mode; in grid mode (layout="grid") only '100%' is mapped to the full-width
behavior via the description-list__item--full rule and other values are ignored.
Mention larguraBase, itensSelecionados, lista, layout="grid" and
description-list__item--full so readers can locate the related code and avoid
silent misbehavior when switching layouts.
In `@frontend/src/components/SmaeDescriptionList.vue`:
- Around line 100-111: The function currently always creates a shallow copy
`resultado = { ...atributos }` even when no mutation occurs; change the logic to
avoid that allocation by only copying when needed: if `!larguraBase` return
`atributos`, and if `isGrid.value` is false or `larguraBase !== '100%'` return
`atributos` directly; only create a shallow copy and set `resultado.class =
[existing, 'description-list__item--full']` when `isGrid.value` is true and
`larguraBase === '100%'` (use the existing symbols `atributos`, `resultado`,
`isGrid`, `larguraBase`, `class`, `description-list__item--full` to locate the
code).
ℹ️ Review info
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
frontend/src/components/SmaeDescriptionList.mdfrontend/src/components/SmaeDescriptionList.vue
| - Quando `valor` é `null`, `undefined` ou vazio, exibe "—" (travessão) | ||
| - Listas consecutivas recebem borda superior e espaçamento automático | ||
| - Os itens usam `flex: 1` por padrão, expandindo para preencher o espaço disponível | ||
| - **Layout flex:** os itens usam `flex: 1` por padrão, expandindo para preencher o espaço disponível |
Contributor
There was a problem hiding this comment.
Minor doc inaccuracy: flex: 1 ≠ flex: 1 1 auto.
The CSS declares .description-list__item { flex: 1 1 auto; }, but line 303 documents it as flex: 1. These expand differently: flex: 1 → flex: 1 1 0% (all items start at zero basis and grow equally), whereas flex: 1 1 auto → items start from their natural/content width before growing. The behaviour description in the docs is misleading for consumers sizing items with larguraBase.
📝 Suggested correction
-- **Layout flex:** os itens usam `flex: 1` por padrão, expandindo para preencher o espaço disponível
+- **Layout flex:** os itens usam `flex: 1 1 auto` por padrão, expandindo para preencher o espaço disponível📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| - **Layout flex:** os itens usam `flex: 1` por padrão, expandindo para preencher o espaço disponível | |
| - **Layout flex:** os itens usam `flex: 1 1 auto` por padrão, expandindo para preencher o espaço disponível |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@frontend/src/components/SmaeDescriptionList.md` at line 303, Update the docs
to accurately reflect the CSS: change the description mentioning `flex: 1` to
state that `.description-list__item` uses `flex: 1 1 auto` (not `flex: 1`),
explain that this means items use their natural/content width as the flex-basis
before growing, and note the practical impact for users when sizing items with
`larguraBase` (i.e., items will start at content size then grow, not from 0%).
Reference the `.description-list__item` selector and the `larguraBase` prop in
the updated text so consumers understand the exact sizing behavior.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Agora é possível definir o layout da description-list usando o modo grid pra auto-posicionar as colunas sem fazer expansão da largura, ideal pra quando temos mais itens em linha do que o modo flex
Summary by CodeRabbit
New Features
Documentation
Tests