Skip to content

Spread prop on SearchBar and set important on utility classes #2704

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 14, 2024
Merged

Spread prop on SearchBar and set important on utility classes #2704

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
36018f8
feat(SearchBar): Spread components.inputBase.className to InputBase
JF-Cozy Oct 14, 2024
4bdb856
feat(CSS): Add `important` prop on border and overflow class utilities
JF-Cozy Oct 14, 2024
032ae69
docs: Add example for Buttons and IconButton
JF-Cozy Oct 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 34 additions & 5 deletions react/Buttons/Readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import Stack from 'cozy-ui/transpiled/react/Stack'
import Grid from 'cozy-ui/transpiled/react/Grid'
import Paper from 'cozy-ui/transpiled/react/Paper'
import Icon from 'cozy-ui/transpiled/react/Icon'
import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'

const variants = ['primary', 'secondary', 'ghost', 'text']
const propsArr = [{}, { disabled: true }, { busy: true }]
Expand Down Expand Up @@ -73,7 +72,9 @@ import Stack from 'cozy-ui/transpiled/react/Stack'
import Grid from 'cozy-ui/transpiled/react/Grid'
import Paper from 'cozy-ui/transpiled/react/Paper'
import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
import StopIcon from 'cozy-ui/transpiled/react/Icons/Stop'
import Icon from 'cozy-ui/transpiled/react/Icon'
import ArrowUpIcon from 'cozy-ui/transpiled/react/Icons/ArrowUp'

const variants = ['primary', 'secondary', 'ghost', 'text']
const iconPositions = ['startIcon', 'endIcon']
Expand All @@ -82,30 +83,58 @@ const iconPositions = ['startIcon', 'endIcon']

<Grid container>
{iconPositions.map(iconPosition =>
<Grid item xs={12} sm={4} className="u-mb-1" key={iconPosition}>
<Grid item xs={12} sm={3} className="u-mb-1" key={iconPosition}>
<Stack spacing="s">
<div>{iconPosition}</div>
{variants.map(variant =>
<div key={variant + iconPosition}>
<Button
label={variant}
variant={variant}
{...({[`${iconPosition}`]: <Icon icon={PlusIcon}/>})}
{...({[`${iconPosition}`]: <Icon icon={PlusIcon} />})}
/>
</div>
)}
</Stack>
</Grid>
)}
<Grid item xs={12} sm={4} className="u-mb-1">
<Grid item xs={12} sm={3} className="u-mb-1">
<Stack spacing="s">
<div>label is only icon</div>
{variants.map(variant =>
<div key={variant}>
<Button
className="u-miw-auto"
label={<Icon icon={PlusIcon}/>}
label={<Icon icon={PlusIcon} />}
variant={variant}
/>
<Button
className="u-ml-1 u-miw-auto"
label={<Icon icon={PlusIcon} />}
variant={variant}
disabled
/>
</div>
)}
</Stack>
</Grid>
<Grid item xs={12} sm={3} className="u-mb-1">
<Stack spacing="s">
<div>round icon button</div>
{variants.map(variant =>
<div key={variant}>
<Button
className="u-miw-auto u-w-2 u-h-2 u-bdrs-circle"
classes={{ label: "u-flex u-w-auto" }}
label={<Icon icon={StopIcon} size={12} />}
variant={variant}
/>
<Button
className="u-ml-1 u-miw-auto u-w-2 u-h-2 u-bdrs-circle"
classes={{ label: "u-flex u-w-auto" }}
label={<Icon icon={StopIcon} size={12} />}
variant={variant}
disabled
/>
</div>
)}
Expand Down
20 changes: 20 additions & 0 deletions react/IconButton/Readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,3 +64,23 @@ const initialVariants = [{ small: false, medium: true, large: false }]
)}
</Variants>
```

### Example with embedded button

```jsx
import IconButton from 'cozy-ui/transpiled/react/IconButton'
import Icon from 'cozy-ui/transpiled/react/Icon'
import Button from 'cozy-ui/transpiled/react/Buttons'
import StopIcon from 'cozy-ui/transpiled/react/Icons/Stop'

