@openedx/paragon 23.5.2 → 23.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "23.5.2",
+  "version": "23.6.1",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/Button/_mixins.scss

@@ -1,7 +1,10 @@
-// OVERRIDE FROM BOOTSTRAP
-// No changes made. We do this to keep all button related mixins together,
 //
+// Includes common mixins related to button styles.
+//
+
 // Button sizes
+// OVERRIDE FROM BOOTSTRAP
+// No changes made. We do this to keep all button related mixins together,
 @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $button-border-radius) {
   padding: $padding-y $padding-x;
 
@@ -12,3 +15,49 @@
   // Manually declare to provide an override to the browser default
   @include border-radius($button-border-radius, 0);
 }
+
+// Mixin for button states that affect border radius
+@mixin button-border-radius-0($side) {
+  @if $side == 'right' {
+    @include border-right-radius(0);
+  }
+
+  @if $side == 'left' {
+    @include border-left-radius(0);
+  }
+  
+  // Handle pseudo-classes
+  &.btn:not(:disabled, .disabled):focus,
+  &.btn:not(:disabled, .disabled):focus::before {
+    @if $side == 'left' {
+      @include border-left-radius(0);
+    }
+
+    @if $side == 'right' {
+      @include border-right-radius(0);
+    }
+  }
+  
+  &.btn:not(:disabled, .disabled):active,
+  &.btn:not(:disabled, .disabled):active::before {
+    @if $side == 'left' {
+      @include border-left-radius(0);
+    }
+
+    @if $side == 'right' {
+      @include border-right-radius(0);
+    }
+  }
+  
+  // Handle .active class
+  &.btn:not(:disabled, .disabled).active,
+  &.btn:not(:disabled, .disabled).active::before {
+    @if $side == 'right' {
+      @include border-right-radius(0);
+    }
+
+    @if $side == 'left' {
+      @include border-left-radius(0);
+    }
+  }
+}

package/src/Button/button-group.scss

@@ -15,7 +15,7 @@
     &:focus,
     &:active,
     &.active {
-      z-index: 1;
+      z-index: 2;
     }
   }
 }
@@ -36,14 +36,17 @@
     margin-left: calc(var(--pgn-size-btn-border-width) * -1);
   }
 
+  // Right border radius for non-last buttons
+  > .btn:not(:last-child, .dropdown-toggle, :first-child),
   > .btn:not(:last-child, .dropdown-toggle),
   > .btn-group:not(:last-child) > .btn {
-    @include border-right-radius(0);
+    @include button-border-radius-0('right');
   }
 
-  > .btn:not(:first-child),
+  // Left border radius for non-first buttons
+  > .btn:not(:first-child, .dropdown-toggle),
   > .btn-group:not(:first-child) > .btn {
-    @include border-left-radius(0);
+    @include button-border-radius-0('left');
   }
 }
 

package/styles/css/themes/light/variables.css

@@ -1400,6 +1400,7 @@
   --pgn-color-image-figure-caption: var(--pgn-color-gray-500);
   --pgn-color-menu-item-color: var(--pgn-color-body-base);
   --pgn-color-menu-item-hover-color: var(--pgn-color-btn-hover-text-tertiary);
+  --pgn-color-menu-item-focus-bg: var(--pgn-color-light-500);
   --pgn-color-menu-select-btn-link-color: var(--pgn-color-primary-500);
   --pgn-color-modal-content-bg: var(--pgn-color-bg-base);
   --pgn-color-nav-tabs-base-border-base: var(--pgn-color-light-400);
@@ -1812,7 +1813,6 @@
   --pgn-color-icon-button-text-danger-inverse-active-focus: var(--pgn-color-icon-button-text-danger-inverse-active-base);
   --pgn-color-image-thumbnail-bg: var(--pgn-color-body-bg);
   --pgn-color-menu-item-hover-bg: var(--pgn-color-btn-hover-bg-tertiary);
-  --pgn-color-menu-item-focus-bg: var(--pgn-color-btn-active-bg-tertiary);
   --pgn-color-nav-tabs-inverse-link-bg-hover: var(--pgn-color-nav-tabs-inverse-link-border-bottom);
   --pgn-color-nav-pills-base-link-active-bg: var(--pgn-color-bg-active);
   --pgn-color-nav-pills-base-link-border: var(--pgn-color-nav-tabs-base-border-base);

package/tokens/src/themes/light/components/Menu.json

@@ -19,7 +19,7 @@
           "border": { "source": "$menu-item-hover-border-color", "$value": "{color.menu.item.bg}" }
         },
         "focus": {
-          "bg": { "source": "$menu-item-focus-bg", "$value": "{color.btn.active.bg.tertiary}" }
+          "bg": { "source": "$menu-item-focus-bg", "$value": "{color.light.500}" }
         }
       },
       "select": {