-
Notifications
You must be signed in to change notification settings - Fork 55
feat(segment): add inverted prop and improved styles #389
Conversation
Codecov Report
@@ Coverage Diff @@
## master #389 +/- ##
==========================================
+ Coverage 88.96% 88.96% +<.01%
==========================================
Files 41 41
Lines 1386 1387 +1
Branches 177 177
==========================================
+ Hits 1233 1234 +1
Misses 149 149
Partials 4 4
Continue to review full report at Codecov.
|
3257c73
to
2bb4970
Compare
4478bc8
to
53e4168
Compare
docs/src/examples/components/Segment/Variations/SegmentExampleInverted.tsx
Outdated
Show resolved
Hide resolved
docs/src/examples/components/Segment/Variations/SegmentExampleInverted.shorthand.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
please, consider to use fallback options for siteVars.brand
for those cases where those are not provided. I would even suggest to use some hardcoded colors for now, to make it easier for the client of these examples to get the idea
docs/src/examples/components/Segment/Variations/SegmentExampleInverted.shorthand.tsx
Outdated
Show resolved
Hide resolved
53e4168
to
b4f35d1
Compare
docs/src/examples/components/Segment/Variations/SegmentExampleInverted.shorthand.tsx
Outdated
Show resolved
Hide resolved
6a30873
to
54ceaef
Compare
54ceaef
to
e4151f3
Compare
e4151f3
to
dcf4fc3
Compare
@mnajdova @kuzhelov @levithomason |
c835ce7
to
b1be3b8
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please merge after addressing comments!
docs/src/examples/components/Segment/Variations/SegmentExampleInverted.tsx
Outdated
Show resolved
Hide resolved
b1be3b8
to
980974c
Compare
Segment
This PR introduces following changes for
Segment
component:inverted
prop;color
variable;content
slot andrenderContent
method;TODO
API Proposal
Default
renders:
color
variableA segment can different colors. Use
color
variable to see the effect.renders
inverted
withcolor
variableA segment can have its colors inverted for contrast. Use
color
variable to see the effect.renders