Skip to content

Commit

Permalink
feat(Input): add xl size
Browse files Browse the repository at this point in the history
  • Loading branch information
@driss-chelouati
driss-chelouati committed Jun 4, 2024
1 parent 9092677 commit 2c0de2e
Show file tree
Hide file tree
Showing 6 changed files with 381 additions and 14 deletions.
80 changes: 78 additions & 2 deletions src/plugins/components/input/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,31 @@ export default plugin(({ addComponents, theme }) => {
[`@apply h-${config.size.lg.placeload.size}`]: {},
},
},
//Size:xl
'&.nui-input-xl': {
//Input:label
'.nui-input-label': {
[`@apply pb-1 text-${config.size.xl.label.font.size}`]: {},
},
//Label:float
'.nui-label-float': {
'@apply top-[1.1rem]': {},
},
//Input:icon && Input:action
'.nui-input-icon, .nui-input-action': {
[`@apply h-${config.size.xl.icon.outer.size} w-${config.size.xl.icon.outer.size}`]:
{},

'.nui-input-icon-inner, .nui-input-action-inner': {
[`@apply h-${config.size.xl.icon.inner.size} w-${config.size.xl.icon.inner.size}`]:
{},
},
},
//Input:placeload
'.nui-input-placeload': {
[`@apply h-${config.size.xl.placeload.size}`]: {},
},
},
//Color:default
'&.nui-input-default': {
'.nui-input': {
Expand Down Expand Up @@ -360,6 +385,20 @@ export default plugin(({ addComponents, theme }) => {
{},
},
},
//Without icon && Size:xl
'&:not(.nui-has-icon).nui-input-xl': {
'.nui-input': {
[`@apply h-14 py-2 text-${config.icon.disabled.input.xl.font.size} leading-5 px-4`]:
{},
},
},
//With icon && Size:xl
'&.nui-has-icon.nui-input-xl': {
'.nui-input': {
[`@apply h-14 py-2 text-${config.icon.enabled.input.xl.font.size} leading-5 pe-4 ps-[3.25rem]`]:
{},
},
},
//With action && Size:sm
'&.nui-has-action.nui-input-sm': {
'.nui-input': {
Expand All @@ -378,6 +417,12 @@ export default plugin(({ addComponents, theme }) => {
[`@apply pe-${config.input.action.padding.lg}`]: {},
},
},
//With action && Size:xl
'&.nui-has-action.nui-input-xl': {
'.nui-input': {
[`@apply pe-${config.input.action.padding.xl}`]: {},
},
},
//Without icon && Size:sm && Label:float
'&.nui-input-label-float:not(.nui-has-icon).nui-input-sm': {
'.nui-label-float': {
Expand Down Expand Up @@ -438,7 +483,7 @@ export default plugin(({ addComponents, theme }) => {
//Without icon && Size:lg && Label:float
'&.nui-input-label-float:not(.nui-has-icon).nui-input-lg': {
'.nui-label-float': {
[`@apply start-3 -ms-3 -mt-8 text-${config.icon.disabled.label.float.lg.font.size.base}`]:
[`@apply start-3 -ms-3 -mt-9 text-${config.icon.disabled.label.float.lg.font.size.base}`]:
{},
},
'.nui-input:focus-visible ~ .nui-label-float': {
Expand All @@ -453,7 +498,7 @@ export default plugin(({ addComponents, theme }) => {
//With icon && Size:lg && Label:float
'&.nui-input-label-float.nui-has-icon.nui-input-lg': {
'.nui-label-float': {
[`@apply start-11 -ms-10 -mt-8 text-${config.icon.enabled.label.float.lg.font.size.base}`]:
[`@apply start-11 -ms-9 -mt-10 text-${config.icon.enabled.label.float.lg.font.size.base}`]:
{},
},
'.nui-input:focus-visible ~ .nui-label-float': {
Expand All @@ -465,6 +510,37 @@ export default plugin(({ addComponents, theme }) => {
{},
},
},

//Without icon && Size:xl && Label:float
'&.nui-input-label-float:not(.nui-has-icon).nui-input-xl': {
'.nui-label-float': {
[`@apply start-3 -ms-3 -mt-10 text-${config.icon.disabled.label.float.xl.font.size.base}`]:
{},
},
'.nui-input:focus-visible ~ .nui-label-float': {
[`@apply !-ms-3 !-mt-10 !text-${config.icon.disabled.label.float.xl.font.size.focus}`]:
{},
},
'.nui-input:placeholder-shown ~ .nui-label-float': {
[`@apply ms-0 mt-0 text-${config.icon.disabled.label.float.xl.font.size.unfocus}`]:
{},
},
},
//With icon && Size:xl && Label:float
'&.nui-input-label-float.nui-has-icon.nui-input-xl': {
'.nui-label-float': {
[`@apply start-[3.25rem] ms-[-3.25rem] -mt-8 text-${config.icon.enabled.label.float.xl.font.size.base}`]:
{},
},
'.nui-input:focus-visible ~ .nui-label-float': {
[`@apply !ms-[-3.25rem] !-mt-10 !text-${config.icon.enabled.label.float.xl.font.size.focus}`]:
{},
},
'.nui-input:placeholder-shown ~ .nui-label-float': {
[`@apply ms-0 mt-0 text-${config.icon.enabled.label.float.xl.font.size.unfocus}`]:
{},
},
},
},
})
}, config)
47 changes: 47 additions & 0 deletions src/plugins/components/input/input.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ export const defaultConfig = {
sm: '8',
md: '10',
lg: '12',
xl: '14',
},
transition: {
property: 'colors',
Expand Down Expand Up @@ -167,6 +168,24 @@ export const defaultConfig = {
size: '12',
},
},
xl: {
label: {
font: {
size: 'sm',
},
},
icon: {
outer: {
size: '14',
},
inner: {
size: '6',
},
},
placeload: {
size: '14',
},
},
},
color: {
default: {
Expand Down Expand Up @@ -284,6 +303,11 @@ export const defaultConfig = {
size: 'sm',
},
},
xl: {
font: {
size: 'sm',
},
},
},
label: {
float: {
Expand All @@ -310,6 +334,15 @@ export const defaultConfig = {
},
},
},
xl: {
font: {
size: {
base: 'xs',
focus: 'xs',
unfocus: '[0.825rem]',
},
},
},
},
},
},
Expand All @@ -330,6 +363,11 @@ export const defaultConfig = {
size: 'base',
},
},
xl: {
font: {
size: 'base',
},
},
},
label: {
float: {
Expand All @@ -356,6 +394,15 @@ export const defaultConfig = {
},
},
},
xl: {
font: {
size: {
base: 'xs',
focus: 'xs',
unfocus: '[0.825rem]',
},
},
},
},
},
},
Expand Down
30 changes: 20 additions & 10 deletions src/plugins/components/input/input.doc.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,10 +72,11 @@ Input shapes allow you to change the border radiuses. Below is an example of a f

