Merge branch 'main' into dkilgore-eightfold/picker-year-keyboard-fixup

.github/workflows/octuple-publish-alerts.yml

@@ -3,10 +3,11 @@ name: Octuple Publish Alerts
 # Only trigger when the npm-publish workflow succeeded
 on:
   workflow_run:
-    workflows: ["Publish Octuple"]
+    workflows: [Publish Octuple]
     types:
       - completed
 
+jobs:
   octuple-publish-alerts:
     needs: build
     runs-on: ubuntu-latest

CHANGELOG.md

@@ -2,6 +2,17 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [2.24.0](https://github.com/EightfoldAI/octuple/compare/v2.23.0...v2.24.0) (2023-01-31)
+
+### Features
+
+- button: adds button nudge animation ([#513](https://github.com/EightfoldAI/octuple/issues/513)) ([69911fd](https://github.com/EightfoldAI/octuple/commits/69911fd382121092c5b88534e5e5be4983093c7d))
+
+### Bug Fixes
+
+- badge: updates color palette to match the latest design and improves accessibililty ([#518](https://github.com/EightfoldAI/octuple/issues/518)) ([9831512](https://github.com/EightfoldAI/octuple/commits/98315124e665481f5b59c7d589b851fce2515824))
+- slider: update state when value changes externally ([#520](https://github.com/EightfoldAI/octuple/issues/520)) ([96dd188](https://github.com/EightfoldAI/octuple/commits/96dd188dcc8f10f3c16eda7b4b6b0081e189c17f))
+
 ## [2.23.0](https://github.com/EightfoldAI/octuple/compare/v2.22.0...v2.23.0) (2023-01-27)
 
 ### Features

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eightfold.ai/octuple",
-  "version": "2.23.0",
+  "version": "2.24.0",
   "license": "MIT",
   "main": "lib/octuple.js",
   "types": "lib/octuple.d.ts",

src/components/Button/Button.test.tsx

@@ -227,4 +227,12 @@ describe('Button', () => {
     await sleep(500);
     expect(container.getElementsByClassName('size')).toHaveLength(1);
   });
+
+  test('Button is loading', () => {
+    const { container } = render(
+      <PrimaryButton loading size={ButtonSize.Medium} text="test" />
+    );
+    expect(container.getElementsByClassName('loader')).toHaveLength(1);
+    expect(container).toMatchSnapshot();
+  });
 });

src/components/Button/__snapshots__/Button.test.tsx.snap

@@ -30,6 +30,35 @@ exports[`Button Button is large 1`] = `
 </div>
 `;
 
+exports[`Button Button is loading 1`] = `
+<div>
+  <button
+    aria-disabled="true"
+    class="button button-primary button-medium pill-shape loading"
+    disabled=""
+  >
+    <span
+      class="button-text-medium"
+    >
+      test
+    </span>
+    <div
+      class="loader-container loader"
+    >
+      <div
+        class="dot medium"
+      />
+      <div
+        class="dot medium"
+      />
+      <div
+        class="dot medium"
+      />
+    </div>
+  </button>
+</div>
+`;
+
 exports[`Button Button is medium 1`] = `
 <div>
   <button

src/components/Button/button.module.scss

@@ -428,17 +428,18 @@
   }
 
   .loader {
-    position: absolute;
+    align-items: center;
+    animation: fadeIn $motion-duration-normal $motion-easing-easein forwards;
     background: inherit;
-    width: 100%;
-    height: 100%;
+    border-radius: inherit;
     display: flex;
-    align-items: center;
+    height: 100%;
     justify-content: center;
-    border-radius: inherit;
     left: 0;
+    position: absolute;
     top: 0;
-    animation: fadeIn $motion-duration-normal $motion-easing-easein forwards;
+    width: 100%;
+    z-index: 1;
   }
 }
 
@@ -1321,3 +1322,154 @@
     }
   }
 }
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+// Button Nudge animations
+@keyframes nudgeBackgroundAfter {
+  0% {
+    left: -100%;
+  }
+
+  100% {
+    left: 140%;
+  }
+}
+
+@keyframes nudgeBackgroundBefore {
+  0% {
+    left: -120%;
+  }
+
+  100% {
+    left: 120%;
+  }
+}
+
+@keyframes nudgeBackgroundAfterRtl {
+  0% {
+    right: -100%;
+  }
+
+  100% {
+    right: 140%;
+  }
+}
+
+@keyframes nudgeBackgroundBeforeRtl {
+  0% {
+    right: -120%;
+  }
+
+  100% {
+    right: 120%;
+  }
+}
+
+@keyframes nudgeBounce {
+  0%,
+  20%,
+  53%,
+  80%,
+  100% {
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transform: translate3d(0, 0, 0);
+  }
+  40%,
+  43% {
+    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transform: translate3d(0, -30px, 0);
+  }
+  70% {
+    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transform: translate3d(0, -15px, 0);
+  }
+  90% {
+    transform: translate3d(0, -4px, 0);
+  }
+}
+
+@keyframes nudgeConic {
+  from {
+    transform: translate(-50%, -50%) rotate(0);
+  }
+  to {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+@keyframes nudgeConicRtl {
+  from {
+    transform: translate(-50%, -50%) rotate(0);
+  }
+  to {
+    transform: translate(-50%, -50%) rotate(-360deg);
+  }
+}
+
+@keyframes nudgeRingLarge {
+  0% {
+    width: 14px;
+    height: 14px;
+    opacity: 1;
+  }
+  100% {
+    width: 176px;
+    height: 176px;
+    opacity: 0;
+  }
+}
+
+@keyframes nudgeRingMedium {
+  0% {
+    width: 14px;
+    height: 14px;
+    opacity: 1;
+  }
+  100% {
+    width: 124px;
+    height: 124px;
+    opacity: 0;
+  }
+}
+
+@keyframes nudgeRingSmall {
+  0% {
+    width: 14px;
+    height: 14px;
+    opacity: 1;
+  }
+  100% {
+    width: 112px;
+    height: 112px;
+    opacity: 0;
+  }
+}
+
+@keyframes nudgeSize {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}

src/components/Dialog/BaseDialog/base-dialog.module.scss

@@ -123,3 +123,27 @@ $dialog-body-bottom-shadow: inset 0 -11px 8px -10px var(--grey-color-20);
     }
   }
 }
+
+@keyframes scaleIn {
+  0% {
+    transform: scale(0, 0);
+    opacity: 0;
+  }
+
+  100% {
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+}
+
+@keyframes scaleOut {
+  0% {
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(0, 0);
+    opacity: 0;
+  }
+}

src/components/Dropdown/dropdown.module.scss

@@ -47,3 +47,34 @@
     padding: 0;
   }
 }
+
+@keyframes slideUpIn {
+  0% {
+    opacity: 0;
+    transform: scaleY(0.8);
+    transform-origin: 0% 0%;
+  }
+  100% {
+    opacity: 1;
+    transform: scaleY(1);
+    transform-origin: 0% 0%;
+  }
+}
+
+@keyframes slideUpOut {
+  0% {
+    opacity: 1;
+    transform: scaleY(1);
+    transform-origin: 0% 0%;
+  }
+  20% {
+    opacity: 1;
+    transform: scaleY(1);
+    transform-origin: 0% 0%;
+  }
+  100% {
+    opacity: 0;
+    transform: scaleY(0.8);
+    transform-origin: 0% 0%;
+  }
+}

src/components/Snackbar/snackbar.module.scss

@@ -53,3 +53,16 @@
     right: $space-m;
   }
 }
+
+@keyframes slideUpIn {
+  0% {
+    opacity: 0;
+    transform: scaleY(0.8);
+    transform-origin: 0% 0%;
+  }
+  100% {
+    opacity: 1;
+    transform: scaleY(1);
+    transform-origin: 0% 0%;
+  }
+}

src/components/Tooltip/tooltip.module.scss

@@ -91,3 +91,14 @@ $tooltip-arrow-shadow: 1px 1px 2px rgba(15, 20, 31, 0.12);
     max-width: 360px;
   }
 }
+
+@keyframes scaleTooltip {
+  from {
+    transform: scale(0);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}