Skip to content

Commit

Permalink
feat(Select): add xl size
Browse files Browse the repository at this point in the history
  • Loading branch information
@driss-chelouati
driss-chelouati committed Jun 5, 2024
1 parent 8e58e6c commit 0c0d9a9
Show file tree
Hide file tree
Showing 6 changed files with 396 additions and 15 deletions.
81 changes: 77 additions & 4 deletions src/plugins/components/select/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ export default plugin(({ addComponents, theme }) => {
},
//Label:float
'.nui-label-float': {
'@apply top-1.5': {},
'@apply top-2.5': {},
},
//Select:icon
'.nui-select-icon, .nui-select-chevron': {
Expand Down Expand Up @@ -193,7 +193,7 @@ export default plugin(({ addComponents, theme }) => {
},
//Label:float
'.nui-label-float': {
'@apply top-1.5': {},
'@apply top-3.5': {},
},
//Select:icon
'.nui-select-icon, .nui-select-chevron': {
Expand All @@ -210,6 +210,35 @@ export default plugin(({ addComponents, theme }) => {
[`@apply h-${config.size.lg.placeload.size}`]: {},
},
},
//Size:xl
'&.nui-select-xl': {
//Select
'.nui-select': {
[`@apply pe-${config.size.xl.padding}`]: {},
},
//Select:label
'.nui-select-label': {
[`@apply pb-1 text-${config.size.xl.label.font.size}`]: {},
},
//Label:float
'.nui-label-float': {
'@apply top-[1.1rem]': {},
},
//Select:icon
'.nui-select-icon, .nui-select-chevron': {
[`@apply h-${config.size.xl.icon.outer.size} w-${config.size.xl.icon.outer.size}`]:
{},

'.nui-select-icon-inner, .nui-select-chevron-inner': {
[`@apply h-${config.size.xl.icon.inner.size} w-${config.size.xl.icon.inner.size}`]:
{},
},
},
//Select:placeload
'.nui-select-placeload': {
[`@apply h-${config.size.xl.placeload.size}`]: {},
},
},
//Color:default
'&.nui-select-default': {
'.nui-select': {
Expand Down Expand Up @@ -370,6 +399,20 @@ export default plugin(({ addComponents, theme }) => {
{},
},
},
//Without:icon && Size:xl
'&:not(.nui-has-icon).nui-select-xl': {
'.nui-select': {
[`@apply h-14 py-2 text-${config.icon.disabled.select.xl.font.size} leading-5 ps-4 pe-9`]:
{},
},
},
//With:icon && Size:xl
'&.nui-has-icon.nui-select-xl': {
'.nui-select': {
[`@apply h-14 py-2 text-${config.icon.enabled.select.xl.font.size} leading-5 pe-9 ps-12`]:
{},
},
},
//Without:icon && Size:sm && Label:float
'&.nui-select-label-float:not(.nui-has-icon).nui-select-sm': {
'.nui-label-float': {
Expand Down Expand Up @@ -433,7 +476,7 @@ export default plugin(({ addComponents, theme }) => {
//Without:icon && Size:lg && Label:float
'&.nui-select-label-float:not(.nui-has-icon).nui-select-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-select:focus-visible ~ .nui-label-float': {
Expand All @@ -448,7 +491,7 @@ export default plugin(({ addComponents, theme }) => {
//With:icon && Size:lg && Label:float
'&.nui-select-label-float.nui-has-icon.nui-select-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-10 -mt-9 text-${config.icon.enabled.label.float.lg.font.size.base}`]:
{},
},
'.nui-select:focus-visible ~ .nui-label-float': {
Expand All @@ -460,6 +503,36 @@ export default plugin(({ addComponents, theme }) => {
{},
},
},
//Without:icon && Size:xl && Label:float
'&.nui-select-label-float:not(.nui-has-icon).nui-select-xl': {
'.nui-label-float': {
[`@apply start-3 -ms-3 -mt-10 text-${config.icon.disabled.label.float.xl.font.size.base}`]:
{},
},
'.nui-select:focus-visible ~ .nui-label-float': {
[`@apply !-ms-3 !-mt-10 !text-${config.icon.disabled.label.float.xl.font.size.focus}`]:
{},
},
'.nui-select ~ .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-select-label-float.nui-has-icon.nui-select-xl': {
'.nui-label-float': {
[`@apply start-[3.25rem] -ms-[3.25rem] -mt-10 text-${config.icon.enabled.label.float.xl.font.size.base}`]:
{},
},
'.nui-select:focus-visible ~ .nui-label-float': {
[`@apply !-ms-[3.25rem] !-mt-10 !text-${config.icon.enabled.label.float.xl.font.size.focus}`]:
{},
},
'.nui-select ~ .nui-label-float': {
[`@apply ms-0 mt-0 text-${config.icon.enabled.label.float.xl.font.size.unfocus}`]:
{},
},
},
},
})
}, config)
55 changes: 55 additions & 0 deletions src/plugins/components/select/select.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,33 @@ export const defaultConfig = {
size: '12',
},
},
xl: {
padding: '14',
chevron: {
outer: {
size: '14',
},
inner: {
size: '5',
},
},
label: {
font: {
size: 'sm',
},
},
icon: {
outer: {
size: '14',
},
inner: {
size: '6',
},
},
placeload: {
size: '14',
},
},
},
color: {
default: {
Expand Down Expand Up @@ -302,6 +329,11 @@ export const defaultConfig = {
size: 'sm',
},
},
xl: {
font: {
size: 'base',
},
},
},
label: {
float: {
Expand All @@ -328,6 +360,15 @@ export const defaultConfig = {
},
},
},
xl: {
font: {
size: {
base: 'xs',
focus: 'xs',
unfocus: '[0.825rem]',
},
},
},
},
},
},
Expand All @@ -344,6 +385,11 @@ export const defaultConfig = {
},
},
lg: {
font: {
size: 'sm',
},
},
xl: {
font: {
size: 'base',
},
Expand Down Expand Up @@ -374,6 +420,15 @@ export const defaultConfig = {
},
},
},
xl: {
font: {
size: {
base: 'xs',
focus: 'xs',
unfocus: '[0.825rem]',
},
},
},
},
},
},
Expand Down
27 changes: 18 additions & 9 deletions src/plugins/components/select/select.doc.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,10 +72,11 @@ Select shapes allow you to change the border radiuses. Below is an example of a

