uikit-react-public 0.47.1 → 0.48.0

package/lib/components/Input/__tests__/Input.test.tsx

@@ -3,6 +3,8 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Input from '../Input';
 import { ThemeContextProvider } from '../../../theme/useTheme';
+import Icon from '../../Icon';
+import IconButton from '../../IconButton';
 
 describe('Input', () => {
   // Snapshot tests
@@ -105,4 +107,36 @@ describe('Input', () => {
     const input = screen.getByRole('textbox') as HTMLInputElement;
     expect(input.id).toBe('custom-id');
   });
+
+  test('positions a right icon before an icon button', () => {
+    render(
+      <ThemeContextProvider>
+        <Input
+          icon={
+            <Icon.Search
+              testId='right-icon'
+              aria-hidden='true'
+            />
+          }
+          iconPosition='right'
+          iconButton={
+            <IconButton
+              testId='icon-button'
+              aria-label='Search'
+            >
+              <Icon.Search />
+            </IconButton>
+          }
+        />
+      </ThemeContextProvider>
+    );
+
+    const input = screen.getByTestId('ucl-uikit-input');
+    const iconWrapper = screen.getByTestId('right-icon').parentElement;
+    const buttonWrapper = screen.getByTestId('icon-button').parentElement;
+
+    expect(input).toHaveStyle({ paddingRight: '80px' });
+    expect(iconWrapper).toHaveStyle({ right: '48px' });
+    expect(buttonWrapper).toHaveStyle({ right: '16px' });
+  });
 });

package/lib/components/Label/Label.tsx

@@ -42,7 +42,7 @@ const Label = forwardRef<Ref, LabelProps>(
     disabled = disabled ?? contextDisabled;
     optional = optional ?? contextOptional;
     const htmlFor = props.htmlFor ?? contextId;
-    const { mdSemibold } = theme.typography.body;
+    const { md, mdSemibold } = theme.typography.body;
 
     const baseStyle = css`
       width: 100%;
@@ -76,6 +76,10 @@ const Label = forwardRef<Ref, LabelProps>(
       className
     );
 
+    const optionalStyle = css`
+      font-weight: ${md.fontWeight};
+    `;
+
     return (
       <label
         ref={ref}
@@ -88,7 +92,9 @@ const Label = forwardRef<Ref, LabelProps>(
         {optional && (
           <>
             {' '}
-            <span className={optionalClassName}>(optional)</span>
+            <span className={cx(optionalStyle, optionalClassName)}>
+              (optional)
+            </span>
           </>
         )}
       </label>

package/lib/components/Label/__tests__/__snapshots__/Label.test.tsx.snap

@@ -68,7 +68,9 @@ exports[`Label > snapshot: with optional prop 1`] = `
 >
   Name
    
-  <span>
+  <span
+    class="css-dbb56r"
+  >
     (optional)
   </span>
 </label>

package/lib/components/index.ts

@@ -4,6 +4,9 @@ export type { IconProps } from './Icon';
 export { default as Input } from './Input';
 export type { InputProps } from './Input';
 
+export { default as ConfidentialInput } from './ConfidentialInput';
+export type { ConfidentialInputProps } from './ConfidentialInput';
+
 export { default as Link } from './Link';
 export type { LinkProps } from './Link';
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.47.1",
+  "version": "0.48.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",