Skip to content

Commit

Permalink
Merge remote-tracking branch 'upstream/master' into split-test-package
Browse files Browse the repository at this point in the history
  • Loading branch information
@michaldudak
michaldudak committed Sep 22, 2023
2 parents 2a01525 + bb5285b commit 91b1972
Show file tree
Hide file tree
Showing 142 changed files with 4,153 additions and 1,415 deletions.
4 changes: 2 additions & 2 deletions .github/workflows/codeql.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ jobs:
uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0
# Initializes the CodeQL tools for scanning.
- name: Initialize CodeQL
uses: github/codeql-action/init@00e563ead9f72a8461b24876bee2d0c2e8bd2ee8 # v2.21.5
uses: github/codeql-action/init@6a28655e3dcb49cb0840ea372fd6d17733edd8a4 # v2.21.8
with:
languages: typescript
config-file: ./.github/codeql/codeql-config.yml
Expand All @@ -30,4 +30,4 @@ jobs:
# Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
# queries: security-extended,security-and-quality
- name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@00e563ead9f72a8461b24876bee2d0c2e8bd2ee8 # v2.21.5
uses: github/codeql-action/analyze@6a28655e3dcb49cb0840ea372fd6d17733edd8a4 # v2.21.8
2 changes: 1 addition & 1 deletion .github/workflows/scorecards.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,6 @@ jobs:

# Upload the results to GitHub's code scanning dashboard.
- name: Upload to code-scanning
uses: github/codeql-action/upload-sarif@00e563ead9f72a8461b24876bee2d0c2e8bd2ee8 # v2.21.5
uses: github/codeql-action/upload-sarif@6a28655e3dcb49cb0840ea372fd6d17733edd8a4 # v2.21.8
with:
sarif_file: results.sarif
185 changes: 185 additions & 0 deletions docs/data/base/components/number-input/NumberInputAdornments.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,185 @@
import * as React from 'react';
import {
Unstable_NumberInput as NumberInput,
numberInputClasses,
} from '@mui/base/Unstable_NumberInput';
import Box from '@mui/material/Box';
import { styled } from '@mui/system';

const CustomNumberInput = React.forwardRef(function CustomNumberInput(props, ref) {
return (
<NumberInput
slots={{
root: StyledInputRoot,
input: StyledInputElement,
incrementButton: StyledButton,
decrementButton: StyledButton,
}}
slotProps={{
incrementButton: {
children: <span className="arrow">▴</span>,
},
decrementButton: {
children: <span className="arrow">▾</span>,
},
}}
{...props}
ref={ref}
/>
);
});

export default function NumberInputAdornments() {
return (
<Box
sx={{
display: 'flex',
flexDirection: { xs: 'column', sm: 'row' },
gap: 2,
}}
>
<CustomNumberInput
startAdornment={
<InputAdornment>
<svg
// From Feather: https://feathericons.com/?query=dollar-sign
xmlns="http://www.w3.org/2000/svg"
height="18"
viewBox="0 0 24 24"
width="18"
fill="none"
stroke="currentColor"
strokeWidth="2.5"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M12 1v22M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
</svg>
</InputAdornment>
}
/>
<CustomNumberInput endAdornment={<InputAdornment>kg</InputAdornment>} />
</Box>
);
}

const InputAdornment = styled('div')(
({ theme }) => `
margin: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
grid-row: 1/3;
color: ${theme.palette.mode === 'dark' ? grey[500] : grey[700]};
`,
);

const blue = {
100: '#DAECFF',
200: '#b6daff',
400: '#3399FF',
500: '#007FFF',
600: '#0072E5',
900: '#003A75',
};

const grey = {
50: '#f6f8fa',
100: '#eaeef2',
200: '#d0d7de',
300: '#afb8c1',
400: '#8c959f',
500: '#6e7781',
600: '#57606a',
700: '#424a53',
800: '#32383f',
900: '#24292f',
};

const StyledInputRoot = styled('div')(
({ theme }) => `
font-family: IBM Plex Sans, sans-serif;
font-weight: 400;
border-radius: 8px;
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
display: grid;
grid-template-columns: auto 1fr auto 19px;
grid-template-rows: 1fr 1fr;
overflow: hidden;
&.${numberInputClasses.focused} {
border-color: ${blue[400]};
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
}
&:hover {
border-color: ${blue[400]};
}
// firefox
&:focus-visible {
outline: 0;
}
`,
);

