microsoft/fluentui 9009
We've moved! UI Fabric is now Fluent UI - A set of React components for building Microsoft web experiences.
An ecosystem for building highly customizable enterprise class user interfaces.
Distributed infrastructure for Machine Translation web services (using Moses, Python, JSON-RPC/web interface)
Strict TypeScript and Flow types for style based on MDN data
Project to connect MTMonkey and Eman-Lite
A work in progress; please stand by.
Init google maps and show markers on click
Tool for comparison and evaluation of machine translation.
Repository for gene task of nfpl104
push eventpompomon/office-ui-fabric-react
commit sha 6b6f285bfcd8c6f5df8077605d8ea6b82d45bd85
Copying TeachingBubble to react-next, in preparation for converting to a function component (#14220) * Moving teachingBubble into react-next. * Change files
commit sha ccb3e8e569d2af1e4bcfa18789ea426927d32e50
adding Roman to codeowners for date time (#14226)
commit sha 0dfa86ddfc41052efb58c5de5eb760f0020c18f8
Updating existing react-next examples to use the newest ones found inside of office-ui-fabric-react (#14217) * Updating existing react-next examples to use newest examples inside of OUFR. * Change files * Removing unused useKeytipsRef import from Ketips.Basic.Example * Changing comment on Change file. * Reverting changes in Keytips.Basic.Example
commit sha a35dce221bb1e179dbc068cff67d02f6b75e67f3
Add general comment about refs in function components (#14148) * Add general comment about refs in function components * Change files
commit sha 32119206e8d42aa3690d63a3b4bf4000fcbf09ed
applying package updates
commit sha 91fff79253d0aa6b9b6572abbf7691a04371253c
High contrast light + dark themes (#14193) * High contrast light + dark themes * Change files * High contrast clean up * DetailsList border fix * Merge branch 'master' of https://github.com/microsoft/fluentui into jackieg/high-contrast-themes * Pivots bug fix + high contrast values * Typo fix Co-authored-by: Jackie <[email protected]>
commit sha 56673c9157fa64c2ac2d8684b0c9f119ee668990
Syntax highlighting a11y (#14139) Updating syntax highlighting to resolve some a11y contrast issues. Bit of a stopgap until we can do a full pass. 
commit sha 7fb345ceb101cf5b5ad6d046cf95a58195155d17
GroupedList: Added built in keyboard support (#11494) * updated grouped list to be a11y compliant * fixed snaps * Change files
commit sha 65b946bd6bc9381f190816307a18d866fa585e37
Result: Add either to help with creation of codemods (#14154) #### Pull request checklist - [ ] Addresses an existing issue: Fixes #0000 - [ ] Include a change request file using `$ yarn change` #### Description of changes Either makes it easy to handle things like failure states since you can return the error and handle it later after preforming several computations. #### Focus areas to test (optional)
commit sha b42ae30fb2bf82da9dac0acec4e7c61431c59652
Suggestion list clipping fix (#13875) #### Pull request checklist - [x] Addresses an existing issue: Fixes #13590 - [x] Include a change request file using `$ yarn change` #### Description of changes This adds a noop transform that forces hardware acceleration. ##### Before  ##### After  #### Focus areas to test
commit sha 5679d177d5febc6541806b31592d35a44fb9f139
Charting: Common charting helper base class added (#14177) * common charthelper added to charting package * Change files * change log files Co-authored-by: Jameela Kowsar Shaik (Zen3 Infosolutions America Inc) <[email protected]>
commit sha e0cd2a86ed6c914206bbf72766c2bba10473dc92
Charting: Add Accessibility support for Sankey chart (#14196) * Charting: Add Accessibility support for Sankey chart * Change files * Add opacity for selected link Co-authored-by: Rajesh Goriga <[email protected]>
commit sha fd40ede951aab59fbedb2c210cf2b10030e60a9d
applying package updates
commit sha 40c70519bffb65b73f84a8e7c6332850aecd3c34
Feature/new tooltip design supporting subcounts in line chart (#14169) * Adding options to show total counts in line chart legend * Adding new type to yAxisCalloutData to support new tooltip design * Fixing yCalloutData type in util * Change files * Updating tooltip design: show original tooltip when no subcount is detected, else show the new tooltip * Removing total counts in legend label, margin correction * revert debug code * Margin fix in tooltip * css style edit: tooltip column header font style, fixing build error caused from lint * interface naming convention fix * Moving IYValueHover to ChartHelper.types.ts Co-authored-by: Jisoo Jung <[email protected]>
commit sha a7bc9aa9d9403536a92a10393b4466c58431507c
feat: add web components to fluent ui as a new package and fix text field styling issue (#14203) * feat: add web components to fluent ui as a new package * yarn lockfile * Fix dependency versions and scripts * Exclude web-components from publishing * fix invalid dep * do not hoist types in web components * update repo url to package location Co-authored-by: Elizabeth Craig <[email protected]>
commit sha eaada6f8e6499585952528ac8ebead0a8e7da906
Add @fluentui/storybook package and dedup withThemeProvider decorator (#14240) * added storybook pacakge * remove duplicated storybook decor everywhere * Change files * fixes * fix * remove lint exception * resolve comments * remove files * update types * fix package versions
commit sha 424bac7658dfd3084a32069d241a252493deecd5
fix: updated web components card background recipe (#14269) Co-authored-by: Brian Heston <[email protected]>
commit sha f1047c3cd6fb28b558d2b40a005dc87a2f4ec714
useCustomizationSettings: get settings from CustomizerContext if exists. (#14145) * get settings from context * Change files
commit sha 071d3d60cd194e609a390b0a585ae7fcb49ffe19
chore: add missing close script tag to web components readme (#14271)
push time in 6 days
push eventpompomon/office-ui-fabric-react
commit sha 7d239d4c7709837d6a9a743d0cd9ef83305b3139
update codesandbox templates' tsconfig.json (#14150) #### Pull request checklist - [ ] Addresses an existing issue: Fixes #0000 - [ ] Include a change request file using `$ yarn change` #### Description of changes updates tsconfig.json file to remove comments and look more similar to other tsconfig.json files #### Focus areas to test (optional)
commit sha f8def98981f2eba795fb88afd3887fedc0b56a9c
Charting: Fix Line chart render with empty array of data + a event annotation, the chart throws a strange formatting exception (#14161) * Charting: Fix Line chart render with empty array of data + a event annotation, the chart throws a strange formatting exception. * Change files Co-authored-by: Rajesh Goriga <[email protected]>
commit sha 767b6094a42a4b5171844ccdc95741029e6e0ae8
UnifiedPicker accessibility fixes (#14090) * Error: ensure every form element has a label The Autofill didn't. The prop already existed though, so this was a bug with the sample. I have added it. * Removing the list role from the wrapper div * Fix violation: ensures elements with an aria role that require child roles contain them Dropdown was using a local var instead of the prop to set aria vars, * Setting the activedescendent properly * Do an index check * updating snapshots * Change files * address PR comments * Add SelectedItemsList fixes * Update change file * Don't have an empty div if there are no list items
commit sha 44b99ab5e98f0c80e10b0d141a54903a328be450
fix aria labels in WeeklyDayPicker (#14073) * fix next and previous month/week aria labels in weekly day picker * Change files * updating change file and the api file * fixing lint issue with the new methods
commit sha a9f932261132ead0df90ac81614068e9b0951824
T-dama/Added More Transforms (#14152) * WIP add transform * WIP robustness checks * simplify transforms * merge fixes * add general transforms that work with spread * clean up propHelper * WIP robustness checks * fix conflicts with new maybe * Change files * clean return Co-authored-by: Trip Master <[email protected]>
commit sha 2534fd78ec65b88a5049c7d2d9e54d1103159852
Enable "rules of hooks" lint rules in date-time and lists (#14098)
commit sha 5e06d57166032a570b08f077ed7ab8d4cf8d95f6
Enable "rules of hooks" lint rules in experiments (#14100)
commit sha 68f77ba470b728bc947d37c4f2d3754d82f5bb3a
Grouped vertical bar chart method calling in did mount. (#14137) * Groped vertical bar chart calling in did mount * Change files * change log files Co-authored-by: Jameela Kowsar Shaik (Zen3 Infosolutions America Inc) <[email protected]>
commit sha 940524c755d5cf60ca3f80b705e30fca61b2d5ba
Create @fluentui/common-styles package, for styling files shared between components (#14155) * Add common-styles package; move styles from react-next and react-tabs
commit sha 1f19c0a771a864d7225cc7b7e8951388a7671039
applying package updates
commit sha 9f24389e2d1ec68a2555df860518273330e0e62a
Codemods/renamePropInSpread abstract out logic and improve documentation (#14172) * WIP add transform * WIP robustness checks * add general transforms that work with spread * clean up propHelper * WIP decomp add var statement * improve abstraction / documentation * Change files Co-authored-by: Trip Master <[email protected]>
commit sha c0ba783ab53821e4a70f61f823e87ca240a9665a
Dropdown: fix high contrast styles in disabled state (#14176) * Add high contrast adjust selector to dropdown styles * Change files * Change files * update choicegroup snapshot
commit sha 4f6d22e0094842f600d122cc6eba05075919ed5b
Add mark to Calendar component days (#14074) * adding ability to mark calendar days with a callback function * updating types and public api file * Change files * removing important * renaming functional components to satisfy linter * changing callback function for marking days from a per-day callback (requiring 35 - 42 calls per render) to a per-month callback (requiring 1 call per render) * moving isMarked to be on IDay interface, allowing passing list of days or callback function for days * Change files * adjusting classNames to remove hack * undoing *.md changes * undoing .doc changes also * addressing comments * addressing comment
commit sha 89ef7eab4d2f574977bf83256bde78d65e6f92da
Scrollable Pane: Fix pointer events (#13744) * Fix pointer events * Change files * Update snapshots Co-authored-by: Eddie Liu <[email protected]>
commit sha b0ebbc5a268938a9be69d314d83293b2717212c2
Update CODEOWNERS
commit sha b597e49e7037e215da6659b81ea39778e3cfa07a
applying package updates
commit sha fe817a299d3fef1758450d06b12ffc9baabf31fc
fix(dropdown): event propagation (#14184) #### Pull request checklist - [ ] Addresses an existing issue: Fixes #0000 - [ ] Include a change request file using `$ yarn change` #### Description of changes `Dropdown` should only prevents propagation of `ESC` keydown if the list is open, otherwise propagation should still happen. #### Focus areas to test (optional)
commit sha f221124773e3d291005bf8d0d74f6e3203d15660
fix(Popup): allow close controlled popup when have hover trigger (#14179) * fix(Popup): allow close autocontroled popup when have hover trigger * fix(Popup): Add tests * fix(Popup): Add changelog * fix(popup): add test * Update Popup-test.tsx
commit sha 455be87d6ce147b967dec8c1a4ddeae2526e6559
Fix choice group's disabled style for Azure theme (#14190) * fix choice group disable style * Change files
commit sha 63dfc9eb7a361002f8d7eb123272f1957e718340
Linechart : Fix issue The tool tip seems to display all the data in same day, instead of the point where my mouse hovers. (#14195) * Linechart : Fix issue The tool tip seems to display all the data in same day, instead of the point where my mouse hovers. * Change files Co-authored-by: Rajesh Goriga <[email protected]>
push time in 6 days
push eventpompomon/office-ui-fabric-react
commit sha e6c15a5fc641da0efb5ca1726894fabd6f9725d7
Update Changelog
push time in 6 days
push eventpompomon/office-ui-fabric-react
commit sha bbd0f13bf0a30b537627c57d28c3648529a018d0
PR comments fixes
push time in 6 days
push eventpompomon/office-ui-fabric-react
commit sha dd9bc795ab062872f41b7ef351726fdeb23b350b
Apply suggestions from code review Co-authored-by: Oleksandr Fediashov <[email protected]>
push time in 6 days
push eventpompomon/office-ui-fabric-react
commit sha b597e49e7037e215da6659b81ea39778e3cfa07a
applying package updates
commit sha fe817a299d3fef1758450d06b12ffc9baabf31fc
fix(dropdown): event propagation (#14184) #### Pull request checklist - [ ] Addresses an existing issue: Fixes #0000 - [ ] Include a change request file using `$ yarn change` #### Description of changes `Dropdown` should only prevents propagation of `ESC` keydown if the list is open, otherwise propagation should still happen. #### Focus areas to test (optional)
commit sha f221124773e3d291005bf8d0d74f6e3203d15660
fix(Popup): allow close controlled popup when have hover trigger (#14179) * fix(Popup): allow close autocontroled popup when have hover trigger * fix(Popup): Add tests * fix(Popup): Add changelog * fix(popup): add test * Update Popup-test.tsx
commit sha 455be87d6ce147b967dec8c1a4ddeae2526e6559
Fix choice group's disabled style for Azure theme (#14190) * fix choice group disable style * Change files
commit sha 63dfc9eb7a361002f8d7eb123272f1957e718340
Linechart : Fix issue The tool tip seems to display all the data in same day, instead of the point where my mouse hovers. (#14195) * Linechart : Fix issue The tool tip seems to display all the data in same day, instead of the point where my mouse hovers. * Change files Co-authored-by: Rajesh Goriga <[email protected]>
commit sha 20caabd592970eef8431d4b47c923e54767e3d3e
Move ThemeProvider from react-next to react-theme-provider's compat folder (#14187) * Move ThemeProvider from react-next to react-theme-provider's Compat folder * Update imports * Change files * Change case of Compat folder (stage 1 of 2) * Change case of compat folder (stage 2 of 2) * Change case of compat folder (stage 3 of 2) * Export ThemeProvider from react-tabs
commit sha 639c468815c9e389eb3002fa54acc159b3fae048
Update react-button to use common-styles (#14189) Update react-button to use common-styles, and migrate the updates to _focusBorder.scss from react-button into common-styles.
commit sha d0b7aa6cf848b2abbe9fdb54fd7972bd69bcffff
@fluentui/react: add missing dist/sass and dist/css content (#14202) * copy over scss and css * Change files
commit sha fdc095fd93f528381650e1215bcf2bfe1ff9acf6
React conformance - Adding wrappers to packages (#13939)
commit sha 107eb1b7dbd10347615704a64ee5f751fb0c91f0
chore: prepare release react-northstar 0.51.0
commit sha 8fae3a54723db0600aa6cf0d3b713f66e4455739
applying package updates
commit sha 215aed1574db0b0db7d5fe130d19072178855423
@fluentui/react-northstar_v0.51.0
commit sha bdb1d3a96db34d4fb854457ed2e9e6491753092f
Fix dependencies after react-northstar release
commit sha 5f80b4d72d88d16bb33af1a33817e199fb61fadf
chore(Builder): immutable tree (#14209) * remove unused potentialDropTarget * Designer state refactored to immer. showCode commented out * code editing * remove codeError after code change * cleanup types
commit sha 6d97a6dd63602425eff28123a9d58c5717422902
Documentation fixes ResponsiveMode `Large` and `Small` to `large` and `small` (#14219) * Renamed ResponsiveMode.Large to ResponsiveMode.large * Renamed ResponsiveMode.Small to ResponsiveMode.small
push time in 8 days
Pull request review commentmicrosoft/fluentui
Support onChange callback in FluentUI Datepicker Input Field
export const Datepicker: ComponentWithAs<'div', DatepickerProps> & overrideProps: overrideDatepickerCalendarProps, }); + const openStateToBooleanKnob = (openState: OpenState): boolean => {+ return openState === OpenState.Open;+ };++ const onInputClick = (): void => {+ if (openState === OpenState.Closed) {+ setOpenState(OpenState.Open);+ } else if (openState === OpenState.Open || openState === OpenState.Closing) {+ // Keep popup open in case we can only enter the date through calendar.+ if (props.allowTextInput) {+ setOpenState(OpenState.Closed);+ } else {+ setOpenState(OpenState.Open);+ }+ }+ };++ const onInputChange = (e, target: { value: string }) => {+ const parsedDate = props.parseDate(target.value);++ setFormattedDate(target.value);+ if (parsedDate) {+ if (isRestrictedDate(parsedDate, calendarOptions)) {+ setError('The selected date is from the restricted range.');+ } else {+ setError('');+ setSelectedDate(parsedDate);+ _.invoke(props, 'onDateChange', e, { ...props, value: parsedDate });+ }+ } else if (target.value) {+ setError('Manually entered date is not in correct format.');
Same here, we should be able to localize all the labels
comment created time in 9 days
Pull request review commentmicrosoft/fluentui
Support onChange callback in FluentUI Datepicker Input Field
export const Datepicker: ComponentWithAs<'div', DatepickerProps> & overrideProps: overrideDatepickerCalendarProps, }); + const openStateToBooleanKnob = (openState: OpenState): boolean => {+ return openState === OpenState.Open;+ };++ const onInputClick = (): void => {+ if (openState === OpenState.Closed) {+ setOpenState(OpenState.Open);+ } else if (openState === OpenState.Open || openState === OpenState.Closing) {+ // Keep popup open in case we can only enter the date through calendar.+ if (props.allowTextInput) {+ setOpenState(OpenState.Closed);+ } else {+ setOpenState(OpenState.Open);+ }+ }+ };++ const onInputChange = (e, target: { value: string }) => {+ const parsedDate = props.parseDate(target.value);++ setFormattedDate(target.value);+ if (parsedDate) {+ if (isRestrictedDate(parsedDate, calendarOptions)) {+ setError('The selected date is from the restricted range.');
That should be a prop, so consumers can put the localized version of the error
comment created time in 9 days
push eventpompomon/office-ui-fabric-react
commit sha a679fad81f6c755ddfaac082cf91d2499669b36e
Fix PR comments and tests
push time in 9 days
Pull request review commentmicrosoft/fluentui
Support onChange callback in FluentUI Datepicker Input Field
Datepicker.propTypes = { calendar: customPropTypes.itemShorthand, popup: customPropTypes.itemShorthand, + disabled: PropTypes.bool,+ isRequired: PropTypes.bool,+ onDateChange: PropTypes.func,+ placeholder: PropTypes.string,+ allowTextInput: PropTypes.bool,
ManualInput/AllowManualInput was my other option, but I think we can do that like it
comment created time in 9 days
Pull request review commentmicrosoft/fluentui
Support onChange callback in FluentUI Datepicker Input Field
export const Datepicker: ComponentWithAs<'div', DatepickerProps> & ...unhandledProps, })} >- <Input readOnly onClick={showCalendarGrid} value={valueFormatter(selectedDate)} />+ <Input
Yeah, let's do that :)
comment created time in 9 days
Pull request review commentmicrosoft/fluentui
feat(Datepicker): Add basic keyboard navigation for calendar grid
export const DatepickerCalendar: ComponentWithAs<'div', DatepickerCalendarProps> rtl: context.rtl, }); - /** Get days grid and slice it in case it contains additional weeks at the beginning and end. */- const getSlicedGrid = () => {- const gridOptions = {- selectedDate: normalizedSelectedDate,- navigatedDate: gridNavigatedDate,- firstDayOfWeek,- firstWeekOfYear,- dateRangeType,- };- const grid = getDayGrid(gridOptions);- if (!weeksToShow) {- // Slicing because grid contains extra 1 week in the front and in the back.- return grid.slice(1, grid.length - 1);- }- return grid;+ // /** Get days grid and slice it in case it contains additional weeks at the beginning and end. */+ // const getSlicedGrid = () => {+ // const grid = getDayGrid(gridOptions);+ // if (!weeksToShow) {+ // // Slicing because grid contains extra 1 week in the front and in the back.+ // return grid.slice(1, grid.length - 1);+ // }+ // return grid;+ // };++ const gridOptions = {+ selectedDate,+ navigatedDate: gridNavigatedDate,+ firstDayOfWeek,+ firstWeekOfYear,+ dateRangeType, }; - const grid = getSlicedGrid();+ const grid = getDayGrid(gridOptions); // getSlicedGrid();+ const getInitialFocusDate = () => {+ if (selectedDate) {+ const normalizedSelectedDate = new Date(selectedDate.toString());+ normalizedSelectedDate.setHours(0);+ normalizedSelectedDate.setMinutes(0);+ normalizedSelectedDate.setSeconds(0);+ normalizedSelectedDate.setMilliseconds(0);+ return normalizedSelectedDate;+ }+ const todayDate = _.flatten(grid).find(day => day.isToday);+ return todayDate.originalDate;+ };+ const [focusedDate, setFocusedDate] = React.useState<Date>(getInitialFocusDate()); const changeMonth = (nextMonth: boolean) => { const updatedGridNavigatedDate = addMonths(gridNavigatedDate, nextMonth ? 1 : -1); setGridNavigatedDate(updatedGridNavigatedDate);+ setFocusedDate(updatedGridNavigatedDate); }; + const itemRefs = React.useMemo<Map<string, React.RefObject<HTMLElement>>>(() => {+ const refs = new Map<string, React.RefObject<HTMLElement>>();+ _.map(grid, week => _.map(week, (day: IDay) => (refs[day.key] = React.createRef())));+ return refs;+ }, [grid]);++ // const handleFocus = (day: IDay, hiddenCell: boolean): void => {+ // console.log(day, hiddenCell);+ // };++ const handleKeyDown = (e, day) => {+ const keyCode = getCode(e);+ const initialDate = day.originalDate;+ let targetDate: Date | null = null;+ let direction = 1; // by default search forward++ switch (keyCode) {+ case keyboardKey.ArrowDown: {+ targetDate = addWeeks(initialDate, 1);+ break;+ }+ case keyboardKey.ArrowUp: {+ targetDate = addWeeks(initialDate, -1);+ direction = -1;+ break;+ }+ case keyboardKey.ArrowLeft: {+ direction = -1;+ targetDate = addDays(initialDate, -1);+ break;+ }+ case keyboardKey.ArrowRight: {+ targetDate = addDays(initialDate, 1);+ break;+ }+ default:+ break;+ }++ if (!targetDate) {+ // if we couldn't find a target date at all, do nothing+ return;+ }+ const newNavigateDate = findAvailableDate({+ initialDate,+ targetDate,+ direction,+ });+ if (!dayInGrid(grid.slice(1, grid.length - 1), newNavigateDate)) {+ setGridNavigatedDate(newNavigateDate);+ setFocusedDate(newNavigateDate);+ e.preventDefault();+ }+ };++ React.useEffect(() => {+ if (focusedDate) {+ const cellToFocus = itemRefs[focusedDate.toString()];
I understand that it might not solve SSR, so yeah, let's sync on that
comment created time in 12 days
Pull request review commentmicrosoft/fluentui
Support onChange callback in FluentUI Datepicker Input Field
export const Datepicker: ComponentWithAs<'div', DatepickerProps> & ...unhandledProps, })} >- <Input readOnly onClick={showCalendarGrid} value={valueFormatter(selectedDate)} />+ <Input
Please could you update this part to also use createShorthand, like other parts are doing?
comment created time in 12 days
push eventpompomon/office-ui-fabric-react
commit sha c23ab7798f7e4e120b54435a605bf152a62cac7b
Fix cell content
push time in 12 days
Pull request review commentmicrosoft/fluentui
feat(Datepicker): Add basic keyboard navigation for calendar grid
export const DatepickerCalendarCell = compose< 'button', DatepickerCalendarCellProps, DatepickerCalendarCellStylesProps,- ButtonProps,+ {}, {}->(Button, {- className: datepickerCalendarCellClassName,- displayName: 'DatepickerCalendarCell',- mapPropsToStylesProps: () => ({- text: true,- size: 'small',- }),-});+>(+ (props, ref, composeOptions) => {+ const context = useFluentContext();+ const { setStart, setEnd } = useTelemetry(composeOptions.displayName, context.telemetry);+ setStart();++ const { className, design, styles, variables, onClick, disabled, selected, label } = props;+ const unhandledProps = useUnhandledProps(composeOptions.handledProps, props);+ const ElementType = getElementType(props);+ const getA11yProps = useAccessibility(props.accessibility, {+ debugName: composeOptions.displayName,+ actionHandlers: {+ performClick: e => {+ // prevent Spacebar from scrolling+ e.preventDefault();+ handleClick(e);+ },+ },+ mapPropsToBehavior: () => ({+ selected,+ disabled,+ }),+ rtl: context.rtl,+ });++ const { classes } = useStyles<DatepickerCalendarCellStylesProps>(DatepickerCalendarCell.displayName, {+ className: composeOptions.className,+ mapPropsToStyles: () => ({+ actionable: !!onClick,
Nah, good catch, thank you :)
comment created time in 12 days
push eventpompomon/office-ui-fabric-react
commit sha 61bbdf5e326807b125df88a844cbc40120359f9d
Fix PR comments
push time in 12 days
push eventpompomon/office-ui-fabric-react
commit sha ccab0d73eeff73f18912f4b192c2dee30abd04cb
PR comments, fix/cleanup behaviors
push time in 12 days
push eventpompomon/office-ui-fabric-react
commit sha 891f8ab64e55af6bf74403f9c96a1a563861f9a4
Fix PR comments
push time in 12 days
push eventpompomon/office-ui-fabric-react
commit sha ad775b26bded699a8104e2e71d091b803612643d
Apply suggestions from code review Co-authored-by: Oleksandr Fediashov <[email protected]>
push time in 12 days
Pull request review commentmicrosoft/fluentui
feat(Datepicker): Add basic keyboard navigation for calendar grid
-import { compose } from '@fluentui/react-bindings';-import { Button, ButtonProps, ButtonStylesProps } from '../Button/Button';+import {+ Accessibility,+ datepickerCalendarCellBehavior,+ DatepickerCalendarCellBehaviorProps,+} from '@fluentui/accessibility';+import {+ ComponentWithAs,+ getElementType,+ useAccessibility,+ useStyles,+ useFluentContext,+ useTelemetry,+ useUnhandledProps,+ compose,+} from '@fluentui/react-bindings';+import * as _ from 'lodash';+import * as PropTypes from 'prop-types';+import * as React from 'react';+import { ComponentEventHandler, ComponentKeyboardEventHandler } from '../../types';+import { commonPropTypes, UIComponentProps } from '../../utils'; -export type DatepickerCalendarCellProps = {};+export interface DatepickerCalendarCellProps extends UIComponentProps {+ /**+ * Accessibility behavior if overridden by the user.+ */+ accessibility?: Accessibility<DatepickerCalendarCellBehaviorProps>; -export type DatepickerCalendarCellStylesProps = ButtonStylesProps;+ /** Cell's primary content. */+ label?: string;++ /**+ * Called on click.+ *+ * @param event - React's original SyntheticEvent.+ * @param data - All props.+ */+ onClick?: ComponentEventHandler<DatepickerCalendarCellProps>;++ /**+ * Called on focus.+ *+ * @param event - React's original SyntheticEvent.+ * @param data - All props.+ */+ onFocus?: ComponentEventHandler<DatepickerCalendarCellProps>;++ /** A cell can show that it cannot be interacted with. */+ disabled?: boolean;++ /** A cell can show that it is currently selected or not. */+ selected?: boolean;
We use active in Carousel, Toolbar, Menu, Accordion and selected in Tree, List, Table, Dropdown.
I'd say that semantically selected is better here
comment created time in 12 days
Pull request review commentmicrosoft/fluentui
feat(Datepicker): Add basic keyboard navigation for calendar grid
export const DatepickerCalendar: ComponentWithAs<'div', DatepickerCalendarProps> rtl: context.rtl, }); - /** Get days grid and slice it in case it contains additional weeks at the beginning and end. */- const getSlicedGrid = () => {- const gridOptions = {- selectedDate: normalizedSelectedDate,- navigatedDate: gridNavigatedDate,- firstDayOfWeek,- firstWeekOfYear,- dateRangeType,- };- const grid = getDayGrid(gridOptions);- if (!weeksToShow) {- // Slicing because grid contains extra 1 week in the front and in the back.- return grid.slice(1, grid.length - 1);- }- return grid;+ // /** Get days grid and slice it in case it contains additional weeks at the beginning and end. */+ // const getSlicedGrid = () => {+ // const grid = getDayGrid(gridOptions);+ // if (!weeksToShow) {+ // // Slicing because grid contains extra 1 week in the front and in the back.+ // return grid.slice(1, grid.length - 1);+ // }+ // return grid;+ // };++ const gridOptions = {+ selectedDate,+ navigatedDate: gridNavigatedDate,+ firstDayOfWeek,+ firstWeekOfYear,+ dateRangeType, }; - const grid = getSlicedGrid();+ const grid = getDayGrid(gridOptions); // getSlicedGrid();+ const getInitialFocusDate = () => {+ if (selectedDate) {+ const normalizedSelectedDate = new Date(selectedDate.toString());+ normalizedSelectedDate.setHours(0);+ normalizedSelectedDate.setMinutes(0);+ normalizedSelectedDate.setSeconds(0);+ normalizedSelectedDate.setMilliseconds(0);+ return normalizedSelectedDate;+ }+ const todayDate = _.flatten(grid).find(day => day.isToday);+ return todayDate.originalDate;+ };+ const [focusedDate, setFocusedDate] = React.useState<Date>(getInitialFocusDate()); const changeMonth = (nextMonth: boolean) => { const updatedGridNavigatedDate = addMonths(gridNavigatedDate, nextMonth ? 1 : -1); setGridNavigatedDate(updatedGridNavigatedDate);+ setFocusedDate(updatedGridNavigatedDate); }; + const itemRefs = React.useMemo<Map<string, React.RefObject<HTMLElement>>>(() => {+ const refs = new Map<string, React.RefObject<HTMLElement>>();+ _.map(grid, week => _.map(week, (day: IDay) => (refs[day.key] = React.createRef())));+ return refs;+ }, [grid]);++ // const handleFocus = (day: IDay, hiddenCell: boolean): void => {+ // console.log(day, hiddenCell);+ // };++ const handleKeyDown = (e, day) => {+ const keyCode = getCode(e);+ const initialDate = day.originalDate;+ let targetDate: Date | null = null;+ let direction = 1; // by default search forward++ switch (keyCode) {+ case keyboardKey.ArrowDown: {+ targetDate = addWeeks(initialDate, 1);+ break;+ }+ case keyboardKey.ArrowUp: {+ targetDate = addWeeks(initialDate, -1);+ direction = -1;+ break;+ }+ case keyboardKey.ArrowLeft: {+ direction = -1;+ targetDate = addDays(initialDate, -1);+ break;+ }+ case keyboardKey.ArrowRight: {+ targetDate = addDays(initialDate, 1);+ break;+ }+ default:+ break;+ }++ if (!targetDate) {+ // if we couldn't find a target date at all, do nothing+ return;+ }+ const newNavigateDate = findAvailableDate({+ initialDate,+ targetDate,+ direction,+ });+ if (!dayInGrid(grid.slice(1, grid.length - 1), newNavigateDate)) {+ setGridNavigatedDate(newNavigateDate);+ setFocusedDate(newNavigateDate);+ e.preventDefault();+ }+ };++ React.useEffect(() => {+ if (focusedDate) {+ const cellToFocus = itemRefs[focusedDate.toString()];
day.key is computed as date.toString
I can create a method getDateKey(date:Date) => date.toString() in date-time-utilities packages and use it both in getDayGrid and here, to guarantee the consistency
WDYT @layershifter ?
comment created time in 12 days
push eventpompomon/office-ui-fabric-react
commit sha 03176d2940b5f2fe94e098f83c7feeb9ac103a32
Fix tests
push time in 12 days
push eventpompomon/office-ui-fabric-react
commit sha 2ce05ffc6f2988adfceea3f99c8fee101326f4e6
feat: add imperative handle for Popper, remove warnings (#14131) * feat: add imperative handle for Popper, remove warnings * fix issue, fix UT * fix UTs * add propTypes * update async example
commit sha 9c9ef94404e37645e271d920eb3c715b6adc0f3e
feat: add @fluentui/react-image (#14083) * feat: add @fluentui/react-image * Change files * add API file * fix deps * Update packages/react-image/src/components/Image/useImage.ts Co-authored-by: Makoto Morimoto <[email protected]> * Update packages/react-image/src/components/Image/ImageBase.tsx Co-authored-by: Makoto Morimoto <[email protected]> * Update packages/react-image/tsconfig.json Co-authored-by: Elizabeth Craig <[email protected]> * Update packages/react-image/package.json * update types * fix versions Co-authored-by: Makoto Morimoto <[email protected]> Co-authored-by: Elizabeth Craig <[email protected]>
commit sha fe2f59ab230033eeaca58bc7c16d5096d922faf7
Best Practices Docs Update Branch (#13887) Major overhaul of component documentation markdown content
commit sha 41bc48a4656ff7ebff0e4643b26a4fa17215f7ce
Rename release.md to RELEASE_NOTES.md
commit sha 50b712e1326f93f4d22f81ebdf83fcce48b7f070
Update RELEASE_NOTES.md
commit sha 7236cfa7f9784c7a8a42d87ca51db9dd16484d06
Update RELEASE_NOTES.md
commit sha f7feb25732b3c959b6da4abd5a6c1dcb020c16a3
Add simple transform functions to change prop values (#14140) * WIP add transform * add general transforms that work with spread * Change files * clean up propHelper * fix unused import Co-authored-by: Trip Master <[email protected]>
commit sha 7bea3a43f5f01a3aef8a36813b8d88484aa021bc
Enable "rules of hooks" lint rules in react-hooks and utilities; hook fixes (#14099)
commit sha a8adc0333c14d3470e8c48567d30f0421c0977d4
[Callout] Copy OUFR code to react-next (#14146) * Copy Callout code from OUFR to react-next * Change files * Fix lint issue
commit sha 4dac03be0750dc8f25b336c5b506ee923eaf5ee5
PeoplePicker keyboard focus state: Add styles to PeoplePicker to fix keyboard focus state ratio (#14124) * Add :after styles to fix ratio of suggested items in PeoplePicker on keyboard focus * Change files * update snapshots and remove unused import * remove z-index and change to semanticColors.focusBorder * update snapshots * update snapshots * add background and border styling to suggestion items and update snapshots * revert to master version * revert file back to master version
commit sha a70f15f2724d572e515bfe7f97cda751f8bc69a7
Maybe: Improve chainability, type checking and move to being class based. (#14101) #### Pull request checklist - [ ] Addresses an existing issue: Fixes #0000 - [ ] Include a change request file using `$ yarn change` #### Description of changes (give an overview) #### Focus areas to test (optional)
commit sha 1b833965d061b57d71cf621a006ed7ef13ccffd8
Move Pivot to @fluentui/react-tabs package (#14125) #### Pull request checklist - [x] Addresses an existing issue: Fixes #14034 - [x] Include a change request file using `$ yarn change` #### Description of changes Move Pivot to @fluentui/react-tabs package
commit sha b8d93b166cd836b9534eaa23d4f57f6bb12ffb2f
applying package updates
commit sha 581a489a857033dfa862e0ba782aba2006f607ac
Feat/date-time-utilities Consolidate package based on latest usage (#14058) * Consolidating date-time-utilities and Datepicker..Props * Roll-backed to flattened props * Updating tests in date-time-utilities * Updating props * Capturing the intention of the isContiguous method * Make tests succeed * Change files * Better describing change * Renaming parse method * Move const to separate file * Updating reference * Updating types in date-time-utilities * Package downgrade * Updated API * Update PickersOverview.md * Trying to remove whitespace * Change files * Removing whitespace issue Co-authored-by: Karel Rymes <[email protected]>
commit sha 7d239d4c7709837d6a9a743d0cd9ef83305b3139
update codesandbox templates' tsconfig.json (#14150) #### Pull request checklist - [ ] Addresses an existing issue: Fixes #0000 - [ ] Include a change request file using `$ yarn change` #### Description of changes updates tsconfig.json file to remove comments and look more similar to other tsconfig.json files #### Focus areas to test (optional)
commit sha f8def98981f2eba795fb88afd3887fedc0b56a9c
Charting: Fix Line chart render with empty array of data + a event annotation, the chart throws a strange formatting exception (#14161) * Charting: Fix Line chart render with empty array of data + a event annotation, the chart throws a strange formatting exception. * Change files Co-authored-by: Rajesh Goriga <[email protected]>
commit sha 767b6094a42a4b5171844ccdc95741029e6e0ae8
UnifiedPicker accessibility fixes (#14090) * Error: ensure every form element has a label The Autofill didn't. The prop already existed though, so this was a bug with the sample. I have added it. * Removing the list role from the wrapper div * Fix violation: ensures elements with an aria role that require child roles contain them Dropdown was using a local var instead of the prop to set aria vars, * Setting the activedescendent properly * Do an index check * updating snapshots * Change files * address PR comments * Add SelectedItemsList fixes * Update change file * Don't have an empty div if there are no list items
commit sha 44b99ab5e98f0c80e10b0d141a54903a328be450
fix aria labels in WeeklyDayPicker (#14073) * fix next and previous month/week aria labels in weekly day picker * Change files * updating change file and the api file * fixing lint issue with the new methods
commit sha a9f932261132ead0df90ac81614068e9b0951824
T-dama/Added More Transforms (#14152) * WIP add transform * WIP robustness checks * simplify transforms * merge fixes * add general transforms that work with spread * clean up propHelper * WIP robustness checks * fix conflicts with new maybe * Change files * clean return Co-authored-by: Trip Master <[email protected]>
commit sha 2534fd78ec65b88a5049c7d2d9e54d1103159852
Enable "rules of hooks" lint rules in date-time and lists (#14098)
push time in 12 days
push eventpompomon/office-ui-fabric-react
commit sha 3b79abb031cd5edce4f48f01383441d9afb0548c
Fix first focus
push time in 13 days
push eventpompomon/office-ui-fabric-react
commit sha 3bf76398b378af5fd64c0a56482a4186cbd9be97
Add e2e keyboard navigation tests
push time in 13 days
Pull request review commentmicrosoft/fluentui
fix(dropdown): event propagation
export const Dropdown: ComponentWithAs<'div', DropdownProps> & tryRemoveItemFromValue(); break; case keyboardKey.Escape:- e.stopPropagation();+ // If dropdown list is open ESC should close it and not propagate to the parent+ // otherwise event should propagate+ open && e.stopPropagation();
Please could you add a test for that? e2e or unit, up to you ;) Just so we have a tool to test it, in case the behavior changes ;)
comment created time in 13 days
push eventpompomon/office-ui-fabric-react
commit sha 42f8d5b5e3570ad0655d4e3bc0d8e89b4d9e5c45
Fix test
push time in 13 days
push eventpompomon/office-ui-fabric-react
commit sha 76400cdc61961165decd050773ea3c46c1fe4511
Fix behavior test
push time in 13 days
push eventpompomon/office-ui-fabric-react
commit sha 9319df78b8a0f43f1eefca64733ceeb75350659e
Fix refs
push time in 13 days
push eventpompomon/office-ui-fabric-react
commit sha f89f5a45b02c3c2f410f6488ce3cfb862805f984
Add keyboard handlers for month edges
push time in 14 days
Pull request review commentmicrosoft/fluentui
Support onChange callback in FluentUI Datepicker Input Field
DatepickerCalendar.propTypes = { today: PropTypes.instanceOf(Date), showWeekNumbers: PropTypes.bool, workWeekDays: PropTypes.arrayOf(PropTypes.oneOf(Object.keys(DayOfWeek).map(name => DayOfWeek[name]))),-- format: PropTypes.func,- parse: PropTypes.func,+ weeksToShow: PropTypes.number,++ formatDay: PropTypes.func,+ formatYear: PropTypes.func,+ formatMonthDayYear: PropTypes.func,+ formatMonthYear: PropTypes.func,++ parseDate: PropTypes.func,++ months: PropTypes.arrayOf(PropTypes.string),+ shortMonths: PropTypes.arrayOf(PropTypes.string),+ days: PropTypes.arrayOf(PropTypes.string),+ shortDays: PropTypes.arrayOf(PropTypes.string),++ isRequiredErrorMessage: PropTypes.string,+ invalidInputErrorMessage: PropTypes.string,+ isOutOfBoundsErrorMessage: PropTypes.string,+ goToToday: PropTypes.string,+ prevMonthAriaLabel: PropTypes.string,+ nextMonthAriaLabel: PropTypes.string,+ prevYearAriaLabel: PropTypes.string,+ nextYearAriaLabel: PropTypes.string,+ prevYearRangeAriaLabel: PropTypes.string,+ nextYearRangeAriaLabel: PropTypes.string,+ monthPickerHeaderAriaLabel: PropTypes.string,+ yearPickerHeaderAriaLabel: PropTypes.string,+ closeButtonAriaLabel: PropTypes.string,+ weekNumberFormatString: PropTypes.string,+ selectedDateFormatString: PropTypes.string,+ todayDateFormatString: PropTypes.string, }; DatepickerCalendar.defaultProps = { accessibility: datepickerCalendarBehavior,- firstDayOfWeek: DayOfWeek.Monday,+ firstDayOfWeek: DayOfWeek.Sunday, firstWeekOfYear: FirstWeekOfYear.FirstDay, dateRangeType: DateRangeType.Day, header: {}, calendarCell: {}, calendarHeaderCell: {},- localizedStrings: DEFAULT_CALENDAR_LOCALIZED_STRINGS,+ ...DEFAULT_CALENDAR_STRINGS,
Please could you update DatepickerCalendarHeader.tsx with the localized string for next/previous month (there are TODO: marks)
comment created time in 14 days
push eventpompomon/office-ui-fabric-react
commit sha 2ce05ffc6f2988adfceea3f99c8fee101326f4e6
feat: add imperative handle for Popper, remove warnings (#14131) * feat: add imperative handle for Popper, remove warnings * fix issue, fix UT * fix UTs * add propTypes * update async example
commit sha 9c9ef94404e37645e271d920eb3c715b6adc0f3e
feat: add @fluentui/react-image (#14083) * feat: add @fluentui/react-image * Change files * add API file * fix deps * Update packages/react-image/src/components/Image/useImage.ts Co-authored-by: Makoto Morimoto <[email protected]> * Update packages/react-image/src/components/Image/ImageBase.tsx Co-authored-by: Makoto Morimoto <[email protected]> * Update packages/react-image/tsconfig.json Co-authored-by: Elizabeth Craig <[email protected]> * Update packages/react-image/package.json * update types * fix versions Co-authored-by: Makoto Morimoto <[email protected]> Co-authored-by: Elizabeth Craig <[email protected]>
commit sha fe2f59ab230033eeaca58bc7c16d5096d922faf7
Best Practices Docs Update Branch (#13887) Major overhaul of component documentation markdown content
commit sha 41bc48a4656ff7ebff0e4643b26a4fa17215f7ce
Rename release.md to RELEASE_NOTES.md
commit sha 50b712e1326f93f4d22f81ebdf83fcce48b7f070
Update RELEASE_NOTES.md
commit sha 7236cfa7f9784c7a8a42d87ca51db9dd16484d06
Update RELEASE_NOTES.md
commit sha f7feb25732b3c959b6da4abd5a6c1dcb020c16a3
Add simple transform functions to change prop values (#14140) * WIP add transform * add general transforms that work with spread * Change files * clean up propHelper * fix unused import Co-authored-by: Trip Master <[email protected]>
commit sha 7bea3a43f5f01a3aef8a36813b8d88484aa021bc
Enable "rules of hooks" lint rules in react-hooks and utilities; hook fixes (#14099)
commit sha a8adc0333c14d3470e8c48567d30f0421c0977d4
[Callout] Copy OUFR code to react-next (#14146) * Copy Callout code from OUFR to react-next * Change files * Fix lint issue
commit sha 4dac03be0750dc8f25b336c5b506ee923eaf5ee5
PeoplePicker keyboard focus state: Add styles to PeoplePicker to fix keyboard focus state ratio (#14124) * Add :after styles to fix ratio of suggested items in PeoplePicker on keyboard focus * Change files * update snapshots and remove unused import * remove z-index and change to semanticColors.focusBorder * update snapshots * update snapshots * add background and border styling to suggestion items and update snapshots * revert to master version * revert file back to master version
commit sha a70f15f2724d572e515bfe7f97cda751f8bc69a7
Maybe: Improve chainability, type checking and move to being class based. (#14101) #### Pull request checklist - [ ] Addresses an existing issue: Fixes #0000 - [ ] Include a change request file using `$ yarn change` #### Description of changes (give an overview) #### Focus areas to test (optional)
commit sha 1b833965d061b57d71cf621a006ed7ef13ccffd8
Move Pivot to @fluentui/react-tabs package (#14125) #### Pull request checklist - [x] Addresses an existing issue: Fixes #14034 - [x] Include a change request file using `$ yarn change` #### Description of changes Move Pivot to @fluentui/react-tabs package
commit sha b8d93b166cd836b9534eaa23d4f57f6bb12ffb2f
applying package updates
commit sha 581a489a857033dfa862e0ba782aba2006f607ac
Feat/date-time-utilities Consolidate package based on latest usage (#14058) * Consolidating date-time-utilities and Datepicker..Props * Roll-backed to flattened props * Updating tests in date-time-utilities * Updating props * Capturing the intention of the isContiguous method * Make tests succeed * Change files * Better describing change * Renaming parse method * Move const to separate file * Updating reference * Updating types in date-time-utilities * Package downgrade * Updated API * Update PickersOverview.md * Trying to remove whitespace * Change files * Removing whitespace issue Co-authored-by: Karel Rymes <[email protected]>
commit sha 53e398b2b32af3e4c948667a7d5ca775feebeaf8
Add basic keyboard navigation for calendar grid
commit sha f4422cac1c5646f4cdc13b9f4d38b63384d1970c
Add cell component and behavior
push time in 14 days
push eventmicrosoft/fluentui
commit sha 581a489a857033dfa862e0ba782aba2006f607ac
Feat/date-time-utilities Consolidate package based on latest usage (#14058) * Consolidating date-time-utilities and Datepicker..Props * Roll-backed to flattened props * Updating tests in date-time-utilities * Updating props * Capturing the intention of the isContiguous method * Make tests succeed * Change files * Better describing change * Renaming parse method * Move const to separate file * Updating reference * Updating types in date-time-utilities * Package downgrade * Updated API * Update PickersOverview.md * Trying to remove whitespace * Change files * Removing whitespace issue Co-authored-by: Karel Rymes <[email protected]>
push time in 14 days
PR merged microsoft/fluentui
Pull request checklist
- [ ] Addresses an existing issue: Fixes #0000
- [x] Include a change request file using
$ yarn change
Description of changes
This PR updates the date-time-utilities library with a few interface definitions, default date formatting strings as well as extended testing of the getDayGrid function.
pr closed time in 14 days
PR opened microsoft/fluentui
Pull request checklist
- [ ] Addresses an existing issue: Fixes #0000
- [ ] Include a change request file using
$ yarn change
Description of changes
(give an overview)
Focus areas to test
(optional)
pr created time in 15 days
create barnchpompomon/office-ui-fabric-react
branch : feat/datepicker-keyboard-navigation
created branch time in 15 days
Pull request review commentmicrosoft/fluentui
feat: add imperative handle for Popper, remove warnings
export interface PopupProps /** * Function to render popup content.+ * @deprecated Please use `popperRef` to get an imperative handle to Popper's APIs.
Nice!
comment created time in 15 days
push eventpompomon/office-ui-fabric-react
commit sha ef2d6e26da981f93a3df66c9a2b1cad449cd99ab
applying package updates
commit sha 15ee28cda5ee81da62a00bde74ece8bbfa3abbc6
fix(FocusZone): fix EventListener leak (v0) (#14044)
commit sha 2d5932ce602ab7c38bf8a6aead53cbd42e296c55
chart hover card content component wrapped in styled component (#14038) * wrapping chartHoverCard in styled component and deleting static Theme * Change files Co-authored-by: v-sivsar <[email protected]>
commit sha 042d257c2ebd8a9353a3c8fc9dfdf39084c498dc
fix(FocusZone): fix EventListener leak (#14031) * fix(FocusZone): fix EventListener leak * changelog * address PR comments * address PR comments
commit sha 682f1db2c515d0d2f9db036e108fbe316ec09007
Calendar: Fix onBlur event firing on every date click (#13992) * fix calendar props * Change files * Use event.relatedTarget to stop bubbling of onFocus and onBlur event * Use as prop to cast EventTarget type as Node type * update snapshot * Update packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx Co-authored-by: Xu Gao <[email protected]> * use elementContains for target comparisons Co-authored-by: Xu Gao <[email protected]>
commit sha 30fc4c9ad3b2b9236027b477e27eb742f8419cca
Calendar accessibility fixes (#14032) * adding accessibility fixes for alt+tab to datepicker, turn button -> div if not clickable, and high contrast color selectors * Change files * removing unnecessary !important, fixing two linting errors, fixing high contrast bug in oufr calendar * Change files * addressing comments
commit sha a1f0ef7f1f03a6c0a5f66ae093bb2da22726c186
Maybe: Improve then return and remove thenMaybe (#14045) * fix maybe to correctly wrap return value from then * Change files
commit sha bca273168c554d5a4fee1f7a809316b7dabe7007
Updating SpinButton to a function component within React-Next (#13689) * moving files and updating imports * Change files * api update * updates * quick changes * update * update * api update * update * update * update * updating styles * updates * updates * update * update * bug fix * bug fixes * import correction * updates * import change * quick fix * Removing commented code * Change files * change * Update packages/react-next/src/components/SpinButton/SpinButton.base.tsx Co-authored-by: Makoto Morimoto <[email protected]> * Update packages/react-next/src/components/SpinButton/SpinButton.styles.ts Co-authored-by: Makoto Morimoto <[email protected]> * Update change/@fluentui-react-next-2020-04-30-15-57-11-feat-spin-button.json Co-authored-by: Makoto Morimoto <[email protected]> * pr feedback * update * Delete @uifabric-file-type-icons-2020-06-22-11-41-59-caperez-filetype_cortex_and_shortcut.json * quick fix * pr feedback * pr feedback * quick fix * Change files * Delete DateMath.test.ts * Delete DateValues.ts * Delete DateMath.ts * fix * Rename TimeConstants.ts to timeConstants.ts * Updates to styles prop. Co-authored-by: Makoto Morimoto <[email protected]>
commit sha 8247d915e42b98aceeeaaf0061c1ce3773bd17fb
useMergedRefs: mergedRefs should mutate the function if any of the merged refs mutate (#14053) * Addressing constantly mutating refs to merge. * refs * Addressing constantly mutating refs to merge. (cherry picked from commit f3ac4ce02ce4ea3f4f475bd4c956f18cd20bafe3) * Change files * oops
commit sha 06b783216e8652f356324d10fb5bf8c50a7f44c3
Fix publish by syncing with published versions (#14066) * sync * Change files
commit sha a92d7dc1636d67b1bfe4de640d7d59566d05b4b4
Charting:Add New Sankey chart to charting package (#13982) * Add Sankey chart to charting package * Expose pathColor prop * Change files * Add d3-sankey dependency * Fix tslint * Update yarn.lock file * Fix eslint errors * Fix eslint errors * Update JSX.Element to React.Reactnode Co-authored-by: Rajesh Goriga <[email protected]>
commit sha 4fc60e6201e26e6b1d318628de1559b20be8f00e
Line chart & Vertical bar chart - high contrast of y axis line styles updated (#14037) * line and vertical charts y axis line high contrast styles updated * Change files * change log * test case of vertical bar chart updated Co-authored-by: Jameela Kowsar Shaik (Zen3 Infosolutions America Inc) <[email protected]>
commit sha 1601f2c50737814a91a036df964b481f00b23efb
Add transform function for prop renaming utility for codemods (#14067) * WIP add transform * WIP merge * add new prop transform file * Change files * moved general enum case into a transform Co-authored-by: Trip Master <[email protected]>
commit sha 6072a109ca821510a98245709fc722bed102e246
applying package updates
commit sha 34da57c2cd02c1c68bc8ae0aad4b5ee4f6cfea51
(react-flex) Creating new react-flex package (#14051) * creating new react-flex package * updating dependency * adding requested changes * adding requested changes
commit sha 19d531374c491eb479ddc057312d1771768fe027
Use new service connection in release pipelines (#14070)
commit sha bd32dc4495932971f783b6451a723c25d4dfb2b7
Legend hover updates value inside donut chart circle (#14055) * When legend is hovered, center of donut chart updates to the value cooresponding to the legend. * Change files * Modified operator * Add return statement
commit sha 4e31634d7914e595032111ba15d6fb87750b5f4b
Update release service connection name (#14077)
commit sha 346cd61df2ce2268f4126eab1b31a173904ff4c2
fix: useFocusRects should resolve window inside useEffect (#14063) * fix: useFocusRects should resolve window inside useEffect * Change files * fix API file
commit sha af064fecc6b264f18fefcfc2b181a510b2bfecaf
applying package updates
push time in 15 days
delete branch pompomon/office-ui-fabric-react
delete branch : feat/datepicker-navigation
delete time in 15 days
push eventpompomon/office-ui-fabric-react
commit sha fa45b0d53283ccf4f0d5be74b63a4d0a67d32800
Fix overrideProps
push time in 15 days
push eventpompomon/office-ui-fabric-react
commit sha 9c9e2982f52186b0de63d5fd61189d46f509d49c
Apply suggestions from code review Co-authored-by: Oleksandr Fediashov <[email protected]>
push time in 15 days
Pull request review commentmicrosoft/fluentui
feat(Datepicker): Add Calendar navigation
export const DatepickerCalendar: ComponentWithAs<'div', DatepickerCalendarProps> ...unhandledProps, })} >+ {renderHeader()} <Grid rows={grid.length + 1} columns={DAYS_IN_WEEK}>- {_.times(DAYS_IN_WEEK, dayNumber => (- <Text- key={`header ${dayNumber}`}- align="center"- content={localizedStrings.shortDays[(dayNumber + firstDayOfWeek) % DAYS_IN_WEEK]}- />- ))}- {_.map(grid, week =>- _.map(week, (day: IDay) => {- return (- <Button- key={day.key}- content={day.date}- aria-label={`${formatMonthDayYear(day.originalDate, localizedStrings)}`}- onClick={e => {- _.invoke(props, 'onDateChange', e, { ...props, value: day });- }}- primary={day.isSelected}- disabled={!day.isInMonth}- text- />- );+ {_.times(DAYS_IN_WEEK, dayNumber =>
Agreed offline with @layershifter to keep it like it is, since DAYS_IN_WEEK is a constant 7, so we would need to create a new array to call .map
comment created time in 15 days
Pull request review commentmicrosoft/fluentui
Add mark to Calendar component days
export const CalendarDayGridBase = React.forwardRef( weekCorners, getDayInfosInRangeOfDay, getRefsFromDayInfos,+ markedDays,
Please have you considered to add this shouldMarkDay prop to IDay from date-time-utilities and then you won't need to pass anything to CalendarGridRow and have a check in useWeeks instead?
comment created time in 15 days
Pull request review commentmicrosoft/fluentui
Add mark to Calendar component days
export const CalendarGridRow = (props: ICalendarGridRowProps): JSX.Element => { </th> )} {week.map((day: IDayInfo, dayIndex: number) => (- <CalendarGridDayCell {...props} key={day.key} day={day} dayIndex={dayIndex} />+ <CalendarGridDayCell+ {...props}+ key={day.key}+ day={day}+ dayIndex={dayIndex}+ shouldMarkDay={markedDays.filter(markedDay => compareDates(day.originalDate, markedDay)).length > 0}
shouldMarkDay={markedDays.some(markedDay => compareDates(day.originalDate, markedDay))}
nit
comment created time in 15 days
Pull request review commentmicrosoft/fluentui
Add mark to Calendar component days
export const CalendarGridDayCell: React.FunctionComponent<ICalendarGridDayCellPr } }; + let ariaLabel = dateTimeFormatter.formatMonthDayYear(day.originalDate, strings);+ if (shouldMarkDay) {+ ariaLabel = ariaLabel + ', ' + strings.dayMarkedAriaLabel;
Would comma sign make sense in all the localizations? Should we maybe just have a space between two labels?
comment created time in 15 days
Pull request review commentmicrosoft/fluentui
Add mark to Calendar component days
import { ICalendarGridRowProps } from './CalendarGridRow'; export interface ICalendarGridDayCellProps extends ICalendarGridRowProps { day: IDayInfo; dayIndex: number;+ shouldMarkDay: boolean;
nit
marked: boolean;
or
isMarked: boolean;
comment created time in 15 days
push eventpompomon/office-ui-fabric-react
commit sha 11875363d200c90caf20d4768f1c535d5893cb51
PR comments fixes
push time in 16 days
Pull request review commentmicrosoft/fluentui
feat(Datepicker): Add Calendar navigation
+import {+ Accessibility,+ datepickerCalendarHeaderBehavior,+ DatepickerCalendarHeaderBehaviorProps,+} from '@fluentui/accessibility';+import { IDateGridStrings } from '@fluentui/date-time-utilities';+import {+ ComponentWithAs,+ getElementType,+ useAccessibility,+ useFluentContext,+ useStyles,+ useTelemetry,+ useUnhandledProps,+} from '@fluentui/react-bindings';+import * as customPropTypes from '@fluentui/react-proptypes';+import * as PropTypes from 'prop-types';+import * as React from 'react';+import { FluentComponentStaticProps, ShorthandValue, ComponentEventHandler } from '../../types';+import {+ commonPropTypes,+ ContentComponentProps,+ createShorthand,+ createShorthandFactory,+ UIComponentProps,+} from '../../utils';+import { Text } from '../Text/Text';+import { DatepickerCalendarHeaderAction, DatepickerCalendarHeaderActionProps } from './DatepickerCalendarHeaderAction';++export interface DatepickerCalendarHeaderProps extends UIComponentProps, ContentComponentProps {+ /** Accessibility behavior if overridden by the user. */+ accessibility?: Accessibility<DatepickerCalendarHeaderBehaviorProps>;++ /** Localized labels */+ localizedStrings?: IDateGridStrings;++ /** Action to happen on click on the previous button */+ onPreviousClick?: ComponentEventHandler<DatepickerCalendarHeaderActionProps>;++ /** Action to happen on click on the next button */+ onNextClick?: ComponentEventHandler<DatepickerCalendarHeaderActionProps>;++ /** Shorthand for the button that navigates to the previous calendar screen. */+ previousButton?: ShorthandValue<DatepickerCalendarHeaderActionProps>;++ /** Shorthand for the button that navigates to the next calendar screen. */+ nextButton?: ShorthandValue<DatepickerCalendarHeaderActionProps>;+}++export type DatepickerCalendarHeaderStylesProps = never;++export const datepickerCalendarHeaderClassName = 'ui-datepicker__calendarheader';++/**+ * A DatepickerCalendarHeader is used to display header block above calendar grid.+ * This component is currently UNSTABLE!+ */+export const DatepickerCalendarHeader: ComponentWithAs<'div', DatepickerCalendarHeaderProps> &+ FluentComponentStaticProps<DatepickerCalendarHeaderProps> = props => {+ const context = useFluentContext();+ const { setStart, setEnd } = useTelemetry(DatepickerCalendarHeader.displayName, context.telemetry);+ setStart();++ const {+ className,+ design,+ styles,+ variables,+ content,+ nextButton,+ previousButton,+ onPreviousClick,+ onNextClick,+ } = props;+ const ElementType = getElementType(props);+ const unhandledProps = useUnhandledProps(DatepickerCalendarHeader.handledProps, props);+ const getA11yProps = useAccessibility(props.accessibility, {+ debugName: DatepickerCalendarHeader.displayName,+ actionHandlers: {},+ rtl: context.rtl,+ });++ const { classes } = useStyles<DatepickerCalendarHeaderStylesProps>(DatepickerCalendarHeader.displayName, {+ className: datepickerCalendarHeaderClassName,+ mapPropsToInlineStyles: () => ({+ className,+ design,+ styles,+ variables,+ }),+ rtl: context.rtl,+ });++ const element = (+ <ElementType+ {...getA11yProps('root', {+ className: classes.root,+ ...unhandledProps,+ })}+ >+ <Text content={content} />+ {createShorthand(DatepickerCalendarHeaderAction, previousButton, {+ defaultProps: () =>+ getA11yProps('previousButton', {+ className: datepickerCalendarHeaderClassName,+ icon: {},+ title: 'Previous Month',+ onClick: onPreviousClick,+ direction: 'previous',+ }),+ })}+ {createShorthand(DatepickerCalendarHeaderAction, nextButton, {+ defaultProps: () =>+ getA11yProps('nextButton', {+ className: datepickerCalendarHeaderClassName,+ icon: {},+ title: 'Previous Month',
Would update it after #14058 extends the localizationStrings interface, adding a comment for now
comment created time in 16 days
Pull request review commentmicrosoft/fluentui
Feat/date-time-utilities Consolidate package based on latest usage
+import { IDateGridStrings, IDateFormatting } from './dateFormatting.types';+import { formatDay } from './formatDay';+import { formatYear } from './formatYear';+import { formatMonthDayYear } from './formatMonthDayYear';+import { formatMonthYear } from './formatMonthYear';++export const DEFAULT_LOCALIZED_STRINGS: IDateGridStrings = {
Please could you extend this default object and interface with the other values from DEFAULT_STRINGS (packages/date-time/src/components/DatePicker/DatePicker.base.tsx:35)?
comment created time in 16 days
push eventpompomon/office-ui-fabric-react
commit sha 6cf080fb3210d2c1429d1d833a2d78f63162e348
Apply suggestions from code review Co-authored-by: Oleksandr Fediashov <[email protected]>
push time in 16 days
Pull request review commentmicrosoft/fluentui
feat(Datepicker): Add Calendar navigation
+import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles';+import { DatepickerVariables } from './datepickerVariables';+import { DatepickerCalendarHeaderStylesProps } from '../../../../components/Datepicker/DatepickerCalendarHeader';++export const datepickerCalendarHeaderStyles: ComponentSlotStylesPrepared<+ DatepickerCalendarHeaderStylesProps,+ DatepickerVariables+> = {+ root: (): ICSSInJSStyle => {+ return {+ display: 'grid',+ gridTemplateColumns: '1fr auto auto',+ msGridColumns: '1fr auto auto',
Not sure if we leave this display: grid after the styling work is done, but I'll add a comment there to check it then
comment created time in 16 days
Pull request review commentmicrosoft/fluentui
feat(Datepicker): Add Calendar navigation
+import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles';+import { DatepickerVariables } from './datepickerVariables';+import { DatepickerCalendarHeaderStylesProps } from '../../../../components/Datepicker/DatepickerCalendarHeader';++export const datepickerCalendarHeaderStyles: ComponentSlotStylesPrepared<+ DatepickerCalendarHeaderStylesProps,+ DatepickerVariables+> = {+ root: (): ICSSInJSStyle => {+ return {+ display: 'grid',+ gridTemplateColumns: '1fr auto auto',+ msGridColumns: '1fr auto auto',
Oh, good catch!
comment created time in 16 days
push eventpompomon/office-ui-fabric-react
commit sha 143fd3e1c282038698aaf8d3c1d444796e2c078d
Update packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendar.tsx Co-authored-by: Charles Assunção <[email protected]>
push time in 16 days
Pull request review commentmicrosoft/fluentui
feat(Datepicker): Add Calendar navigation
export const Datepicker: ComponentWithAs<'div', DatepickerProps> & })} > <Input readOnly onClick={showCalendarGrid} value={valueFormatter(selectedDate)} />- <Popup- open={open}- onOpenChange={(e, { open }) => setOpen(open)}- content={- <DatepickerCalendar- {...calendarOptions}- onDateChange={handleChange}- localizedStrings={DEFAULT_LOCALIZED_STRINGS}- />- }- trapFocus- >+ <Popup open={open} onOpenChange={(e, { open }) => setOpen(open)} content={calendarElement} trapFocus>
I don't have any preferences here, @layershifter what would you recommend here?
comment created time in 16 days
Pull request review commentmicrosoft/fluentui
feat(Datepicker): Add Calendar navigation
+import { Accessibility } from '../../types';+/**+ * @description+ * Behavior for a datepicked calendar component+ * @specification+ * Adds role='group'.+ */+export const datepickerCalendarHeaderBehavior: Accessibility<DatepickerCalendarHeaderBehaviorProps> = props => ({+ attributes: {+ root: {+ role: 'group',
Placeholder behaviors, I'll be working on those in the next PR :)
comment created time in 16 days
Pull request review commentmicrosoft/fluentui
feat(Datepicker): Add Calendar navigation
export const DatepickerCalendar: ComponentWithAs<'div', DatepickerCalendarProps> ...unhandledProps, })} >+ {renderHeader()} <Grid rows={grid.length + 1} columns={DAYS_IN_WEEK}>- {_.times(DAYS_IN_WEEK, dayNumber => (- <Text- key={`header ${dayNumber}`}- align="center"- content={localizedStrings.shortDays[(dayNumber + firstDayOfWeek) % DAYS_IN_WEEK]}- />- ))}- {_.map(grid, week =>- _.map(week, (day: IDay) => {- return (- <Button- key={day.key}- content={day.date}- aria-label={`${formatMonthDayYear(day.originalDate, localizedStrings)}`}- onClick={e => {- _.invoke(props, 'onDateChange', e, { ...props, value: day });- }}- primary={day.isSelected}- disabled={!day.isInMonth}- text- />- );+ {_.times(DAYS_IN_WEEK, dayNumber =>
Yeah, we could use native code here instead, no specific reasons to have it done using lodash
comment created time in 16 days
push eventpompomon/office-ui-fabric-react
commit sha d23a5972a4f67e26308ff085ac6bcf2aa15699e4
Apply suggestions from code review Co-authored-by: Charles Assunção <[email protected]>
push time in 16 days
Pull request review commentmicrosoft/fluentui
feat(Datepicker): Add Calendar navigation
export const DatepickerCalendar: ComponentWithAs<'div', DatepickerCalendarProps> ...unhandledProps, })} >+ {renderHeader()} <Grid rows={grid.length + 1} columns={DAYS_IN_WEEK}>- {_.times(DAYS_IN_WEEK, dayNumber => (- <Text- key={`header ${dayNumber}`}- align="center"- content={localizedStrings.shortDays[(dayNumber + firstDayOfWeek) % DAYS_IN_WEEK]}- />- ))}- {_.map(grid, week =>- _.map(week, (day: IDay) => {- return (- <Button- key={day.key}- content={day.date}- aria-label={`${formatMonthDayYear(day.originalDate, localizedStrings)}`}- onClick={e => {- _.invoke(props, 'onDateChange', e, { ...props, value: day });- }}- primary={day.isSelected}- disabled={!day.isInMonth}- text- />- );+ {_.times(DAYS_IN_WEEK, dayNumber =>+ createShorthand(DatepickerCalendarHeaderCell, calendarHeaderCell, {+ defaultProps: () =>+ getA11yProps('calendarHeaderCell', {+ className: datepickerCalendarHeaderCellClassName,+ content: localizedStrings.shortDays[(dayNumber + firstDayOfWeek) % DAYS_IN_WEEK],+ key: `header_${dayNumber}`,+ }), }), )}+ {_.map(grid, week =>+ _.map(+ week,+ (day: IDay) =>+ createShorthand(DatepickerCalendarCell, calendarCell, {+ defaultProps: () =>+ getA11yProps('calendarCell', {+ className: datepickerCalendarCellClassName,+ content: day.date,+ key: day.key,+ 'aria-label': formatMonthDayYear(day.originalDate, localizedStrings),
Maybe, I'm still thinking on that one. And I'm planning to work on the behaviors in the next PR, so the reviews are split :)
comment created time in 16 days
push eventpompomon/office-ui-fabric-react
commit sha fc246a40418b931b54a53b579e58a79294841383
Fix build errors
push time in 16 days
push eventpompomon/office-ui-fabric-react
commit sha 97a3132ee60ded9d777a7bcf8e1756d143214093
Update changelog
push time in 16 days
push eventpompomon/office-ui-fabric-react
commit sha 67cec134bb83fa71e0f651d831e51373a365d363
Update spec notes
push time in 16 days
push eventpompomon/office-ui-fabric-react
commit sha 409a5f04b231bb66e141741e513f86e460439dac
Expose DatepickerCalendar shorthand
push time in 16 days
push eventpompomon/office-ui-fabric-react
commit sha cd896d563d40c00d7fedcb900f21889015cd71f8
Update implementation notes
push time in 16 days
push eventpompomon/office-ui-fabric-react
commit sha eb42f913fdd66865c4e50e54b69c09e6e7797a2d
Cleanup styles
push time in 16 days
push eventpompomon/office-ui-fabric-react
commit sha ba63dfc6eb4afd81ae3b356ea117a796bd75b95a
Add tests, make new components conformant
push time in 16 days
push eventpompomon/office-ui-fabric-react
commit sha 92f6d3cfbf298eb3ea209d76f8f2726220267e6d
Added slots and calendar stylesheets
push time in 19 days
push eventpompomon/office-ui-fabric-react
commit sha e1b6c0410296baff1a7d4bd83a63d09eed7206bd
Add custom action button for calendar header
push time in 20 days
PR opened microsoft/fluentui
Pull request checklist
- [ ] Addresses an existing issue: Fixes #0000
- [ ] Include a change request file using
$ yarn change
Description of changes
(give an overview)
Focus areas to test
(optional)
pr created time in 20 days
create barnchpompomon/office-ui-fabric-react
branch : feat/datepicker-navigation
created branch time in 20 days
push eventpompomon/office-ui-fabric-react
commit sha 15630baeae575e1dce90871da1c880277cb3582e
Chore(Splitbutton): Fix docsite example (#14023) * Fix docsite example * Update Changelog
commit sha 114da0ae0adecff5d084ee139216bf51c51a4d9e
Use Teams logo as TeamsIcon (#13966) * Renamed TeamsIcon to ContactGroupIcon. Brought in coloured Teams logo as TeamsIcon instead * Update to changelog
commit sha f58148f1c36c6801903bd78a31dcd1e05cd103a3
Support for enums in props (#13993) * migrate files between branches * migrate spinner * add spinner * add propsutilities test file * add props tests * fix failing tests * fix commenting * add support for enums in spread attributes * add value-changing * Change files * WIP add maybe to proprename * Add Maybe to props utility * fix undefined and linting errors * linting errors Co-authored-by: Trip Master <[email protected]>
commit sha e94ddb76a22232c4f574f32d7f8972cfb48e3808
Allow overriding ContextualMenu's internal List's role (#13908) #### Pull request checklist - [X] Addresses an existing issue: Fixes #13971 - [X] Include a change request file using `$ yarn change` #### Description of changes Currently, the `ContextualMenu` control hard-code the `role` attribute of the internal List as `menu`. In my usage, I want to set a different role, specifically `grid`. There's currently no way to achieve this. In this PR, I'm adding a `role` property to the `IContextualMenuListProps` struct. The idea is that the consumer of `ContextualMenu` would provide a custom implementation of `onRenderMenuList` callback. Inside the callback, it can set the `role` attribute to `grid`, before invoking the default renderer. The default renderer inside `ContextualMenu` is modified to honor the `role` property. If `role` is not set, it falls back to `menu`, hence preserving the existing behavior. #### Focus areas to test Added unit tests.
commit sha 6ddf7d61096e644b7ee3a63abf02629a786a99ac
ESLint: add faster max-len rule (#13994)
commit sha 5d63c38662cc26c0518dbe5b7299b1039e0c02ad
Fix Picker action button screen reader issue by updating activedescendant (#13627) * Point picker activedescendant to suggestions action buttons, update render when leaving action buttons * change file * add test for activedescendant on BasePicker * return undefined activedescendant when loading
commit sha 41c1643be865c1969acacf4d3d896fd80ca29037
Adding CodeSandbox next/northstar templates (#13893) * Add codesandbox template for react-next package * fix version error in package.json * add react-next template to ci.json * add <ThemeProvider> and <Stack> components to fix template rendering * add theme-samples dependency to package.json * fix lint errors in package.json * Add initializeIcons so <SpinButton> can render correctly * Add codesandbox template for react-northstar package components * Update ci.json file with new package * remove unused package and fix index.tsx * Add oufr to package.json * Fix dependency tree to run codesandbox for react-northstar package * Update some package.json dependencies * Update dependencies in react-next template to fix lint errors * Add oufr package to dependencies in package.json * Add react-bindings package to ci.json * fix package order * update package dependencies to fix lint errors * Add explicit typing to index.tsx and clean up json files in both templates * fix lint error * add prettier dependency to react-northstar template * Update just.config.ts file and tsconfig.json file for both templates * update next and northstar templates to use eslint * update package.json
commit sha a0b451a274e96ecedfb55c13276ee6e5777f75c2
Legends: Remove tab stop on legends for data viz (#14019) * Legends:Skip all legends in data viz as it is confusing to non sighted users as they have just gone through the data viz. * Change files * Update snapshots Co-authored-by: Rajesh Goriga <[email protected]>
push time in 22 days
push eventmicrosoft/fluentui
commit sha 15630baeae575e1dce90871da1c880277cb3582e
Chore(Splitbutton): Fix docsite example (#14023) * Fix docsite example * Update Changelog
push time in 22 days
delete branch pompomon/office-ui-fabric-react
delete branch : chore/fix-splitbutton-example
delete time in 22 days
PR merged microsoft/fluentui
Pull request checklist
- [ ] Addresses an existing issue: Fixes #0000
- [ ] Include a change request file using
$ yarn change
Description of changes
Fix menu open controlled state example
Before
After
pr closed time in 22 days
push eventpompomon/office-ui-fabric-react
commit sha 17d4ca25db64797437bf6d658c387661197d7740
chore: use own React context (#14010) * chore: use own React context * fix UTs * remove duplicate var * fix UTs * Update packages/fluentui/react-bindings/src/index.ts Co-authored-by: Charles Assunção <[email protected]> * remove duplicate newline * fix UTs * fix UTs, update changelog entry * add a comment * fix types Co-authored-by: Charles Assunção <[email protected]>
commit sha ac395c5e30b21081b49166ccfc02177f777df7c6
applying package updates
commit sha 3cc14fd0025a40c5ac6845439b0ab4b65b735cba
Adding Headset Icon (#12956) * Add HeadsetIcon * Updateing changelog * fix imports * Change files * fix imports Co-authored-by: Jason Wu <[email protected]> Co-authored-by: Oleksandr Fediashov <[email protected]>
commit sha b53685fe5f503626f3be8d0f1b81b476a7cd442e
chore: improve lazy loading in v0 docs (#13777) * chore: improve lazy loading in v0 docs * fix chunk comment * fix merge issues, remove default exports * restore change
commit sha 4a4a445c6a164cc9f8147247cdf5b10a6373bcc6
Fix docsite example
commit sha a5555fee261d7c8c4edbcea55164697322319f1b
Update Changelog
push time in 22 days
push eventpompomon/office-ui-fabric-react
commit sha 17d4ca25db64797437bf6d658c387661197d7740
chore: use own React context (#14010) * chore: use own React context * fix UTs * remove duplicate var * fix UTs * Update packages/fluentui/react-bindings/src/index.ts Co-authored-by: Charles Assunção <[email protected]> * remove duplicate newline * fix UTs * fix UTs, update changelog entry * add a comment * fix types Co-authored-by: Charles Assunção <[email protected]>
commit sha ac395c5e30b21081b49166ccfc02177f777df7c6
applying package updates
commit sha 3cc14fd0025a40c5ac6845439b0ab4b65b735cba
Adding Headset Icon (#12956) * Add HeadsetIcon * Updateing changelog * fix imports * Change files * fix imports Co-authored-by: Jason Wu <[email protected]> Co-authored-by: Oleksandr Fediashov <[email protected]>
commit sha b53685fe5f503626f3be8d0f1b81b476a7cd442e
chore: improve lazy loading in v0 docs (#13777) * chore: improve lazy loading in v0 docs * fix chunk comment * fix merge issues, remove default exports * restore change
push time in 22 days
push eventpompomon/office-ui-fabric-react
commit sha b45a0f44e74ff47741900fa2116ecd0ab7ffa30e
Update Changelog
push time in 22 days
PR opened microsoft/fluentui
Pull request checklist
- [ ] Addresses an existing issue: Fixes #0000
- [ ] Include a change request file using
$ yarn change
Description of changes
Fix menu open controlled state example
Before
After
pr created time in 22 days
create barnchpompomon/office-ui-fabric-react
branch : chore/fix-splitbutton-example
created branch time in 22 days
push eventpompomon/office-ui-fabric-react
commit sha 3196b7a1d53fbc0815050bc5ee44d340acbd2871
chore: use Babel plugins to annotate pure calls (#14007)
push time in 22 days
push eventpompomon/office-ui-fabric-react
commit sha 65e1f3d9412b481b26a28887a14405129e750cea
fix: Respect hidden HTML attribute on components (#13964) * Respect hidden attrinbute on Button * Update Changelog
commit sha 32cebffbae0075caada6ffae8efd41b5bb6927de
Fix bug: ContextualMenu doesn't honor the focusZoneProps prop (#13924) * Apply focusZone props to ContextualMenu. * Change files
commit sha ab11a59f02301dd0ba7226bcd5104c88fdbc2909
Correct findScrollableParent return type (#13953) * Correct findScrollableParent return type * Additional HTMLElement type assertion * Change files * Update API file * Update API file * Change files * Additional HTMLElement assertions * Change files * Update @uifabric-utilities-2020-07-08-10-41-40-keco-scroll-return-type.json * Update office-ui-fabric-react-2020-07-08-11-21-32-keco-scroll-return-type.json * Update @fluentui-react-focus-2020-07-08-11-37-35-keco-scroll-return-type.json Co-authored-by: Kevin T. Coughlin <[email protected]> Co-authored-by: David Zearing <[email protected]>
commit sha cde96919b4e9233996196c48e7ad8d4ac8326221
Area chart added to @charting package (#13579) * area chart single and multiple chats added * X axis date type code updated * Date axis updated and code sorted * Change files * change files * types of area chart updated * Add utility functions for line chart and area chart * Remove Comments * accessbility added to area chart * legend accessibility completed * comments removed and updated with master code * exampes code updated * did mount and accessiblity code updated * fit container changed to common utility Co-authored-by: Jameela Kowsar Shaik (Zen3 Infosolutions America Inc) <[email protected]> Co-authored-by: Rajesh Goriga <[email protected]>
commit sha 0f266142f77c423e630693ce5500e92662f8beb9
Update CODEOWNERS
commit sha d76d871328d581db267b9d2d90782b419e8b3068
CodeMods: Implement Maybe to help deal with null/undefined checks. (#13965) * Implement Maybe
commit sha 001de9e8c5294858c069f95e832f391532d414c6
Adding filetype mapping for .osts extension (#13970) * Adding file icon mapping support for `osts` extension. * Change files. Updating to add support for .osts extension and properly initializing the filetype icon sample storyboard.
commit sha f1fc8e2c111f85add25e5c1c3470adb2f7b1a01a
applying package updates
commit sha 385517ff6b14786e1ea744f3de61d06a34be7822
[Date-Time] refactor date time examples (#13956) * refactoring the date time examples into separate files to fix storybook. Also fixing bug in Calendar where externally controlled date does not navigate the calendar when the date changes * Change files * fixing auto-import of DateRangeType that broke linter * undoing accidental typo change in the OUFR file
commit sha 559e91a35ec2bde8ae3a7431a8679b5637192ecb
Website icon fix - give icons unique IDs (#13967) SVG icons had hard coded ids. made them unique.
commit sha 20be95a095c9296db1fa735b76ae58191f015171
New macos button and separator (#13910) #### Pull request checklist - [ ] Addresses an existing issue: Fixes #0000 - [x] Include a change request file using `$ yarn change` #### Description of changes We have 2 more new controls coming in for macOS. Let's update the documentation.
commit sha 7fc0a7d046869c5f245661bd606831d9e390a32a
chore(Dropdown): convert to be functional component (#13962) * wip * remove cruft * fix const usage * fix regressions * fix visual regressions * fix lint errors * fix visual regressions * add changelog entries
commit sha f62f03845b9ad5dbfacc094676f0819181c53c13
fix: make getShorthandInfo compatible with `compose()` (#13961)
commit sha 77a67dc27a4a3f546fcfc88732e42da0fa1c9d9e
applying package updates
commit sha 90ac82119ec951273a8bac7b6d3e75cabd3b49a6
chore: use minification for stats task and proper env (#13986)
commit sha d43db14983c012854c144263821109e09ed15310
fix(ChatMessage): remove auto (#13988)
commit sha 8df4df38a9af3fe5dccf54c5db844af4805cfc83
Fix bug: azure-theme CommandBar styles (#13959) * Azure-theme command bar and command bar button style updates * Change files Co-authored-by: Jackie <[email protected]>
commit sha d07846f717c51a003c496c9fcac49e52fc55c8f1
Remove KeytipData usage from Link, Checkbox, Toggle (react-next) (#13742) * export useKeytipData * remove KeytipData usage from Checkbox, add withKeytipData HOC * remove KeytipData for toggle * Remove keytipData for link * update example * cleanups * Change files * resolve comments * avoid adding keytipData prop * fixes * fix keytip set to invisible if addKeytipQueue is called multiple time * resolve comment
commit sha ec36a5c214cfc9a9262f8100013734f61952e95a
DatePicker: showDatePickerPopup should be public (#13981) * showDatePickerPopup as public api * Change files * make method public * api file update * add showdatepicker to interface * build fix
commit sha 47f3eafa6b60d3e12ea5f87c839c4e332364d38a
Update CODEOWNERS for packages/foundation (#13990)
push time in 22 days
Pull request review commentmicrosoft/fluentui
+import { Accessibility, datepickerBehavior, DatepickerBehaviorProps } from '@fluentui/accessibility';+import {+ getElementType,+ useAccessibility,+ useStyles,+ useTelemetry,+ useUnhandledProps,+ ComponentWithAs,+} from '@fluentui/react-bindings';+import { Ref } from '@fluentui/react-component-ref';+import * as React from 'react';+import * as PropTypes from 'prop-types';+import * as _ from 'lodash';++// @ts-ignore+import { ThemeContext } from 'react-fela';+import {+ FluentComponentStaticProps,+ ProviderContextPrepared,+ ShorthandRenderFunction,+ ComponentEventHandler,+} from '../../types';+import { commonPropTypes, createShorthandFactory, UIComponentProps } from '../../utils';+import Input from '../Input/Input';+import Button from '../Button/Button';+import { CalendarIcon } from '@fluentui/react-icons-northstar';+import Popup from '../Popup/Popup';+import {+ IRestrictedDatesOptions,+ IDay,+ DayOfWeek,+ FirstWeekOfYear,+ DateRangeType,+ IDateGridStrings,+ formatMonthDayYear,+ IDayGridOptions,+} from '@fluentui/date-time-utilities';+import { default as DatepickerCalendar, DatepickerCalendarProps } from './DatepickerCalendar';++// TODO: extract to date-time-utilities+const DEFAULT_STRINGS: IDateGridStrings = {+ months: [+ 'January',+ 'February',+ 'March',+ 'April',+ 'May',+ 'June',+ 'July',+ 'August',+ 'September',+ 'October',+ 'November',+ 'December',+ ],+ shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],+ days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],+ shortDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],+};++// TODO: extract to date-time-utilities+export interface IDateFormatting {+ /**+ * Format the date according to specified function.+ * Intended use case is localization.+ */+ format?: (date: Date) => string;++ /**+ * Parse date from string representation into Date type.+ */+ parse?: (date: string) => Date;+}++// TODO: extract to date-time-utilities+export interface IDatepickerOptions extends IRestrictedDatesOptions {+ /**+ * The first day of the week for your locale.+ */+ firstDayOfWeek?: DayOfWeek;++ /**+ * Defines when the first week of the year should start, FirstWeekOfYear.FirstDay,+ * FirstWeekOfYear.FirstFullWeek or FirstWeekOfYear.FirstFourDayWeek are the possible values+ */+ firstWeekOfYear?: FirstWeekOfYear;++ /**+ * The date range type indicating how many days should be selected as the user+ * selects days+ */+ dateRangeType?: DateRangeType;++ /**+ * The number of days to select while dateRangeType === DateRangeType.Day. Used in order to have multi-day+ * views.+ */+ daysToSelectInDayView?: number;++ /**+ * Value of today. If null, current time in client machine will be used.+ */+ today?: Date;++ /**+ * Whether the calendar should show the week number (weeks 1 to 53) before each week row+ */+ showWeekNumbers?: boolean;++ /**+ * The days that are selectable when `dateRangeType` is WorkWeek.+ * If `dateRangeType` is not WorkWeek this property does nothing.+ */+ workWeekDays?: DayOfWeek[];+}++export interface DatepickerProps extends IDatepickerOptions, IDateFormatting, UIComponentProps {+ /** Accessibility behavior if overridden by the user. */+ accessibility?: Accessibility<DatepickerBehaviorProps>;++ /** Datepicker shows it is currently unable to be interacted with. */+ disabled?: boolean;++ /** Datepicker shows it is currently unable to be interacted with. */+ isRequired?: boolean;++ /**+ * Called on change of the date.+ *+ * @param event - React's original SyntheticEvent.+ * @param data - All props and proposed value.+ */+ onDateChange?: ComponentEventHandler<DatepickerProps & { value: IDay }>;++ /** String to render for button to direct the user to today's date. */+ goToToday?: string;++ /** Text placeholder for the input field. */+ placeholder?: string;++ /** A render function to customize how cells are rendered in the Calendar. */+ renderCell?: ShorthandRenderFunction<any>;++ /** A render function to customize how cells are rendered in the Calendar.. */+ renderHeaderCell?: ShorthandRenderFunction<any>;++ /** Localized labels */+ localizedStrings?: IDateGridStrings;+}++export type DatepickerStylesProps = never;++export const datepickerClassName = 'ui-datepicker';++const Unstable_Datepicker: ComponentWithAs<'div', DatepickerProps> &+ FluentComponentStaticProps<DatepickerProps> = props => {+ const context: ProviderContextPrepared = React.useContext(ThemeContext);+ const { setStart, setEnd } = useTelemetry(Unstable_Datepicker.displayName, context.telemetry);+ setStart();+ const datepickerRef = React.useRef<HTMLElement>();+ const [open, setOpen] = React.useState<boolean>(false);+ const [selectedDate, setSelectedDate] = React.useState<Date | undefined>();+ const valueFormatter = date => (date ? formatMonthDayYear(date, DEFAULT_STRINGS) : '');+ const { firstDayOfWeek, firstWeekOfYear, dateRangeType } = props;+ const calendarOptions: IDayGridOptions = {+ selectedDate: selectedDate ?? props.today ?? new Date(),+ navigatedDate: selectedDate ?? props.today ?? new Date(),+ firstDayOfWeek,+ firstWeekOfYear,+ dateRangeType,+ };++ const showCalendarGrid = () => {+ setOpen(true);+ };++ const { className, design, styles, variables } = props;+ const ElementType = getElementType(props);+ const unhandledProps = useUnhandledProps(Unstable_Datepicker.handledProps, props);+ const getA11yProps = useAccessibility(props.accessibility, {+ debugName: Unstable_Datepicker.displayName,+ actionHandlers: {},+ rtl: context.rtl,+ });++ const { classes } = useStyles<DatepickerStylesProps>(Unstable_Datepicker.displayName, {+ className: datepickerClassName,+ mapPropsToInlineStyles: () => ({+ className,+ design,+ styles,+ variables,+ }),+ rtl: context.rtl,+ });++ const handleChange: DatepickerCalendarProps['onDateChange'] = (e, data) => {+ const targetDay = data.value;+ setSelectedDate(targetDay.originalDate);+ setOpen(false);++ _.invoke(props, 'onDateChange', e, { ...props, value: targetDay });+ };++ const element = (+ <Ref innerRef={datepickerRef}>+ {getA11yProps.unstable_wrapWithFocusZone(+ <ElementType+ {...getA11yProps('root', {+ className: classes.root,+ ...unhandledProps,+ })}+ >+ <Input readOnly onClick={showCalendarGrid} value={valueFormatter(selectedDate)} />+ <Popup+ open={open}+ onOpenChange={(e, { open }) => setOpen(open)}+ content={+ <DatepickerCalendar {...calendarOptions} onDateChange={handleChange} localizedStrings={DEFAULT_STRINGS} />+ }+ trapFocus+ >+ <Button icon={<CalendarIcon />} title="Open calendar" iconOnly />+ </Popup>+ </ElementType>,+ )}+ </Ref>+ );+ setEnd();+ return element;+};++Unstable_Datepicker.displayName = 'Datepicker';++Unstable_Datepicker.propTypes = {+ ...commonPropTypes.createCommon(),++ minDate: PropTypes.instanceOf(Date),+ maxDate: PropTypes.instanceOf(Date),+ restrictedDates: PropTypes.arrayOf(PropTypes.instanceOf(Date)),++ firstDayOfWeek: PropTypes.oneOf(Object.keys(DayOfWeek).map(name => DayOfWeek[name])),+ firstWeekOfYear: PropTypes.oneOf(Object.keys(FirstWeekOfYear).map(name => FirstWeekOfYear[name])),+ dateRangeType: PropTypes.oneOf(Object.keys(DateRangeType).map(name => DateRangeType[name])),+ daysToSelectInDayView: PropTypes.number,+ today: PropTypes.instanceOf(Date),+ showWeekNumbers: PropTypes.bool,+ workWeekDays: PropTypes.arrayOf(PropTypes.oneOf(Object.keys(DayOfWeek).map(name => DayOfWeek[name]))),++ localizedStrings: PropTypes.object as PropTypes.Validator<IDateGridStrings>,++ format: PropTypes.func,+ parse: PropTypes.func,++ disabled: PropTypes.bool,+ isRequired: PropTypes.bool,+ onDateChange: PropTypes.func,+ goToToday: PropTypes.string,+ placeholder: PropTypes.string,+ renderCell: PropTypes.func,+ renderHeaderCell: PropTypes.func,+};++Unstable_Datepicker.defaultProps = {+ accessibility: datepickerBehavior,+ firstDayOfWeek: DayOfWeek.Monday,+ firstWeekOfYear: FirstWeekOfYear.FirstDay,+ dateRangeType: DateRangeType.Day,+};++Unstable_Datepicker.handledProps = Object.keys(Unstable_Datepicker.propTypes) as any;++Unstable_Datepicker.create = createShorthandFactory({ Component: Unstable_Datepicker });++/**+ * A Datepicker is used to display dates.+ */+export default Unstable_Datepicker;
Please don't forget to remove all default exports
comment created time in 23 days
Pull request review commentmicrosoft/fluentui
+import Unstable_Datepicker from 'src/components/Datepicker/Datepicker';++describe('Datepicker', () => {+ it('filler_test', () => expect(Unstable_Datepicker.displayName).not.toBeNull());
Yep, we've agreed to skip isConformant while the component is in "Unstable_*" state
comment created time in 24 days
Pull request review commentmicrosoft/fluentui
chore: remove default exports [P5]
const config = {+ repoURL: 'https://github.com/microsoft/fluentui',
Should we import it from packages/fluentui/react-northstar/src/utils/constants.ts ? So we don't have to change URL in two places
comment created time in a month
Pull request review commentmicrosoft/fluentui
chore: remove default exports [P5]
export * from './themes/teams/types'; // Components // export * from './components/Accordion/Accordion';-export { default as Accordion } from './components/Accordion/Accordion'; export * from './components/Accordion/AccordionTitle';-export { default as AccordionTitle } from './components/Accordion/AccordionTitle'; export * from './components/Accordion/AccordionContent';-export { default as AccordionContent } from './components/Accordion/AccordionContent'; export * from './components/Alert/Alert';-export { default as Alert } from './components/Alert/Alert'; export * from './components/Alert/AlertDismissAction';-export { default as AlertDismissAction } from './components/Alert/AlertDismissAction'; export * from './components/Attachment/Attachment';-export { default as Attachment } from './components/Attachment/Attachment'; export * from './components/Attachment/AttachmentAction';-export { default as AttachmentAction } from './components/Attachment/AttachmentAction'; export * from './components/Attachment/AttachmentBody';-export { default as AttachmentBody } from './components/Attachment/AttachmentBody'; export * from './components/Attachment/AttachmentDescription';-export { default as AttachmentDescription } from './components/Attachment/AttachmentDescription'; export * from './components/Attachment/AttachmentHeader';-export { default as AttachmentHeader } from './components/Attachment/AttachmentHeader'; export * from './components/Attachment/AttachmentIcon';-export { default as AttachmentIcon } from './components/Attachment/AttachmentIcon'; export * from './components/Avatar/Avatar';-export { default as Avatar } from './components/Avatar/Avatar'; export * from './components/Box/Box';-export { default as Box } from './components/Box/Box'; export * from './components/Button/Button';-export { default as Button } from './components/Button/Button'; export * from './components/Button/ButtonGroup';-export { default as ButtonGroup } from './components/Button/ButtonGroup'; export * from './components/Button/ButtonContent';-export { default as ButtonContent } from './components/Button/ButtonContent'; export * from './components/Chat/Chat';-export { default as Chat } from './components/Chat/Chat'; export * from './components/Chat/ChatItem';-export { default as ChatItem } from './components/Chat/ChatItem';+export * from './components/Chat/ChatItem';
Duplicate line
comment created time in a month
Pull request review commentmicrosoft/fluentui
chore: remove default exports [P5]
{ "extends": ["plugin:@fluentui/eslint-plugin/react-northstar"],- "root": true+ "root": true,+ "rules": {+ "import/no-default-export": "off"
Please why it's "off" for e2e?
comment created time in a month
Pull request review commentmicrosoft/fluentui
+import { Accessibility, datepickerCalendarBehavior, DatepickerCalendarBehaviorProps } from '@fluentui/accessibility';+import {+ getElementType,+ useAccessibility,+ useStyles,+ useTelemetry,+ useUnhandledProps,+ ComponentWithAs,+} from '@fluentui/react-bindings';+import { Ref } from '@fluentui/react-component-ref';+import * as _ from 'lodash';+import * as PropTypes from 'prop-types';+import * as React from 'react';+// @ts-ignore+import { ThemeContext } from 'react-fela';+import { FluentComponentStaticProps, ProviderContextPrepared } from '../../types';+import { commonPropTypes, createShorthandFactory, UIComponentProps } from '../../utils';+import Grid from '../Grid/Grid';+import {+ IDayGridOptions,+ getDayGrid,+ IDay,+ DAYS_IN_WEEK,+ IDateGridStrings,+ DayOfWeek,+ FirstWeekOfYear,+ DateRangeType,+ formatMonthDayYear,+} from '@fluentui/date-time-utilities';+import Text from '../Text/Text';+import Button from '../Button/Button';+import { IDatepickerOptions } from './Datepicker';++export interface IDateFormatting {+ /**+ * Format the date according to specified function.+ * Intended use case is localization.+ */+ format?: (date: Date) => string;++ /**+ * Parse date from string representation into Date type.+ */+ parse?: (date: string) => Date;+}++export interface DatepickerCalendarProps extends IDatepickerOptions, IDateFormatting, UIComponentProps {+ /**+ * The currently selected date+ */+ selectedDate: Date;+ /**+ * The currently navigated date+ */+ navigatedDate: Date;+ /** Accessibility behavior if overridden by the user. */+ accessibility?: Accessibility<DatepickerCalendarBehaviorProps>;++ /**+ * Called on change of the date.+ *+ * @param event - React's original SyntheticEvent.+ * @param data - All props and proposed value.+ */+ onDaySelect?: (e: React.MouseEvent<HTMLElement>, data: DatepickerCalendarProps & { value: IDay }) => void;++ /** Localized labels */+ localizedStrings?: IDateGridStrings;+}++export type DatepickerCalendarStylesProps = never;++export const datepickerCalendarClassName = 'ui-datepickerCalendar';++const DatepickerCalendar: ComponentWithAs<'div', DatepickerCalendarProps> &+ FluentComponentStaticProps<DatepickerCalendarProps> = props => {+ const context: ProviderContextPrepared = React.useContext(ThemeContext);+ const { setStart, setEnd } = useTelemetry(DatepickerCalendar.displayName, context.telemetry);+ setStart();+ const datepickerCalendarRef = React.useRef<HTMLElement>();+ const {+ className,+ design,+ styles,+ variables,+ selectedDate,+ navigatedDate,+ firstDayOfWeek,+ firstWeekOfYear,+ dateRangeType,+ localizedStrings,+ } = props;+ const ElementType = getElementType(props);+ const unhandledProps = useUnhandledProps(DatepickerCalendar.handledProps, props);+ const getA11yProps = useAccessibility(props.accessibility, {+ debugName: DatepickerCalendar.displayName,+ actionHandlers: {},+ rtl: context.rtl,+ });+ const gridOptions: IDayGridOptions = {+ selectedDate,+ navigatedDate,+ firstDayOfWeek,+ firstWeekOfYear,+ dateRangeType,+ };++ const { classes } = useStyles<DatepickerCalendarStylesProps>(DatepickerCalendar.displayName, {+ className: datepickerCalendarClassName,+ mapPropsToInlineStyles: () => ({+ className,+ design,+ styles,+ variables,+ }),+ rtl: context.rtl,+ });++ let grid = getDayGrid(gridOptions);
In general my idea was to differentiate between day, month and year pickers, so now we are getting dayGrid, and then for month picker it would be getting monthGrid or something like that. So, I'd leave this like that for now :)
comment created time in a month
delete branch pompomon/office-ui-fabric-react
delete branch : fix/button-hidden
delete time in a month
push eventmicrosoft/fluentui
commit sha 65e1f3d9412b481b26a28887a14405129e750cea
fix: Respect hidden HTML attribute on components (#13964) * Respect hidden attrinbute on Button * Update Changelog
push time in a month
PR merged microsoft/fluentui
Pull request checklist
- [X] Addresses an existing issue: Fixes #13733
- [ ] Include a change request file using
$ yarn change
Description of changes
Add priority CSS rule for [hidden] HTML attribute in global styles, so it's applied for all components, which don't handle hidden prop
pr closed time in a month
issue closedmicrosoft/fluentui
Button: hidden prop overriden by styles
Environment Information
- Package version(s): 0.50
- Browser and OS versions: all
Please provide a reproduction of the bug in a codepen:
hidden prop does not hide the Button as display: inline-flex is aways applied
https://codesandbox.io/s/stq2b?module=/example.js
closed time in a month
jurokapsiar
pull request commentmicrosoft/fluentui
fix(Button): Respect hidden HTML attribute on components
Can you update the PR description to reflect that we are adding something in the global styles, this is not a fix only for the Button component
Done :)
comment created time in a month
Pull request review commentmicrosoft/fluentui
fix(Button): Respect hidden HTML attribute on components
export const globalStyles: StaticStyleFunction = siteVars => ({ '*:after': { boxSizing: 'border-box', },+ /* Adding priority for HTML `hidden` attribute to be applied correctly */+ '[hidden]': {+ display: 'none!important',
Yeah, from what I've found there is nothing much else to do for that case :( Some of other CSS frameworks are doing the same
comment created time in a month
Pull request review commentmicrosoft/fluentui
fix(Button): Respect hidden HTML attribute on components
export const globalStyles: StaticStyleFunction = siteVars => ({ '*:after': { boxSizing: 'border-box', },+ /* Adding priority for HTML `hidden` attribute to be applied correctly */
Based on the discussions here https://css-tricks.com/the-hidden-attribute-is-visibly-weak/ and here https://meowni.ca/hidden.is.a.lie.html - I'm opting to add !important to the [hidden] style as the most robust solution
comment created time in a month
push eventpompomon/office-ui-fabric-react
commit sha 99f11897fe62eb0b5bb85901877dc70a3534df36
Update Changelog
push time in a month
PR opened microsoft/fluentui
Pull request checklist
- [X] Addresses an existing issue: Fixes #13733
- [ ] Include a change request file using
$ yarn change
Description of changes
Add priority CSS rule for [hidden] HTML attribute for Button (and other components, which doesn't handle hidden prop)
pr created time in a month
create barnchpompomon/office-ui-fabric-react
created branch time in a month
push eventpompomon/office-ui-fabric-react
commit sha 17a103f2d7fce4edc885ab87a0086c52e0d91f1c
applying package updates
commit sha 30ab262bd881de335a24538bd332aed0361ba0f4
fix(FormPrototype): remove required (#13840)
commit sha 038a8f24ee86010c9665f5a7875f72a4a0e7b181
fix(FormInput): Forwards ref properly (#13839) * feat(FormField): Add error message, error indicator and satisfactory indicator * feat(FormField): Add satisfactoryIndicator to proptypes * feat(FormField): contidion to satisfactory Indicator * feat(FormField): add desc to prop * feat(FormField):fix proptype * feat(FormField): fix message ID * feat(FormField): add aria required * feat(FormField): add error examples * feat(FormField): add tests * feat(FormField): add children api * feat(FormField): add children api * feat(FormField): reduce example * feat(FormField): remove comment * feat(FormField): rename satisfactoryIndicator * feat(FormField): update ids * feat(FormField): replace labelledby * feat(FormField): use controlId * feat(FormField): use id for label * feat(FormField): add best practice * feat(FormField): aria-labelledby in the input * feat(FormField):error to hasIcon * feat(FormField): simplify * feat(FormField): Fix text * feat(FormComponents): add components * feat(FormField): rename * feat(FormField): rename * feat(FormField): rename * feat(FormComponents): add components * feat(FormComponents): add button * feat(FormComponents): remove coments * feat(FormComponents): slot props * feat(FormComponents): fix label * feat(FormComponents): Fix tests * feat(FormComponents): Fix tests * feat(FormComponents): Fix checkbox Label * feat(FormComponents): Fix import * feat(FormComponents): Add FormFieldCustom * feat(FormComponents): remove unused prop from checkbox form * feat(FormComponents): add form slider and form radio group * feat(FormComponents): form slider class * feat(FormComponents): fix handled props * feat(FormComponents): remove checkboxLabel * feat(FormPrototype): add form prototype validation * feat(FormPrototype): remove mode * feat(FormPrototype): inputRef type * feat(FormPrototype): inputRer type * feat(FormPrototype): small fixes * feat(FormComponents): remove control * feat(FormComponents): review * feat(FormComponents): Update example * feat(FormComponents): revert formFieldStyles * feat(FormComponents): fix props input * feat(FormComponents): remove type from styles * Update packages/fluentui/react-northstar/src/components/Form/FormFieldCustom.tsx Co-authored-by: Roman Sudarikov <[email protected]> * Update packages/fluentui/react-northstar/src/components/Form/FormFieldCustom.tsx Co-authored-by: Roman Sudarikov <[email protected]> * feat(FormComponents): update class name * feat(FormComponents): revert formfield test * Update packages/fluentui/react-northstar/src/components/Form/FormFieldCustom.tsx Co-authored-by: Roman Sudarikov <[email protected]> * feat(FormComponents): Variants Section * feat(FormComponents): revert removing control * feat(FormComponents): remove default prop * Update packages/fluentui/react-northstar/src/components/Form/FormFieldCustom.tsx Co-authored-by: Oleksandr Fediashov <[email protected]> * Update packages/fluentui/react-northstar/src/components/Form/FormCheckbox.tsx Co-authored-by: Oleksandr Fediashov <[email protected]> * feat(FormComponents): review * feat(FormPrototype): handle dropdown onBlur * feat(FormPrototype): Validation on blur dropdown * feat(FormPrototype): Refact FormFieldBase * feat(FormPrototype): add FormFieldCustom * feat(FormPrototype): change file name * feat(FormPrototype): remove children * feat(FormComponents): review * feat(FormComponents): review * feat(FormComponents): review * feat(FormPrototype): required * feat(FormPrototype): error to message in dropdown * feat(FormPrototype): Fix formik * feat(FormPrototype): Fix onBlur * feat(FormPrototype): Fix onBlur * feat(FormPrototype): Fix lock * feat(FormPrototype): Fix validation * feat(FormPrototype): hotfix * feat(FormPrototype): remove import * feat(FormPrototype): remove flat from packagejson * feat(FormPrototype): remove condition using watch * feat(FormPrototype): update * feat(FormPrototype): change ref * fix(FormInput): foward ref properly * Update packages/fluentui/react-northstar/src/components/Input/Input.tsx * fix(FormPrototype): fix tests * fix(FormPrototype): fix tests Co-authored-by: Roman Sudarikov <[email protected]> Co-authored-by: Oleksandr Fediashov <[email protected]>
commit sha 50a3aaef8b7b967078b850656354594fee30bbbd
Legends: Fix Incorrect role is defined for lagend overflow items (#13837) * FIx Incorrect role is defined for lagend overflow items * Change files Co-authored-by: Rajesh Goriga <[email protected]>
commit sha 97c2a145ae6c5478d17f1577bd2a21a31de860f0
fix(compose): update types to provide better infers (#13841) * fix(compose): update types to provide better infers * Change files * update prop name * use update API * fix types * fix lint
commit sha 7932ae5eef247af9b914e8f05efdaac0b64914f8
getNativeProps perf: adjusting indexOf lookup to object lookups. (#13842) * Update native props. * Change files * fix * Change files
commit sha a41ab1f5338190531ba50b0e87193a54f7e3b6c7
Button: Adding visual regression tests for focused scenarios (#13832) #### Pull request checklist - [ ] Addresses an existing issue: Fixes #0000 - [x] Include a change request file using `$ yarn change` #### Description of changes This PR adds visual regression tests for scenarios where the `Button` has been focused. #### Focus areas to test (optional)
commit sha 0992ce1a42dcd1105ec055d655111288b54d3bcd
mergestyles: IStyle: loosening typings for objects embedded within the style. (#13847) * Loosening typings in IStyle. * Change files * api. * :(
commit sha 4746eb1c2dd4846510353f839bc4079511a75e22
Button: Adding various tests and updating component to include componentRef (#13718) * Updates. * useMergedRefs update to be immutable. * adding comment. * Change files * more updates. * updates * better. * Fixing unneeded style prop in button. * undo * Change files * update. * cleanup. * Removing oufr dependency from button, updating api * Update change/@fluentui-react-button-2020-06-19-15-32-16-fix-button-fixes.json Co-authored-by: Makoto Morimoto <[email protected]> * Update packages/react-button/src/components/Button/Button.types.tsx Co-authored-by: Makoto Morimoto <[email protected]> * updates. * This is wrong - styles should not be injected without being necessary. * undo! * no message Co-authored-by: Makoto Morimoto <[email protected]>
commit sha f4abe1f5efe35acf7743275a44e59a099c46f39b
doc: Document Debug Panel and Telemetry Popover (#13818) * doc: Document Debug Panel and Telemetry Popover * remove cruft * update doc * changelog * Apply suggestions from code review Co-authored-by: Marija Najdova <[email protected]> Co-authored-by: Roman Sudarikov <[email protected]> Co-authored-by: Marija Najdova <[email protected]> Co-authored-by: Roman Sudarikov <[email protected]>
commit sha 6525619bf5e6c844406ed3cb9ad3103237eff89f
chore: move shorthandConfig to compose() (#13856) * chore: move shorthandConfig to compose() * remove duplicate import * remove unused import
commit sha 9703000e9e94fdbb82d11200a715108fcb480a00
applying package updates
commit sha 992853c1a9c37e4ab9ba390b5a1760173bdfd702
chore: update Webpack config for bundle size task in v0 (#13862)
commit sha 7720f47bdff20903044a47c9073ea170b4c83515
chore(Grid): convert to be function component (#13863) * chore(Grid): convert to be function component * add changelog entry * fix types in Teams theme * use FZ * fix UT
commit sha 6870e7068a2cb7fbd36828c5c0e7bab198fa3efa
Use correct target window for ResizeGroup animation frame callback (#13864) * Ensure ResizeGroup uses correct window for animation frame * Change files
commit sha ea1cb2f66589e09d46ad49843114fec282c1ed6c
Grouped vertical bar chart: Prop check added to update chart when props changed (#13853) * prop check added * Change files * change lig * on legend click code updated Co-authored-by: Jameela Kowsar Shaik (Zen3 Infosolutions America Inc) <[email protected]>
commit sha acc9cc976871838be5967d6d303ebee44f557f24
Adding a template in the repo for codesandbox examples (#13745) * Create codesandbox template for react package * Move files up to maintain file structure * Fix variable declaration so options for ChoiceGroup and DropDown can render * Change package dependency to @fluentui/react * Update apps/codesandbox-react-template/package.json Co-authored-by: Elizabeth Craig <[email protected]> * Update ci.json * Update ci.json * Update require.context() function to the right file * Fix file path to index.tsx in storybook * remove unneccesary files * Update ci.json * update ci.json * Add missing infor to package.json and tsconfig.json files * Fix dependency issue in package.json * update yarn.lock Co-authored-by: Elizabeth Craig <[email protected]> Co-authored-by: David Zearing <[email protected]>
commit sha 967a2d4d1879c1683f3c8bd9ea9cd4884944d396
High Contrast in Edge Chromium: Fix Label and TextField (#13844) * update high contrast selector * fix label * fix textfiled * update snapshots * Change files * update api * update snapshots * update snapshots in date-time * Change files * update snaps for exp package * Change files * update snaps for react-next * update label styles * update snapshots
commit sha 1606d80c8d9964ca6f1cac4219ab9249b93b4428
High Contrast in Edge Chromium: fix Nav (#13850) * fix nav in high contrast * Change files * update snapshots * fixes
commit sha 74dc7d81cfb5a21f0ce0e73e2a6d0550dede4870
High Contrast in Edge Chromium: fix ChoiceGroup. (#13846) * fix ChoiceGroup * update snapshots * Change files * update snapshots
push time in a month
Pull request review commentmicrosoft/fluentui
+import { Accessibility, datepickerBehavior, DatepickerBehaviorProps } from '@fluentui/accessibility';+import {+ getElementType,+ useAccessibility,+ useStyles,+ useTelemetry,+ useUnhandledProps,+ ComponentWithAs,+} from '@fluentui/react-bindings';+import { Ref } from '@fluentui/react-component-ref';+import * as React from 'react';+import * as PropTypes from 'prop-types';+import * as _ from 'lodash';++// @ts-ignore+import { ThemeContext } from 'react-fela';+import { FluentComponentStaticProps, ProviderContextPrepared, ShorthandRenderFunction } from '../../types';+import { commonPropTypes, createShorthandFactory, UIComponentProps } from '../../utils';+import Input from '../Input/Input';+import Button from '../Button/Button';+import { CalendarIcon } from '@fluentui/react-icons-northstar';+import Popup from '../Popup/Popup';+import {+ IRestrictedDatesOptions,+ IDay,+ DayOfWeek,+ FirstWeekOfYear,+ DateRangeType,+ IDateGridStrings,+ formatMonthDayYear,+ IDayGridOptions,+} from '@fluentui/date-time-utilities';+import { default as DatepickerCalendar, DatepickerCalendarProps } from './DatepickerCalendar';++// TODO: extract to date-time-utilities+const DEFAULT_STRINGS: IDateGridStrings = {+ months: [+ 'January',+ 'February',+ 'March',+ 'April',+ 'May',+ 'June',+ 'July',+ 'August',+ 'September',+ 'October',+ 'November',+ 'December',+ ],+ shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],+ days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],+ shortDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],+};++// TODO: extract to date-time-utilities+export interface IDateFormatting {+ /**+ * Format the date according to specified function.+ * Intended use case is localization.+ */+ format?: (date: Date) => string;++ /**+ * Parse date from string representation into Date type.+ */+ parse?: (date: string) => Date;+}++// TODO: extract to date-time-utilities+export interface IDatepickerOptions extends IRestrictedDatesOptions {+ /**+ * The first day of the week for your locale.+ */+ firstDayOfWeek?: DayOfWeek;++ /**+ * Defines when the first week of the year should start, FirstWeekOfYear.FirstDay,+ * FirstWeekOfYear.FirstFullWeek or FirstWeekOfYear.FirstFourDayWeek are the possible values+ */+ firstWeekOfYear?: FirstWeekOfYear;++ /**+ * The date range type indicating how many days should be selected as the user+ * selects days+ */+ dateRangeType?: DateRangeType;++ /**+ * The number of days to select while dateRangeType === DateRangeType.Day. Used in order to have multi-day+ * views.+ */+ daysToSelectInDayView?: number;++ /**+ * Value of today. If null, current time in client machine will be used.+ */+ today?: Date;++ /**+ * Whether the calendar should show the week number (weeks 1 to 53) before each week row+ */+ showWeekNumbers?: boolean;++ /**+ * The days that are selectable when `dateRangeType` is WorkWeek.+ * If `dateRangeType` is not WorkWeek this property does nothing.+ */+ workWeekDays?: DayOfWeek[];+}++export interface DatepickerProps extends IDatepickerOptions, IDateFormatting, UIComponentProps {+ /** Accessibility behavior if overridden by the user. */+ accessibility?: Accessibility<DatepickerBehaviorProps>;++ /** Datepicker shows it is currently unable to be interacted with. */+ disabled?: boolean;++ /** Datepicker shows it is currently unable to be interacted with. */+ isRequired?: boolean;++ /**+ * Called on change of the date.+ *+ * @param event - React's original SyntheticEvent.+ * @param data - All props and proposed value.+ */+ onDayChange?: (e: React.MouseEvent<HTMLElement>, data: DatepickerProps & { value: IDay }) => void;++ /** String to render for button to direct the user to today's date. */+ goToToday?: string;++ /** Text placeholder for the input field. */+ placeholder?: string;++ /** A render function to customize how cells are rendered in the Calendar. */+ renderCell?: ShorthandRenderFunction<any>;++ /** A render function to customize how cells are rendered in the Calendar.. */+ renderHeaderCell?: ShorthandRenderFunction<any>;++ /** Localized labels */+ localizedStrings?: IDateGridStrings;+}++export type DatepickerStylesProps = never;++export const datepickerClassName = 'ui-datepicker';++const Datepicker: ComponentWithAs<'div', DatepickerProps> & FluentComponentStaticProps<DatepickerProps> = props => {+ const context: ProviderContextPrepared = React.useContext(ThemeContext);+ const { setStart, setEnd } = useTelemetry(Datepicker.displayName, context.telemetry);+ setStart();+ const datepickerRef = React.useRef<HTMLElement>();+ const [open, setOpen] = React.useState<boolean>(false);+ const [selectedDate, setSelectedDate] = React.useState<Date | undefined>();+ const valueFormatter = date => (date ? formatMonthDayYear(date, DEFAULT_STRINGS) : '');+ const { firstDayOfWeek, firstWeekOfYear, dateRangeType } = props;+ const calendarOptions: IDayGridOptions = {+ selectedDate: selectedDate ?? props.today ?? new Date(),+ navigatedDate: selectedDate ?? props.today ?? new Date(),+ firstDayOfWeek,+ firstWeekOfYear,+ dateRangeType,+ };++ const showCalendarGrid = () => {+ setOpen(true);+ };++ const { className, design, styles, variables } = props;+ const ElementType = getElementType(props);+ const unhandledProps = useUnhandledProps(Datepicker.handledProps, props);+ const getA11yProps = useAccessibility(props.accessibility, {+ debugName: Datepicker.displayName,+ actionHandlers: {},+ rtl: context.rtl,+ });++ const { classes } = useStyles<DatepickerStylesProps>(Datepicker.displayName, {+ className: datepickerClassName,+ mapPropsToInlineStyles: () => ({+ className,+ design,+ styles,+ variables,+ }),+ rtl: context.rtl,+ });++ const handleChange: DatepickerCalendarProps['onDaySelect'] = (e, data) => {+ const targetDay = data.value;+ setSelectedDate(targetDay.originalDate);+ setOpen(false);++ _.invoke(props, 'onDayChange', e, { ...props, value: targetDay });+ };++ const element = (+ <Ref innerRef={datepickerRef}>+ {getA11yProps.unstable_wrapWithFocusZone(+ <ElementType+ {...getA11yProps('root', {+ className: classes.root,+ ...unhandledProps,+ })}+ >+ <Input readOnly onClick={showCalendarGrid} value={valueFormatter(selectedDate)} />+ <Popup+ open={open}+ onOpenChange={(e, { open }) => setOpen(open)}+ content={+ <DatepickerCalendar {...calendarOptions} onDaySelect={handleChange} localizedStrings={DEFAULT_STRINGS} />+ }+ trapFocus+ >+ <Button icon={<CalendarIcon />} title="Open calendar" iconOnly />+ </Popup>+ </ElementType>,+ )}+ </Ref>+ );+ setEnd();+ return element;+};++Datepicker.displayName = 'Datepicker';++Datepicker.propTypes = {+ ...commonPropTypes.createCommon(),++ minDate: PropTypes.instanceOf(Date),+ maxDate: PropTypes.instanceOf(Date),+ restrictedDates: PropTypes.arrayOf(PropTypes.instanceOf(Date)),++ firstDayOfWeek: PropTypes.oneOf(Object.keys(DayOfWeek).map(name => DayOfWeek[name])),+ firstWeekOfYear: PropTypes.oneOf(Object.keys(FirstWeekOfYear).map(name => FirstWeekOfYear[name])),+ dateRangeType: PropTypes.oneOf(Object.keys(DateRangeType).map(name => DateRangeType[name])),+ daysToSelectInDayView: PropTypes.number,+ today: PropTypes.instanceOf(Date),+ showWeekNumbers: PropTypes.bool,+ workWeekDays: PropTypes.arrayOf(PropTypes.oneOf(Object.keys(DayOfWeek).map(name => DayOfWeek[name]))),++ localizedStrings: PropTypes.object as PropTypes.Validator<IDateGridStrings>,++ format: PropTypes.func,+ parse: PropTypes.func,++ disabled: PropTypes.bool,+ isRequired: PropTypes.bool,+ onDayChange: PropTypes.func,+ goToToday: PropTypes.string,+ placeholder: PropTypes.string,+ renderCell: PropTypes.func,+ renderHeaderCell: PropTypes.func,+};++Datepicker.defaultProps = {+ accessibility: datepickerBehavior,+ firstDayOfWeek: DayOfWeek.Monday,+ firstWeekOfYear: FirstWeekOfYear.FirstDay,+ dateRangeType: DateRangeType.Day,+};++Datepicker.handledProps = Object.keys(Datepicker.propTypes) as any;++Datepicker.create = createShorthandFactory({ Component: Datepicker });++/**+ * A Datepicker is used to display dates.+ */+export default Datepicker;
@rymeskar please could you sync with @layershifter regarding this, since he has an open PR #13934 to remove all export default instances
I think it's safe to do that for this component right away
comment created time in a month
delete branch pompomon/office-ui-fabric-react
delete branch : fix/date-time-utils-tz-setup
delete time in a month
push eventmicrosoft/fluentui
commit sha b4adf81c515bd8fcee8264da0dd93d23f881f3cd
Fix: Normalize date in tests without setting timezone (#13948) * Set timezone for tests via env variable * Change files * Normalize dates in test * Add comments * Fix changes comment
push time in a month