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

feat(progress-indicator): update to use carbon icons #5122

Merged
merged 17 commits into from
Jan 28, 2020
Merged

feat(progress-indicator): update to use carbon icons #5122

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
de784c5
feat(progress-indicator): update to use carbon icons
annawen1 Jan 21, 2020
fb377c6
Merge branch 'master' into feat/progressive-icon-props
tw15egan Jan 21, 2020
0f56eb2
Merge branch 'master' into feat/progressive-icon-props
tw15egan Jan 21, 2020
fa7c66d
Merge branch 'master' into feat/progressive-icon-props
tw15egan Jan 21, 2020
c391b50
Merge branch 'master' into feat/progressive-icon-props
tw15egan Jan 22, 2020
ade09a3
Merge branch 'master' into feat/progressive-icon-props
tw15egan Jan 22, 2020
150c512
Merge branch 'master' into feat/progressive-icon-props
tw15egan Jan 22, 2020
0cf5cdb
Merge branch 'master' into feat/progressive-icon-props
tw15egan Jan 23, 2020
47cebe0
Merge branch 'master' into feat/progressive-icon-props
tw15egan Jan 24, 2020
4446076
Merge branch 'master' into feat/progressive-icon-props
abbeyhrt Jan 24, 2020
85bbdea
Merge branch 'master' into feat/progressive-icon-props
tw15egan Jan 24, 2020
f15e1e6
Merge branch 'master' into feat/progressive-icon-props
tw15egan Jan 24, 2020
cabeec2
Merge branch 'master' into feat/progressive-icon-props
annawen1 Jan 27, 2020
b1095e6
Merge branch 'master' into feat/progressive-icon-props
tw15egan Jan 27, 2020
3f658b9
fix(progress-indicator): remove top margin from icon
annawen1 Jan 28, 2020
87c0618
Merge branch 'feat/progressive-icon-props' of https://github.com/anna…
annawen1 Jan 28, 2020
0907c5a
Merge branch 'master' into feat/progressive-icon-props
annawen1 Jan 28, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions packages/components/docs/sass.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20476,10 +20476,13 @@ Progress indicator styles
}

.#{$prefix}--progress-step--current svg {
width: 14px;
height: 14px;
stroke: $interactive-01;
fill: $interactive-01;
margin-top: rem(9.5px);

path:last-of-type {
stroke-width: 40%;
}
}

//INCOMPLETE STYLING
Expand Down
8 changes: 5 additions & 3 deletions packages/components/src/components/progress-indicator/_progress-indicator.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,10 +143,12 @@
}

.#{$prefix}--progress-step--current svg {
width: 14px;
height: 14px;
stroke: $interactive-01;
fill: $interactive-01;
margin-top: rem(9.5px);

path:last-of-type {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just curious, what is this selector being used for? 👀

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like it is being used to fill in the circle by increasing the width of the checked circle

Copy link
Member Author

@annawen1 annawen1 Jan 21, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah...I couldn't find a Filled Circle Icon in the carbon/icon library...so I'm improvised 😅

should I try to get a filled circle icon in the icon package instead?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should I try to get a filled circle icon in the icon package instead?

👍

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc @laurenmrice do you know of an icon we could use or will this work as is? 👀

Copy link
Member

@laurenmrice laurenmrice Jan 22, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah we do not have a filled circle icon. I think we can do this for now and I can talk with conrad about possibly adding one to our library for the future. @joshblack

stroke-width: 40%;
}
}

//INCOMPLETE STYLING
Expand Down
17 changes: 10 additions & 7 deletions packages/react/src/components/ProgressIndicator/ProgressIndicator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,12 @@ import PropTypes from 'prop-types';
import React, { Component } from 'react';
import classnames from 'classnames';
import { settings } from 'carbon-components';
import { CheckmarkOutline16, Warning16 } from '@carbon/icons-react';
import {
CheckmarkOutline16,
Warning16,
RadioButtonChecked16,
RadioButton16,
} from '@carbon/icons-react';
import { keys, matches } from '../../internal/keyboard';

const { prefix } = settings;
Expand Down Expand Up @@ -61,10 +66,9 @@ export function ProgressStep({
}
if (current) {
return (
<svg>
<path d="M 7, 7 m -7, 0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0" />
<RadioButtonChecked16>
<title>{description}</title>
</svg>
</RadioButtonChecked16>
);
}
if (complete) {
Expand All @@ -75,10 +79,9 @@ export function ProgressStep({
);
}
return (
<svg>
<RadioButton16>
<title>{description}</title>
<path d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 13c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z" />
</svg>
</RadioButton16>
);
};

Expand Down