const StyledInputElement = styled('input')`
font-size: 0.875rem;
font-family: inherit;
font-weight: 400;
line-height: 1.5;
grid-row: 1/3;
color: inherit;
background: inherit;
border: none;
border-radius: inherit;
padding: 8px 12px;
outline: 0;
`;

const StyledButton = styled('button')(
({ theme }) => `
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
appearance: none;
padding: 0;
width: 19px;
height: 19px;
font-family: system-ui, sans-serif;
font-size: 0.875rem;
line-height: 1;
box-sizing: border-box;
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
border: 0;
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 120ms;
&:hover {
background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
cursor: pointer;
}
&.${numberInputClasses.incrementButton} {
grid-column: 4/5;
grid-row: 1/2;
}
&.${numberInputClasses.decrementButton} {
grid-column: 4/5;
grid-row: 2/3;
}
& .arrow {
transform: translateY(-1px);
}
`,
);
189 changes: 189 additions & 0 deletions docs/data/base/components/number-input/NumberInputAdornments.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,189 @@
import * as React from 'react';
import {
Unstable_NumberInput as NumberInput,
NumberInputProps,
numberInputClasses,
} from '@mui/base/Unstable_NumberInput';
import Box from '@mui/material/Box';
import { styled } from '@mui/system';

const CustomNumberInput = React.forwardRef(function CustomNumberInput(
props: NumberInputProps,
ref: React.ForwardedRef<HTMLDivElement>,
) {
return (
<NumberInput
slots={{
root: StyledInputRoot,
input: StyledInputElement,
incrementButton: StyledButton,
decrementButton: StyledButton,
}}
slotProps={{
incrementButton: {
children: <span className="arrow">▴</span>,
},
decrementButton: {
children: <span className="arrow">▾</span>,
},
}}
{...props}
ref={ref}
/>
);
});

export default function NumberInputAdornments() {
return (
<Box
sx={{
display: 'flex',
flexDirection: { xs: 'column', sm: 'row' },
gap: 2,
}}
>
<CustomNumberInput
startAdornment={
<InputAdornment>
<svg
// From Feather: https://feathericons.com/?query=dollar-sign
xmlns="http://www.w3.org/2000/svg"
height="18"
viewBox="0 0 24 24"
width="18"
fill="none"
stroke="currentColor"
strokeWidth="2.5"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M12 1v22M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
</svg>
</InputAdornment>
}
/>
<CustomNumberInput endAdornment={<InputAdornment>kg</InputAdornment>} />
</Box>
);
}

const InputAdornment = styled('div')(
({ theme }) => `
margin: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
grid-row: 1/3;
color: ${theme.palette.mode === 'dark' ? grey[500] : grey[700]};
`,
);

const blue = {
100: '#DAECFF',
200: '#b6daff',
400: '#3399FF',
500: '#007FFF',
600: '#0072E5',
900: '#003A75',
};

const grey = {
50: '#f6f8fa',
100: '#eaeef2',
200: '#d0d7de',
300: '#afb8c1',
400: '#8c959f',
500: '#6e7781',
600: '#57606a',
700: '#424a53',
800: '#32383f',
900: '#24292f',
};

const StyledInputRoot = styled('div')(
({ theme }) => `
font-family: IBM Plex Sans, sans-serif;
font-weight: 400;
border-radius: 8px;
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
display: grid;
grid-template-columns: auto 1fr auto 19px;
grid-template-rows: 1fr 1fr;
overflow: hidden;
&.${numberInputClasses.focused} {
border-color: ${blue[400]};
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
}
&:hover {
border-color: ${blue[400]};
}
// firefox
&:focus-visible {
outline: 0;
}
`,
);

const StyledInputElement = styled('input')`
font-size: 0.875rem;
font-family: inherit;
font-weight: 400;
line-height: 1.5;
grid-row: 1/3;
color: inherit;
background: inherit;
border: none;
border-radius: inherit;
padding: 8px 12px;
outline: 0;
`;

const StyledButton = styled('button')(
({ theme }) => `
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
appearance: none;
padding: 0;
width: 19px;
height: 19px;
font-family: system-ui, sans-serif;
font-size: 0.875rem;
line-height: 1;
box-sizing: border-box;
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
border: 0;
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 120ms;
&:hover {
background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
cursor: pointer;
}
&.${numberInputClasses.incrementButton} {
grid-column: 4/5;
grid-row: 1/2;
}
&.${numberInputClasses.decrementButton} {
grid-column: 4/5;
grid-row: 2/3;
}
& .arrow {
transform: translateY(-1px);
}
`,
);
Loading

0 comments on commit 91b1972

Please sign in to comment.