Merge branch 'main' into fmehta/fix-select-input-case

EightfoldAI · Feb 2, 2023 · d89990a · d89990a
2 parents 7ba2054 + aa22ddb
commit d89990a
Show file tree

Hide file tree

Showing 26 changed files with 784 additions and 97 deletions.
diff --git a/.github/workflows/octuple-publish-alerts.yml b/.github/workflows/octuple-publish-alerts.yml
@@ -8,6 +8,16 @@ on:
       - completed
 
 jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+      - run: yarn
+      - run: yarn test
+
   octuple-publish-alerts:
     needs: build
     runs-on: ubuntu-latest

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 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.25.0](https://github.com/EightfoldAI/octuple/compare/v2.24.0...v2.25.0) (2023-02-01)
+
+### Features
+
+- extend css var implementation ([#526](https://github.com/EightfoldAI/octuple/issues/526)) ([b0a3cae](https://github.com/EightfoldAI/octuple/commits/b0a3caeeef4687959650d51f6b75dca5dab8d81a))
+
+### Bug Fixes
+
+- button: update button loader z index to map to updated layout with nudge option ([#525](https://github.com/EightfoldAI/octuple/issues/525)) ([3a29afd](https://github.com/EightfoldAI/octuple/commits/3a29afd50d6d238e9162f682acd8b4f9d8371237))
+- css modules: moves keyframes into modules reducing dupes and compiled css size ([#524](https://github.com/EightfoldAI/octuple/issues/524)) ([17b9cee](https://github.com/EightfoldAI/octuple/commits/17b9cee08dbe8a335453d5c184de54c9acf79cfe))
+- picker: ensure keyboard navigation selected styles are implemented in year mode ([#523](https://github.com/EightfoldAI/octuple/issues/523)) ([3582bc4](https://github.com/EightfoldAI/octuple/commits/3582bc413c4ade3ffcb10f811df3930f010cd958))
+
 ## [2.24.0](https://github.com/EightfoldAI/octuple/compare/v2.23.0...v2.24.0) (2023-01-31)
 
 ### Features

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eightfold.ai/octuple",
-  "version": "2.24.0",
+  "version": "2.25.0",
   "license": "MIT",
   "main": "lib/octuple.js",
   "types": "lib/octuple.d.ts",

diff --git a/src/components/Button/Button.test.tsx b/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();
+  });
 });
diff --git a/src/components/Button/__snapshots__/Button.test.tsx.snap b/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

diff --git a/src/components/Button/button.module.scss b/src/components/Button/button.module.scss
@@ -9,6 +9,7 @@
   transition: all $motion-duration-extra-fast $motion-easing-easeinout 0s;
   white-space: nowrap;
   position: relative;
+  z-index: 0;
 
   span:not(.inner-nudge):not(.split-divider) {
     position: relative;
@@ -428,17 +429,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;
   }
 }
 

diff --git a/src/components/Card/card.module.scss b/src/components/Card/card.module.scss
@@ -1,5 +1,5 @@
 .card {
-  background-color: --card-background-color;
+  background-color: var(--card-background-color);
   border-radius: var(--card-border-radius);
   color: var(--card-text-color);
   display: block;

diff --git a/src/components/DateTimePicker/DatePicker/Styles/partial.scss b/src/components/DateTimePicker/DatePicker/Styles/partial.scss
@@ -50,7 +50,7 @@ $picker-time-partial-cell-height: 28px;
       z-index: 1;
       border: $picker-border-width $picker-border-style
         $picker-border-color-active;
-      border-radius: 50%;
+      border-radius: var(--border-radius-round);
       content: '';
     }
   }

diff --git a/src/components/DateTimePicker/Internal/Partials/YearPartial/YearBody.tsx b/src/components/DateTimePicker/Internal/Partials/YearPartial/YearBody.tsx
@@ -6,6 +6,8 @@ import RangeContext from '../../RangeContext';
 import PartialBody from '../PartialBody';
 import { DatePickerSize } from '../../OcPicker.types';
 
+import styles from '../../ocpicker.module.scss';
+
 const YEAR_ROW_COUNT: number = 4;
 
 function YearBody<DateType>(props: YearBodyProps<DateType>) {
@@ -19,18 +21,18 @@ function YearBody<DateType>(props: YearBodyProps<DateType>) {
   const { rangedValue, hoverRangedValue } = React.useContext(RangeContext);
 
   const yearNumber: number = generateConfig.getYear(viewDate);
-  const startYear: number =
+  const startYearNumber: number =
     Math.floor(yearNumber / YEAR_DECADE_COUNT) * YEAR_DECADE_COUNT;
-  const endYear: number = startYear + YEAR_DECADE_COUNT - 1;
+  const endYear: number = startYearNumber + YEAR_DECADE_COUNT - 1;
   const baseYear: DateType = generateConfig.setYear(
     viewDate,
-    startYear -
+    startYearNumber -
       Math.ceil((YEAR_COL_COUNT * YEAR_ROW_COUNT - YEAR_DECADE_COUNT) / 2)
   );
 
   const isInView = (date: DateType): boolean => {
     const currentYearNumber: number = generateConfig.getYear(date);
-    return startYear <= currentYearNumber && currentYearNumber <= endYear;
+    return startYearNumber <= currentYearNumber && currentYearNumber <= endYear;
   };
 
   const getCellClassNames = useCellClassNames<DateType>({
@@ -43,6 +45,8 @@ function YearBody<DateType>(props: YearBodyProps<DateType>) {
     isInView,
     offsetCell: (date: DateType, offset: number) =>
       generateConfig.addYear(date, offset),
+    [styles.pickerCellInView]: isInView,
+    [styles.pickerCellSelected]: startYearNumber === yearNumber,
   });
 
   return (

diff --git a/src/components/Dropdown/dropdown.module.scss b/src/components/Dropdown/dropdown.module.scss
@@ -20,7 +20,7 @@
 }
 
 .dropdown-wrapper {
-  background: var(--background-color);
+  background: var(--dropdown-background-color);
   padding: $space-xs;
   box-shadow: $shadow-object-m;
   border-radius: $border-radius-xl;

diff --git a/src/components/Inputs/input.module.scss b/src/components/Inputs/input.module.scss
@@ -13,11 +13,11 @@
 
   input {
     @include text-overflow;
-    background-color: var(--background-color);
+    background-color: var(--input-background-color);
     border: 1px solid var(--input-border-color);
     border-radius: $border-radius-m;
     box-sizing: border-box;
-    color: var(--text-primary-color);
+    color: var(--input-text-color);
     font-family: $octuple-font-family;
     font-size: $text-font-size-3;
     line-height: $text-line-height-1;
@@ -28,6 +28,10 @@
       -webkit-appearance: none;
     }
 
+    &::placeholder {
+      color: var(--input-placeholder-text-color);
+    }
+
     &.with-icon,
     &.with-image-icon {
       padding: $space-xs $space-xl $space-xs $space-xxl;
@@ -140,8 +144,8 @@
     }
 
     &.read-only {
-      background-color: var(--grey-color-10);
-      color: var(--text-primary-color);
+      background-color: var(--input-readonly-background-color);
+      color: var(--input-readonly-text-color);
     }
 
     &:focus ~ .icon-button {
@@ -163,7 +167,7 @@
     }
 
     &:disabled::placeholder {
-      color: var(--text-primary-color);
+      color: var(--input-disabled-placeholder-text-color);
     }
 
     &.pill-shape {
@@ -290,25 +294,25 @@
     }
 
     &.status-success {
-      color: var(--text-primary-color);
-      border-color: var(--input-border-color);
+      color: var(--input-success-text-color);
+      border-color: var(--input-success-border-color);
     }
 
     &.status-warning {
-      color: var(--warning-color);
-      border-color: var(--warning-color);
+      color: var(--input-warning-text-color);
+      border-color: var(--input-warning-border-color);
 
       &::placeholder {
-        color: var(--warning-color);
+        color: var(--input-warning-placeholder-color);
       }
     }
 
     &.status-error {
-      color: var(--error-color);
-      border-color: var(--error-color);
+      color: var(--input-error-text-color);
+      border-color: var(--input-error-border-color);
 
       &::placeholder {
-        color: var(--error-color);
+        color: var(--input-error-placeholder-color);
       }
     }
 
@@ -957,11 +961,11 @@
   }
 
   .text-area {
-    background-color: var(--background-color);
+    background-color: var(--input-background-color);
     border: 1px solid var(--input-border-color);
     border-radius: $border-radius-m;
     box-sizing: border-box;
-    color: var(--text-primary-color);
+    color: var(--input-text-color);
     font-family: $octuple-font-family;
     font-size: $text-font-size-3;
     line-height: $text-line-height-4;
@@ -994,34 +998,34 @@
     }
 
     &.read-only {
-      background-color: var(--grey-color-10);
-      color: var(--text-primary-color);
+      background-color: var(--input-readonly-background-color);
+      color: var(--input-readonly-text-color);
     }
 
     &:hover:not([disabled]):not(.underline) {
       border-color: var(--input-border-color-hover);
     }
 
     &.status-success {
-      color: var(--text-primary-color);
-      border-color: var(--input-border-color);
+      color: var(--input-success-text-color);
+      border-color: var(--input-success-border-color);
     }
 
     &.status-warning {
-      color: var(--warning-color);
-      border-color: var(--warning-color);
+      color: var(--input-warning-text-color);
+      border-color: var(--input-warning-border-color);
 
       &::placeholder {
-        color: var(--warning-color);
+        color: var(--input-warning-text-color);
       }
     }
 
     &.status-error {
-      color: var(--error-color);
-      border-color: var(--error-color);
+      color: var(--input-error-text-color);
+      border-color: var(--input-error-border-color);
 
       &::placeholder {
-        color: var(--error-color);
+        color: var(--input-error-text-color);
       }
     }
 
@@ -1136,7 +1140,7 @@
 
       &.status-success {
         &:before {
-          border-color: var(--input-border-color);
+          border-color: var(--input-success-border-color);
         }
 
         &:after {
@@ -1152,32 +1156,32 @@
 
       &.status-warning {
         &:before {
-          border-color: var(--warning-color);
+          border-color: var(--input-warning-border-color);
         }
 
         &:after {
-          border-color: var(--warning-color);
+          border-color: var(--input-warning-border-color);
         }
 
         &:hover {
           &:before {
-            border-color: var(--warning-color);
+            border-color: var(--input-warning-border-color);
           }
         }
       }
 
       &.status-error {
         &:before {
-          border-color: var(--error-color);
+          border-color: var(--input-error-border-color);
         }
 
         &:after {
-          border-color: var(--error-color);
+          border-color: var(--input-error-border-color);
         }
 
         &:hover {
           &:before {
-            border-color: var(--error-color);
+            border-color: var(--input-error-border-color);
           }
         }
       }
@@ -1537,7 +1541,7 @@
     input {
       &.focus-visible,
       &:focus-visible {
-        border-color: var(--background-color);
+        border-color: var(--input-background-color);
         box-shadow: var(--focus-visible-box-shadow);
 
         &.underline {
@@ -1583,7 +1587,7 @@
     .text-area {
       &.focus-visible,
       &:focus-visible {
-        border-color: var(--background-color);
+        border-color: var(--input-background-color);
         box-shadow: var(--focus-visible-box-shadow);
 
         &.underline {