uikit-react-public 0.45.4 → 0.45.5

package/dist/components/Label/Label.d.ts

@@ -5,6 +5,7 @@ export interface LabelBaseProps extends LabelHTMLAttributes<HTMLLabelElement> {
     type?: 'block' | 'inline';
     disabled?: boolean;
     optional?: boolean;
+    optionalClassName?: string;
     testId?: string;
 }
 export type LabelProps = LabelBaseProps & MarginProps;

package/dist/components/Label/Label.stories.d.ts

@@ -9,4 +9,5 @@ export declare const Default: Story;
 export declare const Inline: Story;
 export declare const Disabled: Story;
 export declare const Optional: Story;
+export declare const OptionalWithCustomStyle: Story;
 export declare const WithLongText: Story;

package/dist/index.js

@@ -20950,20 +20950,21 @@ const M3 = (e, t) => {
     type: e = "block",
     disabled: t,
     optional: o,
-    testId: r = dl,
-    className: l,
-    children: i,
-    ...a
-  }, c) => {
-    const [u] = L(), {
-      disabled: s,
-      optional: f,
-      id: h
+    optionalClassName: r,
+    testId: l = dl,
+    className: i,
+    children: a,
+    ...c
+  }, u) => {
+    const [s] = L(), {
+      disabled: f,
+      optional: h,
+      id: p
     } = St(Tt);
-    t = t ?? s, o = o ?? f;
-    const p = a.htmlFor ?? h, { md: m, mdSemibold: y } = u.typography.body, b = d`
+    t = t ?? f, o = o ?? h;
+    const m = c.htmlFor ?? p, { mdSemibold: y } = s.typography.body, b = d`
       width: 100%;
-      color: ${u.colour.text.default};
+      color: ${s.colour.text.default};
       font-family: ${y.fontFamily};
       font-feature-settings: ${y.fontSettings};
       font-size: ${y.fontSize}px;
@@ -20974,32 +20975,29 @@ const M3 = (e, t) => {
     `, k = d`
       display: inline;
     `, x = d`
-      color: ${u.colour.text.disabled};
+      color: ${s.colour.text.disabled};
     `, S = A(
       dl,
       b,
-      He(a, u),
+      He(c, s),
       e === "block" && C,
       e === "inline" && k,
       t && x,
-      l
-    ), M = d`
-      font-weight: ${m.fontWeight};
-      font-style: italic;
-    `;
+      i
+    );
     return /* @__PURE__ */ g(
       "label",
       {
-        ref: c,
-        htmlFor: p,
+        ref: u,
+        htmlFor: m,
         className: S,
-        "data-testid": r,
-        ...a,
+        "data-testid": l,
+        ...c,
         children: [
-          i,
+          a,
           o && /* @__PURE__ */ g(Oe, { children: [
             " ",
-            /* @__PURE__ */ n("span", { className: M, children: "(optional)" })
+            /* @__PURE__ */ n("span", { className: r, children: "(optional)" })
           ] })
         ]
       }

package/lib/components/Label/Label.stories.tsx

@@ -38,6 +38,23 @@ export const Optional: Story = {
   },
 };
 
+export const OptionalWithCustomStyle: Story = {
+  name: 'Optional with custom style',
+  args: {
+    children: 'Optional label',
+    optional: true,
+    optionalClassName: 'custom-optional-style',
+  },
+  decorators: [
+    (Story) => (
+      <>
+        <style>{`.custom-optional-style { font-weight: normal; color: #565656; }`}</style>
+        <Story />
+      </>
+    ),
+  ],
+};
+
 export const WithLongText: Story = {
   name: 'With long text',
   args: {

package/lib/components/Label/Label.tsx

@@ -10,6 +10,7 @@ export interface LabelBaseProps extends LabelHTMLAttributes<HTMLLabelElement> {
   type?: 'block' | 'inline';
   disabled?: boolean;
   optional?: boolean;
+  optionalClassName?: string;
   testId?: string;
 }
 
@@ -23,6 +24,7 @@ const Label = forwardRef<Ref, LabelProps>(
       type = 'block',
       disabled,
       optional,
+      optionalClassName,
       testId = NAME,
       className,
       children,
@@ -40,7 +42,7 @@ const Label = forwardRef<Ref, LabelProps>(
     disabled = disabled ?? contextDisabled;
     optional = optional ?? contextOptional;
     const htmlFor = props.htmlFor ?? contextId;
-    const { md, mdSemibold } = theme.typography.body;
+    const { mdSemibold } = theme.typography.body;
 
     const baseStyle = css`
       width: 100%;
@@ -74,11 +76,6 @@ const Label = forwardRef<Ref, LabelProps>(
       className
     );
 
-    const optionalStyle = css`
-      font-weight: ${md.fontWeight};
-      font-style: italic;
-    `;
-
     return (
       <label
         ref={ref}
@@ -91,7 +88,7 @@ const Label = forwardRef<Ref, LabelProps>(
         {optional && (
           <>
             {' '}
-            <span className={optionalStyle}>(optional)</span>
+            <span className={optionalClassName}>(optional)</span>
           </>
         )}
       </label>

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

@@ -51,6 +51,21 @@ describe('Label', () => {
     expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
+  test('optional text can accept a custom class name', () => {
+    render(
+      <ThemeContextProvider>
+        <Label
+          optional
+          optionalClassName='custom-optional-class'
+        >
+          Name
+        </Label>
+      </ThemeContextProvider>
+    );
+
+    expect(screen.getByText('(optional)')).toHaveClass('custom-optional-class');
+  });
+
   test('snapshot: testId prop', () => {
     const renderResult = render(
       <ThemeContextProvider>

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

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

package/package.json

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