Address review comments

cerner · Oct 23, 2023 · c164eb3 · c164eb3
1 parent f21f38e
commit c164eb3
Show file tree

Hide file tree

Showing 43 changed files with 16 additions and 17 deletions.
diff --git a/packages/terra-slider/package.json b/packages/terra-slider/package.json
@@ -29,7 +29,6 @@
   },
   "dependencies": {
     "classnames": "^2.2.5",
-    "keycode-js": "^3.1.0",
     "prop-types": "^15.5.8",
     "terra-theme-context": "^1.8.0",
     "uuid": "3.4.0",

diff --git a/packages/terra-slider/src/Slider.jsx b/packages/terra-slider/src/Slider.jsx
@@ -52,7 +52,7 @@ const propTypes = {
 
 const defaultProps = {
   isDisabled: false,
-  onChange: null,
+  onChange: undefined,
 };
 
 class Slider extends React.Component {
@@ -100,7 +100,7 @@ class Slider extends React.Component {
 
     const minLabel = minimumLabel || minimumValue;
     const maxLabel = maximumLabel || maximumValue;
-    const VisuallyHiddenTextValue = (minimumLabel || maximumLabel)
+    const visuallyHiddenTextValue = (minimumLabel || maximumLabel)
       ? `Adjust slider to select a value between ${minimumLabel} (${minimumValue}) and ${maximumLabel} (${maximumValue})`
       : `Adjust slider to select a value between ${minimumValue} and ${maximumValue}`;
     const descriptionId = uuidv4();
@@ -118,7 +118,7 @@ class Slider extends React.Component {
         <span className={cx('slider-label', 'slider-max-label')} aria-hidden="true">
           {maxLabel}
         </span>
-        <VisuallyHiddenText id={descriptionId} text={VisuallyHiddenTextValue} />
+        <VisuallyHiddenText id={descriptionId} text={visuallyHiddenTextValue} />
       </div>
     );
   }

diff --git a/packages/terra-slider/src/Slider.module.scss b/packages/terra-slider/src/Slider.module.scss
@@ -39,14 +39,20 @@
   .input-range {
     -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix, plugin/no-unsupported-browser-features */
     background-color: transparent;
+    cursor: pointer;
     margin-left: var(--terra-slider-input-range-margin-left, 0.5rem);
     margin-right: var(--terra-slider-input-range-margin-right, 0.5rem);
-    min-height: 3.143rem;
-    min-width: 17.143rem;
-    width: 70%;
+    min-height: var(--terra-slider-input-range-min-height, 3.143rem);
+    min-width: var(--terra-slider-input-range-min-width, 17.143rem);
+    width: var(--terra-slider-input-range-width, 70%);
 
     &:disabled {
-      opacity: 30%;
+      cursor: default;
+      opacity: var(--terra-slider-input-range-disabled-opacity, 30%);
+    }
+
+    &:focus {
+      outline: none;
     }
   }
 
@@ -66,15 +72,14 @@
     border-style: solid;
     border-width: var(--terra-slider-thumb-border-width, 0.071rem);
     box-shadow: var(--terra-slider-thumb-box-shadow, 0 0 0.286rem 0 rgba(0, 0, 0, 0.25));
-    cursor: pointer;
     height: var(--terra-slider-thumb-height, 1.715rem);
     margin-top: -0.57rem;
     width: var(--terra-slider-thumb-width, 1.715rem);
   }
 
   .input-range:focus::-webkit-slider-thumb {
     outline: var(--terra-slider-thumb-focus-outline, 0.143rem dashed #000);
-    outline-offset: 0.072rem;
+    outline-offset: var(--terra-slider-thumb-focus-outline-offset, 0.071rem);
   }
 
   .input-range:hover::-webkit-slider-thumb {
@@ -98,7 +103,6 @@
   .input-range:disabled::-webkit-slider-thumb {
     -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix, plugin/no-unsupported-browser-features */
     background: var(--terra-slider-thumb-disabled-background, #007cc3);
-    cursor: default;
   }
 
   /* For IE/Edge */
@@ -117,15 +121,14 @@
     border-style: solid;
     border-width: var(--terra-slider-thumb-border-width, 0.071rem);
     box-shadow: var(--terra-slider-thumb-box-shadow, 0 0 0.286rem 0 rgba(0, 0, 0, 0.25));
-    cursor: pointer;
     height: var(--terra-slider-thumb-height, 1.715rem);
     margin-top: -0.57rem;
     width: var(--terra-slider-thumb-width, 1.715rem);
   }
 
   .input-range:focus::-ms-thumb {
     outline: var(--terra-slider-thumb-focus-outline, 0.143rem dashed #000);
-    outline-offset: 0.071rem;
+    outline-offset: var(--terra-slider-thumb-focus-outline-offset, 0.071rem);
   }
 
   .input-range:hover::-ms-thumb {
@@ -148,7 +151,6 @@
   .input-range:disabled::-ms-thumb {
     -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix, plugin/no-unsupported-browser-features */
     background: var(--terra-slider-thumb-disabled-background, #007cc3);
-    cursor: default;
   }
 
   /* For Firefox */
@@ -167,15 +169,14 @@
     border-style: solid;
     border-width: var(--terra-slider-thumb-border-width, 0.071rem);
     box-shadow: var(--terra-slider-thumb-box-shadow, 0 0 0.286rem 0 rgba(0, 0, 0, 0.25));
-    cursor: pointer;
     height: var(--terra-slider-thumb-height, 1.715rem);
     margin-top: -0.57rem;
     width: var(--terra-slider-thumb-width, 1.715rem);
   }
 
   .input-range:focus::-moz-range-thumb {
     outline: var(--terra-slider-thumb-focus-outline, 0.143rem dashed #000);
-    outline-offset: 0.071rem;
+    outline-offset: var(--terra-slider-thumb-focus-outline-offset, 0.071rem);
   }
 
   .input-range:hover::-moz-range-thumb {
@@ -198,6 +199,5 @@
   .input-range:disabled::-moz-range-thumb {
     -moz-appearance: none; /* stylelint-disable-line property-no-vendor-prefix, plugin/no-unsupported-browser-features */
     background: var(--terra-slider-thumb-disabled-background, #007cc3);
-    cursor: default;
   }
 }
diff --git a/...rence/clinical-lowlight-theme/en/chrome_large/slider-spec/higher-arrowRight.png b/...rence/clinical-lowlight-theme/en/chrome_large/slider-spec/higher-arrowRight.png
diff --git a/...eference/clinical-lowlight-theme/en/chrome_large/slider-spec/higher-arrowUp.png b/...eference/clinical-lowlight-theme/en/chrome_large/slider-spec/higher-arrowUp.png
diff --git a/...eference/clinical-lowlight-theme/en/chrome_large/slider-spec/keyboard-focus.png b/...eference/clinical-lowlight-theme/en/chrome_large/slider-spec/keyboard-focus.png
diff --git a/...ference/clinical-lowlight-theme/en/chrome_large/slider-spec/lower-arrowDown.png b/...ference/clinical-lowlight-theme/en/chrome_large/slider-spec/lower-arrowDown.png
diff --git a/...ference/clinical-lowlight-theme/en/chrome_large/slider-spec/lower-arrowLeft.png b/...ference/clinical-lowlight-theme/en/chrome_large/slider-spec/lower-arrowLeft.png
diff --git a/..._/reference/clinical-lowlight-theme/en/chrome_large/slider-spec/mouse-focus.png b/..._/reference/clinical-lowlight-theme/en/chrome_large/slider-spec/mouse-focus.png
diff --git a/...inical-lowlight-theme/en/chrome_large/slider-spec/on-change-callback-update.png b/...inical-lowlight-theme/en/chrome_large/slider-spec/on-change-callback-update.png
diff --git a/...ence/clinical-lowlight-theme/en/chrome_medium/slider-spec/higher-arrowRight.png b/...ence/clinical-lowlight-theme/en/chrome_medium/slider-spec/higher-arrowRight.png
diff --git a/...ference/clinical-lowlight-theme/en/chrome_medium/slider-spec/higher-arrowUp.png b/...ference/clinical-lowlight-theme/en/chrome_medium/slider-spec/higher-arrowUp.png
diff --git a/...ference/clinical-lowlight-theme/en/chrome_medium/slider-spec/keyboard-focus.png b/...ference/clinical-lowlight-theme/en/chrome_medium/slider-spec/keyboard-focus.png
diff --git a/...erence/clinical-lowlight-theme/en/chrome_medium/slider-spec/lower-arrowDown.png b/...erence/clinical-lowlight-theme/en/chrome_medium/slider-spec/lower-arrowDown.png
diff --git a/...erence/clinical-lowlight-theme/en/chrome_medium/slider-spec/lower-arrowLeft.png b/...erence/clinical-lowlight-theme/en/chrome_medium/slider-spec/lower-arrowLeft.png
diff --git a/.../reference/clinical-lowlight-theme/en/chrome_medium/slider-spec/mouse-focus.png b/.../reference/clinical-lowlight-theme/en/chrome_medium/slider-spec/mouse-focus.png
diff --git a/...nical-lowlight-theme/en/chrome_medium/slider-spec/on-change-callback-update.png b/...nical-lowlight-theme/en/chrome_medium/slider-spec/on-change-callback-update.png
diff --git a/.../reference/orion-fusion-theme/en/chrome_large/slider-spec/higher-arrowRight.png b/.../reference/orion-fusion-theme/en/chrome_large/slider-spec/higher-arrowRight.png
diff --git a/...s__/reference/orion-fusion-theme/en/chrome_large/slider-spec/higher-arrowUp.png b/...s__/reference/orion-fusion-theme/en/chrome_large/slider-spec/higher-arrowUp.png
diff --git a/...s__/reference/orion-fusion-theme/en/chrome_large/slider-spec/keyboard-focus.png b/...s__/reference/orion-fusion-theme/en/chrome_large/slider-spec/keyboard-focus.png
diff --git a/...__/reference/orion-fusion-theme/en/chrome_large/slider-spec/lower-arrowDown.png b/...__/reference/orion-fusion-theme/en/chrome_large/slider-spec/lower-arrowDown.png
diff --git a/...__/reference/orion-fusion-theme/en/chrome_large/slider-spec/lower-arrowLeft.png b/...__/reference/orion-fusion-theme/en/chrome_large/slider-spec/lower-arrowLeft.png
diff --git a/...ce/orion-fusion-theme/en/chrome_large/slider-spec/on-change-callback-update.png b/...ce/orion-fusion-theme/en/chrome_large/slider-spec/on-change-callback-update.png
diff --git a/...reference/orion-fusion-theme/en/chrome_medium/slider-spec/higher-arrowRight.png b/...reference/orion-fusion-theme/en/chrome_medium/slider-spec/higher-arrowRight.png
diff --git a/...__/reference/orion-fusion-theme/en/chrome_medium/slider-spec/higher-arrowUp.png b/...__/reference/orion-fusion-theme/en/chrome_medium/slider-spec/higher-arrowUp.png
diff --git a/...__/reference/orion-fusion-theme/en/chrome_medium/slider-spec/keyboard-focus.png b/...__/reference/orion-fusion-theme/en/chrome_medium/slider-spec/keyboard-focus.png
diff --git a/..._/reference/orion-fusion-theme/en/chrome_medium/slider-spec/lower-arrowDown.png b/..._/reference/orion-fusion-theme/en/chrome_medium/slider-spec/lower-arrowDown.png
diff --git a/..._/reference/orion-fusion-theme/en/chrome_medium/slider-spec/lower-arrowLeft.png b/..._/reference/orion-fusion-theme/en/chrome_medium/slider-spec/lower-arrowLeft.png
diff --git a/...e/orion-fusion-theme/en/chrome_medium/slider-spec/on-change-callback-update.png b/...e/orion-fusion-theme/en/chrome_medium/slider-spec/on-change-callback-update.png
diff --git a/...reference/terra-default-theme/en/chrome_large/slider-spec/higher-arrowRight.png b/...reference/terra-default-theme/en/chrome_large/slider-spec/higher-arrowRight.png
diff --git a/...__/reference/terra-default-theme/en/chrome_large/slider-spec/higher-arrowUp.png b/...__/reference/terra-default-theme/en/chrome_large/slider-spec/higher-arrowUp.png
diff --git a/...__/reference/terra-default-theme/en/chrome_large/slider-spec/keyboard-focus.png b/...__/reference/terra-default-theme/en/chrome_large/slider-spec/keyboard-focus.png
diff --git a/..._/reference/terra-default-theme/en/chrome_large/slider-spec/lower-arrowDown.png b/..._/reference/terra-default-theme/en/chrome_large/slider-spec/lower-arrowDown.png
diff --git a/..._/reference/terra-default-theme/en/chrome_large/slider-spec/lower-arrowLeft.png b/..._/reference/terra-default-theme/en/chrome_large/slider-spec/lower-arrowLeft.png
diff --git a/...ots__/reference/terra-default-theme/en/chrome_large/slider-spec/mouse-focus.png b/...ots__/reference/terra-default-theme/en/chrome_large/slider-spec/mouse-focus.png
diff --git a/...e/terra-default-theme/en/chrome_large/slider-spec/on-change-callback-update.png b/...e/terra-default-theme/en/chrome_large/slider-spec/on-change-callback-update.png
diff --git a/...eference/terra-default-theme/en/chrome_medium/slider-spec/higher-arrowRight.png b/...eference/terra-default-theme/en/chrome_medium/slider-spec/higher-arrowRight.png
diff --git a/..._/reference/terra-default-theme/en/chrome_medium/slider-spec/higher-arrowUp.png b/..._/reference/terra-default-theme/en/chrome_medium/slider-spec/higher-arrowUp.png
diff --git a/..._/reference/terra-default-theme/en/chrome_medium/slider-spec/keyboard-focus.png b/..._/reference/terra-default-theme/en/chrome_medium/slider-spec/keyboard-focus.png
diff --git a/.../reference/terra-default-theme/en/chrome_medium/slider-spec/lower-arrowDown.png b/.../reference/terra-default-theme/en/chrome_medium/slider-spec/lower-arrowDown.png
diff --git a/.../reference/terra-default-theme/en/chrome_medium/slider-spec/lower-arrowLeft.png b/.../reference/terra-default-theme/en/chrome_medium/slider-spec/lower-arrowLeft.png
diff --git a/...ts__/reference/terra-default-theme/en/chrome_medium/slider-spec/mouse-focus.png b/...ts__/reference/terra-default-theme/en/chrome_medium/slider-spec/mouse-focus.png
diff --git a/.../terra-default-theme/en/chrome_medium/slider-spec/on-change-callback-update.png b/.../terra-default-theme/en/chrome_medium/slider-spec/on-change-callback-update.png