Skip to content

Commit

Permalink
fix(Input): fix icon order to ensure rounded border is kept (Semantic…
Browse files Browse the repository at this point in the history
…-Org#2507)

* fix(Input): fix icon order to ensure rounded border is kept

* strengthen input icon position tests
  • Loading branch information
Intregrisist authored and levithomason committed Jun 26, 2018
1 parent 06ab95f commit eae01ad
Show file tree
Hide file tree
Showing 21 changed files with 402 additions and 284 deletions.
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import React from 'react'
import { Image } from 'semantic-ui-react'

const ImageExampleHidden = () => (
<Image src='/images/wireframe/image.png' size='small' hidden />
)
const ImageExampleHidden = () => <Image src='/images/wireframe/image.png' size='small' hidden />

export default ImageExampleHidden
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import React from 'react'
import { Image } from 'semantic-ui-react'

const ImageExampleWrapped = () => (
<Image src='/images/wireframe/image.png' size='small' wrapped />
)
const ImageExampleWrapped = () => <Image src='/images/wireframe/image.png' size='small' wrapped />

export default ImageExampleWrapped
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,7 @@ import React from 'react'
import { Embed } from 'semantic-ui-react'

const EmbedExampleAspectRatio = () => (
<Embed
aspectRatio='4:3'
id='HTZudKi36bo'
placeholder='/images/4by3.jpg'
source='youtube'
/>
<Embed aspectRatio='4:3' id='HTZudKi36bo' placeholder='/images/4by3.jpg' source='youtube' />
)

export default EmbedExampleAspectRatio
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,7 @@ const ModalExampleScrollingContent = () => (
<p>This is an example of expanded content that will cause the modal's dimmer to scroll</p>

{_.times(8, i => (
<Image
key={i}
src='/images/wireframe/paragraph.png'
style={{ paddingBottom: 5 }}
/>
<Image key={i} src='/images/wireframe/paragraph.png' style={{ paddingBottom: 5 }} />
))}
</Modal.Description>
</Modal.Content>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,7 @@ import { Feed } from 'semantic-ui-react'
const image = '/images/avatar/small/helen.jpg'
const date = '3 days ago'
const summary = 'Helen Troy added 2 photos'
const extraImages = [
'/images/wireframe/image.png',
'/images/wireframe/image-text.png',
]
const extraImages = ['/images/wireframe/image.png', '/images/wireframe/image-text.png']

const FeedExampleExtraImagesShorthand = () => (
<Feed>
Expand Down
38 changes: 14 additions & 24 deletions examples/webpack3/scripts/build.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ process.env.NODE_ENV = 'production'
// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', (err) => {
process.on('unhandledRejection', err => {
throw err
})

Expand All @@ -24,8 +24,7 @@ const printHostingInstructions = require('react-dev-utils/printHostingInstructio
const FileSizeReporter = require('react-dev-utils/FileSizeReporter')
const printBuildError = require('react-dev-utils/printBuildError')

const measureFileSizesBeforeBuild =
FileSizeReporter.measureFileSizesBeforeBuild
const measureFileSizesBeforeBuild = FileSizeReporter.measureFileSizesBeforeBuild
const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild
const useYarn = fs.existsSync(paths.yarnLockFile)

Expand All @@ -41,7 +40,7 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
// First, read the current file sizes in build directory.
// This lets us display how much they changed later.
measureFileSizesBeforeBuild(paths.appBuild)
.then((previousFileSizes) => {
.then(previousFileSizes => {
// Remove all content but keep the directory so that
// if you're in it, you don't end up in Trash
fs.emptyDirSync(paths.appBuild)
Expand All @@ -56,14 +55,12 @@ measureFileSizesBeforeBuild(paths.appBuild)
console.log(chalk.yellow('Compiled with warnings.\n'))
console.log(warnings.join('\n\n'))
console.log(
`\nSearch for the ${
chalk.underline(chalk.yellow('keywords'))
} to learn more about each warning.`
`\nSearch for the ${chalk.underline(
chalk.yellow('keywords'),
)} to learn more about each warning.`,
)
console.log(
`To ignore, add ${
chalk.cyan('// eslint-disable-next-line')
} to the line before.\n`
`To ignore, add ${chalk.cyan('// eslint-disable-next-line')} to the line before.\n`,
)
} else {
console.log(chalk.green('Compiled successfully.\n'))
Expand All @@ -75,27 +72,21 @@ measureFileSizesBeforeBuild(paths.appBuild)
previousFileSizes,
paths.appBuild,
WARN_AFTER_BUNDLE_GZIP_SIZE,
WARN_AFTER_CHUNK_GZIP_SIZE
WARN_AFTER_CHUNK_GZIP_SIZE,
)
console.log()

const appPackage = require(paths.appPackageJson)
const publicUrl = paths.publicUrl
const publicPath = config.output.publicPath
const buildFolder = path.relative(process.cwd(), paths.appBuild)
printHostingInstructions(
appPackage,
publicUrl,
publicPath,
buildFolder,
useYarn
)
printHostingInstructions(appPackage, publicUrl, publicPath, buildFolder, useYarn)
},
(err) => {
err => {
console.log(chalk.red('Failed to compile.\n'))
printBuildError(err)
process.exit(1)
}
},
)

// Create the production build and print the deployment instructions.
Expand All @@ -119,15 +110,14 @@ function build(previousFileSizes) {
}
if (
process.env.CI &&
(typeof process.env.CI !== 'string' ||
process.env.CI.toLowerCase() !== 'false') &&
(typeof process.env.CI !== 'string' || process.env.CI.toLowerCase() !== 'false') &&
messages.warnings.length
) {
console.log(
chalk.yellow(
'\nTreating warnings as errors because process.env.CI = true.\n' +
'Most CI servers set it automatically.\n'
)
'Most CI servers set it automatically.\n',
),
)
return reject(new Error(messages.warnings.join('\n\n')))
}
Expand Down
126 changes: 84 additions & 42 deletions examples/webpack3/src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const leftItems = [
href: 'https://react.semantic-ui.com/',
icon: 'book',
key: 'docs',
target: '_blank'
target: '_blank',
},
]
const rightItems = [
Expand All @@ -21,7 +21,7 @@ const rightItems = [
href: 'https://github.com/Semantic-Org/Semantic-UI-React',
icon: 'github',
key: 'github',
target: '_blank'
target: '_blank',
},
{
as: 'a',
Expand All @@ -30,7 +30,7 @@ const rightItems = [
href: 'https://stackoverflow.com/questions/tagged/semantic-ui-react?sort=votes',
key: 'so',
target: '_blank',
}
},
]

const App = () => (
Expand All @@ -40,101 +40,143 @@ const App = () => (

<Grid>
<Grid.Column computer={6} mobile={16}>
<p>Welcome to your Semantic UI React App! It is awesome <span aria-label='emoji' role='img'>😉</span></p>
<p>
Welcome to your Semantic UI React App! It is awesome{' '}
<span aria-label='emoji' role='img'>
😉
</span>
</p>

<p>
This boilerplate is designed to show theming features of SUI with modern environment. It based on the
awesome{' '}
<a href='https://github.com/facebookincubator/create-react-app' rel='noopener noreferrer' target='_blank'>
This boilerplate is designed to show theming features of SUI with modern environment. It
based on the awesome{' '}
<a
href='https://github.com/facebookincubator/create-react-app'
rel='noopener noreferrer'
target='_blank'
>
Create React App package
</a>
{' '}with some additions.
</a>{' '}
with some additions.
</p>

<Header as='h4'>React Hot Loader</Header>
<p>
<a href='https://github.com/gaearon/react-hot-loader' rel='noopener noreferrer' target='_blank'>
<a
href='https://github.com/gaearon/react-hot-loader'
rel='noopener noreferrer'
target='_blank'
>
React Hot Loader
</a>
{' '}become stable and we can use safely, it improves your delevopment speed cardinally.
</a>{' '}
become stable and we can use safely, it improves your delevopment speed cardinally.
</p>

<Header as='h4'>LESS loader</Header>
<p>
Semantic UI is powered by LESS, so we need it to enable its powerful theming. We also
enabled {' '}
<a href='https://github.com/css-modules/css-modules' rel='noopener noreferrer' target='_blank'>
enabled{' '}
<a
href='https://github.com/css-modules/css-modules'
rel='noopener noreferrer'
target='_blank'
>
CSS modules
</a>
{' '}for your components.
</a>{' '}
for your components.
</p>

<Header as='h4'>Bundle analyzer and direct imports</Header>
<p>
Semantic UI React is very powerful, but in most cases you do not need all its modules. In fact, unused
modules should be removed by{' '}
<a href='https://webpack.js.org/guides/tree-shaking/' rel='noopener noreferrer' target='_blank'>
Semantic UI React is very powerful, but in most cases you do not need all its modules.
In fact, unused modules should be removed by{' '}
<a
href='https://webpack.js.org/guides/tree-shaking/'
rel='noopener noreferrer'
target='_blank'
>
Tree Shaking
</a>
, but current situation does not allow to rely on it. Our users use direct import of SUIR components,
but we do not recommend to use this approach because paths to modules can be changed. We added{' '}
, but current situation does not allow to rely on it. Our users use direct import of
SUIR components, but we do not recommend to use this approach because paths to modules
can be changed. We added{' '}
<a
href='https://www.npmjs.com/package/babel-plugin-lodash'
rel='noopener noreferrer'
target='_blank'
>
babel-plugin-lodash
</a>
{' '}plugin that automatically transform your import to direct.
</a>{' '}
plugin that automatically transform your import to direct.
</p>
<p>We also added bundle analyzer, so you can always review the size of your bundles.</p>
</Grid.Column>
<Grid.Column computer={10} mobile={16}>
<Header as='h3'>Themed <code>Button</code></Header>
<Header as='h3'>
Themed <code>Button</code>
</Header>
<p>
Semantic UI React does not have own theming and fully relies on CSS part of Semantic UI. It is normal,
Semantic UI theming is very powerful, it allows you fully modify the look of your app using theming
variables.
Semantic UI React does not have own theming and fully relies on CSS part of Semantic UI.
It is normal, Semantic UI theming is very powerful, it allows you fully modify the look
of your app using theming variables.
</p>
<p>
We changed the <code>primary</code> color of <code>Button</code> component, it is really easy
<span aria-label='emoji' role='img'>😁</span> Take a look to{' '}
<code>/src/styling/theme/elements/button.variables</code>. By the way, the <code>theme</code> directory
structure fully matches the component structure of Semantic UI React.
We changed the <code>primary</code> color of <code>Button</code> component, it is really
easy
<span aria-label='emoji' role='img'>
😁
</span>{' '}
Take a look to <code>/src/styling/theme/elements/button.variables</code>. By the way,
the <code>theme</code> directory structure fully matches the component structure of
Semantic UI React.
</p>
<Button primary>Primary Button</Button>
<Button href='https://semantic-ui.com/usage/theming.html' rel='noopener noreferrer' target='_blank'>
<Button
href='https://semantic-ui.com/usage/theming.html'
rel='noopener noreferrer'
target='_blank'
>
Learn more
</Button>

<Header as='h3'>Custom themed component</Header>
<p>
In the real world you will always need custom components, and you will want to get them themed like your
app. An example is below:
In the real world you will always need custom components, and you will want to get them
themed like your app. An example is below:
</p>

<CustomMessage>Hey, it is a custom message</CustomMessage>

<p>
Take a look <code>/src/components/CustomMessage</code> directory. The are some important things:
Take a look <code>/src/components/CustomMessage</code> directory. The are some important
things:
</p>
<List bulleted>
<List.Item>
we premade <code>heading.less</code> for you, when you will include it in your LESS file you will able
to use your existing SUI variables!
we premade <code>heading.less</code> for you, when you will include it in your LESS
file you will able to use your existing SUI variables!
</List.Item>
<List.Item>
we enabled{' '}
<a href='https://github.com/css-modules/css-modules' rel='noopener noreferrer' target='_blank'>
<a
href='https://github.com/css-modules/css-modules'
rel='noopener noreferrer'
target='_blank'
>
CSS modules
</a>
{' '}for your components, it means that you will need to use <code>:global</code> when your style will
match SUI parts
</a>{' '}
for your components, it means that you will need to use <code>:global</code> when your
style will match SUI parts
</List.Item>
</List>

<Header as='h3'>P.S.</Header>
<p>This page is fully responsive <span aria-label='emoji' role='img'>😁</span></p>
<p>
This page is fully responsive{' '}
<span aria-label='emoji' role='img'>
😁
</span>
</p>
</Grid.Column>
</Grid>
</Segment>
Expand Down
5 changes: 4 additions & 1 deletion src/addons/MountNode/lib/handleClassNamesChange.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@ const prevClassNames = new Map()

const handleClassNamesChange = (node, components) => {
const currentClassNames = computeClassNames(components)
const [forAdd, forRemoval] = computeClassNamesDifference(prevClassNames.get(node), currentClassNames)
const [forAdd, forRemoval] = computeClassNamesDifference(
prevClassNames.get(node),
currentClassNames,
)

_.forEach(forAdd, className => node.classList.add(className))
_.forEach(forRemoval, className => node.classList.remove(className))
Expand Down
2 changes: 1 addition & 1 deletion src/elements/Input/Input.js
Original file line number Diff line number Diff line change
Expand Up @@ -230,8 +230,8 @@ class Input extends Component {
{actionPosition === 'left' && actionElement}
{labelPosition !== 'right' && labelElement}
{createHTMLInput(input || type, { defaultProps: htmlInputProps, autoGenerateKey: false })}
{actionPosition !== 'left' && actionElement}
{Icon.create(this.computeIcon(), { autoGenerateKey: false })}
{actionPosition !== 'left' && actionElement}
{labelPosition === 'right' && labelElement}
</ElementType>
)
Expand Down
Loading

0 comments on commit eae01ad

Please sign in to comment.