From 71aa9bff0de0736fa4be1dd98a6c02dbe88e37f3 Mon Sep 17 00:00:00 2001 From: Armaan Gupta Date: Thu, 30 Jul 2026 15:19:43 +0530 Subject: [PATCH 1/3] added the theme for the table component mobile layout feature and sorting --- src/components/table/_table.scss | 185 +++++++++++++++++++++++++ src/components/tablerow/_tablerow.scss | 14 ++ src/theme.scss | 1 + 3 files changed, 200 insertions(+) create mode 100644 src/components/tablerow/_tablerow.scss diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index ba2cfd0..52a99b3 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -208,6 +208,91 @@ width: 80%; } +/* ===============Mobile Layout================== */ +.cmp-adaptiveform-table__mobile-bar { + display: none; +} + +.cmp-adaptiveform-table__mobile-bar-btn--filter.is-active { + color: $focus-ring-color; + font-weight: 600; +} + +.cmp-adaptiveform-table__sort-overlay { + display: none; + position: fixed; + inset: 0; + background-color: rgba(0, 0, 0, 0.45); + z-index: 1000; + align-items: flex-end; +} + +.cmp-adaptiveform-table__sort-overlay.is-open { + display: flex; +} + +.cmp-adaptiveform-table__sort-sheet { + width: 100%; + background: $white; + border-radius: 1rem 1rem 0 0; + padding-bottom: 2rem; + max-height: 80vh; + overflow-y: auto; + transform: translateY(100%); + transition: transform 0.25s ease-out; +} + +.cmp-adaptiveform-table__sort-overlay.is-open .cmp-adaptiveform-table__sort-sheet { + transform: translateY(0); +} + +.cmp-adaptiveform-table__sort-sheet-handle { + width: 2.5rem; + height: 0.25rem; + background: $silver; + border-radius: 0.125rem; + margin: 0.75rem auto 1rem; +} + +.cmp-adaptiveform-table__sort-sheet-title { + font-size: $font-sm; + color: #6b6b6b; + padding: 0.5rem 1rem; + border-bottom: 1px solid #f0f0f0; + margin: 0; +} + +.cmp-adaptiveform-table__sort-options { + list-style: none; + margin: 0; + padding: 0; +} + +.cmp-adaptiveform-table__sort-option { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.875rem 1rem; + font-size: $font-md; + cursor: pointer; + border-bottom: 1px solid #f5f5f5; +} + +.cmp-adaptiveform-table__sort-option:hover { + background-color: #f9f9f9; +} + +.cmp-adaptiveform-table__sort-option[aria-selected="true"] { + font-weight: 600; +} + +.cmp-adaptiveform-table__sort-option-indicator { + color: #505050; + font-size: $font-sm; + min-width: 1rem; + text-align: right; +} + /* ===============Responsive================== */ @media (max-width: 768px) { .cmp-adaptiveform-table__widget { @@ -218,4 +303,104 @@ .cmp-adaptiveform-tablehead { padding: 0.5rem; } + + .cmp-adaptiveform-table__widget, + .cmp-adaptiveform-table__head, + .cmp-adaptiveform-table__body, + .cmp-adaptiveform-tableheader, + .cmp-adaptiveform-tablerow, + .cmp-adaptiveform-tablecell, + .cmp-adaptiveform-tablehead { + display: block; + width: auto; + } + + .cmp-adaptiveform-table__widget .cmp-adaptiveform-table__head { + position: absolute; + top: -9999px; + left: -9999px; + } + + .cmp-adaptiveform-table__body .cmp-adaptiveform-tablerow { + display: block; + border: 1px solid #dddddd; + border-radius: 4px; + margin-bottom: 1rem; + padding: 0.25rem 0.5rem; + font-size: $font-sm; + } + + .cmp-adaptiveform-table__body .cmp-adaptiveform-tablecell { + display: block; + border: none; + border-bottom: 1px solid #f0f0f0; + position: relative; + padding: 0.5rem 0.5rem 0.5rem 45%; + text-align: left; + min-height: 1.5rem; + } + + .cmp-adaptiveform-table__body .cmp-adaptiveform-tablerow > .cmp-adaptiveform-tablecell:last-child { + border: none; + } + + .cmp-adaptiveform-table__body .cmp-adaptiveform-tablecell::before { + content: attr(data-label); + position: absolute; + left: 0.5rem; + top: 0.5rem; + width: 40%; + padding-right: 0.5rem; + font-weight: 600; + white-space: normal; + overflow-wrap: break-word; + box-sizing: border-box; + } + + .cmp-adaptiveform-table__body .cmp-adaptiveform-tablecell:not([data-label])::before, + .cmp-adaptiveform-table__body .cmp-adaptiveform-tablecell[data-label=""]::before { + content: none; + } + + .cmp-adaptiveform-table__body .cmp-adaptiveform-tablecell:not([data-label]), + .cmp-adaptiveform-table__body .cmp-adaptiveform-tablecell[data-label=""] { + padding-left: 0.5rem; + } + + .cmp-adaptiveform-table__mobile-bar { + display: flex; + align-items: center; + border-top: 1px solid #e0e0e0; + padding: 0.25rem 0; + } + + .cmp-adaptiveform-table__mobile-bar-btn { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + gap: 0.375rem; + background: none; + border: none; + cursor: pointer; + font-size: $font-sm; + color: #333333; + padding: 0.625rem 0; + } + + .cmp-adaptiveform-table__mobile-bar-btn:focus-visible { + outline: 2px solid $focus-ring-color; + outline-offset: 1px; + } + + .cmp-adaptiveform-table__mobile-bar-btn:disabled { + color: #aaaaaa; + cursor: default; + } + + .cmp-adaptiveform-table__mobile-bar-divider { + width: 1px; + height: 1.25rem; + background: #e0e0e0; + } } diff --git a/src/components/tablerow/_tablerow.scss b/src/components/tablerow/_tablerow.scss new file mode 100644 index 0000000..2ad9fa6 --- /dev/null +++ b/src/components/tablerow/_tablerow.scss @@ -0,0 +1,14 @@ +/* ===============Table Row — Mobile Card Layout================== */ +@media (max-width: 768px) { + .cmp-adaptiveform-tablecell.cmp-adaptiveform-tablecell--with-row-controls { + display: block; + margin: 0; + border: none; + } + + .cmp-adaptiveform-tablerow__runtime-controls { + display: flex; + justify-content: flex-end; + margin-top: 0.5rem; + } +} diff --git a/src/theme.scss b/src/theme.scss index cde1c81..7b6ad29 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -46,3 +46,4 @@ @import './components/datetime/_datetime.scss'; @import './components/imagechoice/_imagechoice.scss'; @import './components/table/_table.scss'; +@import './components/tablerow/_tablerow.scss'; From 35525ea0672c35dd6c883822f433203f760546f5 Mon Sep 17 00:00:00 2001 From: Armaan Gupta Date: Thu, 30 Jul 2026 15:21:10 +0530 Subject: [PATCH 2/3] code refactoring --- src/components/table/_table.scss | 12 ++++++++++++ src/components/tablerow/_tablerow.scss | 14 -------------- src/theme.scss | 1 - 3 files changed, 12 insertions(+), 15 deletions(-) delete mode 100644 src/components/tablerow/_tablerow.scss diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index 52a99b3..a9f5d3a 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -403,4 +403,16 @@ height: 1.25rem; background: #e0e0e0; } + + .cmp-adaptiveform-tablecell.cmp-adaptiveform-tablecell--with-row-controls { + display: block; + margin: 0; + border: none; + } + + .cmp-adaptiveform-tablerow__runtime-controls { + display: flex; + justify-content: flex-end; + margin-top: 0.5rem; + } } diff --git a/src/components/tablerow/_tablerow.scss b/src/components/tablerow/_tablerow.scss deleted file mode 100644 index 2ad9fa6..0000000 --- a/src/components/tablerow/_tablerow.scss +++ /dev/null @@ -1,14 +0,0 @@ -/* ===============Table Row — Mobile Card Layout================== */ -@media (max-width: 768px) { - .cmp-adaptiveform-tablecell.cmp-adaptiveform-tablecell--with-row-controls { - display: block; - margin: 0; - border: none; - } - - .cmp-adaptiveform-tablerow__runtime-controls { - display: flex; - justify-content: flex-end; - margin-top: 0.5rem; - } -} diff --git a/src/theme.scss b/src/theme.scss index 7b6ad29..cde1c81 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -46,4 +46,3 @@ @import './components/datetime/_datetime.scss'; @import './components/imagechoice/_imagechoice.scss'; @import './components/table/_table.scss'; -@import './components/tablerow/_tablerow.scss'; From 606ab6044d07aab564d14008c351ad26b6054c19 Mon Sep 17 00:00:00 2001 From: Armaan Gupta Date: Fri, 21 Aug 2026 17:30:58 +0530 Subject: [PATCH 3/3] updated the css class from overlay to scrim to avoid confusion --- src/components/table/_table.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index a9f5d3a..a5b8aac 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -218,7 +218,7 @@ font-weight: 600; } -.cmp-adaptiveform-table__sort-overlay { +.cmp-adaptiveform-table__sort-scrim { display: none; position: fixed; inset: 0; @@ -227,7 +227,7 @@ align-items: flex-end; } -.cmp-adaptiveform-table__sort-overlay.is-open { +.cmp-adaptiveform-table__sort-scrim.is-open { display: flex; } @@ -242,7 +242,7 @@ transition: transform 0.25s ease-out; } -.cmp-adaptiveform-table__sort-overlay.is-open .cmp-adaptiveform-table__sort-sheet { +.cmp-adaptiveform-table__sort-scrim.is-open .cmp-adaptiveform-table__sort-sheet { transform: translateY(0); }