Skip to content

feat: adjust list components #1232

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
danimuller20 merged 39 commits into from
Mar 18, 2026
Merged

feat: adjust list components #1232

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
39 commits
Select commit Hold shift + click to select a range
3bc2b08
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Jul 22, 2025
c12f8ae
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Jul 23, 2025
385e8a0
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Jul 23, 2025
e58ee12
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Jul 25, 2025
8ae9423
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Jul 30, 2025
20d473d
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Jul 31, 2025
f8428a7
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Jul 31, 2025
840cf02
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Aug 4, 2025
7bc3e6f
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Aug 5, 2025
3d10057
feat: create accordion docs
danimuller20 Aug 5, 2025
a443f3c
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Aug 6, 2025
ff77c31
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Aug 6, 2025
8c150a0
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Aug 7, 2025
6d21d8d
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Aug 8, 2025
1af0cd4
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Aug 11, 2025
c6b7e27
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Aug 12, 2025
e6a195c
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Aug 13, 2025
4f9699c
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Aug 18, 2025
3c2a369
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Aug 19, 2025
09c331b
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Aug 20, 2025
325db72
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Aug 21, 2025
e734721
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Aug 26, 2025
20c8ccd
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Oct 17, 2025
1be7213
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Nov 19, 2025
01decf7
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Dec 2, 2025
2cfc703
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Dec 8, 2025
9736883
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Dec 9, 2025
bef788e
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Dec 11, 2025
ea4e7be
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Dec 12, 2025
bdfec85
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Dec 22, 2025
8bba56e
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Dec 30, 2025
b6a7c15
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Jan 9, 2026
c1c916f
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Mar 2, 2026
5d4537f
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Mar 3, 2026
76c953d
Merge branch 'master' of github.com:ocean-ds/ocean-web
danimuller20 Mar 16, 2026
6901562
feat: create a list container for lists components
danimuller20 Mar 17, 2026
ddd24c1
feat: apply list container for lists components
danimuller20 Mar 17, 2026
df8f8da
chore: adjust tests
danimuller20 Mar 17, 2026
f3a5ee8
feat: adjust default props
danimuller20 Mar 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/ocean-core/src/components/_all.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
@import 'skeleton-bar';
@import 'content-list';
@import 'amount-details';
@import 'list-container';
@import 'list-action';
@import 'list-readonly';
@import 'list-settings';
Expand Down
20 changes: 1 addition & 19 deletions packages/ocean-core/src/components/_list-action.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
.ods-list-action {
align-items: center;
background-color: $color-interface-light-pure;
border: $border-width-hairline solid $color-interface-light-deep;
border-radius: $border-radius-sm;
border: 0;
cursor: pointer;
display: flex;
gap: $spacing-inline-xxs-extra;
Expand All @@ -14,10 +13,6 @@
transition: background-color 0.2s ease;
width: 100%;

&__container {
width: 100%;
}

&__content {
align-items: center;
display: flex;
Expand All @@ -27,19 +22,6 @@
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

&--card {
border-color: $color-interface-light-deep;
}

&--text {
border: 0;
border-radius: 0;
}

&__divider {
margin: 0 $spacing-inline-xs;
}

&:hover:not(&--disabled):not(&--loading):not(&--swipe-open) {
background-color: $color-interface-light-up;
}
Expand Down
29 changes: 29 additions & 0 deletions packages/ocean-core/src/components/_list-container.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
.ods-list-container {
width: 100%;

&__content {
overflow: hidden;
position: relative;
z-index: 1;
}

&__content--card {
border: $border-width-hairline solid $color-interface-light-deep;
border-radius: $border-radius-sm;

&--error {
border-color: $color-status-negative-pure;
}
}

&__content__divider {
border-bottom: 1px solid $color-interface-light-down;
margin: 0 $spacing-inline-xs;
}

&__highlight {
border-radius: 0 0 $border-radius-sm $border-radius-sm;
margin-top: -8px;
padding: 18px $spacing-inline-xs 10px;
}
}
10 changes: 0 additions & 10 deletions packages/ocean-core/src/components/_list-expandable.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,6 @@
margin: 0 $spacing-inline-xs;
}

&--card {
border: $border-width-hairline solid $color-interface-light-down;
border-radius: $border-radius-sm;
}

&--text {
border: 0;
border-radius: 0;
}

&--transaction {
.ods-list-expandable__icon {
color: $color-interface-dark-up;
Expand Down
20 changes: 0 additions & 20 deletions packages/ocean-core/src/components/_list-readonly.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
.ods-list-readonly {
align-items: center;
background-color: $color-interface-light-pure;
border: $border-width-hairline solid $color-interface-light-deep;
border-radius: $border-radius-sm;
box-sizing: border-box;
display: flex;
gap: $spacing-inline-xxs-extra;
Expand All @@ -11,24 +9,6 @@
text-align: left;
width: 100%;

&__container {
width: 100%;
}

&--card {
border-color: $color-interface-light-deep;
}

&--text {
border: 0;
border-radius: 0;
}

&__divider {
border-bottom: 1px solid $color-interface-light-down;
margin: 0 $spacing-inline-xs;
}

&__icon {
align-items: center;
color: $color-brand-primary-down;
Expand Down
21 changes: 0 additions & 21 deletions packages/ocean-core/src/components/_list-selectable.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,24 +62,3 @@
}
}
}

.ods-list-selectable__root {
overflow: hidden;

&--card {
border: $border-width-hairline solid $color-interface-light-down;
border-radius: $border-radius-sm;

&--error {
border-color: $color-status-negative-pure;
}
}

&--text {
&--divider {
background-color: $color-interface-light-down;
height: 1px;
margin: 0 $spacing-inline-xs;
}
}
}
20 changes: 0 additions & 20 deletions packages/ocean-core/src/components/_list-settings.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,13 @@
.ods-list-settings {
align-items: center;
background-color: $color-interface-light-pure;
border: $border-width-hairline solid $color-interface-light-down;
border-radius: $border-radius-sm;
box-sizing: border-box;
display: flex;
gap: $spacing-inline-xxs-extra;
padding: $spacing-inline-xs;
position: relative;
width: 100%;

&__container {
width: 100%;
}

&--card {
border-color: $color-interface-light-deep;
}

&--text {
border: 0;
border-radius: 0;
}

&__divider {
border-bottom: 1px solid $color-interface-light-down;
margin: 0 $spacing-inline-xs;
}

&__icon {
align-items: center;
color: $color-brand-primary-down;
Expand Down
31 changes: 4 additions & 27 deletions packages/ocean-core/src/components/_list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,40 +24,17 @@
}
}

.ods-list-action__container,
.ods-list-settings__container,
.ods-list-readonly__container {
.ods-list-action,
.ods-list-settings,
.ods-list-readonly {
.ods-list-container {
&__content--card {
border: 0;
border-radius: 0;
}

&:last-of-type > .ods-list-action__divider,
&:last-of-type > .ods-list-readonly__divider,
&:last-of-type > .ods-list-settings__divider {
border: 0;
}

&:not(:last-of-type) > .ods-list-action--card,
&:not(:last-of-type) > .ods-list-readonly--card,
&:not(:last-of-type) > .ods-list-settings--card {
border-bottom: 1px solid $color-interface-light-down;
}
}

.ods-list-expandable--card {
border: 0;
border-radius: 0;

&:not(:last-of-type) {
&:not(:last-of-type) > .ods-list-container__content--card {
border-bottom: 1px solid $color-interface-light-down;
}
}

.ods-list-selectable__root:last-of-type {
.ods-list-selectable__root--text--divider {
&:last-of-type > .ods-list-container__content__divider {
display: none;
}
}
Expand Down
39 changes: 20 additions & 19 deletions packages/ocean-docs/docs/components/listaction.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -505,25 +505,26 @@ Mostra um skeleton placeholder durante carregamento:

### Props

| Prop | Tipo | Padrão | Descrição |
| -------------------------- | ---------------------------------------------------------------------------------------------------------- | ---------------- | ------------------------------------------------------ |
| `title` | `string` | - | Título principal do item (obrigatório) |
| `description` | `string` | - | Descrição ou texto secundário |
| `strikethroughDescription` | `string` | - | Descrição com texto riscado (valor antigo) |
| `caption` | `string` | - | Legenda ou texto terciário |
| `inverted` | `boolean` | `false` | Inverte posição do título com descrição |
| `type` | `'card' \| 'text'` | `'card'` | Tipo de borda do item |
| `status` | `'default' \| 'inactive' \| 'positive' \| 'warning' \| 'highlight' \| 'highlight-lead' \| 'strikethrough'` | `'default'` | Status visual do conteúdo |
| `showDivider` | `boolean` | `false` | Mostra divisor entre itens (apenas para `type="text"`) |
| `disabled` | `boolean` | `false` | Desabilita o item |
| `loading` | `boolean` | `false` | Exibe skeleton de carregamento |
| `icon` | `ReactNode` | - | Ícone exibido no início do item |
| `indicator` | `ReactNode` | - | Indicador (badge/tag) antes da ação |
| `actionType` | `'chevron' \| 'menu' \| 'swipe'` | `'chevron'` | Tipo de ação do item |
| `menuActions` | `ActionItem[]` | - | Lista de ações para tipos menu/swipe |
| `menuPosition` | `'bottom-left' \| 'bottom-right' \| 'top-left' \| 'top-right'` | `'bottom-right'` | Posição do menu dropdown |
| `onClick` | `(event: React.MouseEvent<HTMLButtonElement>) => void` | - | Função chamada ao clicar no item |
| `className` | `string` | - | Classes CSS adicionais |
| Prop | Tipo | Padrão | Descrição |
| -------------------------- | ---------------------------------------------------------------------------------------------------------- | ---------------- | ------------------------------------------------------------ |
| `title` | `string` | - | Título principal do item (obrigatório) |
| `description` | `string` | - | Descrição ou texto secundário |
| `strikethroughDescription` | `string` | - | Descrição com texto riscado (valor antigo) |
| `caption` | `string` | - | Legenda ou texto terciário |
| `inverted` | `boolean` | `false` | Inverte posição do título com descrição |
| `type` | `'card' \| 'text'` | `'card'` | Tipo de borda do item |
| `status` | `'default' \| 'inactive' \| 'positive' \| 'warning' \| 'highlight' \| 'highlight-lead' \| 'strikethrough'` | `'default'` | Status visual do conteúdo |
| `showDivider` | `boolean` | `false` | Mostra divisor entre itens (apenas para `type="text"`) |
| `highlight` | `{ caption: string \| ReactNode; backgroundColor?: string; captionColor?: string }` | - | Exibe área de destaque com texto ou conteúdo na base do card |
| `disabled` | `boolean` | `false` | Desabilita o item |
| `loading` | `boolean` | `false` | Exibe skeleton de carregamento |
| `icon` | `ReactNode` | - | Ícone exibido no início do item |
| `indicator` | `ReactNode` | - | Indicador (badge/tag) antes da ação |
| `actionType` | `'chevron' \| 'menu' \| 'swipe'` | `'chevron'` | Tipo de ação do item |
| `menuActions` | `ActionItem[]` | - | Lista de ações para tipos menu/swipe |
| `menuPosition` | `'bottom-left' \| 'bottom-right' \| 'top-left' \| 'top-right'` | `'bottom-right'` | Posição do menu dropdown |
| `onClick` | `(event: React.MouseEvent<HTMLButtonElement>) => void` | - | Função chamada ao clicar no item |
| `className` | `string` | - | Classes CSS adicionais |

### ActionItem (menuActions)

Expand Down
Loading
Loading