;

<IconButton className="u-p-half">
<Button
component="div"
className="u-miw-auto u-w-2 u-h-2 u-bdrs-circle"
classes={{ label: "u-flex u-w-auto" }}
label={<Icon icon={StopIcon} size={12} />}
/>
</IconButton>
```
5 changes: 4 additions & 1 deletion react/SearchBar/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,10 @@ const SearchBar = forwardRef(
{icon && <Icon className={classes.icon} icon={icon} />}
<InputBase
{...componentsProps?.inputBase}
className={classes.inputBase}
className={cx(
classes.inputBase,
componentsProps?.inputBase?.className
)}
placeholder={disabled ? null : placeholder}
value={disabled ? placeholder : spreadValue}
disabled={disabled}
Expand Down
23 changes: 16 additions & 7 deletions react/__snapshots__/examples.spec.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -496,7 +496,7 @@ exports[`Buttons should render examples: Buttons 2`] = `
exports[`Buttons should render examples: Buttons 3`] = `
"<div data-testid=\\"mountNode\\">
<div class=\\"MuiGrid-root MuiGrid-container\\">
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4\\">
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-3\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>startIcon</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary MuiButton-containedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><span class=\\"MuiButton-startIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span>primary</span></button></div>
Expand All @@ -505,7 +505,7 @@ exports[`Buttons should render examples: Buttons 3`] = `
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary MuiButton-textPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><span class=\\"MuiButton-startIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span>text</span></button></div>
</div>
</div>
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4\\">
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-3\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>endIcon</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary MuiButton-containedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">primary<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></span></button></div>
Expand All @@ -514,13 +514,22 @@ exports[`Buttons should render examples: Buttons 3`] = `
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary MuiButton-textPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">text<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></span></button></div>
</div>
</div>
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4\\">
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-3\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>label is only icon</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary u-miw-auto MuiButton-containedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary u-miw-auto MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost u-miw-auto MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary u-miw-auto MuiButton-textPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary u-miw-auto MuiButton-containedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></button><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary u-ml-1 u-miw-auto MuiButton-containedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary u-miw-auto MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></button><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary u-ml-1 u-miw-auto MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost u-miw-auto MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></button><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost u-ml-1 u-miw-auto MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary u-miw-auto MuiButton-textPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></button><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary u-ml-1 u-miw-auto MuiButton-textPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></button></div>
</div>
</div>
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-3\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>round icon button</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary u-miw-auto u-w-2 u-h-2 u-bdrs-circle MuiButton-containedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label u-flex u-w-auto\\"><svg viewBox=\\"0 0 12 12\\" class=\\"styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\"><path d=\\"M.75 1.5A.75.75 0 011.5.75h9a.75.75 0 01.75.75v9a.75.75 0 01-.75.75h-9a.75.75 0 01-.75-.75v-9z\\"></path></svg></span></button><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary u-ml-1 u-miw-auto u-w-2 u-h-2 u-bdrs-circle MuiButton-containedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label u-flex u-w-auto\\"><svg viewBox=\\"0 0 12 12\\" class=\\"styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\"><path d=\\"M.75 1.5A.75.75 0 011.5.75h9a.75.75 0 01.75.75v9a.75.75 0 01-.75.75h-9a.75.75 0 01-.75-.75v-9z\\"></path></svg></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary u-miw-auto u-w-2 u-h-2 u-bdrs-circle MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label u-flex u-w-auto\\"><svg viewBox=\\"0 0 12 12\\" class=\\"styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\"><path d=\\"M.75 1.5A.75.75 0 011.5.75h9a.75.75 0 01.75.75v9a.75.75 0 01-.75.75h-9a.75.75 0 01-.75-.75v-9z\\"></path></svg></span></button><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary u-ml-1 u-miw-auto u-w-2 u-h-2 u-bdrs-circle MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label u-flex u-w-auto\\"><svg viewBox=\\"0 0 12 12\\" class=\\"styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\"><path d=\\"M.75 1.5A.75.75 0 011.5.75h9a.75.75 0 01.75.75v9a.75.75 0 01-.75.75h-9a.75.75 0 01-.75-.75v-9z\\"></path></svg></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost u-miw-auto u-w-2 u-h-2 u-bdrs-circle MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label u-flex u-w-auto\\"><svg viewBox=\\"0 0 12 12\\" class=\\"styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\"><path d=\\"M.75 1.5A.75.75 0 011.5.75h9a.75.75 0 01.75.75v9a.75.75 0 01-.75.75h-9a.75.75 0 01-.75-.75v-9z\\"></path></svg></span></button><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost u-ml-1 u-miw-auto u-w-2 u-h-2 u-bdrs-circle MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label u-flex u-w-auto\\"><svg viewBox=\\"0 0 12 12\\" class=\\"styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\"><path d=\\"M.75 1.5A.75.75 0 011.5.75h9a.75.75 0 01.75.75v9a.75.75 0 01-.75.75h-9a.75.75 0 01-.75-.75v-9z\\"></path></svg></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary u-miw-auto u-w-2 u-h-2 u-bdrs-circle MuiButton-textPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label u-flex u-w-auto\\"><svg viewBox=\\"0 0 12 12\\" class=\\"styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\"><path d=\\"M.75 1.5A.75.75 0 011.5.75h9a.75.75 0 01.75.75v9a.75.75 0 01-.75.75h-9a.75.75 0 01-.75-.75v-9z\\"></path></svg></span></button><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary u-ml-1 u-miw-auto u-w-2 u-h-2 u-bdrs-circle MuiButton-textPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label u-flex u-w-auto\\"><svg viewBox=\\"0 0 12 12\\" class=\\"styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\"><path d=\\"M.75 1.5A.75.75 0 011.5.75h9a.75.75 0 01.75.75v9a.75.75 0 01-.75.75h-9a.75.75 0 01-.75-.75v-9z\\"></path></svg></span></button></div>
</div>
</div>
</div>
Expand Down
16 changes: 8 additions & 8 deletions stylus/utilities/border.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,27 @@
@require '../tools/mixins'

bdrs-0()
border-radius rem(0)
border-radius rem(0) !important // @stylint ignore
Copy link
Member

@zatteo zatteo Oct 14, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there an explanation of why the !important is needed ? Can we add it ?

Copy link
Collaborator Author

@JF-Cozy JF-Cozy Oct 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On a pas mal de classe utilitaires qui sont en important, justement parce que ce sont des classes utilitaires et qu'elles doivent prendre la main sur le css de l'app. Et certaines classes ne le sont pas, ce qui fait qu'elles ne servent à rien dans le cas d'un div qui a déjà le style correspondant définit, puisque le css de l'app est chargé en dernier.


bdrs-1()
border-radius rem(2)
border-radius rem(2) !important // @stylint ignore

bdrs-2()
border-radius rem(3)
border-radius rem(3) !important // @stylint ignore

bdrs-3()
border-radius rem(4)
border-radius rem(4) !important // @stylint ignore

bdrs-4()
border-radius rem(8)
border-radius rem(8) !important // @stylint ignore

bdrs-circle()
border-radius 100%
border-radius 100% !important // @stylint ignore

bdw-0()
border-width rem(0)
border-width rem(0) !important // @stylint ignore
bdw-1()
border-width rem(2)
border-width rem(2) !important // @stylint ignore

props = {
'bdrs-0': 'bdrs-0',
Expand Down
8 changes: 4 additions & 4 deletions stylus/utilities/overflow.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,16 @@
\*------------------------------------*/

overflow-visible()
overflow visible
overflow visible !important // @stylint ignore

overflow-hidden()
overflow hidden
overflow hidden !important // @stylint ignore

overflow-scroll()
overflow scroll
overflow scroll !important // @stylint ignore

overflow-auto()
overflow auto
overflow auto !important // @stylint ignore

// Global classes
global('.u-ov-visible', overflow-visible, mixin)
Expand Down
Loading