Skip to content

Commit

Permalink
Fix spotlight tile regressions
Browse files Browse the repository at this point in the history
The buttons were scrolling with the view instead of always being visible in a fixed location on the tile, and the indicators were not adopting the correct width.
  • Loading branch information
robintown committed Aug 23, 2024
1 parent 66b79f5 commit 30a54f3
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 14 deletions.
8 changes: 5 additions & 3 deletions src/tile/SpotlightTile.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

.tile {
.contents {
block-size: 100%;
inline-size: 100%;
display: flex;
border-radius: var(--cpd-space-6x);
contain: strict;
Expand All @@ -29,7 +31,7 @@ limitations under the License.
scroll-behavior: smooth; */
}

.tile.maximised {
.tile.maximised .contents {
border-radius: 0;
}

Expand Down Expand Up @@ -153,7 +155,7 @@ limitations under the License.
}

.indicators > .item {
inline-size: 32px;
flex-basis: 32px;
block-size: 2px;
transition: background-color ease 0.15s;
}
Expand Down
28 changes: 17 additions & 11 deletions src/tile/SpotlightTile.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -272,16 +272,18 @@ export const SpotlightTile = forwardRef<HTMLDivElement, Props>(
<ChevronLeftIcon aria-hidden width={24} height={24} />
</button>
)}
{vms.map((vm) => (
<SpotlightItem
key={vm.id}
vm={vm}
targetWidth={targetWidth}
targetHeight={targetHeight}
intersectionObserver={intersectionObserver}
snap={scrollToId === null || scrollToId === vm.id}
/>
))}
<div className={styles.contents}>
{vms.map((vm) => (
<SpotlightItem
key={vm.id}
vm={vm}
targetWidth={targetWidth}
targetHeight={targetHeight}
intersectionObserver={intersectionObserver}
snap={scrollToId === null || scrollToId === vm.id}
/>
))}
</div>
{onToggleExpanded && (
<button
className={classNames(styles.expand)}
Expand Down Expand Up @@ -311,7 +313,11 @@ export const SpotlightTile = forwardRef<HTMLDivElement, Props>(
})}
>
{vms.map((vm) => (
<div className={styles.item} data-visible={vm.id === visibleId} />
<div
key={vm.id}
className={styles.item}
data-visible={vm.id === visibleId}
/>
))}
</div>
)}
Expand Down

0 comments on commit 30a54f3

Please sign in to comment.