From 0efd166386a4bde8c9d6ec1ac69ce0525c09fe6f Mon Sep 17 00:00:00 2001 From: Jacqueline Gaherity <30805892+Jacqueline-ms@users.noreply.github.com> Date: Tue, 24 Jan 2023 08:41:58 -0800 Subject: [PATCH 01/13] azure theme calendar style fix --- packages/azure-themes/src/azure/Constants.ts | 1 + .../src/azure/styles/DatePicker.styles.ts | 19 ++++++++-- .../stories/Themes/Themes.stories.tsx | 2 ++ .../stories/components/defaultDatePicker.tsx | 36 +++++++++++++++++++ 4 files changed, 56 insertions(+), 2 deletions(-) create mode 100644 packages/react-examples/src/azure-themes/stories/components/defaultDatePicker.tsx diff --git a/packages/azure-themes/src/azure/Constants.ts b/packages/azure-themes/src/azure/Constants.ts index 6e75503865704..613ac9561dbc3 100644 --- a/packages/azure-themes/src/azure/Constants.ts +++ b/packages/azure-themes/src/azure/Constants.ts @@ -10,6 +10,7 @@ export const borderRadius = '3px'; export const borderSolid = 'solid'; export const borderWidth = '1px'; export const buttonPadding = '0px 16px'; +export const calendarHeightInner = '22px'; export const choiceFieldHeight = '18px'; export const commandBarHeight = '36px'; export const dropDownItemHeight = '32px'; diff --git a/packages/azure-themes/src/azure/styles/DatePicker.styles.ts b/packages/azure-themes/src/azure/styles/DatePicker.styles.ts index 37ab4e2ed9bdb..5690cd802234a 100644 --- a/packages/azure-themes/src/azure/styles/DatePicker.styles.ts +++ b/packages/azure-themes/src/azure/styles/DatePicker.styles.ts @@ -1,5 +1,6 @@ import { IDatePickerStyles, IDatePickerStyleProps } from '@fluentui/react/lib/DatePicker'; import { IExtendedSemanticColors } from '../IExtendedSemanticColors'; +import * as StyleConstants from '../Constants'; export const DatePickerStyles = (props: IDatePickerStyleProps): Partial => { const { disabled, theme } = props; @@ -17,7 +18,7 @@ export const DatePickerStyles = (props: IDatePickerStyleProps): Partial ( @@ -88,6 +89,7 @@ const Example = () => ( + diff --git a/packages/react-examples/src/azure-themes/stories/components/defaultDatePicker.tsx b/packages/react-examples/src/azure-themes/stories/components/defaultDatePicker.tsx new file mode 100644 index 0000000000000..dc07c0dea987b --- /dev/null +++ b/packages/react-examples/src/azure-themes/stories/components/defaultDatePicker.tsx @@ -0,0 +1,36 @@ +import * as React from 'react'; +import { + DatePicker, + DayOfWeek, + Dropdown, + IDropdownOption, + mergeStyles, + defaultDatePickerStrings, +} from '@fluentui/react'; + +const days: IDropdownOption[] = [ + { text: 'Sunday', key: DayOfWeek.Sunday }, + { text: 'Monday', key: DayOfWeek.Monday }, + { text: 'Tuesday', key: DayOfWeek.Tuesday }, + { text: 'Wednesday', key: DayOfWeek.Wednesday }, + { text: 'Thursday', key: DayOfWeek.Thursday }, + { text: 'Friday', key: DayOfWeek.Friday }, + { text: 'Saturday', key: DayOfWeek.Saturday }, +]; +const rootClass = mergeStyles({ minWidth: 170, selectors: { '> *': { marginBottom: 15 } } }); + +export const DatePickerBasicExample: React.FunctionComponent = () => { + const [firstDayOfWeek, setFirstDayOfWeek] = React.useState(DayOfWeek.Sunday); + + return ( +
+ +
+ ); +}; From 0afb8a515850997d3d3d8975ef48411691533b38 Mon Sep 17 00:00:00 2001 From: Jacqueline Gaherity <30805892+Jacqueline-ms@users.noreply.github.com> Date: Sun, 29 Jan 2023 16:40:00 -0800 Subject: [PATCH 02/13] Context menu border fix --- .../azure-themes/src/azure/AzureColors.ts | 3 ++- .../azure-themes/src/azure/AzureThemeDark.ts | 4 ++-- .../src/azure/styles/ContextualMenu.styles.ts | 15 ++++++++----- .../stories/Themes/Themes.stories.tsx | 6 +++++ .../components/ProgressIndicator.stories.tsx | 22 +++++++++++++++++++ 5 files changed, 42 insertions(+), 8 deletions(-) create mode 100644 packages/react-examples/src/azure-themes/stories/components/ProgressIndicator.stories.tsx diff --git a/packages/azure-themes/src/azure/AzureColors.ts b/packages/azure-themes/src/azure/AzureColors.ts index 79ac0dbb05339..9dc26a97aeb7f 100644 --- a/packages/azure-themes/src/azure/AzureColors.ts +++ b/packages/azure-themes/src/azure/AzureColors.ts @@ -92,6 +92,7 @@ export namespace BaseColors { export const GRAY_AFAFAF = '#afafaf'; export const GRAY_A19F9D = '#A19F9D'; export const GRAY_C8C6C4 = '#C8C6C4'; + export const GRAY_E5E5E5 = '#E5E5E5'; export const GRAY_EDEBE9 = '#EDEBE9'; export const GRAY_E1DFDD = '#E1DFDD'; export const GRAY_F3F2F1 = '#F3F2F1'; @@ -132,7 +133,7 @@ export namespace CommonSemanticColors { upsell: BaseColors.PURPLE_8A2DA5, }; export const dividers = { - lineSeparator: BaseColors.GRAY_6B849C_025, + lineSeparator: BaseColors.GRAY_E5E5E5, sectionDivider: BaseColors.GRAY_6B849C_035, }; export const backgrounds = { diff --git a/packages/azure-themes/src/azure/AzureThemeDark.ts b/packages/azure-themes/src/azure/AzureThemeDark.ts index 449b720641176..825af8db2be66 100644 --- a/packages/azure-themes/src/azure/AzureThemeDark.ts +++ b/packages/azure-themes/src/azure/AzureThemeDark.ts @@ -1,5 +1,5 @@ import { createTheme, Theme } from '@fluentui/react'; -import { CommonSemanticColors, DarkSemanticColors } from './AzureColors'; +import { BaseColors, CommonSemanticColors, DarkSemanticColors } from './AzureColors'; import { IExtendedSemanticColors } from './IExtendedSemanticColors'; import { FontSizes } from './AzureType'; import * as StyleConstants from './Constants'; @@ -100,7 +100,7 @@ const darkExtendedSemanticColors: Partial = { rowBorder: DarkSemanticColors.detailsRow.border, rowFocus: DarkSemanticColors.detailsRow.focus, tabHover: DarkSemanticColors.tabs.hover, - variantBorder: CommonSemanticColors.dividers.lineSeparator, + variantBorder: BaseColors.TRANSPARENT, // extended commandBarButtonAfterColor: DarkSemanticColors.commandBar.button.focus.borderColor, diff --git a/packages/azure-themes/src/azure/styles/ContextualMenu.styles.ts b/packages/azure-themes/src/azure/styles/ContextualMenu.styles.ts index 135cb85063ffc..1c6f1c715752e 100644 --- a/packages/azure-themes/src/azure/styles/ContextualMenu.styles.ts +++ b/packages/azure-themes/src/azure/styles/ContextualMenu.styles.ts @@ -17,8 +17,9 @@ export const ContextualMenuStyles = (props: IContextualMenuStyleProps): Partial< subComponentStyles: { callout: { root: { - backgroundColor: semanticColors.inputBackground, - borderColor: semanticColors.inputBorder, + backgroundColor: extendedSemanticColors.controlBackground, + + borderColor: semanticColors.variantBorder, borderStyle: StyleConstants.borderSolid, borderWidth: StyleConstants.borderWidth, boxShadow: Depths.depth8, @@ -34,16 +35,20 @@ export const ContextualMenuStyles = (props: IContextualMenuStyleProps): Partial< root: [ { fontSize: theme.fonts.medium.fontSize, + backgroundColor: extendedSemanticColors.controlBackground, selectors: { '&:hover': { - backgroundColor: semanticColors.buttonBackgroundHovered, - color: semanticColors.buttonTextHovered, + backgroundColor: semanticColors.listItemBackgroundHovered, + color: semanticColors.bodyText, selectors: { '.ms-ContextualMenu-icon': { color: extendedSemanticColors.iconButtonFillHovered, }, }, }, + '&:active': { + color: semanticColors.buttonTextHovered, + }, '.ms-ContextualMenu-icon': { color: extendedSemanticColors.iconButtonFill, }, @@ -54,7 +59,7 @@ export const ContextualMenuStyles = (props: IContextualMenuStyleProps): Partial< fontSize: theme.fonts.medium.fontSize, }, divider: { - backgroundColor: semanticColors.inputBorder, + backgroundColor: semanticColors.variantBorder, }, iconColor: { color: semanticColors.focusBorder, diff --git a/packages/react-examples/src/azure-themes/stories/Themes/Themes.stories.tsx b/packages/react-examples/src/azure-themes/stories/Themes/Themes.stories.tsx index 3037f1bb70589..3cc77386d5dd5 100644 --- a/packages/react-examples/src/azure-themes/stories/Themes/Themes.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/Themes/Themes.stories.tsx @@ -33,6 +33,7 @@ import { TooltipBasicExample } from '../components/tooltip.stories'; import { SliderBasicExample } from '../components/slider.stories'; import { SpinButtonBasicExample } from '../components/SpinButton.stories'; import { DatePickerBasicExample } from '../components/defaultDatePicker'; +import { ProgressIndicatorBasicExample } from '../components/ProgressIndicator.stories'; const Example = () => ( @@ -87,6 +88,11 @@ const Example = () => ( + + + + + diff --git a/packages/react-examples/src/azure-themes/stories/components/ProgressIndicator.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/ProgressIndicator.stories.tsx new file mode 100644 index 0000000000000..2a596313f8dc0 --- /dev/null +++ b/packages/react-examples/src/azure-themes/stories/components/ProgressIndicator.stories.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import { ProgressIndicator } from '@fluentui/react/lib/ProgressIndicator'; + +const intervalDelay = 100; +const intervalIncrement = 0.01; + +export const ProgressIndicatorBasicExample: React.FunctionComponent = () => { + const [percentComplete, setPercentComplete] = React.useState(0); + + React.useEffect(() => { + const id = setInterval(() => { + setPercentComplete((intervalIncrement + percentComplete) % 1); + }, intervalDelay); + return () => { + clearInterval(id); + }; + }); + + return ( + + ); +}; From 4bf0c1b7e854bed68afc0db56d293c3d8646515d Mon Sep 17 00:00:00 2001 From: Jacqueline Gaherity <30805892+Jacqueline-ms@users.noreply.github.com> Date: Sun, 29 Jan 2023 17:42:37 -0800 Subject: [PATCH 03/13] updated all border radius constants from 3 to 2px per feedback, adjusted "today is selected" sizing --- packages/azure-themes/src/azure/Constants.ts | 3 +- .../src/azure/styles/Calendar.styles.ts | 3 +- .../src/azure/styles/DatePicker.styles.ts | 7 +- .../src/azure/styles/DetailsList.styles.ts | 2 +- .../stories/Themes/Themes.stories.tsx | 2 + .../CalendarInlineMultidayDayView.stories.tsx | 69 +++++++++++++++++++ 6 files changed, 81 insertions(+), 5 deletions(-) create mode 100644 packages/react-examples/src/azure-themes/stories/components/CalendarInlineMultidayDayView.stories.tsx diff --git a/packages/azure-themes/src/azure/Constants.ts b/packages/azure-themes/src/azure/Constants.ts index 73b6267240edd..bae2a05389c66 100644 --- a/packages/azure-themes/src/azure/Constants.ts +++ b/packages/azure-themes/src/azure/Constants.ts @@ -6,13 +6,14 @@ import { } from '@fluentui/react/lib/Styling'; export const borderNone = 'none'; -export const borderRadius = '3px'; +export const borderRadius = '2px'; export const borderSolid = 'solid'; export const borderWidth = '1px'; export const buttonPadding = '0px 16px'; export const calendarHeightInner = '22px'; export const choiceFieldHeight = '18px'; export const commandBarHeight = '36px'; +export const DayIsTodayDimension = '27px'; export const dropDownItemHeight = '32px'; export const fontFamily = // eslint-disable-next-line @fluentui/max-len diff --git a/packages/azure-themes/src/azure/styles/Calendar.styles.ts b/packages/azure-themes/src/azure/styles/Calendar.styles.ts index 59ee2e5774b59..3fdd0046d4061 100644 --- a/packages/azure-themes/src/azure/styles/Calendar.styles.ts +++ b/packages/azure-themes/src/azure/styles/Calendar.styles.ts @@ -10,6 +10,7 @@ import { ICalendarPickerStyleProps, } from '@fluentui/react'; import { IExtendedSemanticColors } from '../IExtendedSemanticColors'; +import * as StyleConstants from '../Constants'; // Effects general area of callout. export const CalendarStyles = (props: ICalendarStyleProps): Partial => { @@ -90,7 +91,7 @@ export const CalendarDayGridStyles = (props: ICalendarDayGridStyleProps): Partia }, dayButton: [ { - borderRadius: 2, + borderRadius: StyleConstants.borderRadius, color: 'inherit !important', selectors: { '&:after': { diff --git a/packages/azure-themes/src/azure/styles/DatePicker.styles.ts b/packages/azure-themes/src/azure/styles/DatePicker.styles.ts index 5690cd802234a..c2a360013bf84 100644 --- a/packages/azure-themes/src/azure/styles/DatePicker.styles.ts +++ b/packages/azure-themes/src/azure/styles/DatePicker.styles.ts @@ -40,7 +40,7 @@ export const DatePickerStyles = (props: IDatePickerStyleProps): Partial => { fontSize: 0, paddingTop: 1, paddingLeft: 1, - borderRadius: 2, + borderRadius: StyleConstants.borderRadius, color: semanticColors.listBackground, backgroundColor: semanticColors.listBackground, borderColor: semanticColors.ButtonBorderFocus, diff --git a/packages/react-examples/src/azure-themes/stories/Themes/Themes.stories.tsx b/packages/react-examples/src/azure-themes/stories/Themes/Themes.stories.tsx index 3cc77386d5dd5..61786aa615dd4 100644 --- a/packages/react-examples/src/azure-themes/stories/Themes/Themes.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/Themes/Themes.stories.tsx @@ -34,6 +34,7 @@ import { SliderBasicExample } from '../components/slider.stories'; import { SpinButtonBasicExample } from '../components/SpinButton.stories'; import { DatePickerBasicExample } from '../components/defaultDatePicker'; import { ProgressIndicatorBasicExample } from '../components/ProgressIndicator.stories'; +import { CalendarInlineMultidayDayViewExample } from '../components/CalendarInlineMultidayDayView.stories'; const Example = () => ( @@ -97,6 +98,7 @@ const Example = () => ( + diff --git a/packages/react-examples/src/azure-themes/stories/components/CalendarInlineMultidayDayView.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/CalendarInlineMultidayDayView.stories.tsx new file mode 100644 index 0000000000000..d071334f781cd --- /dev/null +++ b/packages/react-examples/src/azure-themes/stories/components/CalendarInlineMultidayDayView.stories.tsx @@ -0,0 +1,69 @@ +import * as React from 'react'; +import { Calendar, Dropdown, IDropdownOption, mergeStyleSets, defaultCalendarStrings } from '@fluentui/react'; + +const styles = mergeStyleSets({ + wrapper: { height: 360 }, + dropdown: { width: 230 }, +}); + +const dayOptions: IDropdownOption[] = [ + { key: '1', text: '1' }, + { key: '2', text: '2' }, + { key: '3', text: '3' }, + { key: '4', text: '4' }, + { key: '5', text: '5' }, + { key: '6', text: '6' }, +]; + +export const CalendarInlineMultidayDayViewExample: React.FunctionComponent = () => { + const [selectedDateRange, setSelectedDateRange] = React.useState(); + const [selectedDate, setSelectedDate] = React.useState(); + const [daysToSelectInDayView, setDaysToSelectInDayView] = React.useState(4); + + const onSelectDate = React.useCallback((date: Date, dateRangeArray: Date[]): void => { + setSelectedDate(date); + setSelectedDateRange(dateRangeArray); + }, []); + + const onDaysToSelectInDayViewDropdownChange = React.useCallback( + (ev: React.FormEvent, option: IDropdownOption | undefined) => { + if (option) { + setDaysToSelectInDayView(Number(option.key)); + } + }, + [], + ); + + let dateRangeString = 'Not set'; + if (selectedDateRange) { + const rangeStart = selectedDateRange[0]; + const rangeEnd = selectedDateRange[selectedDateRange.length - 1]; + dateRangeString = rangeStart.toLocaleDateString() + '-' + rangeEnd.toLocaleDateString(); + } + + return ( +
+

+ This calendar uses dateRangeType = Day and daysToSelectInView = 4. +

+
Selected date: {selectedDate?.toLocaleString() || 'Not set'}
+
Selected range: {dateRangeString}
+ + +
+ ); +}; From f5e90dc04f6c60af67eb2635d00b71f5bf8f33ce Mon Sep 17 00:00:00 2001 From: Jacqueline Gaherity <30805892+Jacqueline-ms@users.noreply.github.com> Date: Sun, 29 Jan 2023 18:11:07 -0800 Subject: [PATCH 04/13] Updated "today' selector to match figma --- packages/azure-themes/src/azure/Constants.ts | 1 - packages/azure-themes/src/azure/styles/DatePicker.styles.ts | 6 ------ 2 files changed, 7 deletions(-) diff --git a/packages/azure-themes/src/azure/Constants.ts b/packages/azure-themes/src/azure/Constants.ts index bae2a05389c66..6d1b6aed0a16d 100644 --- a/packages/azure-themes/src/azure/Constants.ts +++ b/packages/azure-themes/src/azure/Constants.ts @@ -13,7 +13,6 @@ export const buttonPadding = '0px 16px'; export const calendarHeightInner = '22px'; export const choiceFieldHeight = '18px'; export const commandBarHeight = '36px'; -export const DayIsTodayDimension = '27px'; export const dropDownItemHeight = '32px'; export const fontFamily = // eslint-disable-next-line @fluentui/max-len diff --git a/packages/azure-themes/src/azure/styles/DatePicker.styles.ts b/packages/azure-themes/src/azure/styles/DatePicker.styles.ts index c2a360013bf84..87bd5eefd85db 100644 --- a/packages/azure-themes/src/azure/styles/DatePicker.styles.ts +++ b/packages/azure-themes/src/azure/styles/DatePicker.styles.ts @@ -55,12 +55,6 @@ export const DatePickerStyles = (props: IDatePickerStyleProps): Partial Date: Sun, 29 Jan 2023 18:40:55 -0800 Subject: [PATCH 05/13] Removing border from focused pivot --- packages/azure-themes/src/azure/styles/Pivot.styles.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/azure-themes/src/azure/styles/Pivot.styles.ts b/packages/azure-themes/src/azure/styles/Pivot.styles.ts index 52f7c5f26d8c9..80a9ec922ebf1 100644 --- a/packages/azure-themes/src/azure/styles/Pivot.styles.ts +++ b/packages/azure-themes/src/azure/styles/Pivot.styles.ts @@ -99,6 +99,9 @@ export const PivotStyles = (props: IPivotStyleProps): Partial => { ':active': { backgroundColor: semanticColors.bodyBackground, }, + ':focus': { + border: 0, + }, }, }, !rootIsLarge && { From 3663db34772358690cf36edcc1cdf3b5e7b6c316 Mon Sep 17 00:00:00 2001 From: Jacqueline Gaherity <30805892+Jacqueline-ms@users.noreply.github.com> Date: Sun, 29 Jan 2023 18:48:06 -0800 Subject: [PATCH 06/13] Create @fluentui-azure-themes-fde6e654-0910-4897-912e-842bf2024601.json --- ...-azure-themes-fde6e654-0910-4897-912e-842bf2024601.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-azure-themes-fde6e654-0910-4897-912e-842bf2024601.json diff --git a/change/@fluentui-azure-themes-fde6e654-0910-4897-912e-842bf2024601.json b/change/@fluentui-azure-themes-fde6e654-0910-4897-912e-842bf2024601.json new file mode 100644 index 0000000000000..fb9ec8cc2815d --- /dev/null +++ b/change/@fluentui-azure-themes-fde6e654-0910-4897-912e-842bf2024601.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "azure theme calendar selection, contextmenu border, pivot focus border, dropdown item size updates", + "packageName": "@fluentui/azure-themes", + "email": "30805892+Jacqueline-ms@users.noreply.github.com", + "dependentChangeType": "patch" +} From f44de10a31457326fd7d6779ca802725bb7231dc Mon Sep 17 00:00:00 2001 From: Jacqueline Gaherity <30805892+Jacqueline-ms@users.noreply.github.com> Date: Sun, 29 Jan 2023 19:54:41 -0800 Subject: [PATCH 07/13] removing TS errors --- .../stories/components/defaultDatePicker.tsx | 21 ++----------------- 1 file changed, 2 insertions(+), 19 deletions(-) diff --git a/packages/react-examples/src/azure-themes/stories/components/defaultDatePicker.tsx b/packages/react-examples/src/azure-themes/stories/components/defaultDatePicker.tsx index dc07c0dea987b..d771d7685676b 100644 --- a/packages/react-examples/src/azure-themes/stories/components/defaultDatePicker.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/defaultDatePicker.tsx @@ -1,31 +1,14 @@ import * as React from 'react'; -import { - DatePicker, - DayOfWeek, - Dropdown, - IDropdownOption, - mergeStyles, - defaultDatePickerStrings, -} from '@fluentui/react'; +import { DatePicker, mergeStyles, defaultDatePickerStrings } from '@fluentui/react'; -const days: IDropdownOption[] = [ - { text: 'Sunday', key: DayOfWeek.Sunday }, - { text: 'Monday', key: DayOfWeek.Monday }, - { text: 'Tuesday', key: DayOfWeek.Tuesday }, - { text: 'Wednesday', key: DayOfWeek.Wednesday }, - { text: 'Thursday', key: DayOfWeek.Thursday }, - { text: 'Friday', key: DayOfWeek.Friday }, - { text: 'Saturday', key: DayOfWeek.Saturday }, -]; const rootClass = mergeStyles({ minWidth: 170, selectors: { '> *': { marginBottom: 15 } } }); export const DatePickerBasicExample: React.FunctionComponent = () => { - const [firstDayOfWeek, setFirstDayOfWeek] = React.useState(DayOfWeek.Sunday); + // const [firstDayOfWeek, setFirstDayOfWeek] = React.useState(DayOfWeek.Sunday); return (
Date: Sun, 29 Jan 2023 21:08:09 -0800 Subject: [PATCH 08/13] Centered detailslist checkmark, removed the !important from border on detailslist rows for Elixir --- .../src/azure/styles/DetailsList.styles.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/azure-themes/src/azure/styles/DetailsList.styles.ts b/packages/azure-themes/src/azure/styles/DetailsList.styles.ts index ec2391021d60a..1823112093599 100644 --- a/packages/azure-themes/src/azure/styles/DetailsList.styles.ts +++ b/packages/azure-themes/src/azure/styles/DetailsList.styles.ts @@ -29,8 +29,8 @@ export const CheckStyles = (props: ICheckStyleProps): Partial => { ], check: [ { - left: 2.5, - top: 1.5, + left: 1.8, + top: 0.5, }, checked && { color: semanticColors.inputText, @@ -110,7 +110,11 @@ export const DetailsRowStyles = (props: IDetailsRowStyleProps): Partial Date: Mon, 30 Jan 2023 09:25:35 -0800 Subject: [PATCH 09/13] Removing empty line --- packages/azure-themes/src/azure/styles/ContextualMenu.styles.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/azure-themes/src/azure/styles/ContextualMenu.styles.ts b/packages/azure-themes/src/azure/styles/ContextualMenu.styles.ts index 1c6f1c715752e..d9381126a3307 100644 --- a/packages/azure-themes/src/azure/styles/ContextualMenu.styles.ts +++ b/packages/azure-themes/src/azure/styles/ContextualMenu.styles.ts @@ -18,7 +18,6 @@ export const ContextualMenuStyles = (props: IContextualMenuStyleProps): Partial< callout: { root: { backgroundColor: extendedSemanticColors.controlBackground, - borderColor: semanticColors.variantBorder, borderStyle: StyleConstants.borderSolid, borderWidth: StyleConstants.borderWidth, From c84d2c04015966d48441f38db6c2d9572915285e Mon Sep 17 00:00:00 2001 From: Jacqueline Gaherity <30805892+Jacqueline-ms@users.noreply.github.com> Date: Tue, 31 Jan 2023 19:22:38 -0800 Subject: [PATCH 10/13] Another spinbutton update to match Elixir usage --- packages/azure-themes/src/azure/styles/SpinButton.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/azure-themes/src/azure/styles/SpinButton.styles.ts b/packages/azure-themes/src/azure/styles/SpinButton.styles.ts index e68b0835e4f17..5172e50ff1616 100644 --- a/packages/azure-themes/src/azure/styles/SpinButton.styles.ts +++ b/packages/azure-themes/src/azure/styles/SpinButton.styles.ts @@ -15,7 +15,7 @@ export const SpinButtonStyles: IStyleFunction Date: Tue, 31 Jan 2023 20:09:09 -0800 Subject: [PATCH 11/13] spin button was off by a few pixels in elixir --- packages/azure-themes/src/azure/Constants.ts | 1 - packages/azure-themes/src/azure/styles/SpinButton.styles.ts | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/azure-themes/src/azure/Constants.ts b/packages/azure-themes/src/azure/Constants.ts index 6d1b6aed0a16d..9448f23295cd9 100644 --- a/packages/azure-themes/src/azure/Constants.ts +++ b/packages/azure-themes/src/azure/Constants.ts @@ -24,6 +24,5 @@ export const inputControlPadding = '12px'; export const MinimumScreenSelector = getScreenSelector(0, ScreenWidthMaxSmall); export const MediumScreenSelector = getScreenSelector(ScreenWidthMinMedium, ScreenWidthMaxMedium); export const spinButtonArrowHeight = '14px'; -export const spinButtonHeight = '25px'; export const textAlignCenter = 'center'; export const transparent = 'transparent'; diff --git a/packages/azure-themes/src/azure/styles/SpinButton.styles.ts b/packages/azure-themes/src/azure/styles/SpinButton.styles.ts index 5172e50ff1616..67d3f55b6b237 100644 --- a/packages/azure-themes/src/azure/styles/SpinButton.styles.ts +++ b/packages/azure-themes/src/azure/styles/SpinButton.styles.ts @@ -11,7 +11,7 @@ export const SpinButtonStyles: IStyleFunction Date: Fri, 3 Feb 2023 12:44:26 -0800 Subject: [PATCH 12/13] removed border from disabled action button per designs, reduced size of toggle per designs --- packages/azure-themes/src/azure/Constants.ts | 1 + .../src/azure/styles/ActionButton.styles.ts | 1 - .../src/azure/styles/Toggle.styles.ts | 6 ++ .../stories/Themes/Themes.stories.tsx | 5 +- .../components/actionButton.stories.tsx | 4 +- .../stories/components/commandBar.stories.tsx | 1 + .../components/commandBarButton.stories.tsx | 96 +++++++++++-------- 7 files changed, 68 insertions(+), 46 deletions(-) diff --git a/packages/azure-themes/src/azure/Constants.ts b/packages/azure-themes/src/azure/Constants.ts index 9448f23295cd9..b186e39810c30 100644 --- a/packages/azure-themes/src/azure/Constants.ts +++ b/packages/azure-themes/src/azure/Constants.ts @@ -12,6 +12,7 @@ export const borderWidth = '1px'; export const buttonPadding = '0px 16px'; export const calendarHeightInner = '22px'; export const choiceFieldHeight = '18px'; +export const choiceFieldCircle = '10px'; export const commandBarHeight = '36px'; export const dropDownItemHeight = '32px'; export const fontFamily = diff --git a/packages/azure-themes/src/azure/styles/ActionButton.styles.ts b/packages/azure-themes/src/azure/styles/ActionButton.styles.ts index 1bb5d13cebe28..07722924f9998 100644 --- a/packages/azure-themes/src/azure/styles/ActionButton.styles.ts +++ b/packages/azure-themes/src/azure/styles/ActionButton.styles.ts @@ -22,7 +22,6 @@ export const ActionButtonStyles = (theme: ITheme): Partial => { ...iconColor(extendedSemanticColors.iconButtonFill), }, rootDisabled: { - border: `${StyleConstants.borderWidth} solid ${extendedSemanticColors.primaryButtonBorderDisabled} !important`, backgroundColor: semanticColors.primaryButtonBackgroundDisabled, color: semanticColors.primaryButtonTextDisabled, ...iconColor(semanticColors.primaryButtonTextDisabled), diff --git a/packages/azure-themes/src/azure/styles/Toggle.styles.ts b/packages/azure-themes/src/azure/styles/Toggle.styles.ts index e367d9a77d521..4de71054c24cf 100644 --- a/packages/azure-themes/src/azure/styles/Toggle.styles.ts +++ b/packages/azure-themes/src/azure/styles/Toggle.styles.ts @@ -1,5 +1,6 @@ import { IExtendedSemanticColors } from '../IExtendedSemanticColors'; import { IToggleStyleProps, IToggleStyles } from '@fluentui/react/lib/Toggle'; +import * as StyleConstants from '../Constants'; export const ToggleStyles = (props: IToggleStyleProps): Partial => { const { theme, disabled, checked } = props; @@ -10,6 +11,7 @@ export const ToggleStyles = (props: IToggleStyleProps): Partial = container: {}, pill: [ { + height: StyleConstants.choiceFieldHeight, backgroundColor: semanticColors.bodyBackground, selectors: { '&:hover': { @@ -63,6 +65,10 @@ export const ToggleStyles = (props: IToggleStyleProps): Partial = ], // toggle circle thumb: [ + { + height: StyleConstants.choiceFieldCircle, + width: StyleConstants.choiceFieldCircle, + }, checked && [ { backgroundColor: extendedSemanticColors.buttonBackground, diff --git a/packages/react-examples/src/azure-themes/stories/Themes/Themes.stories.tsx b/packages/react-examples/src/azure-themes/stories/Themes/Themes.stories.tsx index 61786aa615dd4..9cdd3f6940f31 100644 --- a/packages/react-examples/src/azure-themes/stories/Themes/Themes.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/Themes/Themes.stories.tsx @@ -7,7 +7,7 @@ import { AzureThemeHighContrastDark, } from '@fluentui/azure-themes'; import { DefaultButton, CompoundButton, PrimaryButton } from '@fluentui/react/lib/Button'; -import { ButtonCommandBarExample } from '../components/commandBarButton.stories'; +import { CommandBarSplitDisabledExample } from '../components/commandBarButton.stories'; import { ButtonSplitExample } from '../components/splitButton.stories'; import { ButtonIconExample } from '../components/iconButton.stories'; import { ButtonIconWithTooltipExample } from '../components/iconTooltip.stories'; @@ -64,7 +64,8 @@ const Example = () => ( - + + diff --git a/packages/react-examples/src/azure-themes/stories/components/actionButton.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/actionButton.stories.tsx index a5c72ce0804e9..d74e9bdbdf02c 100644 --- a/packages/react-examples/src/azure-themes/stories/components/actionButton.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/actionButton.stories.tsx @@ -18,7 +18,9 @@ export const ButtonActionExample: React.FunctionComponent = Create account - + + Disabled + Button checked diff --git a/packages/react-examples/src/azure-themes/stories/components/commandBar.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/commandBar.stories.tsx index be1eb81911ae1..6383b502e8171 100644 --- a/packages/react-examples/src/azure-themes/stories/components/commandBar.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/commandBar.stories.tsx @@ -24,6 +24,7 @@ const _items: ICommandBarItemProps[] = [ text: 'Add', cacheKey: 'myCacheKey', // changing this key will invalidate this item's cache iconProps: { iconName: 'Add' }, + diabled: true, subMenuProps: { items: [ { diff --git a/packages/react-examples/src/azure-themes/stories/components/commandBarButton.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/commandBarButton.stories.tsx index d301931eb1bca..e44fe2a7ef78d 100644 --- a/packages/react-examples/src/azure-themes/stories/components/commandBarButton.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/commandBarButton.stories.tsx @@ -1,48 +1,60 @@ import * as React from 'react'; -import { IContextualMenuProps, IIconProps, Stack, IStackStyles } from '@fluentui/react'; -import { CommandBarButton } from '@fluentui/react/lib/Button'; +import { CommandBar, ICommandBarItemProps } from '@fluentui/react/lib/CommandBar'; +import { IButtonProps } from '@fluentui/react/lib/Button'; -export interface IButtonExampleProps { - // These are set based on the toggles shown above the examples (not needed in real code) - disabled?: boolean; - checked?: boolean; -} +const overflowButtonProps: IButtonProps = { ariaLabel: 'More commands' }; -const menuProps: IContextualMenuProps = { - items: [ - { - key: 'emailMessage', - text: 'Email message', - iconProps: { iconName: 'Mail' }, - }, - { - key: 'calendarEvent', - text: 'Calendar event', - iconProps: { iconName: 'Calendar' }, - }, - ], -}; -const addIcon: IIconProps = { iconName: 'Add' }; -const mailIcon: IIconProps = { iconName: 'Mail' }; -const stackStyles: Partial = { root: { height: 44 } }; - -export const ButtonCommandBarExample: React.FunctionComponent = props => { - const { disabled, checked } = props; - - // Here we use a Stack to simulate a command bar. - // The real CommandBar control also uses CommandBarButtons internally. +export const CommandBarSplitDisabledExample: React.FunctionComponent = () => { return ( - - - - +
+ +
); }; + +const _items: ICommandBarItemProps[] = [ + { + key: 'newItem', + text: 'New', + iconProps: { iconName: 'Add' }, + split: true, + ariaLabel: 'New', + splitButtonAriaLabel: 'More New options', + subMenuProps: { + items: [ + { key: 'emailMessage', text: 'Email message', iconProps: { iconName: 'Mail' } }, + { key: 'calendarEvent', text: 'Calendar event', iconProps: { iconName: 'Calendar' } }, + ], + }, + }, + { + key: 'upload', + text: 'Upload', + iconProps: { iconName: 'Upload' }, + split: true, + ariaLabel: 'Upload', + splitButtonAriaLabel: 'More Upload options', + disabled: true, + href: 'https://developer.microsoft.com/en-us/fluentui', + subMenuProps: { + items: [ + { key: 'item1', text: 'Item One' }, + { key: 'item2', text: 'Item Two' }, + ], + }, + }, + { + key: 'share', + text: 'Share', + iconProps: { iconName: 'Share' }, + disabled: true, + }, + { + key: 'download', + text: 'Download', + ariaLabel: 'Download', + iconProps: { iconName: 'Download' }, + iconOnly: true, + disabled: true, + }, +]; From 6b41aacfc76370a272976163f65d7766a7de4856 Mon Sep 17 00:00:00 2001 From: Jacqueline Gaherity <30805892+Jacqueline-ms@users.noreply.github.com> Date: Fri, 3 Feb 2023 15:06:31 -0800 Subject: [PATCH 13/13] 5.5 px border --- packages/azure-themes/src/azure/styles/Toggle.styles.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/azure-themes/src/azure/styles/Toggle.styles.ts b/packages/azure-themes/src/azure/styles/Toggle.styles.ts index 4de71054c24cf..fc65898e156c4 100644 --- a/packages/azure-themes/src/azure/styles/Toggle.styles.ts +++ b/packages/azure-themes/src/azure/styles/Toggle.styles.ts @@ -66,6 +66,7 @@ export const ToggleStyles = (props: IToggleStyleProps): Partial = // toggle circle thumb: [ { + borderWidth: 5.5, height: StyleConstants.choiceFieldCircle, width: StyleConstants.choiceFieldCircle, },