From d2521a045322732c96f1cd822f7fbfbac167eef4 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Mon, 10 Oct 2022 16:05:36 +0200 Subject: [PATCH 1/2] [DateRangePicker] Fix CSS for calendar on hover --- .github/workflows/codeql.yml | 34 +++++++------- .../DateRangePickerDay/DateRangePickerDay.tsx | 44 ++++++++++--------- 2 files changed, 40 insertions(+), 38 deletions(-) diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml index 8e5370e11ac9..d6f25b140ece 100644 --- a/.github/workflows/codeql.yml +++ b/.github/workflows/codeql.yml @@ -20,26 +20,26 @@ jobs: strategy: fail-fast: false matrix: - language: [ 'javascript', 'typescript' ] + language: ['javascript', 'typescript'] # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support steps: - - name: Checkout repository - uses: actions/checkout@v3 + - name: Checkout repository + uses: actions/checkout@v3 - # Initializes the CodeQL tools for scanning. - - name: Initialize CodeQL - uses: github/codeql-action/init@v2 - with: - languages: ${{ matrix.language }} - # If you wish to specify custom queries, you can do so here or in a config file. - # By default, queries listed here will override any specified in a config file. - # Prefix the list here with "+" to use these queries and those in the config file. + # Initializes the CodeQL tools for scanning. + - name: Initialize CodeQL + uses: github/codeql-action/init@v2 + with: + languages: ${{ matrix.language }} + # If you wish to specify custom queries, you can do so here or in a config file. + # By default, queries listed here will override any specified in a config file. + # Prefix the list here with "+" to use these queries and those in the config file. - # 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 + # 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@v2 - with: - category: "/language:${{matrix.language}}" + - name: Perform CodeQL Analysis + uses: github/codeql-action/analyze@v2 + with: + category: '/language:${{matrix.language}}' diff --git a/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx b/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx index 01af249d4464..7707ac71d89e 100644 --- a/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx @@ -207,27 +207,29 @@ const DateRangePickerDayDay = styled(PickersDay, { ], })<{ ownerState: OwnerState; -}>(({ theme, ownerState }) => ({ - // Required to overlap preview border - transform: 'scale(1.1)', - '& > *': { - transform: 'scale(0.9)', - }, - ...(!ownerState.selected && { - backgroundColor: 'transparent', - }), - ...(!ownerState.isHighlighting && { - '&:hover': { - border: `1px solid ${theme.palette.grey[500]}`, - }, - }), - ...(!ownerState.selected && - ownerState.isHighlighting && { - color: theme.palette.getContrastText(alpha(theme.palette.primary.light, 0.6)), - }), -})) as unknown as ( - props: PickersDayProps & { ownerState: OwnerState }, -) => JSX.Element; +}>(({ theme, ownerState }) => + ownerState.outsideCurrentMonth && !ownerState.showDaysOutsideCurrentMonth + ? {} + : { + // Required to overlap preview border + transform: 'scale(1.1)', + '& > *': { + transform: 'scale(0.9)', + }, + ...(!ownerState.selected && { + backgroundColor: 'transparent', + }), + ...(!ownerState.isHighlighting && { + '&:hover': { + border: `1px solid ${theme.palette.grey[500]}`, + }, + }), + ...(!ownerState.selected && + ownerState.isHighlighting && { + color: theme.palette.getContrastText(alpha(theme.palette.primary.light, 0.6)), + }), + }, +) as unknown as (props: PickersDayProps & { ownerState: OwnerState }) => JSX.Element; type DateRangePickerDayComponent = ( props: DateRangePickerDayProps & React.RefAttributes, From 85ad2f3550ac00fb775db9bf23cd046f25ff79d4 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Wed, 12 Oct 2022 13:20:51 +0200 Subject: [PATCH 2/2] Flavien proposal --- .../DateRangePickerDay/DateRangePickerDay.tsx | 44 +++++++++---------- .../src/PickersDay/PickersDay.tsx | 1 + 2 files changed, 22 insertions(+), 23 deletions(-) diff --git a/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx b/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx index 7707ac71d89e..01af249d4464 100644 --- a/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx @@ -207,29 +207,27 @@ const DateRangePickerDayDay = styled(PickersDay, { ], })<{ ownerState: OwnerState; -}>(({ theme, ownerState }) => - ownerState.outsideCurrentMonth && !ownerState.showDaysOutsideCurrentMonth - ? {} - : { - // Required to overlap preview border - transform: 'scale(1.1)', - '& > *': { - transform: 'scale(0.9)', - }, - ...(!ownerState.selected && { - backgroundColor: 'transparent', - }), - ...(!ownerState.isHighlighting && { - '&:hover': { - border: `1px solid ${theme.palette.grey[500]}`, - }, - }), - ...(!ownerState.selected && - ownerState.isHighlighting && { - color: theme.palette.getContrastText(alpha(theme.palette.primary.light, 0.6)), - }), - }, -) as unknown as (props: PickersDayProps & { ownerState: OwnerState }) => JSX.Element; +}>(({ theme, ownerState }) => ({ + // Required to overlap preview border + transform: 'scale(1.1)', + '& > *': { + transform: 'scale(0.9)', + }, + ...(!ownerState.selected && { + backgroundColor: 'transparent', + }), + ...(!ownerState.isHighlighting && { + '&:hover': { + border: `1px solid ${theme.palette.grey[500]}`, + }, + }), + ...(!ownerState.selected && + ownerState.isHighlighting && { + color: theme.palette.getContrastText(alpha(theme.palette.primary.light, 0.6)), + }), +})) as unknown as ( + props: PickersDayProps & { ownerState: OwnerState }, +) => JSX.Element; type DateRangePickerDayComponent = ( props: DateRangePickerDayProps & React.RefAttributes, diff --git a/packages/x-date-pickers/src/PickersDay/PickersDay.tsx b/packages/x-date-pickers/src/PickersDay/PickersDay.tsx index ea562295f6ca..9191d61f47bd 100644 --- a/packages/x-date-pickers/src/PickersDay/PickersDay.tsx +++ b/packages/x-date-pickers/src/PickersDay/PickersDay.tsx @@ -184,6 +184,7 @@ const PickersDayFiller = styled('div', { ...styleArg({ theme, ownerState }), // visibility: 'hidden' does not work here as it hides the element from screen readers as well opacity: 0, + pointerEvents: 'none', })); const noop = () => {};