Refactored Carousel

components/lib/carousel/style/CarouselStyle.js

@@ -9,19 +9,18 @@ const classes = {
         }
     ],
     header: 'p-carousel-header',
-    content: 'p-carousel-content',
-    container: 'p-carousel-container',
+    content: 'p-carousel-content-container',
+    container: 'p-carousel-content',
     previousButton: ({ instance }) => [
-        'p-carousel-prev p-link',
+        'p-carousel-prev-button',
         {
             'p-disabled': instance.backwardIsDisabled
         }
     ],
-    previousButtonIcon: 'p-carousel-next-icon',
-    itemsContent: 'p-carousel-items-content',
-    itemsContainer: 'p-carousel-items-container',
+    itemsContent: 'p-carousel-viewport',
+    itemsContainer: 'p-carousel-items',
     itemCloned: ({ index, value, totalShiftedItems, d_numVisible }) => [
-        'p-carousel-item p-carousel-item-cloned',
+        'p-carousel-item p-carousel-item-clone',
         {
             'p-carousel-item-active': totalShiftedItems * -1 === value.length + d_numVisible,
             'p-carousel-item-start': index === 0,
@@ -37,20 +36,19 @@ const classes = {
         }
     ],
     nextButton: ({ instance }) => [
-        'p-carousel-next p-link',
+        'p-carousel-next-button',
         {
             'p-disabled': instance.forwardIsDisabled
         }
     ],
-    nextButtonIcon: 'p-carousel-prev-icon',
-    indicators: 'p-carousel-indicators p-reset',
+    indicators: 'p-carousel-indicators',
     indicator: ({ instance, index }) => [
         'p-carousel-indicator',
         {
-            'p-highlight': instance.d_page === index
+            'p-carousel-indicator-active': instance.d_page === index
         }
     ],
-    indicatorButton: 'p-link',
+    indicatorButton: 'p-carousel-indicator-button',
     footer: 'p-carousel-footer'
 };
 

components/lib/themes/primeone/base/carousel/index.js

@@ -5,23 +5,23 @@ export default {
     flex-direction: column;
 }
 
-.p-carousel-content {
+.p-carousel-content-container {
     display: flex;
     flex-direction: column;
     overflow: auto;
 }
 
-.p-carousel-container {
+.p-carousel-content {
     display: flex;
     flex-direction: row;
 }
 
-.p-carousel-items-content {
+.p-carousel-viewport {
     overflow: hidden;
     width: 100%;
 }
 
-.p-carousel-items-container {
+.p-carousel-items {
     display: flex;
     flex-direction: row;
 }
@@ -66,9 +66,11 @@ export default {
     flex-wrap: wrap;
     padding: 1rem;
     gap: 0.5rem;
+    margin: 0;
+    list-style: none;
 }
 
-.p-carousel-indicator button {
+.p-carousel-indicator-button {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -79,26 +81,30 @@ export default {
     transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     outline-color: transparent;
     border-radius: ${dt('rounded.base')};
+    padding: 0;
+    margin: 0;
+    border: none;
+    user-select: none;
 }
 
-.p-carousel-indicator button:focus-visible {
+.p-carousel-indicator-button:focus-visible {
     outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
     outline-offset: ${dt('focus.ring.offset')};
 }
 
-.p-carousel-indicator button:hover {
+.p-carousel-indicator-button:hover {
     background: ${dt('carousel.indicator.hover.background')};
 }
 
-.p-carousel-indicator.p-highlight button {
+.p-carousel-indicator-active .p-carousel-indicator-button {
     background: ${dt('carousel.indicator.active.background')};
 }
 
-.p-carousel-vertical .p-carousel-container {
+.p-carousel-vertical .p-carousel-content {
     flex-direction: column;
 }
 
-.p-carousel-vertical .p-carousel-items-container {
+.p-carousel-vertical .p-carousel-items {
     flex-direction: column;
     height: 100%;
 }