;
type InputProps = InputHTMLElementProps &
BaseProps & { prefx?: ReactNode; suffx?: ReactNode };
-type TextareaProps = TextareaHTMLElementProps &
- BaseProps & { minHeight?: string; maxHeight?: string };
+type TextareaProps = TextareaHTMLElementProps & BaseProps;
export type {
InputProps,
diff --git a/system/libs/figa-ui/src/lib/input/input.test.tsx b/system/libs/figa-ui/src/lib/input/input.test.tsx
index 422045ce2..3b858e906 100644
--- a/system/libs/figa-ui/src/lib/input/input.test.tsx
+++ b/system/libs/figa-ui/src/lib/input/input.test.tsx
@@ -110,6 +110,20 @@ describe('User is able to user control when', () => {
expect(asFragment()).toMatchSnapshot();
});
+ it('[FRAGILE] allows to set style', () => {
+ const { asFragment } = render(
+
+ );
+
+ expect(asFragment()).toMatchSnapshot();
+ });
+
it('allows to use placeholder', () => {
render(
);
diff --git a/system/libs/figa-ui/src/lib/input/input.tsx b/system/libs/figa-ui/src/lib/input/input.tsx
index 4c341599d..441a1039b 100644
--- a/system/libs/figa-ui/src/lib/input/input.tsx
+++ b/system/libs/figa-ui/src/lib/input/input.tsx
@@ -9,12 +9,18 @@ const Control = ({
invalid,
disabled,
loading,
+ minWidth,
+ maxWidth,
className,
children,
}: ControlProps) => {
return (
{invalid && !disabled && !loading &&
}
{loading &&
}
@@ -28,6 +34,8 @@ const Textarea = ({
variant,
invalid,
disabled,
+ maxWidth,
+ minWidth,
loading,
style,
...textareaProps
@@ -37,6 +45,8 @@ const Textarea = ({
className={c('textarea', className)}
variant={variant}
invalid={invalid}
+ maxWidth={maxWidth}
+ minWidth={minWidth}
disabled={disabled}
loading={loading}
>
@@ -53,12 +63,16 @@ const Input = ({
loading,
suffx,
prefx,
+ minWidth,
+ maxWidth,
...inputProps
}: InputProps) => {
return (
+
+
+ Header
+
+
+
+ Content
+
+
+
+
+
+`;
+
exports[`User is able to use layout when [FRAGILE] allows to pass sidebar and gives option to maintain it 1`] = `
ReactNode;
}
diff --git a/system/libs/figa-ui/src/lib/layout/layout.stories.tsx b/system/libs/figa-ui/src/lib/layout/layout.stories.tsx
index 90655a429..b68853e99 100644
--- a/system/libs/figa-ui/src/lib/layout/layout.stories.tsx
+++ b/system/libs/figa-ui/src/lib/layout/layout.stories.tsx
@@ -189,6 +189,31 @@ WhenPageIsFullWithFooter.args = {
footer:
Footer
,
};
+export const WithoutPadding = Template.bind({});
+WithoutPadding.args = {
+ header: Header,
+ children:
Text
,
+ footer:
Footer
,
+ offPadding: true,
+};
+
+export const AsidedWithoutPadding = Template.bind({});
+AsidedWithoutPadding.args = {
+ header: Header,
+ children: (
+
+ The content
+
+ ),
+ footer:
Footer
,
+ sidebar: (toggler) => (
+
+ ),
+ offPadding: true,
+};
+
export const Asided = Template.bind({});
Asided.args = {
header: Header,
diff --git a/system/libs/figa-ui/src/lib/layout/layout.test.tsx b/system/libs/figa-ui/src/lib/layout/layout.test.tsx
index 21dafc8ca..8ca82ebde 100644
--- a/system/libs/figa-ui/src/lib/layout/layout.test.tsx
+++ b/system/libs/figa-ui/src/lib/layout/layout.test.tsx
@@ -35,6 +35,16 @@ describe('User is able to use layout when', () => {
screen.getByText(/Footer/);
});
+ it('[FRAGILE] allows to disable content padding', () => {
+ const { asFragment } = render(
+
Header } offPadding>
+ Content
+
+ );
+
+ expect(asFragment()).toMatchSnapshot();
+ });
+
it('[FRAGILE] allows to skip footer', () => {
const { asFragment } = render(
Header}>
diff --git a/system/libs/figa-ui/src/lib/layout/layout.tsx b/system/libs/figa-ui/src/lib/layout/layout.tsx
index d0639cddf..663fb21ab 100644
--- a/system/libs/figa-ui/src/lib/layout/layout.tsx
+++ b/system/libs/figa-ui/src/lib/layout/layout.tsx
@@ -8,6 +8,7 @@ const Layout = ({
children,
header,
footer,
+ offPadding,
sidebar,
}: LayoutProps) => {
const toggler = useToggle({ opened: !!sidebar });
@@ -18,7 +19,8 @@ const Layout = ({
'layout',
className,
{ asided: !!sidebar },
- { opened: toggler.opened }
+ { opened: toggler.opened },
+ { 'off-padding': offPadding }
)}
>
{header}
diff --git a/system/libs/figa-ui/src/lib/theme-provider/global-style.ts b/system/libs/figa-ui/src/lib/theme-provider/global-style.ts
index 6643d040f..b246683ef 100644
--- a/system/libs/figa-ui/src/lib/theme-provider/global-style.ts
+++ b/system/libs/figa-ui/src/lib/theme-provider/global-style.ts
@@ -146,6 +146,14 @@ const GlobalStyle = createGlobalStyle`
&.trim, &.trim > * {
${trim()}
}
+
+ &.center, &.center > * {
+ text-align: center;
+ }
+
+ &.justify, &.justify > * {
+ text-align: justify;
+ }
}
/* font.tsx */
@@ -984,6 +992,20 @@ const GlobalStyle = createGlobalStyle`
width: 100%;
}
}
+
+ &.off-padding {
+ .layout-content {
+ padding: 0;
+ }
+
+ &.asided {
+ .layout-content {
+ & > *:last-child {
+ padding: 0;
+ }
+ }
+ }
+ }
}
/* layout.tsx */