Input size allows you to change the input size.

<div className="flex items-end gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<div className="flex items-end flex-wrap gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<Story of={InputStories.SizeSm} />
<Story of={InputStories.SizeMd} />
<Story of={InputStories.SizeLg} />
<Story of={InputStories.SizeXl} />
</div>

<br />
Expand All @@ -84,10 +85,11 @@ Input size allows you to change the input size.

Inputs can have different contrasts, making their background color heavier in dark mode.

<div className="flex items-end gap-2 border border-muted-200 dark:border-muted-800 bg-white dark:bg-slate-900 p-6 rounded-sm">
<div className="flex items-end flex-wrap gap-2 border border-muted-200 dark:border-muted-800 bg-white dark:bg-slate-900 p-6 rounded-sm">
<Story of={InputStories.ContrastMutedSm} />
<Story of={InputStories.ContrastMutedMd} />
<Story of={InputStories.ContrastMutedLg} />
<Story of={InputStories.ContrastMutedXl} />
</div>

<br />
Expand All @@ -96,10 +98,11 @@ Inputs can have different contrasts, making their background color heavier in da

Inputs can have a floating label instead of the regular label.

<div className="flex items-end gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<div className="flex items-end flex-wrap gap-x-2 gap-y-6 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<Story of={InputStories.LabelFloatSm} />
<Story of={InputStories.LabelFloatMd} />
<Story of={InputStories.LabelFloatLg} />
<Story of={InputStories.LabelFloatXl} />
</div>

