feat(Alert): add fitted prop
#1872
Conversation
layershifter
requested review from
dvdzkwsk,
kuzhelov,
levithomason,
miroslavstastny and
mnajdova
as code owners
Codecov Report
@@ Coverage Diff @@
## master #1872 +/- ##
=========================================
- Coverage 69.72% 69.7% -0.02%
=========================================
Files 886 886
Lines 7795 7797 +2
Branches 2256 2258 +2
=========================================
Hits 5435 5435
- Misses 2350 2352 +2
Partials 10 10
Continue to review full report at Codecov.
|
…m/stardust-ui/react into feat/alert-compact
| import * as React from 'react' | ||
|
|
||
| const AlertExampleWidth = () => { | ||
| const [width] = useRangeKnob({ name: 'width', initialValue: '500px' }) |
There was a problem hiding this comment.
Wouldn't it be better to specify the bounds on knob instead? Let's create a ticket for it?
There was a problem hiding this comment.
I am working on PR that will introduce it
| @@ -59,6 +59,9 @@ export interface AlertProps | |||
| /** Controls Alert's relation to neighboring items. */ | |||
| attached?: boolean | 'top' | 'bottom' | |||
|
|
|||
| /** An alert can only take up the width of its content. */ | |||
| compact?: boolean | |||
There was a problem hiding this comment.
Why not fitted? It feels awkward to have two different terms across the components for the same thing? If we decide that one is better then the other, we can rename all of them at once. What do you think?
There was a problem hiding this comment.
Good catch, fitted will work better there and will be consistent 👍
layershifter
changed the title
compact propfitted prop
| @@ -55,12 +56,13 @@ export default (siteVars: SiteVariablesPrepared): AlertVariables => { | |||
| color: siteVars.colors.grey[500], | |||
| fontWeight: siteVars.fontWeightRegular, | |||
| minHeight, | |||
| padding: `0 0 0 ${pxToRem(16)}`, | |||
| padding: `0 ${pxToRem(16)}`, | |||
There was a problem hiding this comment.
@codepretty can you please check this one? Is it correct?
fittedpropThis PR adds a new prop to
Alertcomponent, it allows to only take up the width of its content.Also adds an example into
Usagewith fixed container width that wrapsAlert.