1a809b8bca
The controls library previously depended on a global colors import, which would be resolved to an actual file through a webpack IncludePath declaration. This pattern meant we could not use the library with create-react-app unless we ejected, which is not optimal. To avoid this, this PR changes the convention to depend on a ./src/styles/_colors.scss file existing at the project root instead. This file is created as a postinstall step when the controls library is installed. |
||
|---|---|---|
| docs | ||
| lib | ||
| method-design | ||
| src/styles | ||
| test | ||
| .gitignore | ||
| .npmignore | ||
| .sass-lint.yml | ||
| CHANGELOG.md | ||
| LICENSE | ||
| README.md | ||
| mocha.opts | ||
| package-lock.json | ||
| package.json | ||
| styleguide.config.js | ||
| tests.bundle.js | ||
| tsconfig.json | ||
| tsconfig.test.json | ||
| tsconfig.tests.json | ||
| tslint.json | ||
| webpack.config.js | ||
| webpack.styleguide.js | ||
README.md
Azure IoT UX Fluent Controls
This project contains common React controls (Form Inputs, DateTime etc.) that match the Azure IoT Fluent design.
Get started
npm install --save @microsoft/azure-iot-ux-fluent-controls
This project is built on top of Azure IoT UX Fluent CSS and expects it -- along a few other common packages like React -- to be present in your app as peer dependencies. Run the following command to install these:
npm install --save @microsoft/azure-iot-ux-fluent-css react react-dom classnames prop-types
On install, this project will create a _colors.scss file at your <app root>/src/styles/. This allows you to override or extend the default colors specified in the CSS library and have it apply to the controls seamlessly. For more details, see the comments and examples in _colors.scss.
Quick overview
The full documentation and sample code for the controls is available at https://aka.ms/iotfluentcontrols, but in general, the pattern is:
import { DateField } from '@microsoft/azure-iot-ux-fluent-controls';
const initialState = {value: 'Sep 20, 2010 07:00:00 GMT'};
<div>
<div style={{marginBottom: '20px'}}>
Current Value: {state.value}
</div>
<DateField
name='date-picker'
label='Default Example (Local)'
onChange={(newValue) => setState({value: newValue}) }
initialValue={state.value}
/>
</div>
Contributing
This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.microsoft.com.
When you submit a pull request, a CLA-bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.
This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.
Build
- git clone https://github.com/Azure/iot-ux-fluent-controls.git
- npm install
- npm run build
Docs
- npm run docs:build
- npm run docs
- You can now view style guide in the browser:
- On local: http://localhost:6060/
- On your network: http://{machine ip address}:6060/