Skip to content

Commit

Permalink
Bump to v1.2.0
Browse files Browse the repository at this point in the history
- Add Tailwind support
- Optimize component
- Graphic fixes
ChrisUser authored Nov 25, 2023
2 parents cb62b17 + 48e04b8 commit c3173c2
Showing 11 changed files with 3,675 additions and 5,891 deletions.
10 changes: 4 additions & 6 deletions .github/workflows/main.yml
Original file line number Diff line number Diff line change
@@ -5,10 +5,10 @@ on: [push]
env:
GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
NPM_PACKAGE_NAME: 'react-usage-bar'
VERSION: ''
PUBLISHED_VERSION: ''
NODE_VERSION: '18.x'
NPM_PACKAGE_NAME: "react-usage-bar"
VERSION: ""
PUBLISHED_VERSION: ""
NODE_VERSION: "18.x"

jobs:
build-and-test:
@@ -29,8 +29,6 @@ jobs:
run: | # Install npm packages and build the src files
npm install --force
npm run build --if-present
# - name: Semantic release
# run: npx semantic-release
tag-and-npm-publish:
if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/main' }}
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
node_modules/
docs-build/
coverage/
build/
debug.log
77 changes: 60 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
@@ -3,11 +3,14 @@
![React Usage Bar first example](example.png)
![React Usage Bar compact design](example_compact.png)

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
![Dependencies](https://img.shields.io/badge/dependencies-up%20to%20date-brightgreen.svg)
![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)
![Latest version](https://img.shields.io/npm/v/react-usage-bar?logo=npm)
![Build passing](https://img.shields.io/badge/build-passing-darkgreen.svg)
![Contributions welcome](https://img.shields.io/badge/contributions-welcome-darkorange.svg)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)

Display disc sectors, stats and more with this lightweight user-friendly React component.\
Now compatible with [Tailwind](https://tailwindcss.com/).

## 🔌 Installation

Install via npm
@@ -41,15 +44,23 @@ The usage bar needs to receive an array of items. In order to display all the va

### Item type

| Attribute | Type | Required |
| --------- | ------ | -------- |
| value | number | Yes |
| name | string | Yes |
| color | string | No |
| Attribute | Type | Required | |
| ------------ | ------ | -------- | -------------------------------------------------------------------------------------- |
| value | number | Yes | |
| name | string | Yes | |
| color | string | No | |
| className | string | No | ![tailwind compatible](https://img.shields.io/badge/Tailwind-compatible-darkgreen.svg) |
| dotClassName | string | No | ![tailwind compatible](https://img.shields.io/badge/Tailwind-compatible-darkgreen.svg) |

The `value` attribute indicates the amount of space taken up by the sector with a specific `name`. The `color` property can be utilized to define the background color of that particular portion in the bar.

To further customize the sector element, you can apply your own CSS classes or Tailwind classes using the `className` attribute.

The `value` represents the quantity of space occupied by the sector with a certain `name`. The `color` property could be used to specify the background color of that portion in the bar.
In case you are using the **compact layout** and have not specified a `color` value, you can customize the `dotClassName` similarly to the `className` attribute.

The `total` value is also required.
> The defined `color` property value will have a **priority on the background color** defined in the `className` and/or `dotClassName` ones.\
> <br />
> It is recommended to use **exclusively** `color` or one of the two other properties per item.
### Example

@@ -89,25 +100,57 @@ const App = () => {
export default App
```

The `total` prop is also required.

<br>

## Props (Options)

### **showPercentage** | _boolean_ | default: `false`

When true shows the percentage value of all the elements.
When true, shows the percentage value of all the elements.

### **removeLabels** | _boolean_ | default: `false`
### **showLabels** | _boolean_ | default: `true`

When true hides all the tooltips or lables of the items.
When false, hides all the tooltips or lables of the items.

### **darkMode** | _boolean_ | default: `false`

Enables the component to work in dark-mode.
When true, enables the component to work in dark-mode.

### **compactLayout** | _boolean_ | default: `false`

The new compact design. _**Try it**_.
When true, enables the new compact design. _**Try it**_. 😎

### **showFallbackColors** | _boolean_ | default: `false`

When true, this feature dynamically assigns a random color to the background of any items where a value has not been specified

### **errorMessage** | _string_ | default: `Error: Total elements values exceed 100%.`

Customize the error string that appears when the total values of the provided items exceeds 100%.

---

<br>

**Custom classes props:** add custom or Tailwind classes to elements of the component.

### **usageBarContainerClassName** | _string_

Can customize the main div of the component.

### **usageBarClassName** | _string_

Can customize the actual bar element of the component.

### **tooltipClassName** | _string_

Can customize the tooltip div of the item in which are written all the textual info.

### **errorMessageClassName** | _string_

Can customize the style of the error message.

<br>

@@ -156,7 +199,6 @@ The single item represented in the bar. This class is vastly used.
The tooltip of the item in which are written all the textual info.

- `.o-UsageBar__bar__tooltip__percentage` - Used to control the style of the percentage lables.

- `::after` - Is used to make the triangular shape on the bottom (or top) of the tooltips.

### `.o-UsageBar__bar__elements__labels__container`
@@ -185,7 +227,8 @@ $ yarn storybook

## Contribution

If you have a suggestion that would make this component better feel free to open a pull request or create an issue for any bug you find.
If you have a suggestion that would make this component better feel free to fork the project and open a pull request or create an issue for any idea or bug you find.\
Remeber to follow the [Contributing Guidelines](https://github.com/ChrisUser/.github/blob/main/CONTRIBUTING.md).

<br>

68 changes: 30 additions & 38 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-usage-bar",
"version": "1.1.22",
"version": "1.2.0",
"description": "Usage bar, graphic component for React",
"type": "module",
"main": "build/index.js",
@@ -38,62 +38,49 @@
"homepage": "http://ChrisUser.github.io/react-usage-bar",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.22.7",
"@babel/preset-env": "^7.22.7",
"@babel/preset-react": "^7.22.5",
"@babel/preset-typescript": "^7.22.5",
"@storybook/addon-a11y": "^7.0.26",
"@storybook/addon-docs": "^7.0.26",
"@storybook/addon-viewport": "^7.0.26",
"@storybook/react": "^7.0.26",
"@storybook/react-webpack5": "^7.0.26",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^14.0.0",
"@types/jest": "^26.0.19",
"@types/react": "^18.2.14",
"@types/react-dom": "^18.2.6",
"@babel/core": "^7.23.3",
"@babel/preset-env": "^7.23.3",
"@babel/preset-react": "^7.23.3",
"@babel/preset-typescript": "^7.23.3",
"@storybook/addon-a11y": "^7.5.3",
"@storybook/addon-docs": "^7.5.3",
"@storybook/addon-viewport": "^7.5.3",
"@storybook/react": "^7.5.3",
"@storybook/react-webpack5": "^7.5.3",
"@testing-library/jest-dom": "^6.1.4",
"@testing-library/react": "^14.1.2",
"@types/jest": "^29.5.10",
"@types/react": "^18.2.38",
"@types/react-dom": "^18.2.17",
"awesome-typescript-loader": "^5.2.1",
"babel-loader": "^9.1.2",
"esbuild": "^0.18.11",
"jest": "^26.0.19",
"babel-loader": "^9.1.3",
"esbuild": "^0.19.7",
"jest": "^29.7.0",
"postcss": "^8.4.24",
"prettier-standard": "^16.3.0",
"react": "^18.2.0",
"react-docgen-typescript-loader": "^3.7.2",
"react-dom": "^18.2.0",
"rollup": "^3.26.1",
"rollup": "^4.5.2",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-dts": "^5.3.0",
"rollup-plugin-esbuild": "^5.0.0",
"rollup-plugin-dts": "^6.1.0",
"rollup-plugin-esbuild": "^6.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-peer-deps-external": "^2.2.2",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.35.0",
"semantic-release": "^21.0.7",
"rollup-plugin-typescript2": "^0.36.0",
"standard": "^17.1.0",
"standard-prettier": "^1.0.1",
"storybook": "future",
"storybook": "7.5.3",
"ts-jest": "^29.1.1",
"ts-loader": "^9.4.4",
"typescript": "^5.1.6"
"ts-loader": "^9.5.1",
"typescript": "^5.3.2"
},
"peerDependencies": {
"react": "^17",
"react-dom": "^17"
},
"resolutions": {
"minimist": "1.2.6",
"semver": "7.5.2"
},
"plugins": [
"@semantic-release/commit-analyzer",
"@semantic-release/release-notes-generator",
"@semantic-release/changelog",
"@semantic-release/github",
"@semantic-release/npm",
"@semantic-release/git"
],
"jest": {
"preset": "ts-jest",
"testEnvironment": "jsdom",
@@ -114,5 +101,10 @@
"afterAll",
"jest"
]
},
"dependencies": {
"minimist": "1.2.8",
"semver": "7.5.4",
"tslib": "^2.6.2"
}
}
53 changes: 26 additions & 27 deletions rollup.config.js
Original file line number Diff line number Diff line change
@@ -1,46 +1,45 @@
import typescript from 'rollup-plugin-typescript2'
import commonjs from 'rollup-plugin-commonjs'
import external from 'rollup-plugin-peer-deps-external'
import resolve from 'rollup-plugin-node-resolve'
import postcss from 'rollup-plugin-postcss'
import { terser } from 'rollup-plugin-terser'
import typescript from "rollup-plugin-typescript2"
import commonjs from "rollup-plugin-commonjs"
import external from "rollup-plugin-peer-deps-external"
import resolve from "rollup-plugin-node-resolve"
import postcss from "rollup-plugin-postcss"
import { terser } from "rollup-plugin-terser"

import pkg from './package.json' assert { type: "json" }
import pkg from "./package.json" assert { type: "json" }

export default {
input: 'src/index.ts',
input: "src/index.ts",
output: [
{
file: pkg.main,
format: 'cjs',
exports: 'named',
sourcemap: true
}
format: "cjs",
exports: "named",
sourcemap: true,
},
],
plugins: [
resolve(),
postcss({
extensions: ['.css'],
extract: true
extensions: [".css"],
extract: true,
}),
external(),
typescript({
rollupCommonJSResolveHack: true,
exclude: ['**/__tests__/**', '**/*.stories.tsx'],
clean: true
exclude: ["**/__tests__/**", "**/*.stories.tsx"],
clean: true,
}),
terser(),
commonjs({
include: ['node_modules/**'],
include: ["node_modules/**"],
namedExports: {
'node_modules/react/react.js': [
'Children',
'Component',
'PropTypes',
'createElement'
"node_modules/react/react.js": [
"Children",
"Component",
"PropTypes",
"createElement",
],
'node_modules/react-dom/index.js': ['render']
}
})
]
"node_modules/react-dom/index.js": ["render"],
},
}),
],
}
36 changes: 29 additions & 7 deletions src/UsageBar.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import * as React from "react"
import UsageBar from "./UsageBar"

export default {
export default {
title: "Usage Bar",
component: UsageBar,
parameters: {}
parameters: {},
}

const items = [
@@ -31,15 +31,37 @@ const items = [
},
]

export const lightMode = () => <UsageBar items={items} total={100} />
export const lightMode = () => (
<UsageBar showFallbackColors items={items} total={100} />
)

export const withoutLabels = () => <UsageBar removeLabels items={items} total={100} />
export const withoutLabels = () => (
<UsageBar showLabels={false} showFallbackColors items={items} total={100} />
)

export const withPercentages = () => <UsageBar showPercentage items={items} total={100} />
export const withPercentages = () => (
<UsageBar showPercentage showFallbackColors items={items} total={100} />
)

export const compactLayout = () => <UsageBar showPercentage compactLayout items={items} total={100} />
export const compactLayout = () => (
<UsageBar
showPercentage
showFallbackColors
compactLayout
items={items}
total={100}
/>
)

export const compactLayoutWithoutLabels = () => <UsageBar removeLabels compactLayout items={items} total={100} />
export const compactLayoutWithoutLabels = () => (
<UsageBar
showLabels={false}
showFallbackColors
compactLayout
items={items}
total={100}
/>
)

export const error = () => (
<>
225 changes: 144 additions & 81 deletions src/UsageBar.tsx
Original file line number Diff line number Diff line change
@@ -3,6 +3,8 @@ import "./index.css"

interface Item {
color?: string
className?: string
dotClassName?: string
value: number
name: string
}
@@ -11,9 +13,16 @@ interface Props {
items: Item[]
total: number
darkMode?: boolean
removeLabels?: boolean
showLabels?: boolean
showPercentage?: boolean
compactLayout?: boolean
showFallbackColors?: boolean
errorMessage?: string

usageBarContainerClassName?: string
usageBarClassName?: string
tooltipClassName?: string
errorMessageClassName?: string
}

const lightColors: string[] = [
@@ -44,16 +53,38 @@ const darkColors: string[] = [
const getPercentageValue = (value: number, total: number): string =>
`${((value / total) * 100).toFixed(0)}%`

const shuffleArray = (a: string[]) => {
let j, x, i
for (i = a.length - 1; i > 0; i--) {
j = Math.floor(Math.random() * (i + 1))
x = a[i]
a[i] = a[j]
a[j] = x
}
return a
}

const appendCustomClass = (customClass?: string) => {
if (customClass) {
return customClass[0] === " " ? customClass : ` ${customClass}`
}
return ""
}

const UsageBar: React.FC<Props> = ({
darkMode = false,
removeLabels = false,
showLabels = true,
showPercentage = false,
compactLayout = false,
showFallbackColors = false,
total,
items,
errorMessage = "Error: Total elements values exceed 100%.",
usageBarContainerClassName,
usageBarClassName,
tooltipClassName,
errorMessageClassName,
}) => {
const [formattedItems, setFormattedItems] = React.useState<Item[]>([])

/**
* Checks if the total value is equal or greater than the sum of all the elements values.
*/
@@ -65,82 +96,84 @@ const UsageBar: React.FC<Props> = ({
)

/**
* Formats the items prop array providing a color to
* elements without a defined one.
* Returns an array of colors based on the value of `darkMode`.
* The colors are either from the `darkColors` array or the `lightColors` array.
* The chosen array is shuffled before being returned.
*/
const formatItemsArray = React.useCallback(() => {
const selectedColors: string[] = []
const fallbackColors = React.useMemo(() => {
const colorsToPickFrom = darkMode ? [...darkColors] : [...lightColors]
shuffleArray(colorsToPickFrom)
return colorsToPickFrom
}, [])

// For each element a random index is generated and then used to pick a value
// from the colorsToPickFrom array; the selected value is removed by its original array
// and it's pushed into the selectedColors one.
for (let i = 0; i < items.length; i++) {
const randIndex = Math.floor(Math.random() * colorsToPickFrom.length)
const color = colorsToPickFrom[randIndex]
selectedColors.push(color)
colorsToPickFrom.splice(randIndex, 1)
}

// Each element from the items array is formatted correctly
// with a defined and valid color property.
setFormattedItems(
items.map((item: Item, index: number) => {
return item.color ? item : { ...item, color: selectedColors[index] }
})
)
}, [items, darkMode])

React.useEffect(() => {
if (itemsValuesAreCorrect) {
formatItemsArray()
}
}, [itemsValuesAreCorrect, formatItemsArray])
/**
* Returns the color of an element based on certain conditions.
*
* @param element - The item for which the color needs to be determined.
* @param index - The index of the item in the list.
* @returns The color of the element, either from the `color` property or a fallback
* color from the `fallbackColors` array. If the `element` does not have a `color`
* property and `showFallbackColors` is false, null is returned.
*/
const getElementColor = React.useCallback(
(element: Item, index: number) => {
if (element.color) return element.color
return showFallbackColors
? fallbackColors[index % fallbackColors.length]
: null
},
[showFallbackColors, fallbackColors]
)

if (!itemsValuesAreCorrect)
return (
<span className="u-UsageBar__error">
ERROR: Elements values exceed the total.
<span
className={`u-UsageBar__error${appendCustomClass(
errorMessageClassName
)}`}
>
{errorMessage}
</span>
)

if (formattedItems.length === 0) return null
if (items.length === 0) return null

if (compactLayout) {
return (
<div
className={`c-UsageBar c-UsageBar__compact ${
darkMode ? "u-UsageBar-dark" : "u-UsageBar-light"
}`}
}${appendCustomClass(usageBarContainerClassName)}`}
>
<div className="o-UsageBar__bar o-UsageBar__compact__bar">
{formattedItems.map((element: Item, index: number) => {
return (
<div
key={index}
className="o-UsageBar__bar__element"
style={{
width: getPercentageValue(element.value, total),
backgroundColor: element.color,
}}
/>
)
})}
<div
className={`o-UsageBar__bar o-UsageBar__compact__bar${appendCustomClass(
usageBarClassName
)}`}
>
{items.map((element: Item, index: number) => (
<UsageBarElement
element={element}
color={getElementColor(element, index)}
total={total}
key={index}
/>
))}
</div>
{!removeLabels && (
{showLabels && (
<div className="o-UsageBar__bar__elements__labels__container">
{formattedItems.map((element: Item, index: number) => {
{items.map((element: Item, index: number) => {
const color = getElementColor(element, index)
return (
<div key={index} className="o-UsageBar__bar__elements__label">
<div
className="o-UsageBar__bar__elements__label--dot"
style={{ backgroundColor: element.color }}
className={`o-UsageBar__bar__elements__label--dot${appendCustomClass(
element.dotClassName
)}`}
style={color ? { backgroundColor: color } : {}}
/>
<span>{element.name}</span>
{showPercentage && (
<span className="o-UsageBar__bar__tooltip__percentage">
{getPercentageValue(element.value, total)}
</span>
<UsageBarPercentageLabel element={element} total={total} />
)}
</div>
)
@@ -155,35 +188,65 @@ const UsageBar: React.FC<Props> = ({
<div
className={`c-UsageBar ${
darkMode ? "u-UsageBar-dark" : "u-UsageBar-light"
}`}
}${appendCustomClass(usageBarContainerClassName)}`}
>
<div className="o-UsageBar__bar">
{formattedItems.map((element: Item, index: number) => {
return (
<div
key={index}
className="o-UsageBar__bar__element"
style={{
width: getPercentageValue(element.value, total),
backgroundColor: element.color,
}}
>
{!removeLabels && (
<div className="o-UsageBar__bar__tooltip">
<span>{element.name}</span>
{showPercentage && (
<span className="o-UsageBar__bar__tooltip__percentage">
{getPercentageValue(element.value, total)}
</span>
)}
</div>
)}
</div>
)
})}
<div className={`o-UsageBar__bar${appendCustomClass(usageBarClassName)}`}>
{items.map((element: Item, index: number) => (
<UsageBarElement
element={element}
color={getElementColor(element, index)}
total={total}
key={index}
>
{showLabels && (
<div
className={`o-UsageBar__bar__tooltip${appendCustomClass(
tooltipClassName
)}`}
>
<span>{element.name}</span>
{showPercentage && (
<UsageBarPercentageLabel element={element} total={total} />
)}
</div>
)}
</UsageBarElement>
))}
</div>
</div>
)
}

const UsageBarElement: React.FC<{
element: Item
color: string | null
total: number
children?: React.ReactNode
}> = ({ element, color, total, children }) => {
return (
<div
className={`o-UsageBar__bar__element${appendCustomClass(
element.className
)}`}
style={{
width: getPercentageValue(element.value, total),
...(color ? { backgroundColor: color } : null),
}}
>
{children}
</div>
)
}

const UsageBarPercentageLabel: React.FC<{ element: Item; total: number }> = ({
element,
total,
}) => {
return (
<span className="o-UsageBar__bar__tooltip__percentage">
{getPercentageValue(element.value, total)}
</span>
)
}

export default UsageBar
50 changes: 39 additions & 11 deletions src/UsageBarDark.stories.tsx
Original file line number Diff line number Diff line change
@@ -31,40 +31,68 @@ const items = [
},
]

const mainDarkModeContainerStyle = { backgroundColor: "#212121", padding: 16 }

export const darkMode = () => (
<div style={{ backgroundColor: "#212121" }}>
<UsageBar darkMode items={items} total={100} />
<div style={mainDarkModeContainerStyle}>
<UsageBar darkMode showFallbackColors items={items} total={100} />
</div>
)

export const darkModeWithoutLabels = () => (
<div style={{ backgroundColor: "#212121" }}>
<UsageBar removeLabels darkMode items={items} total={100} />
<div style={mainDarkModeContainerStyle}>
<UsageBar
showLabels={false}
showFallbackColors
darkMode
items={items}
total={100}
/>
</div>
)

export const darkModeWithPercentages = () => (
<div style={{ backgroundColor: "#212121" }}>
<UsageBar showPercentage darkMode items={items} total={100} />
<div style={mainDarkModeContainerStyle}>
<UsageBar
showPercentage
showFallbackColors
darkMode
items={items}
total={100}
/>
</div>
)

export const darkModeCompact = () => (
<div style={{ backgroundColor: "#212121" }}>
<UsageBar showPercentage compactLayout darkMode items={items} total={100} />
<div style={mainDarkModeContainerStyle}>
<UsageBar
showPercentage
showFallbackColors
compactLayout
darkMode
items={items}
total={100}
/>
</div>
)

export const darkModeCompactWithoutLabels = () => (
<div style={{ backgroundColor: "#212121" }}>
<UsageBar removeLabels compactLayout darkMode items={items} total={100} />
<div style={mainDarkModeContainerStyle}>
<UsageBar
showLabels={false}
compactLayout
showFallbackColors
darkMode
items={items}
total={100}
/>
</div>
)

export const error = () => (
<>
<p>If sum of values exceeds total.</p>
<div style={{ backgroundColor: "#212121" }}>
<div style={mainDarkModeContainerStyle}>
<UsageBar items={items} total={50} />
</div>
</>
25 changes: 12 additions & 13 deletions src/index.css
Original file line number Diff line number Diff line change
@@ -20,13 +20,11 @@
.u-UsageBar-dark {
--text-color: hsl(0, 0%, 13%);
--background-tooltip-color: hsl(0, 0%, 100%);
--background-bar-color: hsl(0, 0%, 30%);
--background-bar-color: hsl(0, 0%, 25%);
}

.c-UsageBar {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: flex;
@@ -37,7 +35,6 @@
background-color: inherit;
color: inherit;
font-size: 1em;
padding: 8pt;
position: relative;
height: 60pt;
width: 100%;
@@ -106,7 +103,7 @@
}
.o-UsageBar__bar__tooltip__percentage {
opacity: 0.78;
font-size: 0.9em;
font-size: 0.85em;
margin: 0 0 0 3pt;
}
.o-UsageBar__bar__tooltip::after {
@@ -127,25 +124,26 @@
.o-UsageBar__compact__bar {
max-width: 500px;
}
.o-UsageBar__bar__elements__labels__container,
.o-UsageBar__bar__elements__label {
display: flex;
justify-content: flex-start;
flex-direction: row;
}
.o-UsageBar__bar__elements__labels__container {
margin-top: 12pt;
position: relative;
width: 100%;
max-width: 480px;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
gap: 12pt;
font-size: 0.9em;
}
.o-UsageBar__bar__elements__label {
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
align-items: flex-end;
flex-wrap: nowrap;
line-height: 1;
}
.o-UsageBar__bar__elements__label > span,
.o-UsageBar__bar__elements__label > .o-UsageBar__bar__tooltip__percentage {
@@ -156,4 +154,5 @@
margin-right: 6pt;
height: 8pt;
width: 8pt;
border: 1px solid var(--background-bar-color);
}
5 changes: 4 additions & 1 deletion tsconfig.json
Original file line number Diff line number Diff line change
@@ -4,6 +4,9 @@
"compilerOptions": {
"jsx": "react",
"declaration": true,
"declarationDir": "./build"
"declarationDir": "./build",
"strict": true,
"target": "ES6",
"moduleResolution": "Node"
}
}
9,016 changes: 3,326 additions & 5,690 deletions yarn.lock

Large diffs are not rendered by default.

0 comments on commit c3173c2

Please sign in to comment.