update global prefix (#643)

utilitywarehouse · Dec 10, 2024 · 9775353 · 9775353
1 parent 1e3163b
commit 9775353
Show file tree

Hide file tree

Showing 47 changed files with 316 additions and 311 deletions.
diff --git a/packages/react/.stylelintrc.cjs b/packages/react/.stylelintrc.cjs
@@ -5,8 +5,8 @@ module.exports = {
     'csstools/media-use-custom-media': ['known', { importFrom: ['./src/styles/breakpoints.css'] }],
     'at-rule-no-unknown': [true, { ignoreAtRules: ['breakpoints'] }],
     // Enforce prefixes on classnames and keyframes
-    'selector-class-pattern': /^((mobile|tablet|desktop|wide):)?-?uwp-([a-zA-Z\d]|-)+$/,
+    'selector-class-pattern': /^((mobile|tablet|desktop|wide):)?-?uw-([a-zA-Z\d]|-)+$/,
     'custom-property-pattern': /([a-zA-Z\d]|-)+$/,
-    'keyframes-name-pattern': /^uwp-([a-z]|-)+$/,
+    'keyframes-name-pattern': /^uw-([a-z]|-)+$/,
   },
 };
diff --git a/packages/react/postcss-breakpoints.cjs b/packages/react/postcss-breakpoints.cjs
@@ -85,25 +85,25 @@ function updateClass(node, prefix) {
   }
 
   /**
-   * Should match responsive classes (uwp-r- prefix):
+   * Should match responsive classes (uw-r- prefix):
    * ```
-   * .uwp-r-size-1
-   * .uwp-r-m-2
-   * .-uwp-r-m-2
-   * .uwp-Button.uwp-r-size-1 (captures "uwp-r-size-1")
+   * .uw-r-size-1
+   * .uw-r-m-2
+   * .-uw-r-m-2
+   * .uw-Button.uw-r-size-1 (captures "uw-r-size-1")
    * ```
    *
    * Should not match:
-   * .uwp-Button
+   * .uw-Button
    */
-  const classNameRegexp = /\.(-?uwp-r-[a-z0-9-]+)/g; // TODO: import class prefix?
+  const classNameRegexp = /\.(-?uw-r-[a-z0-9-]+)/g;
 
   // Check for rules that use compound props on a component:
   // - a component name (prefixed with "rt-" and pascal cased)
   // - followed by 2 or more prop selectors (lowercase, numbers, -)
   //
   // e.g. ".rt-DialogContent.rt-r-size-2.gray"