Select 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={SelectStories.SizeSm} />
<Story of={SelectStories.SizeMd} />
<Story of={SelectStories.SizeLg} />
<Story of={SelectStories.SizeXl} />
</div>

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

Selects 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={SelectStories.ContrastMutedSm} />
<Story of={SelectStories.ContrastMutedMd} />
<Story of={SelectStories.ContrastMutedLg} />
<Story of={SelectStories.ContrastMutedXl} />
</div>

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

Selects 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={SelectStories.LabelFloatSm} />
<Story of={SelectStories.LabelFloatMd} />
<Story of={SelectStories.LabelFloatLg} />
<Story of={SelectStories.LabelFloatXl} />
</div>

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

Selects can have a different border color when 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={SelectStories.ColorFocusSm} />
<Story of={SelectStories.ColorFocusMd} />
<Story of={SelectStories.ColorFocusLg} />
<Story of={SelectStories.ColorFocusXl} />
</div>

<br />
Expand All @@ -123,10 +127,11 @@ Selects can have a different border color when focused.

Selects 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={SelectStories.DisabledSm} />
<Story of={SelectStories.DisabledMd} />
<Story of={SelectStories.DisabledLg} />
<Story of={SelectStories.DisabledXl} />
</div>

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

Selects 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={SelectStories.LoadingSm} />
<Story of={SelectStories.LoadingMd} />
<Story of={SelectStories.LoadingLg} />
<Story of={SelectStories.LoadingXl} />
</div>

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

Selects can be shown in an error state. This indicates that the select 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={SelectStories.ErrorSm} />
<Story of={SelectStories.ErrorMd} />
<Story of={SelectStories.ErrorLg} />
<Story of={SelectStories.ErrorXl} />
</div>

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

Selects 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={SelectStories.SlotIconSm} />
<Story of={SelectStories.SlotIconMd} />
<Story of={SelectStories.SlotIconLg} />
<Story of={SelectStories.SlotIconXl} />
</div>

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

Selects 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={SelectStories.SlotIconFloatSm} />
<Story of={SelectStories.SlotIconFloatMd} />
<Story of={SelectStories.SlotIconFloatLg} />
<Story of={SelectStories.SlotIconFloatXl} />
</div>

<br />
Expand Down
Loading

0 comments on commit 0c0d9a9

Please sign in to comment.