Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Convert EmptyState, Tabs, NavMenu, IndexList, and Page families. #328

Merged
merged 6 commits into from
Oct 14, 2019
Merged

Convert EmptyState, Tabs, NavMenu, IndexList, and Page families. #328

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ee780ec
refactor: convert EmptyState family, expose refs
mavarius Oct 11, 2019
396abd2
refactor: convert NavMenu, expose refs
mavarius Oct 11, 2019
0b389df
refactor: convert tabs, expose refs
mavarius Oct 13, 2019
6f4ed9b
refactor: convert indexList family, expose refs
mavarius Oct 13, 2019
ea793b4
refactor: convert Page family, expose refs
mavarius Oct 14, 2019
a34a228
fix: Prepend classnames with cf, update changelog
mavarius Oct 14, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 8 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,14 @@

### 0.0.33 (Unreleased)

- [#328](https://github.com/influxdata/clockface/pull/328): Convert `IndexList` component family to `FunctionComponent` and wrap with `forwardRef`
- [#328](https://github.com/influxdata/clockface/pull/328): [Breaking] Prepend `cf-` to all `IndexList` class names
- [#328](https://github.com/influxdata/clockface/pull/328): Convert `NavMenu` component family to `FunctionComponent` and wrap with `forwardRef`
- [#328](https://github.com/influxdata/clockface/pull/328): Convert `Tabs` component family to `FunctionComponent` and wrap with `forwardRef`
- [#328](https://github.com/influxdata/clockface/pull/328): Convert `EmptyState` component family to `FunctionComponent` and wrap with `forwardRef`
- [#328](https://github.com/influxdata/clockface/pull/328): [Breaking] Remove `text` and `highlightedText` props from `EmptyStateText` and `EmptyStateSubtext` components in favor of directly passing children
- [#328](https://github.com/influxdata/clockface/pull/328): Convert `Page` component family to `FunctionComponent` and wrap with `forwardRef`
- [#328](https://github.com/influxdata/clockface/pull/328): [Breaking] Export `PageHeaderLeft`, `PageHeaderCenter`, and `PageHeaderRight` directly from `Page` instead of `Page.Header`
- [#327](https://github.com/influxdata/clockface/pull/327) Fix rendering issue with "always visible" `Popover`s
- [#324](https://github.com/influxdata/clockface/pull/324): Convert `DraggableResizer` component family to `FunctionComponent` and wrap with `forwardRef`
- [#320](https://github.com/influxdata/clockface/pull/320): Convert `DapperScrollbars` component to `FunctionComponent` and update `react-scrollbars-custom` dependency to `4.0.20`
Expand Down
84 changes: 42 additions & 42 deletions src/Components/AppWrapper/Documentation/AppWrapper.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ import {mapEnumKeys} from '../../../Utils/storybook'

// Components
import {AppWrapper, AppWrapperRef} from '../AppWrapper'
import {NavMenu} from '../../NavMenu/NavMenu'
import {Page} from '../../Page/Page'
import {NavMenu} from '../../NavMenu'
import {Page} from '../../Page/index'
import {Icon} from '../../Icon/Icon'

// Types
Expand Down Expand Up @@ -47,36 +47,36 @@ layoutStories.add(
>
<NavMenu>
<NavMenu.Item
titleLink={className => (
titleLink={(className: string) => (
<a className={className} href="#">
JohnDoe (OrgName)
</a>
)}
iconLink={className => (
iconLink={(className: string) => (
<a className={className} href="#">
<Icon glyph={IconFont.CuboNav} />
</a>
)}
active={false}
>
<NavMenu.SubItem
titleLink={className => (
titleLink={(className: string) => (
<a className={className} href="#">
Switch Organizations
</a>
)}
active={false}
/>
<NavMenu.SubItem
titleLink={className => (
titleLink={(className: string) => (
<a className={className} href="#">
Create Organization
</a>
)}
active={false}
/>
<NavMenu.SubItem
titleLink={className => (
titleLink={(className: string) => (
<a className={className} href="#">
Logout
</a>
Expand All @@ -85,59 +85,59 @@ layoutStories.add(
/>
</NavMenu.Item>
<NavMenu.Item
titleLink={className => (
titleLink={(className: string) => (
<a className={className} href="#">
Data Explorer
</a>
)}
iconLink={className => (
iconLink={(className: string) => (
<a className={className} href="#">
<Icon glyph={IconFont.GraphLine} />
</a>
)}
active={false}
/>
<NavMenu.Item
titleLink={className => (
titleLink={(className: string) => (
<a className={className} href="#">
Dashboards
</a>
)}
iconLink={className => (
iconLink={(className: string) => (
<a className={className} href="#">
<Icon glyph={IconFont.Dashboards} />
</a>
)}
active={false}
/>
<NavMenu.Item
titleLink={className => (
titleLink={(className: string) => (
<a className={className} href="#">
Tasks
</a>
)}
iconLink={className => (
iconLink={(className: string) => (
<a className={className} href="#">
<Icon glyph={IconFont.Calendar} />
</a>
)}
active={true}
/>
<NavMenu.Item
titleLink={className => (
titleLink={(className: string) => (
<a className={className} href="#">
Monitoring & Alerting
</a>
)}
iconLink={className => (
iconLink={(className: string) => (
<a className={className} href="#">
<Icon glyph={IconFont.Bell} />
</a>
)}
active={false}
>
<NavMenu.SubItem
titleLink={className => (
titleLink={(className: string) => (
<a className={className} href="#">
History
</a>
Expand All @@ -146,52 +146,52 @@ layoutStories.add(
/>
</NavMenu.Item>
<NavMenu.Item
titleLink={className => (
titleLink={(className: string) => (
<a className={className} href="#">
Load Data
</a>
)}
iconLink={className => (
iconLink={(className: string) => (
<a className={className} href="#">
<Icon glyph={IconFont.DisksNav} />
</a>
)}
active={false}
>
<NavMenu.SubItem
titleLink={className => (
titleLink={(className: string) => (
<a className={className} href="#">
Buckets
</a>
)}
active={false}
/>
<NavMenu.SubItem
titleLink={className => (
titleLink={(className: string) => (
<a className={className} href="#">
Telegraf
</a>
)}
active={false}
/>
<NavMenu.SubItem
titleLink={className => (
titleLink={(className: string) => (
<a className={className} href="#">
Scrapers
</a>
)}
active={false}
/>
<NavMenu.SubItem
titleLink={className => (
titleLink={(className: string) => (
<a className={className} href="#">
Tokens
</a>
)}
active={false}
/>
<NavMenu.SubItem
titleLink={className => (
titleLink={(className: string) => (
<a className={className} href="#">
Client Libraries
</a>
Expand All @@ -200,52 +200,52 @@ layoutStories.add(
/>
</NavMenu.Item>
<NavMenu.Item
titleLink={className => (
titleLink={(className: string) => (
<a className={className} href="#">
Settings
</a>
)}
iconLink={className => (
iconLink={(className: string) => (
<a className={className} href="#">
<Icon glyph={IconFont.WrenchNav} />
</a>
)}
active={false}
>
<NavMenu.SubItem
titleLink={className => (
titleLink={(className: string) => (
<a className={className} href="#">
Members
</a>
)}
active={false}
/>
<NavMenu.SubItem
titleLink={className => (
titleLink={(className: string) => (
<a className={className} href="#">
Variables
</a>
)}
active={false}
/>
<NavMenu.SubItem
titleLink={className => (
titleLink={(className: string) => (
<a className={className} href="#">
Templates
</a>
)}
active={false}
/>
<NavMenu.SubItem
titleLink={className => (
titleLink={(className: string) => (
<a className={className} href="#">
Labels
</a>
)}
active={false}
/>
<NavMenu.SubItem
titleLink={className => (
titleLink={(className: string) => (
<a className={className} href="#">
Profile
</a>
Expand All @@ -254,28 +254,28 @@ layoutStories.add(
/>
</NavMenu.Item>
<NavMenu.Item
titleLink={className => (
titleLink={(className: string) => (
<a className={className} href="#">
Cloud
</a>
)}
iconLink={className => (
iconLink={(className: string) => (
<a className={className} href="#">
<Icon glyph={IconFont.Cloud} />
</a>
)}
active={false}
>
<NavMenu.SubItem
titleLink={className => (
titleLink={(className: string) => (
<a className={className} href="#">
Billing
</a>
)}
active={false}
/>
<NavMenu.SubItem
titleLink={className => (
titleLink={(className: string) => (
<a className={className} href="#">
Usage
</a>
Expand All @@ -284,12 +284,12 @@ layoutStories.add(
/>
</NavMenu.Item>
<NavMenu.Item
titleLink={className => (
titleLink={(className: string) => (
<a className={className} href="#">
Feedback
</a>
)}
iconLink={className => (
iconLink={(className: string) => (
<a className={className} href="#">
<Icon glyph={IconFont.NavChat} />
</a>
Expand All @@ -306,21 +306,21 @@ layoutStories.add(
]
}
>
<Page.Header.Left>
<Page.HeaderLeft>
<Page.Title title={text('PageTitle title', 'Page Title')} />
</Page.Header.Left>
<Page.Header.Center>
</Page.HeaderLeft>
<Page.HeaderCenter>
{boolean('Button in PageHeaderCenter', true) ? (
<div className="mockComponent mockButton">
Center Button
</div>
) : null}
</Page.Header.Center>
<Page.Header.Right>
</Page.HeaderCenter>
<Page.HeaderRight>
{boolean('Button in PageHeaderRight', true) ? (
<div className="mockComponent mockButton">Right Button</div>
) : null}
</Page.Header.Right>
</Page.HeaderRight>
</Page.Header>
<Page.Contents
fullWidth={boolean('fullWidth', false)}
Expand Down
0 src/Components/EmptyState/EmptyState.md → ...ts/EmptyState/Documentation/EmptyState.md
View file
Open in desktop
File renamed without changes.