profile
viewpoint
Roman Sudarikov pompomon Microsoft Prague, Czech Republic

microsoft/fluentui 9009

We've moved! UI Fabric is now Fluent UI - A set of React components for building Microsoft web experiences.

microsoft/fluent-ui-react 373

An ecosystem for building highly customizable enterprise class user interfaces.

ufal/mtmonkey 31

Distributed infrastructure for Machine Translation web services (using Moses, Python, JSON-RPC/web interface)

pompomon/csstype 0

Strict TypeScript and Flow types for style based on MDN data

pompomon/EmaNkey 0

Project to connect MTMonkey and Eman-Lite

pompomon/fluent-ui-react 0

A work in progress; please stand by.

pompomon/gmapsmarkers 0

Init google maps and show markers on click

pompomon/MT-ComparEval 0

Tool for comparison and evaluation of machine translation.

pompomon/nfpl104-genes 0

Repository for gene task of nfpl104

push eventpompomon/office-ui-fabric-react

Caleb Zearing

commit sha 6b6f285bfcd8c6f5df8077605d8ea6b82d45bd85

Copying TeachingBubble to react-next, in preparation for converting to a function component (#14220) * Moving teachingBubble into react-next. * Change files

view details

John Lorenz

commit sha ccb3e8e569d2af1e4bcfa18789ea426927d32e50

adding Roman to codeowners for date time (#14226)

view details

Caleb Zearing

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

view details

Michael Loughry

commit sha a35dce221bb1e179dbc068cff67d02f6b75e67f3

Add general comment about refs in function components (#14148) * Add general comment about refs in function components * Change files

view details

Fluent UI Build

commit sha 32119206e8d42aa3690d63a3b4bf4000fcbf09ed

applying package updates

view details

Jacqueline Gaherity

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 <jagaheri@microsoft.com>

view details

Micah Godbolt

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. ![image](https://user-images.githubusercontent.com/1434956/88081730-a9299000-cb35-11ea-8cc8-9ee1533685e5.png)

view details

Micah Godbolt

commit sha 7fb345ceb101cf5b5ad6d046cf95a58195155d17

GroupedList: Added built in keyboard support (#11494) * updated grouped list to be a11y compliant * fixed snaps * Change files

view details

Jon Schectman

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)

view details

Miles Starkenburg

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 ![Original](https://user-images.githubusercontent.com/3166322/86189360-3f016a80-baf6-11ea-89b5-b8234d2dcd13.gif) ##### After ![with fix](https://user-images.githubusercontent.com/3166322/86189389-4f194a00-baf6-11ea-98dc-d92e79aac54f.gif) #### Focus areas to test

view details

jameelakowsar

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) <v-jasha@microsoft.com>

view details

Rajesh Goriga

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 <v-gorraj@microsoft.com>

view details

Fluent UI Build

commit sha fd40ede951aab59fbedb2c210cf2b10030e60a9d

applying package updates

view details

jisooj

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 <jijun@microsoft.com>

view details

Chris Holt

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 <elcraig@microsoft.com>

view details

Xu Gao

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

view details

Brian Heston

commit sha 424bac7658dfd3084a32069d241a252493deecd5

fix: updated web components card background recipe (#14269) Co-authored-by: Brian Heston <brheston@microsoft.com>

view details

Xu Gao

commit sha f1047c3cd6fb28b558d2b40a005dc87a2f4ec714

useCustomizationSettings: get settings from CustomizerContext if exists. (#14145) * get settings from context * Change files

view details

Bruno Blanes

commit sha 071d3d60cd194e609a390b0a585ae7fcb49ffe19

chore: add missing close script tag to web components readme (#14271)

view details

push time in 6 days

push eventpompomon/office-ui-fabric-react

tomi-msft

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)

view details

Rajesh Goriga

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 <v-gorraj@microsoft.com>

view details

elisabethcvs

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

view details

John Lorenz

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

view details

Trip Master

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 <t-dama@microsoft.com>

view details

Elizabeth Craig

commit sha 2534fd78ec65b88a5049c7d2d9e54d1103159852

Enable "rules of hooks" lint rules in date-time and lists (#14098)

view details

Elizabeth Craig

commit sha 5e06d57166032a570b08f077ed7ab8d4cf8d95f6

Enable "rules of hooks" lint rules in experiments (#14100)

view details

jameelakowsar

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) <v-jasha@microsoft.com>

view details

Ben Howell

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

view details

Fluent UI Build

commit sha 1f19c0a771a864d7225cc7b7e8951388a7671039

applying package updates

view details

Trip Master

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 <t-dama@microsoft.com>

view details

tomi-msft

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

view details

John Lorenz

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

view details

Eddie Liu

commit sha 89ef7eab4d2f574977bf83256bde78d65e6f92da

Scrollable Pane: Fix pointer events (#13744) * Fix pointer events * Change files * Update snapshots Co-authored-by: Eddie Liu <edwl@microsoft.com>

view details

Elizabeth Craig

commit sha b0ebbc5a268938a9be69d314d83293b2717212c2

Update CODEOWNERS

view details

Fluent UI Build

commit sha b597e49e7037e215da6659b81ea39778e3cfa07a

applying package updates

view details

Charles Assunção

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)

view details

Charles Assunção

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

view details

Hiyo Shin

commit sha 455be87d6ce147b967dec8c1a4ddeae2526e6559

Fix choice group's disabled style for Azure theme (#14190) * fix choice group disable style * Change files

view details

Rajesh Goriga

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 <v-gorraj@microsoft.com>

view details

push time in 6 days

push eventpompomon/office-ui-fabric-react

pompomon

commit sha e6c15a5fc641da0efb5ca1726894fabd6f9725d7

Update Changelog

view details

push time in 6 days

push eventpompomon/office-ui-fabric-react

pompomon

commit sha bbd0f13bf0a30b537627c57d28c3648529a018d0

PR comments fixes

view details

push time in 6 days

push eventpompomon/office-ui-fabric-react

Roman Sudarikov

commit sha dd9bc795ab062872f41b7ef351726fdeb23b350b

Apply suggestions from code review Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

view details

push time in 6 days

push eventpompomon/office-ui-fabric-react

Fluent UI Build

commit sha b597e49e7037e215da6659b81ea39778e3cfa07a

applying package updates

view details

Charles Assunção

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)

view details

Charles Assunção

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

view details

Hiyo Shin

commit sha 455be87d6ce147b967dec8c1a4ddeae2526e6559

Fix choice group's disabled style for Azure theme (#14190) * fix choice group disable style * Change files

view details

Rajesh Goriga

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 <v-gorraj@microsoft.com>

view details

Ben Howell

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

view details

Ben Howell

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.

view details

Xu Gao

commit sha d0b7aa6cf848b2abbe9fdb54fd7972bd69bcffff

@fluentui/react: add missing dist/sass and dist/css content (#14202) * copy over scss and css * Change files

view details

Esteban Munoz

commit sha fdc095fd93f528381650e1215bcf2bfe1ff9acf6

React conformance - Adding wrappers to packages (#13939)

view details

Miroslav Stastny

commit sha 107eb1b7dbd10347615704a64ee5f751fb0c91f0

chore: prepare release react-northstar 0.51.0

view details

Fluent UI Build

commit sha 8fae3a54723db0600aa6cf0d3b713f66e4455739

applying package updates

view details

Miroslav Stastny

commit sha 215aed1574db0b0db7d5fe130d19072178855423

@fluentui/react-northstar_v0.51.0

view details

Miroslav Stastny

commit sha bdb1d3a96db34d4fb854457ed2e9e6491753092f

Fix dependencies after react-northstar release

view details

Miroslav Stastny

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

view details

Luis Marroquin

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

view details

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

rymeskar

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

rymeskar

comment created time in 9 days

push eventpompomon/office-ui-fabric-react

pompomon

commit sha a679fad81f6c755ddfaac082cf91d2499669b36e

Fix PR comments and tests

view details

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

rymeskar

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 :)

rymeskar

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

pompomon

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?

rymeskar

comment created time in 12 days

push eventpompomon/office-ui-fabric-react

pompomon

commit sha c23ab7798f7e4e120b54435a605bf152a62cac7b

Fix cell content

view details

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 :)

pompomon

comment created time in 12 days

push eventpompomon/office-ui-fabric-react

pompomon

commit sha 61bbdf5e326807b125df88a844cbc40120359f9d

Fix PR comments

view details

push time in 12 days

push eventpompomon/office-ui-fabric-react

pompomon

commit sha ccab0d73eeff73f18912f4b192c2dee30abd04cb

PR comments, fix/cleanup behaviors

view details

push time in 12 days

push eventpompomon/office-ui-fabric-react

pompomon

commit sha 891f8ab64e55af6bf74403f9c96a1a563861f9a4

Fix PR comments

view details

push time in 12 days

push eventpompomon/office-ui-fabric-react

Roman Sudarikov

commit sha ad775b26bded699a8104e2e71d091b803612643d

Apply suggestions from code review Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

view details

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

pompomon

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 ?

pompomon

comment created time in 12 days

push eventpompomon/office-ui-fabric-react

pompomon

commit sha 03176d2940b5f2fe94e098f83c7feeb9ac103a32

Fix tests

view details

push time in 12 days

push eventpompomon/office-ui-fabric-react

Oleksandr Fediashov

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

view details

Oleksandr Fediashov

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 <humbertomakotomorimoto@gmail.com> * Update packages/react-image/src/components/Image/ImageBase.tsx Co-authored-by: Makoto Morimoto <humbertomakotomorimoto@gmail.com> * Update packages/react-image/tsconfig.json Co-authored-by: Elizabeth Craig <elcraig@microsoft.com> * Update packages/react-image/package.json * update types * fix versions Co-authored-by: Makoto Morimoto <humbertomakotomorimoto@gmail.com> Co-authored-by: Elizabeth Craig <elcraig@microsoft.com>

view details

Micah Godbolt

commit sha fe2f59ab230033eeaca58bc7c16d5096d922faf7

Best Practices Docs Update Branch (#13887) Major overhaul of component documentation markdown content

view details

Elizabeth Craig

commit sha 41bc48a4656ff7ebff0e4643b26a4fa17215f7ce

Rename release.md to RELEASE_NOTES.md

view details

Elizabeth Craig

commit sha 50b712e1326f93f4d22f81ebdf83fcce48b7f070

Update RELEASE_NOTES.md

view details

Elizabeth Craig

commit sha 7236cfa7f9784c7a8a42d87ca51db9dd16484d06

Update RELEASE_NOTES.md

view details

Trip Master

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 <t-dama@microsoft.com>

view details

Elizabeth Craig

commit sha 7bea3a43f5f01a3aef8a36813b8d88484aa021bc

Enable "rules of hooks" lint rules in react-hooks and utilities; hook fixes (#14099)

view details

Michael Loughry

commit sha a8adc0333c14d3470e8c48567d30f0421c0977d4

[Callout] Copy OUFR code to react-next (#14146) * Copy Callout code from OUFR to react-next * Change files * Fix lint issue

view details

tomi-msft

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

view details

Jon Schectman

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)

view details

Ben Howell

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

view details

Fluent UI Build

commit sha b8d93b166cd836b9534eaa23d4f57f6bb12ffb2f

applying package updates

view details

Karel Rymeš

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 <karymes@microsoft.com>

view details

tomi-msft

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)

view details

Rajesh Goriga

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 <v-gorraj@microsoft.com>

view details

elisabethcvs

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

view details

John Lorenz

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

view details

Trip Master

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 <t-dama@microsoft.com>

view details

Elizabeth Craig

commit sha 2534fd78ec65b88a5049c7d2d9e54d1103159852

Enable "rules of hooks" lint rules in date-time and lists (#14098)

view details

push time in 12 days

push eventpompomon/office-ui-fabric-react

pompomon

commit sha 3b79abb031cd5edce4f48f01383441d9afb0548c

Fix first focus

view details

push time in 13 days

push eventpompomon/office-ui-fabric-react

pompomon

commit sha 3bf76398b378af5fd64c0a56482a4186cbd9be97

Add e2e keyboard navigation tests

view details

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 ;)

assuncaocharles

comment created time in 13 days

push eventpompomon/office-ui-fabric-react

pompomon

commit sha 42f8d5b5e3570ad0655d4e3bc0d8e89b4d9e5c45

Fix test

view details

push time in 13 days

push eventpompomon/office-ui-fabric-react

pompomon

commit sha 76400cdc61961165decd050773ea3c46c1fe4511

Fix behavior test

view details

push time in 13 days

push eventpompomon/office-ui-fabric-react

pompomon

commit sha 9319df78b8a0f43f1eefca64733ceeb75350659e

Fix refs

view details

push time in 13 days

push eventpompomon/office-ui-fabric-react

pompomon

commit sha f89f5a45b02c3c2f410f6488ce3cfb862805f984

Add keyboard handlers for month edges

view details

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)

rymeskar

comment created time in 14 days

push eventpompomon/office-ui-fabric-react

Oleksandr Fediashov

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

view details

Oleksandr Fediashov

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 <humbertomakotomorimoto@gmail.com> * Update packages/react-image/src/components/Image/ImageBase.tsx Co-authored-by: Makoto Morimoto <humbertomakotomorimoto@gmail.com> * Update packages/react-image/tsconfig.json Co-authored-by: Elizabeth Craig <elcraig@microsoft.com> * Update packages/react-image/package.json * update types * fix versions Co-authored-by: Makoto Morimoto <humbertomakotomorimoto@gmail.com> Co-authored-by: Elizabeth Craig <elcraig@microsoft.com>

view details

Micah Godbolt

commit sha fe2f59ab230033eeaca58bc7c16d5096d922faf7

Best Practices Docs Update Branch (#13887) Major overhaul of component documentation markdown content

view details

Elizabeth Craig

commit sha 41bc48a4656ff7ebff0e4643b26a4fa17215f7ce

Rename release.md to RELEASE_NOTES.md

view details

Elizabeth Craig

commit sha 50b712e1326f93f4d22f81ebdf83fcce48b7f070

Update RELEASE_NOTES.md

view details

Elizabeth Craig

commit sha 7236cfa7f9784c7a8a42d87ca51db9dd16484d06

Update RELEASE_NOTES.md

view details

Trip Master

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 <t-dama@microsoft.com>

view details

Elizabeth Craig

commit sha 7bea3a43f5f01a3aef8a36813b8d88484aa021bc

Enable "rules of hooks" lint rules in react-hooks and utilities; hook fixes (#14099)

view details

Michael Loughry

commit sha a8adc0333c14d3470e8c48567d30f0421c0977d4

[Callout] Copy OUFR code to react-next (#14146) * Copy Callout code from OUFR to react-next * Change files * Fix lint issue

view details

tomi-msft

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

view details

Jon Schectman

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)

view details

Ben Howell

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

view details

Fluent UI Build

commit sha b8d93b166cd836b9534eaa23d4f57f6bb12ffb2f

applying package updates

view details

Karel Rymeš

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 <karymes@microsoft.com>

view details

pompomon

commit sha 53e398b2b32af3e4c948667a7d5ca775feebeaf8

Add basic keyboard navigation for calendar grid

view details

pompomon

commit sha f4422cac1c5646f4cdc13b9f4d38b63384d1970c

Add cell component and behavior

view details

push time in 14 days

push eventmicrosoft/fluentui

Karel Rymeš

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 <karymes@microsoft.com>

view details

push time in 14 days

PR merged microsoft/fluentui

Reviewers
Feat/date-time-utilities Consolidate package based on latest usage

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.

+413 -51

5 comments

13 changed files

rymeskar

pr closed time in 14 days

PR opened microsoft/fluentui

feat(Datepicker): Add basic keyboard navigation for calendar grid

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)

+71 -36

0 comment

5 changed files

pr created 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!

layershifter

comment created time in 15 days

push eventpompomon/office-ui-fabric-react

Fluent UI Build

commit sha ef2d6e26da981f93a3df66c9a2b1cad449cd99ab

applying package updates

view details

Miroslav Stastny

commit sha 15ee28cda5ee81da62a00bde74ece8bbfa3abbc6

fix(FocusZone): fix EventListener leak (v0) (#14044)

view details

shivasai09

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 <v-sivsar@microsoft.com>

view details

Miroslav Stastny

commit sha 042d257c2ebd8a9353a3c8fc9dfdf39084c498dc

fix(FocusZone): fix EventListener leak (#14031) * fix(FocusZone): fix EventListener leak * changelog * address PR comments * address PR comments

view details

tomi-msft

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 <xugao0131@hotmail.com> * use elementContains for target comparisons Co-authored-by: Xu Gao <xugao0131@hotmail.com>

view details

John Lorenz

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

view details

Jon Schectman

commit sha a1f0ef7f1f03a6c0a5f66ae093bb2da22726c186

Maybe: Improve then return and remove thenMaybe (#14045) * fix maybe to correctly wrap return value from then * Change files

view details

Caleb Zearing

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 <Humberto.Morimoto@microsoft.com> * Update packages/react-next/src/components/SpinButton/SpinButton.styles.ts Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com> * Update change/@fluentui-react-next-2020-04-30-15-57-11-feat-spin-button.json Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com> * 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 <Humberto.Morimoto@microsoft.com>

view details

David Zearing

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

view details

Xu Gao

commit sha 06b783216e8652f356324d10fb5bf8c50a7f44c3

Fix publish by syncing with published versions (#14066) * sync * Change files

view details

Rajesh Goriga

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 <v-gorraj@microsoft.com>

view details

jameelakowsar

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) <v-jasha@microsoft.com>

view details

Trip Master

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 <t-dama@microsoft.com>

view details

Fluent UI Build

commit sha 6072a109ca821510a98245709fc722bed102e246

applying package updates

view details

Esteban Munoz

commit sha 34da57c2cd02c1c68bc8ae0aad4b5ee4f6cfea51

(react-flex) Creating new react-flex package (#14051) * creating new react-flex package * updating dependency * adding requested changes * adding requested changes

view details

Elizabeth Craig

commit sha 19d531374c491eb479ddc057312d1771768fe027

Use new service connection in release pipelines (#14070)

view details

hki-237

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

view details

Elizabeth Craig

commit sha 4e31634d7914e595032111ba15d6fb87750b5f4b

Update release service connection name (#14077)

view details

Oleksandr Fediashov

commit sha 346cd61df2ce2268f4126eab1b31a173904ff4c2

fix: useFocusRects should resolve window inside useEffect (#14063) * fix: useFocusRects should resolve window inside useEffect * Change files * fix API file

view details

Fluent UI Build

commit sha af064fecc6b264f18fefcfc2b181a510b2bfecaf

applying package updates

view details

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

pompomon

commit sha fa45b0d53283ccf4f0d5be74b63a4d0a67d32800

Fix overrideProps

view details

push time in 15 days

push eventpompomon/office-ui-fabric-react

Roman Sudarikov

commit sha 9c9e2982f52186b0de63d5fd61189d46f509d49c

Apply suggestions from code review Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

view details

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

pompomon

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?

lorejoh12

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

lorejoh12

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?

lorejoh12

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;
lorejoh12

comment created time in 15 days

push eventpompomon/office-ui-fabric-react

pompomon

commit sha 11875363d200c90caf20d4768f1c535d5893cb51

PR comments fixes

view details

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

pompomon

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)?

rymeskar

comment created time in 16 days

push eventpompomon/office-ui-fabric-react

Roman Sudarikov

commit sha 6cf080fb3210d2c1429d1d833a2d78f63162e348

Apply suggestions from code review Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

view details

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

pompomon

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!

pompomon

comment created time in 16 days

push eventpompomon/office-ui-fabric-react

Roman Sudarikov

commit sha 143fd3e1c282038698aaf8d3c1d444796e2c078d

Update packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendar.tsx Co-authored-by: Charles Assunção <junioassuncaocharles@gmail.com>

view details

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?

pompomon

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 :)

pompomon

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

pompomon

comment created time in 16 days

push eventpompomon/office-ui-fabric-react

Roman Sudarikov

commit sha d23a5972a4f67e26308ff085ac6bcf2aa15699e4

Apply suggestions from code review Co-authored-by: Charles Assunção <junioassuncaocharles@gmail.com>

view details

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 :)

pompomon

comment created time in 16 days

push eventpompomon/office-ui-fabric-react

pompomon

commit sha fc246a40418b931b54a53b579e58a79294841383

Fix build errors

view details

push time in 16 days

push eventpompomon/office-ui-fabric-react

pompomon

commit sha 97a3132ee60ded9d777a7bcf8e1756d143214093

Update changelog

view details

push time in 16 days

push eventpompomon/office-ui-fabric-react

pompomon

commit sha 67cec134bb83fa71e0f651d831e51373a365d363

Update spec notes

view details

push time in 16 days

push eventpompomon/office-ui-fabric-react

pompomon

commit sha 409a5f04b231bb66e141741e513f86e460439dac

Expose DatepickerCalendar shorthand

view details

push time in 16 days

push eventpompomon/office-ui-fabric-react

pompomon

commit sha cd896d563d40c00d7fedcb900f21889015cd71f8

Update implementation notes

view details

push time in 16 days

push eventpompomon/office-ui-fabric-react

pompomon

commit sha eb42f913fdd66865c4e50e54b69c09e6e7797a2d

Cleanup styles

view details

push time in 16 days

push eventpompomon/office-ui-fabric-react

pompomon

commit sha ba63dfc6eb4afd81ae3b356ea117a796bd75b95a

Add tests, make new components conformant

view details

push time in 16 days

push eventpompomon/office-ui-fabric-react

pompomon

commit sha 92f6d3cfbf298eb3ea209d76f8f2726220267e6d

Added slots and calendar stylesheets

view details

push time in 19 days

push eventpompomon/office-ui-fabric-react

pompomon

commit sha e1b6c0410296baff1a7d4bd83a63d09eed7206bd

Add custom action button for calendar header

view details

push time in 20 days

PR opened microsoft/fluentui

WIP Datepicker Calendar navigation

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)

+226 -26

0 comment

4 changed files

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

Roman Sudarikov

commit sha 15630baeae575e1dce90871da1c880277cb3582e

Chore(Splitbutton): Fix docsite example (#14023) * Fix docsite example * Update Changelog

view details

TanelVari

commit sha 114da0ae0adecff5d084ee139216bf51c51a4d9e

Use Teams logo as TeamsIcon (#13966) * Renamed TeamsIcon to ContactGroupIcon. Brought in coloured Teams logo as TeamsIcon instead * Update to changelog

view details

Trip Master

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 <t-dama@microsoft.com>

view details

Luan Nguyen

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.

view details

Elizabeth Craig

commit sha 6ddf7d61096e644b7ee3a63abf02629a786a99ac

ESLint: add faster max-len rule (#13994)

view details

Sarah Higley

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

view details

tomi-msft

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

view details

Rajesh Goriga

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 <v-gorraj@microsoft.com>

view details

push time in 22 days

push eventmicrosoft/fluentui

Roman Sudarikov

commit sha 15630baeae575e1dce90871da1c880277cb3582e

Chore(Splitbutton): Fix docsite example (#14023) * Fix docsite example * Update Changelog

view details

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

Reviewers
Chore(Splitbutton): Fix docsite example Fluent UI v0

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

image

After

image

+2 -0

3 comments

2 changed files

pompomon

pr closed time in 22 days

push eventpompomon/office-ui-fabric-react

Oleksandr Fediashov

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 <junioassuncaocharles@gmail.com> * remove duplicate newline * fix UTs * fix UTs, update changelog entry * add a comment * fix types Co-authored-by: Charles Assunção <junioassuncaocharles@gmail.com>

view details

Fluent UI Build

commit sha ac395c5e30b21081b49166ccfc02177f777df7c6

applying package updates

view details

Jason Wu

commit sha 3cc14fd0025a40c5ac6845439b0ab4b65b735cba

Adding Headset Icon (#12956) * Add HeadsetIcon * Updateing changelog * fix imports * Change files * fix imports Co-authored-by: Jason Wu <jaswu@microsoft.com> Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>

view details

Oleksandr Fediashov

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

view details

pompomon

commit sha 4a4a445c6a164cc9f8147247cdf5b10a6373bcc6

Fix docsite example

view details

pompomon

commit sha a5555fee261d7c8c4edbcea55164697322319f1b

Update Changelog

view details

push time in 22 days

push eventpompomon/office-ui-fabric-react

Oleksandr Fediashov

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 <junioassuncaocharles@gmail.com> * remove duplicate newline * fix UTs * fix UTs, update changelog entry * add a comment * fix types Co-authored-by: Charles Assunção <junioassuncaocharles@gmail.com>

view details

Fluent UI Build

commit sha ac395c5e30b21081b49166ccfc02177f777df7c6

applying package updates

view details

Jason Wu

commit sha 3cc14fd0025a40c5ac6845439b0ab4b65b735cba

Adding Headset Icon (#12956) * Add HeadsetIcon * Updateing changelog * fix imports * Change files * fix imports Co-authored-by: Jason Wu <jaswu@microsoft.com> Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>

view details

Oleksandr Fediashov

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

view details

push time in 22 days

push eventpompomon/office-ui-fabric-react

pompomon

commit sha b45a0f44e74ff47741900fa2116ecd0ab7ffa30e

Update Changelog

view details

push time in 22 days

PR opened microsoft/fluentui

Reviewers
Chore(Splitbutton): Fix docsite example

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

image

After

image

+1 -0

0 comment

1 changed file

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

Oleksandr Fediashov

commit sha 3196b7a1d53fbc0815050bc5ee44d340acbd2871

chore: use Babel plugins to annotate pure calls (#14007)

view details

push time in 22 days

push eventpompomon/office-ui-fabric-react

Roman Sudarikov

commit sha 65e1f3d9412b481b26a28887a14405129e750cea

fix: Respect hidden HTML attribute on components (#13964) * Respect hidden attrinbute on Button * Update Changelog

view details

Luan Nguyen

commit sha 32cebffbae0075caada6ffae8efd41b5bb6927de

Fix bug: ContextualMenu doesn't honor the focusZoneProps prop (#13924) * Apply focusZone props to ContextualMenu. * Change files

view details

Kevin Coughlin

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 <KevinTCoughlin@users.noreply.github.com> Co-authored-by: David Zearing <dzearing@microsoft.com>

view details

jameelakowsar

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) <v-jasha@microsoft.com> Co-authored-by: Rajesh Goriga <v-gorraj@microsoft.com>

view details

David Zearing

commit sha 0f266142f77c423e630693ce5500e92662f8beb9

Update CODEOWNERS

view details

Jon Schectman

commit sha d76d871328d581db267b9d2d90782b419e8b3068

CodeMods: Implement Maybe to help deal with null/undefined checks. (#13965) * Implement Maybe

view details

C. Perez

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.

view details

Fluent UI Build

commit sha f1fc8e2c111f85add25e5c1c3470adb2f7b1a01a

applying package updates

view details

John Lorenz

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

view details

Micah Godbolt

commit sha 559e91a35ec2bde8ae3a7431a8679b5637192ecb

Website icon fix - give icons unique IDs (#13967) SVG icons had hard coded ids. made them unique.

view details

Saad Najmi

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.

view details

Oleksandr Fediashov

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

view details

Oleksandr Fediashov

commit sha f62f03845b9ad5dbfacc094676f0819181c53c13

fix: make getShorthandInfo compatible with `compose()` (#13961)

view details

Fluent UI Build

commit sha 77a67dc27a4a3f546fcfc88732e42da0fa1c9d9e

applying package updates

view details

Oleksandr Fediashov

commit sha 90ac82119ec951273a8bac7b6d3e75cabd3b49a6

chore: use minification for stats task and proper env (#13986)

view details

Charles Assunção

commit sha d43db14983c012854c144263821109e09ed15310

fix(ChatMessage): remove auto (#13988)

view details

Jacqueline Gaherity

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 <jagaheri@microsoft.com>

view details

Xu Gao

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

view details

shrallap

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

view details

Justin Slone

commit sha 47f3eafa6b60d3e12ea5f87c839c4e332364d38a

Update CODEOWNERS for packages/foundation (#13990)

view details

push time in 22 days

Pull request review commentmicrosoft/fluentui

Feat/date picker prototype

+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

rymeskar

comment created time in 23 days

Pull request review commentmicrosoft/fluentui

Feat/date picker prototype

+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

rymeskar

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

layershifter

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

layershifter

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?

layershifter

comment created time in a month

Pull request review commentmicrosoft/fluentui

Feat/date picker prototype

+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 :)

rymeskar

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

Roman Sudarikov

commit sha 65e1f3d9412b481b26a28887a14405129e750cea

fix: Respect hidden HTML attribute on components (#13964) * Respect hidden attrinbute on Button * Update Changelog

view details

push time in a month

PR merged microsoft/fluentui

Reviewers
fix(Button): Respect hidden HTML attribute on components Fluent UI v0

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

+5 -0

5 comments

2 changed files

pompomon

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 :)

pompomon

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

pompomon

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

pompomon

comment created time in a month

push eventpompomon/office-ui-fabric-react

pompomon

commit sha 99f11897fe62eb0b5bb85901877dc70a3534df36

Update Changelog

view details

push time in a month

PR opened microsoft/fluentui

Reviewers
fix(Button): Respect hidden attribute on Button

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)

+4 -0

0 comment

1 changed file

pr created time in a month

create barnchpompomon/office-ui-fabric-react

branch : fix/button-hidden

created branch time in a month

push eventpompomon/office-ui-fabric-react

Fluent UI Build

commit sha 17a103f2d7fce4edc885ab87a0086c52e0d91f1c

applying package updates

view details

Charles Assunção

commit sha 30ab262bd881de335a24538bd332aed0361ba0f4

fix(FormPrototype): remove required (#13840)

view details

Charles Assunção

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 <pompomon@users.noreply.github.com> * Update packages/fluentui/react-northstar/src/components/Form/FormFieldCustom.tsx Co-authored-by: Roman Sudarikov <pompomon@users.noreply.github.com> * 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 <pompomon@users.noreply.github.com> * 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 <alexander.mcgarret@gmail.com> * Update packages/fluentui/react-northstar/src/components/Form/FormCheckbox.tsx Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com> * 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 <pompomon@users.noreply.github.com> Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

view details

Rajesh Goriga

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 <v-gorraj@microsoft.com>

view details

Oleksandr Fediashov

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

view details

David Zearing

commit sha 7932ae5eef247af9b914e8f05efdaac0b64914f8

getNativeProps perf: adjusting indexOf lookup to object lookups. (#13842) * Update native props. * Change files * fix * Change files

view details

Makoto Morimoto

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)

view details

David Zearing

commit sha 0992ce1a42dcd1105ec055d655111288b54d3bcd

mergestyles: IStyle: loosening typings for objects embedded within the style. (#13847) * Loosening typings in IStyle. * Change files * api. * :(

view details

David Zearing

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 <Humberto.Morimoto@microsoft.com> * Update packages/react-button/src/components/Button/Button.types.tsx Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com> * updates. * This is wrong - styles should not be injected without being necessary. * undo! * no message Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

view details

Miroslav Stastny

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 <mnajdova@gmail.com> Co-authored-by: Roman Sudarikov <pompomon@users.noreply.github.com> Co-authored-by: Marija Najdova <mnajdova@gmail.com> Co-authored-by: Roman Sudarikov <pompomon@users.noreply.github.com>

view details

Oleksandr Fediashov

commit sha 6525619bf5e6c844406ed3cb9ad3103237eff89f

chore: move shorthandConfig to compose() (#13856) * chore: move shorthandConfig to compose() * remove duplicate import * remove unused import

view details

Fluent UI Build

commit sha 9703000e9e94fdbb82d11200a715108fcb480a00

applying package updates

view details

Oleksandr Fediashov

commit sha 992853c1a9c37e4ab9ba390b5a1760173bdfd702

chore: update Webpack config for bundle size task in v0 (#13862)

view details

Oleksandr Fediashov

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

view details

Thomas Michon

commit sha 6870e7068a2cb7fbd36828c5c0e7bab198fa3efa

Use correct target window for ResizeGroup animation frame callback (#13864) * Ensure ResizeGroup uses correct window for animation frame * Change files

view details

jameelakowsar

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) <v-jasha@microsoft.com>

view details

tomi-msft

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 <ecraig12345@gmail.com> * 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 <ecraig12345@gmail.com> Co-authored-by: David Zearing <dzearing@microsoft.com>

view details

Xu Gao

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

view details

Xu Gao

commit sha 1606d80c8d9964ca6f1cac4219ab9249b93b4428

High Contrast in Edge Chromium: fix Nav (#13850) * fix nav in high contrast * Change files * update snapshots * fixes

view details

Xu Gao

commit sha 74dc7d81cfb5a21f0ce0e73e2a6d0550dede4870

High Contrast in Edge Chromium: fix ChoiceGroup. (#13846) * fix ChoiceGroup * update snapshots * Change files * update snapshots

view details

push time in a month

Pull request review commentmicrosoft/fluentui

Feat/date picker prototype

+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

rymeskar

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

Roman Sudarikov

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

view details

push time in a month

more