Merge branch 'main' into fix/slider-label

carbon-design-system · Dec 9, 2021 · 3b19d44 · 3b19d44
2 parents 9296d97 + 82039e4
commit 3b19d44
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 26 deletions.
diff --git a/packages/react/src/components/Search/next/Search.stories.js b/packages/react/src/components/Search/next/Search.stories.js
@@ -23,6 +23,19 @@ export const Default = () => (
   />
 );
 
+export const Disabled = () => (
+  <Search
+    disabled
+    size="lg"
+    defaultValue="A default value"
+    labelText="Search"
+    closeButtonLabelText="Clear search input"
+    id="search-1"
+    onChange={() => {}}
+    onKeyDown={() => {}}
+  />
+);
+
 export const Expandable = () => (
   <ExpandableSearch
     size="lg"

diff --git a/packages/react/src/components/Tooltip/Tooltip-story.js b/packages/react/src/components/Tooltip/Tooltip-story.js
@@ -161,8 +161,8 @@ export default {
 
 export const DefaultBottom = () => (
   <div style={containerStyles}>
-    <Tooltip {...props.withIcon()} tooltipBodyId="tooltip-body">
-      <p id="tooltip-body">
+    <Tooltip {...props.withIcon()}>
+      <p>
         This is some tooltip text. This box shows the maximum amount of text
         that should appear inside. If more room is needed please use a modal
         instead.

diff --git a/packages/react/src/components/Tooltip/Tooltip.js b/packages/react/src/components/Tooltip/Tooltip.js
@@ -671,7 +671,9 @@ class Tooltip extends Component {
                 className={`${prefix}--tooltip__trigger`}
                 {...properties}
                 ref={refProp}
-                aria-describedby={tooltipBodyId}>
+                aria-describedby={
+                  tooltipBodyId || properties['aria-describedby']
+                }>
                 <IconCustomElement {...iconProperties} />
               </div>
             </div>
@@ -681,7 +683,9 @@ class Tooltip extends Component {
               className={triggerClasses}
               ref={refProp}
               {...properties}
-              aria-describedby={tooltipBodyId}>
+              aria-describedby={
+                tooltipBodyId || properties['aria-describedby']
+              }>
               {triggerText}
             </div>
           )}

diff --git a/packages/styles/scss/components/button/_tokens.scss b/packages/styles/scss/components/button/_tokens.scss
@@ -330,11 +330,11 @@ $button-disabled: (
     ),
     (
       theme: themes.$g90,
-      value: #6f6f6f,
+      value: rgba(141, 141, 141, 0.3),
     ),
     (
       theme: themes.$g100,
-      value: #525252,
+      value: rgba(141, 141, 141, 0.3),
     ),
   ),
 ) !default;

diff --git a/packages/themes/src/next/g10.js b/packages/themes/src/next/g10.js
@@ -39,7 +39,7 @@ import {
   white,
   whiteHover,
 } from '@carbon/colors';
-import { adjustLightness } from '../tools';
+import { adjustLightness, adjustAlpha } from '../tools';
 
 // Background
 export const background = gray10;
@@ -137,18 +137,18 @@ export const borderInverse = gray100;
 export const borderInteractive = blue60;
 
 // border
-export const borderDisabled = white;
+export const borderDisabled = gray30;
 
 // Text
 export const textPrimary = gray100;
 export const textSecondary = gray70;
-export const textPlaceholder = gray40;
+export const textPlaceholder = adjustAlpha(textPrimary, 0.4);
 export const textHelper = gray60;
 export const textError = red60;
 export const textInverse = white;
 export const textOnColor = white;
 export const textOnColorDisabled = gray50;
-export const textDisabled = gray30;
+export const textDisabled = adjustAlpha(textPrimary, 0.25);
 
 // Link
 export const linkPrimary = blue60;

diff --git a/packages/themes/src/next/g100.js b/packages/themes/src/next/g100.js
@@ -46,7 +46,7 @@ import {
   // Tools
   rgba,
 } from '@carbon/colors';
-import { adjustLightness } from '../tools';
+import { adjustLightness, adjustAlpha } from '../tools';
 
 // Background
 export const background = gray100;
@@ -144,18 +144,18 @@ export const borderInverse = gray10;
 export const borderInteractive = blue50;
 
 // border
-export const borderDisabled = gray90;
+export const borderDisabled = adjustAlpha(gray50, 0.5);
 
 // Text
 export const textPrimary = gray10;
 export const textSecondary = gray30;
-export const textPlaceholder = gray60;
+export const textPlaceholder = adjustAlpha(textPrimary, 0.4);
 export const textHelper = gray40;
 export const textError = red30;
 export const textInverse = gray100;
 export const textOnColor = white;
-export const textOnColorDisabled = gray40;
-export const textDisabled = gray70;
+export const textOnColorDisabled = adjustAlpha(textOnColor, 0.25);
+export const textDisabled = adjustAlpha(textPrimary, 0.25);
 
 // Link
 export const linkPrimary = blue40;
@@ -169,7 +169,7 @@ export const iconPrimary = gray10;
 export const iconSecondary = gray30;
 export const iconInverse = gray100;
 export const iconOnColor = white;
-export const iconOnColorDisabled = gray40;
+export const iconOnColorDisabled = adjustAlpha(iconOnColor, 0.25);
 export const iconDisabled = gray70;
 
 // Support

diff --git a/packages/themes/src/next/g90.js b/packages/themes/src/next/g90.js
@@ -45,7 +45,7 @@ import {
   // Tools
   rgba,
 } from '@carbon/colors';
-import { adjustLightness } from '../tools';
+import { adjustLightness, adjustAlpha } from '../tools';
 
 // Background
 export const background = gray90;
@@ -143,18 +143,18 @@ export const borderInverse = gray10;
 export const borderInteractive = blue50;
 
 // border
-export const borderDisabled = gray80;
+export const borderDisabled = adjustAlpha(gray50, 0.5);
 
 // Text
 export const textPrimary = gray10;
 export const textSecondary = gray30;
-export const textPlaceholder = gray50;
+export const textPlaceholder = adjustAlpha(textPrimary, 0.4);
 export const textHelper = gray30;
 export const textError = red30;
 export const textInverse = gray100;
 export const textOnColor = white;
-export const textOnColorDisabled = gray40;
-export const textDisabled = gray60;
+export const textOnColorDisabled = adjustAlpha(textOnColor, 0.25);
+export const textDisabled = adjustAlpha(textPrimary, 0.25);
 
 // Link
 export const linkPrimary = blue40;
@@ -168,7 +168,7 @@ export const iconPrimary = gray10;
 export const iconSecondary = gray30;
 export const iconInverse = gray100;
 export const iconOnColor = white;
-export const iconOnColorDisabled = gray40;
+export const iconOnColorDisabled = adjustAlpha(iconOnColor, 0.25);
 export const iconDisabled = gray60;
 
 // Support

diff --git a/packages/themes/src/next/white.js b/packages/themes/src/next/white.js
@@ -38,7 +38,7 @@ import {
   white,
   whiteHover,
 } from '@carbon/colors';
-import { adjustLightness } from '../tools';
+import { adjustLightness, adjustAlpha } from '../tools';
 
 // Background
 export const background = white;
@@ -136,18 +136,18 @@ export const borderInverse = gray100;
 export const borderInteractive = blue60;
 
 // border
-export const borderDisabled = gray10;
+export const borderDisabled = gray30;
 
 // Text
 export const textPrimary = gray100;
 export const textSecondary = gray70;
-export const textPlaceholder = gray40;
+export const textPlaceholder = adjustAlpha(textPrimary, 0.4);
 export const textHelper = gray60;
 export const textError = red60;
 export const textInverse = white;
 export const textOnColor = white;
 export const textOnColorDisabled = gray50;
-export const textDisabled = gray30;
+export const textDisabled = adjustAlpha(textPrimary, 0.25);
 
 // Link
 export const linkPrimary = blue60;

diff --git a/packages/themes/src/tools.js b/packages/themes/src/tools.js
@@ -23,3 +23,15 @@ export function adjustLightness(token, shift) {
     .hex()
     .toLowerCase();
 }
+
+/**
+ * Adjust a given token's alpha by a specified amount
+ * Example: token = rgba(10, 10, 10, 1.0);
+ * adjustAlpha(token, 0.3) === rgba(10, 10, 10, 0.3);
+ * @param {string} token
+ * @param {float} alpha
+ * @returns {string}
+ */
+export function adjustAlpha(token, alpha) {
+  return Color(token).rgb().alpha(alpha).string();
+}