From 123d5efe4f8f8e38067f8fdd86f6e11d56b83824 Mon Sep 17 00:00:00 2001 From: Christian Kienle Date: Wed, 13 Nov 2019 14:50:03 +0100 Subject: [PATCH] fix: fixed docs + added new note --- src/components/Modal/modal.scss | 8 +++----- src/docs/content/en_us/master-details.md | 20 ++++++++++++++------ src/docs/index.js | 1 + yarn.lock | 2 +- 4 files changed, 19 insertions(+), 12 deletions(-) diff --git a/src/components/Modal/modal.scss b/src/components/Modal/modal.scss index c7e9c268..ae358cf5 100644 --- a/src/components/Modal/modal.scss +++ b/src/components/Modal/modal.scss @@ -12,25 +12,23 @@ // Default modal transition .fdv-modal-enter { opacity: 0; - transform: scale3d(1, 1, 1) translate3d(0, -400px, 0); } .fdv-modal-enter-to { - transform: scale3d(1, 1, 1); + opacity: 1; } .fdv-modal-enter-active, .fdv-modal-leave-active { - transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); + opacity: 0; } .fdv-modal-leave { - transform: scale3d(1, 1, 1); + opacity: 1; } .fdv-modal-leave-to { opacity: 0; - transform: scale3d(1, 1, 1) translate3d(0, -400px, 0); } .fd-modal__content--overrides { diff --git a/src/docs/content/en_us/master-details.md b/src/docs/content/en_us/master-details.md index 684262bd..3ed2dc6c 100644 --- a/src/docs/content/en_us/master-details.md +++ b/src/docs/content/en_us/master-details.md @@ -4,6 +4,14 @@ fdRelatedComponents: --- # Master Details +::: tip CSS NEEDED & BETA NOTICE + +The Master Details-related components require some additional CSS that is not part of Fundamental Styles. If you want to use the master detail-related components you have to inlude the extra **Fundamental Vue CSS** file. It is part of the NPM package in `dist`. It is also available at [https://unpkg.com/fundamental-vue](https://unpkg.com/fundamental-vue@latest/dist/FundamentalVue.umd.css) + +The Master Details-related components are in **beta**. + +::: + This component provides a standardized master-details layout. The master section contains a list, whereas the details section's content is completely up to the developer. The `fd-master-details` component, exposes multiple props and slots allowing the consumer to customize the layout. @@ -21,8 +29,8 @@ placed inside an `fd-modal` allowing the `master` section to take up all the ava ## Simple example -The simplest way to use it, would be by passing the `master-items` prop and populating the `details-content` slot (since it is empty by default). - +The simplest way to use it, would be by passing the `master-items` prop and populating the `details-content` slot (since it is empty by default). + @@ -31,13 +39,13 @@ The simplest way to use it, would be by passing the `master-items` prop and popu The component exposes `master-width` and `gap` props to control the with of the master column and that of the gap between the 2 columns. By default, the `master-width` is set to 50% and the `gap` is set to 0. The details column will always automatically take up the remaining space. You can pass the size that you want is either pixels or percentage, e.g: '50%', '20px'... -Use the sliders in the example below to see how the layout changes when changing the aforementioned props +Use the sliders in the example below to see how the layout changes when changing the aforementioned props ## Using a Virtualized List -As we have mentioned before, the component can either user `fd-list-group` or `fd-virtualized-list` under the hood. To use the virtualized list, you need to set the `use-virtualized-list` prop to `true`. You can then pass an object that contains all the props that you would usually pass to the `fd-virtualized-list`. The `fd-master-details` uses a default configuration object which means you can choose to only pass the properties that you wish to override. The defaults are: +As we have mentioned before, the component can either user `fd-list-group` or `fd-virtualized-list` under the hood. To use the virtualized list, you need to set the `use-virtualized-list` prop to `true`. You can then pass an object that contains all the props that you would usually pass to the `fd-virtualized-list`. The `fd-master-details` uses a default configuration object which means you can choose to only pass the properties that you wish to override. The defaults are: ```js defaultVirtualizedListConfig: { @@ -61,7 +69,7 @@ defaultVirtualizedListConfig: { ## Slots -This component exposes multiple slots allowing you to customize the contents of the sections' title and content. You can see how the slots are positioned in the image below. +This component exposes multiple slots allowing you to customize the contents of the sections' title and content. You can see how the slots are positioned in the image below. ![master-details-slots](../../../../public/images/master-details-slots.png) @@ -75,7 +83,7 @@ Below is an example making full use of all the available slots (it also simulate In order to ensure a more responsive design, the component exposes `auto-open-modal`, `mobile-modal-styles` and `mobile-breakpoints` props allowing the developer to control when should the `details` switch to an `fd-modal` and how should the modal look like. By default, the modal will be fullscreen and will be triggered on the `Breakpoints.XSmall` breakpoint. Below is an example that makes use of these props to customize the mobile behavior of the component. - + diff --git a/src/docs/index.js b/src/docs/index.js index 400dfe91..d3526d61 100644 --- a/src/docs/index.js +++ b/src/docs/index.js @@ -24,6 +24,7 @@ import "prismjs/components/prism-markup.min"; import "prismjs/components/prism-scss.min"; import "prismjs/components/prism-css.min"; import "prismjs/components/prism-bash.min"; +import "./../components/masterDetails/master-details.styles.scss"; const documentedComponents = getDocumentedComponents(); diff --git a/yarn.lock b/yarn.lock index 5e514447..2533199b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6154,7 +6154,7 @@ functional-red-black-tree@^1.0.1: resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327" integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc= -fundamental-styles@^0.1.0: +fundamental-styles@0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/fundamental-styles/-/fundamental-styles-0.1.0.tgz#6e73945112e9639a6e366a6efbf5c1bab0aa1e94" integrity sha512-nLC2ZMTmxhq4kvP4hypQkx7CnUlXfjYfE7KQJrX6D6zLpb1zAuIuwuEv/D2FEqDkir4T9/nYnYg+agW6T8Mt7Q==