-  if (/\.uwp-(?:[A-Z][a-z]+)+(?:\.[a-z0-9-]+){2,}/.test(node.selector)) {
+  if (/\.uw-(?:[A-Z][a-z]+)+(?:\.[a-z0-9-]+){2,}/.test(node.selector)) {
     throw Error(`
       "${node.selector}" looks like it uses compound props on a component.
       "@breakpoints" does not support compound props yet.

diff --git a/packages/react/src/components/Badge/Badge.css b/packages/react/src/components/Badge/Badge.css
@@ -1,4 +1,4 @@
-.uwp-Badge {
+.uw-Badge {
   display: inline-flex;
   gap: var(--space-50);
   align-items: center;
@@ -19,11 +19,11 @@
   padding-block: var(--space-50);
 
   @breakpoints {
-    &:where(.uwp-r-size-medium) {
+    &:where(.uw-r-size-medium) {
       padding-inline: var(--space-200);
     }
 
-    &:where(.uwp-r-size-small) {
+    &:where(.uw-r-size-small) {
       padding-inline: var(--space-100);
     }
   }
@@ -33,17 +33,17 @@
     border-bottom-right-radius: 0;
   }
 
-  &:where(.uwp-variant-soft) {
+  &:where(.uw-variant-soft) {
     --badge-color: var(--badge-soft-color);
     --badge-background-color: var(--badge-soft-background-color);
   }
 
-  &:where(.uwp-variant-strong) {
+  &:where(.uw-variant-strong) {
     --badge-color: var(--badge-strong-color);
     --badge-background-color: var(--badge-strong-background-color);
   }
 
-  &:where(.uwp-variant-outline) {
+  &:where(.uw-variant-outline) {
     --badge-color: var(--badge-outline-color);
     --badge-background-color: transparent;
     --badge-border-color: var(--badge-outline-border-color);

diff --git a/packages/react/src/components/BodyText/BodyText.css b/packages/react/src/components/BodyText/BodyText.css
@@ -1,4 +1,4 @@
-.uwp-BodyText {
+.uw-BodyText {
   font-family: var(--font-family-body);
 
   /* the default text colour, this will be overwritten by the color class */
@@ -11,7 +11,7 @@
   }
 
   /** variants **/
-  &:where(.uwp-variant-subtitle) {
+  &:where(.uw-variant-subtitle) {
     font-size: var(--font-size-body-lg);
     line-height: var(--line-height-lg);
 
@@ -20,17 +20,17 @@
     }
   }
 
-  &:where(.uwp-variant-body) {
+  &:where(.uw-variant-body) {
     font-size: var(--font-size-body-md);
     line-height: var(--line-height-lg);
   }
 
-  &:where(.uwp-variant-legalNote) {
+  &:where(.uw-variant-legalNote) {
     font-size: var(--font-size-body-sm);
     line-height: var(--line-height-lg);
   }
 
-  &:where(.uwp-variant-caption) {
+  &:where(.uw-variant-caption) {
     font-size: var(--font-size-body-xs);
     line-height: var(--line-height-xl);
   }

diff --git a/packages/react/src/components/Box/Box.css b/packages/react/src/components/Box/Box.css
@@ -1,4 +1,4 @@
-.uwp-Box {
+.uw-Box {
   box-sizing: border-box;
   display: block;
 }
diff --git a/packages/react/src/components/Box/Box.tsx b/packages/react/src/components/Box/Box.tsx
@@ -10,9 +10,10 @@ import { paddingPropDefs } from '../../props/padding.props';
 import { colorPropDefs } from '../../props/color.props';
 import { sizePropDefs } from '../../props/size.props';
 import { backgroundColorPropDefs } from '../../props/background-color.props';
+import { withGlobalPrefix } from '../../helpers/with-global-prefix';
 
 const componentName = 'Box';
-const componentClassName = 'uwp-' + componentName;
+const componentClassName = withGlobalPrefix(componentName);
 
 type BoxElement = ElementRef<'div'>;
 

diff --git a/packages/react/src/components/Button/Button.css b/packages/react/src/components/Button/Button.css
@@ -1,4 +1,4 @@
-.uwp-Button {
+.uw-Button {
   font-family: var(--font-family-body);
   font-size: var(--font-size-body-md);
   font-weight: var(--font-weight-medium);
@@ -9,14 +9,14 @@
   padding-inline: var(--button-padding-inline);
 
   @breakpoints {
-    &:where(.uwp-r-size-medium) {
+    &:where(.uw-r-size-medium) {
       --button-line-height: 1.5;
       --button-min-width: 136px;
       --button-padding-inline: var(--space-300);
       --button-padding-block: var(--space-200);
     }
 
-    &:where(.uwp-r-size-small) {
+    &:where(.uw-r-size-small) {
       --button-line-height: 1;
       --button-min-width: 120px;
       --button-padding-inline: var(--space-200);

diff --git a/packages/react/src/components/Button/Button.stories.tsx b/packages/react/src/components/Button/Button.stories.tsx
@@ -39,12 +39,12 @@ export const KitchenSink: Story = {
   parameters: { controls: { hideNoControlsWarning: true } },
   render: () => {
     return (
-      <Flex direction="column" gap="48px">
+      <Flex direction="column" gap="600">
         <Flex gap="16px" direction="column">
           <Heading variant="h2">Solid</Heading>
-          <Flex gap="32px" align="center">
+          <Flex gap="400" align="center">
             {sizes.map(size => (
-              <Flex key={size} gap="8px">
+              <Flex key={size} gap="100">
                 {solidColorSchemes.map(colorScheme => (
                   <Button key={colorScheme} variant="solid" colorScheme={colorScheme} size={size}>
                     Button
@@ -53,9 +53,9 @@ export const KitchenSink: Story = {
               </Flex>
             ))}
           </Flex>
-          <Flex gap="32px" align="center">
+          <Flex gap="400" align="center">
             {sizes.map(size => (
-              <Flex key={size} gap="8px">
+              <Flex key={size} gap="100">
                 {solidColorSchemes.map(colorScheme => (
                   <Button
                     disabled
@@ -72,13 +72,13 @@ export const KitchenSink: Story = {
           </Flex>
         </Flex>
         {(['outline', 'ghost'] as const).map(variant => (
-          <Flex key={variant} gap="16px" direction="column">
+          <Flex key={variant} gap="200" direction="column">
             <Heading variant="h2" style={{ textTransform: 'capitalize' }}>
               {variant}
             </Heading>
-            <Flex gap="32px" align="center">
+            <Flex gap="400" align="center">
               {sizes.map(size => (
-                <Flex key={size} gap="8px">
+                <Flex key={size} gap="100">
                   {colorSchemes.map(colorScheme => (
                     <Button
                       key={colorScheme}
@@ -92,9 +92,9 @@ export const KitchenSink: Story = {
                 </Flex>
               ))}
             </Flex>
-            <Flex gap="32px" align="center">
+            <Flex gap="400" align="center">
               {sizes.map(size => (
-                <Flex key={size} gap="8px">
+                <Flex key={size} gap="100">
                   {colorSchemes.map(colorScheme => (
                     <Button
                       disabled

diff --git a/packages/react/src/components/ButtonBase/ButtonBase.css b/packages/react/src/components/ButtonBase/ButtonBase.css
@@ -1,4 +1,4 @@
-.uwp-ButtonBase {
+.uw-ButtonBase {
   all: unset;
   outline: transparent;
   appearance: none;
@@ -135,7 +135,7 @@
     --ghost-foreground-color-disabled: var(--color-grey300);
   }
 
-  &:where(.uwp-variant-solid) {
+  &:where(.uw-variant-solid) {
     --button-base-foreground-color: var(--solid-foreground-color);
     --button-base-background-color: var(--solid-background-color);
     --button-base-background-color-hover: var(--solid-background-color-hover);
@@ -144,7 +144,7 @@
     --button-base-background-color-disabled: var(--solid-background-color-disabled);
   }
 
-  &:where(.uwp-variant-ghost) {
+  &:where(.uw-variant-ghost) {
     --button-base-background-color: transparent;
     --button-base-background-color-disabled: transparent;
     --button-base-foreground-color: var(--ghost-foreground-color);
@@ -153,7 +153,7 @@
     --button-base-foreground-color-disabled: var(--ghost-foreground-color-disabled);
   }
 
-  &:where(.uwp-variant-outline) {
+  &:where(.uw-variant-outline) {
     box-shadow: inset 0 0 0 2px var(--outline-border-color);
 
     --button-base-background-color: transparent;
@@ -189,7 +189,7 @@
     --button-base-background-color: var(--button-base-background-color-disabled);
     --button-base-border-color: var(--button-base-border-color-disabled);
 
-    &:where(.uwp-variant-outline) {
+    &:where(.uw-variant-outline) {
       --outline-border-color: var(--outline-border-color-disabled);
     }
   }

diff --git a/packages/react/src/components/ButtonBase/ButtonBase.props.ts b/packages/react/src/components/ButtonBase/ButtonBase.props.ts
@@ -1,5 +1,14 @@
+import { PropDef } from '../../props/prop-def';
 import { ComponentPropsWithout, RemovedProps } from '../../types/component-props';
 
+const variants = ['solid', 'outline', 'ghost'] as const;
+
+export const buttonBasePropDefs = {
+  variant: { className: 'variant', tokens: variants, responsive: false, default: 'medium' },
+} satisfies {
+  variant: PropDef<(typeof variants)[number]>;
+};
+
 export type ButtonBaseProps = ComponentPropsWithout<'button', RemovedProps> &
   (
     | {

diff --git a/packages/react/src/components/ButtonBase/ButtonBase.tsx b/packages/react/src/components/ButtonBase/ButtonBase.tsx
@@ -1,44 +1,38 @@
 import * as React from 'react';
 
 import clsx from 'clsx';
-import { ButtonBaseProps } from './ButtonBase.props';
+import { buttonBasePropDefs, ButtonBaseProps } from './ButtonBase.props';
 import { DATA_ATTRIBUTES } from '../../helpers/data-attributes';
 import type { ElementRef } from 'react';
+import { withGlobalPrefix } from '../../helpers/with-global-prefix';
+import { extractProps } from '../../helpers/extract-props';
 
 const componentName = 'ButtonBase';
-const componentClassName = 'uwp-' + componentName;
-
-const classNames = {
-  variant: {
-    solid: 'uwp-variant-solid',
-    outline: 'uwp-variant-outline',
-    ghost: 'uwp-variant-ghost',
-  },
-};
+const componentClassName = withGlobalPrefix(componentName);
 
 export type ButtonBaseElement = ElementRef<'button'>;
 
-export const ButtonBase = React.forwardRef<ButtonBaseElement, ButtonBaseProps>(
-  (
-    { variant = 'solid', colorScheme = 'cyan', className, disabled, onClick, ...props },
-    forwardedRef
-  ) => {
-    const dataAttributeProps = {
-      [DATA_ATTRIBUTES.colorscheme]: colorScheme,
-    };
-    return (
-      <button
-        ref={forwardedRef}
-        aria-disabled={disabled || undefined}
-        className={clsx(componentClassName, classNames.variant[variant], className)}
-        // as we're using aria-disabled instead of disabled then we need to
-        // disable the onClick event
-        onClick={disabled ? undefined : onClick}
-        {...dataAttributeProps}
-        {...props}
-      />
-    );
-  }
-);
+export const ButtonBase = React.forwardRef<ButtonBaseElement, ButtonBaseProps>((props, ref) => {
+  const {
+    colorScheme = 'cyan',
+    className,
+    disabled,
+    onClick,
+    ...buttonBaseProps
+  } = extractProps(props, buttonBasePropDefs);
+  const dataAttributeProps = { [DATA_ATTRIBUTES.colorscheme]: colorScheme };
+  return (
+    <button
+      ref={ref}
+      aria-disabled={disabled || undefined}
+      className={clsx(componentClassName, className)}
+      // as we're using aria-disabled instead of disabled then we need to
+      // disable the onClick event
+      onClick={disabled ? undefined : onClick}
+      {...dataAttributeProps}
+      {...buttonBaseProps}
+    />
+  );
+});
 
 ButtonBase.displayName = componentName;
diff --git a/packages/react/src/components/Divider/Divider.css b/packages/react/src/components/Divider/Divider.css
@@ -1,4 +1,4 @@
-.uwp-Divider {
+.uw-Divider {
   all: unset;
   display: block; /* explicitly set this so horizontal dividers show inside block elements */
   align-self: stretch;

diff --git a/packages/react/src/components/Em/Em.css b/packages/react/src/components/Em/Em.css
@@ -1,4 +1,4 @@
-.uwp-Em {
+.uw-Em {
   font-style: italic;
   font-family: inherit;
   font-size: inherit;

diff --git a/packages/react/src/components/Fieldset/Fieldset.css b/packages/react/src/components/Fieldset/Fieldset.css
@@ -1,4 +1,4 @@
-.uwp-Fieldset {
+.uw-Fieldset {
   border: 0;
   margin: 0;
   padding: 0;

diff --git a/packages/react/src/components/Fieldset/Fieldset.stories.tsx b/packages/react/src/components/Fieldset/Fieldset.stories.tsx
@@ -19,7 +19,7 @@ export const Workshop: Story = {
     return (
       <Fieldset {...args}>
         <FieldsetLegend>Fieldset legend</FieldsetLegend>
-        <Box className="uwp-sb-Placeholder" height="100px" width="300px" />
+        <Box className="uw-sb-Placeholder" height="100px" width="300px" />
       </Fieldset>
     );
   },

diff --git a/packages/react/src/components/FieldsetLegend/FieldsetLegend.css b/packages/react/src/components/FieldsetLegend/FieldsetLegend.css
@@ -1,4 +1,4 @@
-.uwp-FieldsetLegend {
+.uw-FieldsetLegend {
   --fieldset-legend-color: var(--color-grey1000);
   --fieldset-legend-color-disabled: var(--color-grey400);
 

diff --git a/packages/react/src/components/Flex/Flex.css b/packages/react/src/components/Flex/Flex.css
@@ -1,4 +1,4 @@
-.uwp-Flex {
+.uw-Flex {
   box-sizing: border-box;
 
   /* Default values to provide the initial styles in the object syntax, e.g. `<Flex display={{ md: 'none' }} />` */

diff --git a/packages/react/src/components/Flex/Flex.stories.tsx b/packages/react/src/components/Flex/Flex.stories.tsx
@@ -45,9 +45,9 @@ export const Workshop: Story = {};
 export const ResponsiveGap: Story = {
   render: args => (
     <Flex {...args}>
-      <Box className="uwp-sb-Placeholder" width="400px" height="100px" />
-      <Box className="uwp-sb-Placeholder" width="400px" height="100px" />
-      <Box className="uwp-sb-Placeholder" width="400px" height="100px" />
+      <Box className="uw-sb-Placeholder" width="400px" height="100px" />
+      <Box className="uw-sb-Placeholder" width="400px" height="100px" />
+      <Box className="uw-sb-Placeholder" width="400px" height="100px" />
     </Flex>
   ),
   args: {