fix(cc): no classes styling the same CSS properties are set on one el…

…ement (#274) BREAKING CHANGE: Expandable info prop has been removed
warp-ds · Aug 13, 2024 · 694c156 · 694c156
1 parent 56c4d64
commit 694c156
Show file tree

Hide file tree

Showing 105 changed files with 2,223 additions and 1,888 deletions.
diff --git a/lingui.config.ts b/lingui.config.ts
@@ -50,6 +50,10 @@ const config: LinguiConfig = {
  include: ['packages/attention/src/**/*.{ts,tsx}'],
  path: 'packages/attention/src/locales/{locale}/messages',
  },
+ {
+ include: ['packages/_helpers/attention.tsx'],
+ path: 'packages/attention/src/locales/{locale}/messages',
+ },
  {
  include: ['packages/pagination/src/**/*.{ts,tsx}'],
  path: 'packages/pagination/src/locales/{locale}/messages',

diff --git a/package.json b/package.json
@@ -54,7 +54,7 @@
  "access": "public"
  },
  "peerDependencies": {
- "@warp-ds/css": "2.0.0-next.4",
+ "@warp-ds/css": "2.0.0",
  "react": "18.x"
  },
  "scripts": {
@@ -137,7 +137,7 @@
  "@chbphone55/classnames": "2.0.0",
  "@lingui/core": "4.11.2",
  "@warp-ds/core": "1.1.5",
- "@warp-ds/css": "2.0.0-next.4",
+ "@warp-ds/css": "2.0.0",
  "@warp-ds/icons": "2.0.2",
  "react-focus-lock": "2.12.1",
  "resize-observer-polyfill": "1.5.1",

diff --git a/packages/_helpers/affix.tsx b/packages/_helpers/affix.tsx
@@ -37,11 +37,7 @@ export function Affix(props: AffixProps) {
  'aria-label': !props.label ? props['aria-label'] : undefined,
  type: props.search ? 'submit' : props.clear ? 'reset' : undefined,
  onClick: props.onClick,
- className: classNames({
- [classBase.wrapper]: true,
- [classBase.wrapperWithLabel]: props.label,
- [classBase.wrapperWithIcon]: !props.label,
- }),
+ className: classNames([classBase.wrapper, props.label ? classBase.wrapperWithLabel : classBase.wrapperWithIcon]),
  },
  <>
  {props.clear && <IconClose16 />}

diff --git a/packages/_helpers/attention.tsx b/packages/_helpers/attention.tsx
@@ -4,7 +4,14 @@ import { i18n } from '@lingui/core';
 import { autoUpdatePosition, opposites } from '@warp-ds/core/attention';
 import type { AttentionState, Directions } from '@warp-ds/core/attention';
 
+import { messages as daMessages } from '../attention/src/locales/da/messages.mjs';
+import { messages as enMessages } from '../attention/src/locales/en/messages.mjs';
+import { messages as fiMessages } from '../attention/src/locales/fi/messages.mjs';
+import { messages as nbMessages } from '../attention/src/locales/nb/messages.mjs';
 import type { AttentionProps, AttentionVariants, ReferenceElement } from '../attention/src/props.js';
+import { activateI18n } from '../i18n.js';
+
+activateI18n(enMessages, nbMessages, fiMessages, daMessages);
 
 export const getVariant = (variantProps: AttentionVariants, variantClasses: any) =>
  Object.keys(variantClasses).find((b) => !!variantProps[b]) || '';

diff --git a/packages/_helpers/clickable.tsx b/packages/_helpers/clickable.tsx
@@ -65,7 +65,7 @@ export function Clickable({ children, radio, checkbox, value, ...props }: Clicka
  props.href ? 'a' : 'button',
  {
  ...props,
- className: classNames(ccClickable.buttonOrLink, props.className),
+ className: classNames(props.className, ccClickable.buttonOrLink),
  type: props.href ? undefined : props.type || 'button',
  },
  <>

diff --git a/packages/_helpers/dead-toggle.tsx b/packages/_helpers/dead-toggle.tsx
@@ -50,10 +50,10 @@ export function DeadToggle(props: DeadToggleProps) {
  <Item
  type={type}
  inputClassName={ccDeadToggle.input}
- labelClassName={classNames(props.labelClassName, {
- [ccDeadToggle.labelRadio]: props.radio,
- [ccDeadToggle.labelCheckbox]: props.checkbox,
- })}
+ labelClassName={classNames(props.labelClassName, [
+ props.radio && ccDeadToggle.labelRadio,
+ props.checkbox && ccDeadToggle.labelCheckbox,
+ ])}
  name={props.name ? `${props.name}:dead-toggle` : 'dead-toggle'}
  controlled={true}
  onChange={() => undefined}

diff --git a/packages/_helpers/help-text.tsx b/packages/_helpers/help-text.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { classNames } from '@chbphone55/classnames';
+import { helpText as ccHelpText } from '@warp-ds/css/component-classes';
+
+interface HelpTextProps {
+ /** Id for helpText */
+ helpId?: string;
+
+ /** The content to display as the help text. */
+ helpText?: React.ReactNode;
+
+ /** Whether to display the helpText in an invalid or valid state */
+ isInvalid?: boolean;
+}
+
+export function HelpText(props: HelpTextProps) {
+ const helpTextClasses = classNames([ccHelpText.base, props.isInvalid ? ccHelpText.colorInvalid : ccHelpText.color]);
+
+ return (
+ <div id={props.helpId} className={helpTextClasses}>
+ {props.helpText}
+ </div>
+ );
+}
diff --git a/packages/_helpers/index.ts b/packages/_helpers/index.ts
@@ -1,5 +1,6 @@
+export { Affix } from './affix.js';
 export { Clickable } from './clickable.js';
 export { DeadToggle } from './dead-toggle.js';
-export { Affix } from './affix.js';
 export { ExpandTransition } from './expand-transition.js';
+export { HelpText } from './help-text.js';
 export { UnstyledHeading } from './unstyled-heading.js';
diff --git a/packages/alert/src/component.tsx b/packages/alert/src/component.tsx
@@ -17,8 +17,8 @@ export function Alert({ show, type, role = 'alert', children, ...props }: PropsW
 
  return (
  <ExpandTransition show={show}>
- <div role={role} className={classNames(props.className, `${ccAlert.alert} ${variantClasses}`)} style={props.style}>
- <div className={`${ccAlert.icon} ${iconVariantClasses}`}>{iconMap[type]}</div>
+ <div role={role} className={classNames(props.className, [ccAlert.wrapper, variantClasses])} style={props.style}>
+ <div className={classNames([ccAlert.icon, iconVariantClasses])}>{iconMap[type]}</div>
  <div className={ccAlert.textWrapper}>{children}</div>
  </div>
  </ExpandTransition>

diff --git a/packages/attention/src/component.tsx b/packages/attention/src/component.tsx
@@ -56,8 +56,6 @@ export function Attention(props: AttentionProps) {
 
  activateI18n(enMessages, nbMessages, fiMessages, daMessages);
 
- const wrapperClasses = classNames(ccAttention.base, variantClasses[getVariant(rest, variantClasses)].wrapper);
-
  const [actualDirection, setActualDirection] = useState(placement);
  // Don't show attention element before its position is computed on first render
  const [isVisible, setIsVisible] = useState<boolean | undefined>(false);
@@ -134,6 +132,16 @@ export function Attention(props: AttentionProps) {
 
  const defaultAriaLabel = () => `${activeAttentionType(props)} ${!props.noArrow ? pointingAtDirection(actualDirection) : ''}`;
 
+ const containerClasses = classNames(className, [
+ !props.callout && ccAttention.notCallout,
+ {
+ invisible: !isVisible && !props.callout,
+ hidden: !isVisible && !props.tooltip,
+ },
+ ]);
+
+ const wrapperClasses = classNames([ccAttention.base, variantClasses[getVariant(rest, variantClasses)].wrapper]);
+
  useEffect(() => {
  // targetEl can be undefined if props.callout is true.
  // However, useAutoUpdatePosition hook is using @warp-ds/core, which uses Floating-ui's computePosition(). Floating-ui's computePosition() requires a defined targetEl to be able to compute the attentionEl's position and the attentionEl's arrow position.
@@ -164,17 +172,7 @@ export function Attention(props: AttentionProps) {
  useAutoUpdatePosition(targetElRef, isShowing, attentionEl, attentionState);
 
  return !props.callout && initialTargetEl === undefined ? null : (
- <div
- data-testid="attention-el"
- className={classNames(
- {
- [ccAttention.notCallout]: !props.callout,
- invisible: !isVisible && !props.callout,
- hidden: !isVisible && !props.tooltip,
- },
- className,
- )}
- ref={attentionEl}>
+ <div data-testid="attention-el" className={containerClasses} ref={attentionEl}>
  <div
  role={props.role === '' ? undefined : props.tooltip ? 'tooltip' : 'img'}
  aria-label={ariaLabel === '' ? undefined : ariaLabel ?? defaultAriaLabel()}
@@ -185,13 +183,11 @@ export function Attention(props: AttentionProps) {
  {canClose && (
  <button
  type="button"
- aria-label={i18n._(
- /*i18n*/ {
- id: 'attention.aria.close',
- message: 'Close',
- comment: 'Aria label for the close button in attention',
- },
- )}
+ aria-label={i18n._({
+ id: 'attention.aria.close',
+ message: 'Close',
+ comment: 'Aria label for the close button in attention',
+ })}
  onClick={onDismiss}
  onKeyDown={(event) => {
  if (!props.onDismiss) return;
@@ -210,11 +206,11 @@ export function Attention(props: AttentionProps) {
 
 const Arrow = forwardRef<HTMLDivElement, ArrowProps>(({ direction, ...rest }, ref) => {
  const arrowDirection = opposites[direction];
- const arrowClasses = classNames(
+ const arrowClasses = classNames([
  ccAttention.arrowBase,
  ccAttention[`arrowDirection${arrowDirectionClassname(arrowDirection)}`],
  variantClasses[getVariant(rest, variantClasses)].arrow,
- );
+ ]);
 
  return <div data-testid="attention-arrow-el" ref={ref} className={arrowClasses} />;
 });
diff --git a/packages/attention/src/locales/da/messages.mjs b/packages/attention/src/locales/da/messages.mjs
@@ -1 +1 @@
-/*eslint-disable*/export const messages=JSON.parse("{\"attention.aria.callout\":\"En grøn taleboble der introducerer noget nyt\",\"attention.aria.close\":\"Luk\",\"attention.aria.highlight\":\"En opmærksomhedsskabende taleboble med vigtig information\",\"attention.aria.pointingDown\":\"peger nedad\",\"attention.aria.pointingLeft\":\"peger til venstre\",\"attention.aria.pointingRight\":\"peger til højre\",\"attention.aria.pointingUp\":\"peger opad\",\"attention.aria.popover\":\"En hvid taleboble med mere information\",\"attention.aria.tooltip\":\"En sort taleboble med flere oplysninger\"}");
+/*eslint-disable*/export const messages=JSON.parse("{\"attention.aria.close\":\"Luk\",\"attention.aria.callout\":\"En grøn taleboble der introducerer noget nyt\",\"attention.aria.highlight\":\"En opmærksomhedsskabende taleboble med vigtig information\",\"attention.aria.pointingDown\":\"peger nedad\",\"attention.aria.pointingLeft\":\"peger til venstre\",\"attention.aria.pointingRight\":\"peger til højre\",\"attention.aria.pointingUp\":\"peger opad\",\"attention.aria.popover\":\"En hvid taleboble med mere information\",\"attention.aria.tooltip\":\"En sort taleboble med flere oplysninger\"}");
diff --git a/packages/attention/src/locales/da/messages.po b/packages/attention/src/locales/da/messages.po
@@ -15,58 +15,58 @@ msgstr ""
 "X-Crowdin-Project-ID: 141\n"
 "X-Crowdin-Language: da\n"
 "X-Crowdin-File-ID: 12398\n"
+"PO-Revision-Date: \n"
+
+#. Aria label for the close button in attention
+#. js-lingui-explicit-id
+#: packages/attention/src/component.tsx:186
+#~ msgid "attention.aria.close"
+#~ msgstr "Luk"
 
 #. Default screenreader message for callout speech bubble in the attention component
 #. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:150
+#: packages/_helpers/attention.tsx:66
 msgid "attention.aria.callout"
 msgstr "En grøn taleboble der introducerer noget nyt"
 
-#. Aria label for the close button in attention
-#. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:225
-msgid "attention.aria.close"
-msgstr "Luk"
-
 #. Default screenreader message for highlighted speech bubble in the attention component
 #. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:164
+#: packages/_helpers/attention.tsx:78
 msgid "attention.aria.highlight"
 msgstr "En opmærksomhedsskabende taleboble med vigtig information"
 
 #. Default screenreader message for bottom direction in the attention component
 #. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:121
+#: packages/_helpers/attention.tsx:39
 msgid "attention.aria.pointingDown"
 msgstr "peger nedad"
 
 #. Default screenreader message for left direction in the attention component
 #. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:128
+#: packages/_helpers/attention.tsx:47
 msgid "attention.aria.pointingLeft"
 msgstr "peger til venstre"
 
 #. Default screenreader message for right direction in the attention component
 #. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:114
+#: packages/_helpers/attention.tsx:31
 msgid "attention.aria.pointingRight"
 msgstr "peger til højre"
 
 #. Default screenreader message for top direction in the attention component
 #. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:107
+#: packages/_helpers/attention.tsx:23
 msgid "attention.aria.pointingUp"
 msgstr "peger opad"
 
 #. Default screenreader message for popover speech bubble in the attention component
 #. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:157
+#: packages/_helpers/attention.tsx:72
 msgid "attention.aria.popover"
 msgstr "En hvid taleboble med mere information"
 
 #. Default screenreader message for tooltip in the attention component
 #. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:143
+#: packages/_helpers/attention.tsx:60
 msgid "attention.aria.tooltip"
 msgstr "En sort taleboble med flere oplysninger"
-
diff --git a/packages/attention/src/locales/en/messages.mjs b/packages/attention/src/locales/en/messages.mjs
@@ -1 +1 @@
-/*eslint-disable*/export const messages=JSON.parse("{\"attention.aria.callout\":\"A green speech bubble introducing something new\",\"attention.aria.close\":\"Close\",\"attention.aria.highlight\":\"An attention speech bubble with important information\",\"attention.aria.pointingDown\":\"pointing down\",\"attention.aria.pointingLeft\":\"pointing left\",\"attention.aria.pointingRight\":\"pointing right\",\"attention.aria.pointingUp\":\"pointing up\",\"attention.aria.popover\":\"A white speech bubble providing additional information\",\"attention.aria.tooltip\":\"A black speech bubble providing complementary information\"}");
+/*eslint-disable*/export const messages=JSON.parse("{\"attention.aria.close\":\"Close\",\"attention.aria.callout\":\"A green speech bubble introducing something new\",\"attention.aria.highlight\":\"An attention speech bubble with important information\",\"attention.aria.pointingDown\":\"pointing down\",\"attention.aria.pointingLeft\":\"pointing left\",\"attention.aria.pointingRight\":\"pointing right\",\"attention.aria.pointingUp\":\"pointing up\",\"attention.aria.popover\":\"A white speech bubble providing additional information\",\"attention.aria.tooltip\":\"A black speech bubble providing complementary information\"}");
diff --git a/packages/attention/src/locales/en/messages.po b/packages/attention/src/locales/en/messages.po
@@ -14,57 +14,56 @@ msgstr ""
 "Plural-Forms: \n"
 "X-Crowdin-SourceKey: msgstr\n"
 
+#. Aria label for the close button in attention
+#. js-lingui-explicit-id
+#: packages/attention/src/component.tsx:186
+#~ msgid "attention.aria.close"
+#~ msgstr "Close"
+
 #. Default screenreader message for callout speech bubble in the attention component
 #. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:150
+#: packages/_helpers/attention.tsx:66
 msgid "attention.aria.callout"
 msgstr "A green speech bubble introducing something new"
 
-#. Aria label for the close button in attention
-#. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:225
-msgid "attention.aria.close"
-msgstr "Close"
-
 #. Default screenreader message for highlighted speech bubble in the attention component
 #. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:164
+#: packages/_helpers/attention.tsx:78
 msgid "attention.aria.highlight"
 msgstr "An attention speech bubble with important information"
 
 #. Default screenreader message for bottom direction in the attention component
 #. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:121
+#: packages/_helpers/attention.tsx:39
 msgid "attention.aria.pointingDown"
 msgstr "pointing down"
 
 #. Default screenreader message for left direction in the attention component
 #. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:128
+#: packages/_helpers/attention.tsx:47
 msgid "attention.aria.pointingLeft"
 msgstr "pointing left"
 
 #. Default screenreader message for right direction in the attention component
 #. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:114
+#: packages/_helpers/attention.tsx:31
 msgid "attention.aria.pointingRight"
 msgstr "pointing right"
 
 #. Default screenreader message for top direction in the attention component
 #. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:107
+#: packages/_helpers/attention.tsx:23
 msgid "attention.aria.pointingUp"
 msgstr "pointing up"
 
 #. Default screenreader message for popover speech bubble in the attention component
 #. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:157
+#: packages/_helpers/attention.tsx:72
 msgid "attention.aria.popover"
 msgstr "A white speech bubble providing additional information"
 
 #. Default screenreader message for tooltip in the attention component
 #. js-lingui-explicit-id
-#: packages/attention/src/component.tsx:143
+#: packages/_helpers/attention.tsx:60
 msgid "attention.aria.tooltip"
 msgstr "A black speech bubble providing complementary information"
-
diff --git a/packages/attention/src/locales/fi/messages.mjs b/packages/attention/src/locales/fi/messages.mjs
@@ -1 +1 @@
-/*eslint-disable*/export const messages=JSON.parse("{\"attention.aria.callout\":\"Vihreä puhekupla, joka esittelee jotain uutta\",\"attention.aria.close\":\"Sulje\",\"attention.aria.highlight\":\"Puhekupla, joka sisältää tärkeää tietoa\",\"attention.aria.pointingDown\":\"osoittaa alas\",\"attention.aria.pointingLeft\":\"osoittaa vasemmalle\",\"attention.aria.pointingRight\":\"osoittaa oikealle\",\"attention.aria.pointingUp\":\"osoittaa ylös\",\"attention.aria.popover\":\"Valkoinen puhekupla, joka tarjoaa lisätietoa\",\"attention.aria.tooltip\":\"Musta puhekupla, joka tarjoaa täydentävää tietoa\"}");
+/*eslint-disable*/export const messages=JSON.parse("{\"attention.aria.close\":\"Sulje\",\"attention.aria.callout\":\"Vihreä puhekupla, joka esittelee jotain uutta\",\"attention.aria.highlight\":\"Puhekupla, joka sisältää tärkeää tietoa\",\"attention.aria.pointingDown\":\"osoittaa alas\",\"attention.aria.pointingLeft\":\"osoittaa vasemmalle\",\"attention.aria.pointingRight\":\"osoittaa oikealle\",\"attention.aria.pointingUp\":\"osoittaa ylös\",\"attention.aria.popover\":\"Valkoinen puhekupla, joka tarjoaa lisätietoa\",\"attention.aria.tooltip\":\"Musta puhekupla, joka tarjoaa täydentävää tietoa\"}");