<br />
Expand All @@ -111,10 +114,11 @@ Inputs can have a floating label instead of the regular label.

Inputs can be configured to have a colored border when being focused.

<div className="flex items-end gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<div className="flex items-end flex-wrap gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<Story of={InputStories.ColorFocusSm} />
<Story of={InputStories.ColorFocusMd} />
<Story of={InputStories.ColorFocusLg} />
<Story of={InputStories.ColorFocusXl} />
</div>

<br />
Expand All @@ -123,10 +127,11 @@ Inputs can be configured to have a colored border when being focused.

Inputs can be shown in a disabled state.

<div className="flex items-end gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<div className="flex items-end flex-wrap gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<Story of={InputStories.DisabledSm} />
<Story of={InputStories.DisabledMd} />
<Story of={InputStories.DisabledLg} />
<Story of={InputStories.DisabledXl} />
</div>

<br />
Expand All @@ -135,10 +140,11 @@ Inputs can be shown in a disabled state.

Inputs can be shown in a loading state. The loading indicator informs the user that something is being loaded.

<div className="flex items-end gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<div className="flex items-end flex-wrap gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<Story of={InputStories.LoadingSm} />
<Story of={InputStories.LoadingMd} />
<Story of={InputStories.LoadingLg} />
<Story of={InputStories.LoadingXl} />
</div>

<br />
Expand All @@ -147,10 +153,11 @@ Inputs can be shown in a loading state. The loading indicator informs the user t

Inputs can be shown in an error state. This indicates that the input value contains an error.

<div className="flex items-end gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<div className="flex items-end flex-wrap gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<Story of={InputStories.ErrorSm} />
<Story of={InputStories.ErrorMd} />
<Story of={InputStories.ErrorLg} />
<Story of={InputStories.ErrorXl} />
</div>

<br />
Expand All @@ -162,10 +169,11 @@ Inputs can be shown in an error state. This indicates that the input value conta

Inputs have an icon slot that you can use to display an icon inside the input.

<div className="flex items-end gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<div className="flex items-end flex-wrap gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<Story of={InputStories.SlotIconSm} />
<Story of={InputStories.SlotIconMd} />
<Story of={InputStories.SlotIconLg} />
<Story of={InputStories.SlotIconXl} />
</div>

<br />
Expand All @@ -174,10 +182,11 @@ Inputs have an icon slot that you can use to display an icon inside the input.

Inputs icon slot also works with floating labels.

<div className="flex items-end gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<div className="flex items-end flex-wrap gap-x-2 gap-y-6 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<Story of={InputStories.SlotIconFloatSm} />
<Story of={InputStories.SlotIconFloatMd} />
<Story of={InputStories.SlotIconFloatLg} />
<Story of={InputStories.SlotIconFloatXl} />
</div>

<br />
Expand All @@ -186,10 +195,11 @@ Inputs icon slot also works with floating labels.

Inputs have an action slot that you can use to display an action inside the input.

<div className="flex items-end gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<div className="flex items-end flex-wrap gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<Story of={InputStories.SlotActionSm} />
<Story of={InputStories.SlotActionMd} />
<Story of={InputStories.SlotActionLg} />
<Story of={InputStories.SlotActionXl} />
</div>

<br />
Expand Down
Loading

0 comments on commit 2c0de2e

Please sign in to comment.