GithubHelp home page GithubHelp logo

action-test's People

Contributors

justslone avatar

Watchers

 avatar

Forkers

okjustgo

action-test's Issues

This is a sample issue title for demo purposes

Describe the feature that you would like added

I'm using package @uifabric/date-time with version 7.8.97. I can only pass in styles for 5 elements (root, divider, goTodayButton, monthPickerWrapper, liveRegion). But I also want to have my own styles for others, like previous/next button, all the date/month buttons, as well as pressed and hovered background colors for these buttons. I can see there is a style interface IButtonStyles which allows us to set all the styles we need. I think a possible way could be replacing the type IStyle with IButtonStyles for the buttons, and also adding other buttons in ICalendarStyles. Do you have plan to make this calendar control expose more for style customizations?

https://github.com/microsoft/fluentui/blob/master/packages/date-time/src/components/Calendar/Calendar.styles.ts

What component or utility would this be added to

date picker calendar

Have you discussed this feature with our team, and if so, who

No

Additional context/screenshots

In the below screenshot, I have changed the text color and background color of root, but the current month button and current date button background color is still using the default color (theme colors). It doesn't allow me to set the color.
image

This is a sample issue for demo purposes

Describe the feature that you would like added

I'm using package @uifabric/date-time with version 7.8.97. I can only pass in styles for 5 elements (root, divider, goTodayButton, monthPickerWrapper, liveRegion). But I also want to have my own styles for others, like previous/next button, all the date/month buttons, as well as pressed and hovered background colors for these buttons. I can see there is a style interface IButtonStyles which allows us to set all the styles we need. I think a possible way could be replacing the type IStyle with IButtonStyles for the buttons, and also adding other buttons in ICalendarStyles. Do you have plan to make this calendar control expose more for style customizations?

https://github.com/microsoft/fluentui/blob/master/packages/date-time/src/components/Calendar/Calendar.styles.ts

What component or utility would this be added to

date picker calendar

Have you discussed this feature with our team, and if so, who

No

Additional context/screenshots

In the below screenshot, I have changed the text color and background color of root, but the current month button and current date button background color is still using the default color (theme colors). It doesn't allow me to set the color.
image

Fluent UI v8

Summary

The next release of Fluent UI React is going to be a little different than previous releases of this project and we wanted to help set expectations, detail some of its nuances, and set the stage for subsequent releases.

We view this next release as a incremental release that will setup up customers, partners, and contributors for the team's collective vision of improving the baseline components used in all Microsoft 365 experiences. Going forward we will be making smaller, easy to consume, incremental releases of Fluent UI

The Version 8 (v8) release will focus on:

  1. This is an incremental release
    • No major visual changes
    • Limited API surface changes (mainly Button)
    • Package restructuring paves the way for smoother updates in the future
    • Intended to be an easy upgrade
  2. Adds ReactJS Strict Mode Support
    • Unblocks the use of ReactJS Strict Mode while developing applications
    • Useful for testing out ReactJS Concurrent Mode
    • Converted several components to Function Components and removed deprecated lifecycle methods on the rest
  3. Improved Button
    • Smaller bundle size, better render pref
    • Introduction of design tokens and slots - looking for feedback!
  4. IN PREVIEW Composition utilities
    • A way building components
    • Allows recomposing Fluent UI components without wrapping them
    • Used internally in Button
    • Still in Preview check it out and give feedback!

All content in this issue is a work in progress and will not be final until we approach release.
Note: "v8" here refers to "version 8," not the v8 JavaScript engine.

Timeline

Note: These dates are our best estimations.

Milestone Date
v8 snap* September 25th, 2020
v8 beta release October 12th, 2020
v8 official release November 16th, 2020

*v8 snap: 7.0 branch is created. Fixes for v7 will need to go in 7.0 branch until beta release. After beta release, all fixes should go into master first then cherry-pick into 7.0 branch.

What's in v8?

We are currently tracking the related work here.

Below is a more detailed overview of upcoming changes in v8. Please note, these are still subject to change before official release. Comprehensive release notes will be provided when release happens.

# Packaging restructuring - pave the way for future updates

Breaking Package renamingoffice-ui-fabric-react to @fluentui/react

Starting in v8, you will need to install @fluentui/react@8 instead of office-ui-fabric-react@8. More details and migration tips here.

Breaking @uifabric to @fluentui package renames

If time allows, we plan to move our @uifabric packages to the @fluentui scope. For packages used by the suite (@fluentui/react), we'll continue to publish aliases under the old @uifabric names (until their major version bumps) to prevent consumers from needing duplicate dependency versions. See this issue for details.

Major version policy change for sub-packages

Starting with this release, sub-packages such as @uifabric/utilities or @uifabric/merge-styles will no longer move in major-lockstep with the suite: for each sub-package, unless it also has breaking changes, it will not major bump when the suite does.

The main benefit is that this will reduce duplicate dependencies for consumers who need a longer timeline to fully upgrade to the latest suite package version, and may have multiple versions of the suite in the same app bundle in the meantime.

(This change is pending final investigations of technical feasibility.)

# ReactJS Strict Mode Support

Full strict mode support for all components

  • No usage of legacy React lifecycle APIs (UNSAFE_*)
  • No usage of findDOMNode

Breaking Function component conversion

Most components are being converted from class components to function components (and the remaining components may be converted in a minor version). This work is being tracked here.

In general this change will not result in a signifcant change to the component surface. However, there are a few important implications, outlined in detail here.

Main points:

  • Class extension of components is no longer supported (exception: Picker components, BaseComponent)
  • Changes to how the ref prop works.
  • ReactDOM.findDOMNode is not supported for function components (a React limitation).
  • Directly accessing components' state is no longer supported
  • More components properly implement controlled/uncontrolled behavior and standard onChange signatures
  • Pivot has been renamed to Tabs, and has been updated with responsive collapsing behavior.

# Button Component

Our button components have a long history and debt. In order to truly improve them, we are essentially re-writing them. We're doing so with a lense of formalizing a styling API that we plan to adopt to more and more components over time. This comes with a set of breaking changes.

Improved Button

Button variants have been replaced with an entirely new button which is faster, smaller, and more customizable. It can be found in the @fluentui/react-button package.

Introduction of design tokens and slots

The Button component and variants leverage a new set of styling APIs that allow more predictibility, flexibility, and toolability. More details here.

Compat Button

More coming soon...

# IN PREVIEW Composition Utilities

These "In Preview" utilties are meant for component authors to try out and give us feedback on creating new components like we did with the new Button component. Note that these APIs are subject to change as we learn and iterate with component authors.

Customizability and component authoring

  • A set of composition utilities and guidance on how to build customizable components.
  • A set of utilities to help you provide contextual theme to components and retrieve the theme to build your own styles (a better alternative for Customizer and Fabric).

List of breaking changes

Please see the draft release notes for a detailed list of breaking changes to individual components, including removal of certain props previously marked as deprecated.

Testing v8

Once beta is released (8.0.0-beta.*), we encourage you to try it out and provide us with any feedback.

More details coming soon!

Open questions v8 will answer before release

Question: How will customers upgrade from v7 to v8?

We will provide an upgrade-source script which will apply renames to your code. Symbols, imports, and prop renames will be adjusted automatically, and references to deprecated things which have no automated alternative will add comments and links to explanations.

Question: What is the right way to theme Fluent UI?

More details coming soon...

Question: If we're using css variables, what guidance do we provide for developers who still need to support IE11?

We're currently working on adding a polyfill for this. More detailed guidance will be provided when we release the beta.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.