feat(Table): new component #1129

atabel · 2024-05-24T14:26:01Z

github-actions · 2024-05-24T14:28:47Z

Size stats

	master	this branch	diff
Total JS	10.7 MB	10.7 MB	+10.8 kB
JS without icons	1.94 MB	1.95 MB	+10.8 kB
Lib overhead	53.8 kB	53.8 kB	0 B
Lib overhead (gzip)	14.4 kB	14.4 kB	0 B

github-actions · 2024-05-24T14:29:33Z

Accessibility report
✔️ No issues found

ℹ️ You can run this locally by executing yarn audit-accessibility.

github-actions · 2024-05-24T14:34:50Z

Deploy preview for mistica-web ready!

✅ Preview
https://mistica-2gkmfmlsn-flows-projects-65bb050e.vercel.app

Built with commit 6346e75.
This pull request is being automatically deployed with vercel-action

github-actions · 2024-05-24T14:36:55Z

Screenshot tests report

✔️ All passing

atabel · 2024-05-27T09:01:32Z

src/__acceptance_tests__/__ssr_pages__/main-navigation-bar-large.tsx

@@ -23,7 +23,7 @@ const NavigationBarTest = (): JSX.Element => (
                    </Badge>
                </NavigationBarAction>
                <NavigationBarAction onPress={() => {}} aria-label="Open profile">
-                    <Avatar size={24} initials="ML" src="https://source.unsplash.com/600x600/?face" />


unrelated change, fixed this test because it was using an external image and it was failing to load

src/table.tsx

yceballost · 2024-05-27T10:11:37Z

src/table.tsx

+import type {DataAttributes} from './utils/types';
+
+type TableProps = {
+    heading: Array<string>;


can you confirm if headers also support custom elements @aweell ?

not according the spec, and I think it could be problematic, how would you show them in mobile (collapse-rows mode)?

yep, I remember talking to Alex about this but I don't remember what the outcome was. I thought that the custom item would be included and that in mobile it is the product's responsibility... that's why I wanted Alex's confirmation.

The product could use strings in mobile and custom composition in desktop, for example.

That was the idea yes, allow slots in headers mostly for desktop views. It was changed in a small paragraph in the desktop behaviour but not in the anatomy, is already fixed in the specs

yceballost · 2024-05-27T10:12:35Z

src/table.tsx

+
+import type {DataAttributes} from './utils/types';
+
+type TableProps = {


missing alignItems prop to align content horizontally

yceballost · 2024-05-27T10:15:58Z

playroom/snippets.tsx

+        name: 'Table',
+        code: `
+            <Table
+                heading={[


can you include columnTextAlign to make easy the usage of this prop? (also for boxed snippet)

columnTextAlign={["left", "right", "right", "right", "center", "right"]}

yceballost · 2024-05-27T10:20:49Z

src/table.tsx

I know this is a wrong usage, but if you write a string in columnTextAlign prop, the alignment changes for each letter. That's weird and I don't know if it is something to avoid

columnTextAlign.-.Table.-.bug.mov

src/table.tsx

pladaria

nice!
As commented in Teams, in mobile, when fullwidth, it would be great to have a way to bleed outside the responsive layout and set the padding/margin to the table. This way it would scroll over the whole viewport width

Marcosld · 2024-05-27T14:44:33Z

...-skin-components-screenshot-test-tsx-components-in-movistar-inverse-and-dark-mode-1-snap.png

Visually stunning

Marcosld · 2024-05-28T08:44:14Z

src/table.tsx

            columnWidth,
            ...otherProps
        }: TableProps,
        ref: React.Ref<HTMLDivElement>
    ) => {
+        const getColumnTextAlign = (column: number) => {
+            const defaultTextAlign = 'left';
+            if (columnTextAlign) {


Perhaps you can use a default parameter to simplify this to: return Array.isArray(columnTextAlign) ? columnTextAlign[column] : columnTextAlign

not really, it whould be something like:

Array.isArray(columnTextAlign) ? columnTextAlign[column] ?? defaultTextAlign : columnTextAlign;

Oh I see, that's in case the user just sends the textAlign for some of the columns... but given input parameter is an array and not something like a map[columnIdx->alignment]... is that a good use of the API? 🤔

src/table.tsx

yceballost

osom 🤩

src/table.css.ts

...eenshot_tests__/__image_snapshots__/table-screenshot-test-tsx-table-desktop-boxed-1-snap.png

# [15.11.0](v15.10.0...v15.11.0) (2024-06-19) ### Bug Fixes * **ButtonLayout:** add bleed when using only link ([#1150](#1150)) ([554f98a](554f98a)) * **Counter:** add aria-live to value ([#1146](#1146)) ([3e2e09b](3e2e09b)) * **Header:** bleed not working in o2-new skin ([#1137](#1137)) ([00fb632](00fb632)) * **MainNavigationBar:** remove logo space in mobile when no sections are given ([#1149](#1149)) ([e4c03a0](e4c03a0)) * **Select:** set text color in native version ([#1141](#1141)) ([eedf265](eedf265)) * **Spinner:** use controlActivatedInverse token as default when used inside inverse variant ([#1133](#1133)) ([38a192d](38a192d)) ### Features * **Cards:** improve accessibility ([#1139](#1139)) ([dde9cc5](dde9cc5)) * **Chip:** allow using badge in selectable chips ([#1134](#1134)) ([9ecda7c](9ecda7c)) * **Circle:** custom background support ([#1136](#1136)) ([bedeaa4](bedeaa4)) * **CoverHero:** new component ([#1144](#1144)) ([a655e6e](a655e6e)) * **DisplayMediaCard, PosterCard:** add extra ([#1131](#1131)) ([501cf73](501cf73)) * **EmptyState:** allow using only ButtonLink as action ([#1140](#1140)) ([d73c219](d73c219)) * **HighlightedCard:** support for alt for image ([#1135](#1135)) ([c9ba728](c9ba728)) * **Image:** Custom fallback icon in Vivo New ([#1145](#1145)) ([ec600fe](ec600fe)) * **Switch:** Improve animation ([#1142](#1142)) ([8162eed](8162eed)) * **Table:** new component ([#1129](#1129)) ([328e013](328e013)) * **Timer:** create component ([#1130](#1130)) ([0b3253e](0b3253e)) * **Touchable:** newTab support in to links ([#1143](#1143)) ([eff07e3](eff07e3))

tuentisre · 2024-06-19T10:00:36Z

🎉 This PR is included in version 15.11.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

atabel added 3 commits May 24, 2024 13:53

WEB-1870 feat(Table): new component

fd86c17

tests

be044ba

snippets

f4233f3

atabel added 6 commits May 24, 2024 16:51

snippets

a98ca43

comment

df41437

simplify and comment some styles

92c108a

vertical align middle cells

af45ccf

fix advanced data card

f621e4c

fix navigation bar ssr test

e8d7bf3

atabel commented May 27, 2024

View reviewed changes

atabel requested review from marcoskolodny, pladaria and aweell May 27, 2024 09:02

yceballost requested review from yceballost May 27, 2024 10:03

yceballost requested changes May 27, 2024

View reviewed changes

atabel requested a review from Marcosld May 27, 2024 13:23

pladaria reviewed May 27, 2024

View reviewed changes

Marcosld approved these changes May 27, 2024

View reviewed changes

...-skin-components-screenshot-test-tsx-components-in-movistar-inverse-and-dark-mode-1-snap.png Outdated

Copy link

Contributor

Marcosld May 27, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Visually stunning

changes from CR

39285a1

Marcosld approved these changes May 28, 2024

View reviewed changes

yceballost mentioned this pull request May 28, 2024

feat(DisplayMediaCard, PosterCard): add extra #1131

Merged

atabel added 4 commits May 28, 2024 17:02

fixes

07598f6

doc

91da2b2

fix boxed non fullWidth in tablet

5ee2705

Merge branch 'master' into atoledano-table

2383126

yceballost requested changes May 30, 2024

View reviewed changes

src/table.tsx Show resolved Hide resolved

atabel added 2 commits May 30, 2024 11:34

fix scroll paddings, sticky heading padding, and column width

cce55e0

update screenshots

cfab953

yceballost approved these changes May 30, 2024

View reviewed changes

Marcosld self-requested a review May 30, 2024 15:35

atabel added 2 commits June 3, 2024 09:11

Merge branch 'master' into atoledano-table

9004f64

update screenshots

4bd356a

atabel requested a review from pladaria June 4, 2024 07:10

aweell reviewed Jun 4, 2024

View reviewed changes

src/table.css.ts Outdated Show resolved Hide resolved

atabel added 2 commits June 4, 2024 12:40

change paddingX in mobile for boxed table

ca1d352

allow any ReactNode in headings

aedfd55

atabel requested a review from aweell June 4, 2024 13:19

aweell approved these changes Jun 4, 2024

View reviewed changes

marcoskolodny reviewed Jun 4, 2024

View reviewed changes

...eenshot_tests__/__image_snapshots__/table-screenshot-test-tsx-table-desktop-boxed-1-snap.png Outdated Show resolved Hide resolved

marcoskolodny reviewed Jun 4, 2024

View reviewed changes

...eenshot_tests__/__image_snapshots__/table-screenshot-test-tsx-table-desktop-boxed-1-snap.png Outdated Show resolved Hide resolved

atabel added 2 commits June 5, 2024 09:00

Merge branch 'master' into atoledano-table

a4c2cca

fix scrollOverResponsiveLayout in FF

6346e75

atabel requested a review from marcoskolodny June 5, 2024 08:58

marcoskolodny approved these changes Jun 5, 2024

View reviewed changes

pladaria approved these changes Jun 5, 2024

View reviewed changes

atabel removed the request for review from Marcosld June 5, 2024 12:42

atabel added this pull request to the merge queue Jun 5, 2024

Merged via the queue into master with commit 328e013 Jun 5, 2024
11 checks passed

atabel deleted the atoledano-table branch June 5, 2024 12:52

tuentisre added the released label Jun 19, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Table): new component #1129

feat(Table): new component #1129

atabel commented May 24, 2024

github-actions bot commented May 24, 2024 •

edited

Loading

github-actions bot commented May 24, 2024 •

edited

Loading

github-actions bot commented May 24, 2024 •

edited

Loading

github-actions bot commented May 24, 2024 •

edited

Loading

atabel May 27, 2024

yceballost May 27, 2024

atabel May 27, 2024

yceballost May 27, 2024

aweell Jun 4, 2024

atabel Jun 4, 2024

yceballost May 27, 2024 •

edited

Loading

yceballost May 27, 2024

yceballost May 27, 2024

pladaria left a comment

Marcosld May 27, 2024

Marcosld May 28, 2024

atabel May 28, 2024

Marcosld May 28, 2024 •

edited

Loading

yceballost left a comment

tuentisre commented Jun 19, 2024


		import type {DataAttributes} from './utils/types';

		type TableProps = {

feat(Table): new component #1129

feat(Table): new component #1129

Conversation

atabel commented May 24, 2024

github-actions bot commented May 24, 2024 • edited Loading

github-actions bot commented May 24, 2024 • edited Loading

github-actions bot commented May 24, 2024 • edited Loading

github-actions bot commented May 24, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yceballost May 27, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pladaria left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Marcosld May 28, 2024 • edited Loading

Choose a reason for hiding this comment

yceballost left a comment

Choose a reason for hiding this comment

tuentisre commented Jun 19, 2024

github-actions bot commented May 24, 2024 •

edited

Loading

github-actions bot commented May 24, 2024 •

edited

Loading

github-actions bot commented May 24, 2024 •

edited

Loading

github-actions bot commented May 24, 2024 •

edited

Loading

yceballost May 27, 2024 •

edited

Loading

Marcosld May 28, 2024 •

edited

Loading